TAテーマ001特徴(レスポンシブデザイン)

TAテーマ001特徴(レスポンシブデザイン)

レスポンシブデザインを使うとスマートフォンへの対応が簡単にできます。『TAテーマ001』はレスポンシブデザインに対応するだけでなく高度なカスタマイズも可能です。

レスポンシブデザイン

respon_1

左図はPCでの表示です。レスポンシブデザインは表示されている画面(PCの場合はブラウザの横幅)によってデザインを変えるという技術です。

以前は閲覧している端末の種類を検出して行っていましたが、最近では機種に関わらず対応が可能なレスポンシブデザインを用いてスマホ対策を行うことが主流です。

表示する画面が小さくなると様々な問題が出てきます。先ずは横に展開しているコンテンツをどうするかです。例えばPCでは当たり前のサイドバーなどです。また、グローバルメニューもスマホでは対応が難しいパーツです。これらのデザインを自動的にスマホに適応させる技術がレスポンシブデザインとも言えます。

respon_2

左図はブラウザの画枠を狭くして擬似的にスマホ画面を実現した例です。

グローバルメニューはスマホ用に再デザインされます。(メニュー項目が少ない場合などはPCと同じデザインを採用することも可能です)

またサイドバーやサブサイドバーはメインコンテンツの下に回り込みます。(削除することも可能です)

『TAテーマ001』のレスポンシブデザインは、パーツ毎に非表示にしたり、再デザイン(センタリングや位置調整など)したりすることができます。

部位ごとの詳細設定

respon_setting

左図はサイドバーのレスポンシブデザイン設定画面の一部です。

基本パーツの表示、テキストのサイズ変更など様々な変更が可能です。

各部位ごとに詳細設定ができますのでレスポンシブ時だけのデザインが自由にできます。

※ 一部高機能追加プラグイン『ハイエンド』限定の機能があります。

アディショナルモード

スマートフォン用のサイトによくあるドロップダウンメニューをご存知でしょうか?

add_exp1

上図の様に開閉ボタンをタッチするとメニューがドロップダウンします。

一般的にはドロップダウンメニューと呼ばれているスタイリッシュな機能です。

 

もちろん、TAテーマ001のレスポンシブWebデザイン(スマホなどのモバイルデザイン)にもこの機能は準備されています。

TAテーマ001ではドロップダウンメニューを更に拡張してサイドバーやサブサイドバーをドロップダウンします。

通常レスポンシブWebデザインの際に、サイドバーやサブサイドバーはメインコンテンツの後ろに追いやられることが多いです。

しかし、サイドバーやサブサイドバーをドロップダウンで別枠のコンテンツとして扱うことによって、メインコンテンツと同じように目立たせることができます。

TAテーマ001ではこのドロップダウン機能を別のコンテンツ枠という意味合いで『アディショナルモード』と称しています。

 

TAテーマ001の『アディショナルモード』は自由度が高く、開閉ボタンデザインの選択や開閉ボタンとドロップダウン開始端間の吹き出しの有無の選択などの詳細設定ができます。

詳しくは『TAテーマ001』の取扱い説明 R共通設定(アディショナルモード)をご覧ください。

 

TAテーマ001の『アディショナルモード』の更なる特徴は未使用のサイドバー(またはサブサイドバー)を表示できることです。

例えば、パソコン版のホームページのサイドバーはメニュー無しの通常のコンテンツを表示してサブサイドバーは非表示(未使用)という一般的なスタイルがあるとします。

そして、レスポンシブWebデザインの時にのみドロップダウン表示の上部にメニューなどのパソコン版には無いコンテンツを表示したいとします。

さて、どの様に実現したら良いでしょうか?

TAテーマ001の『アディショナルモード』は未使用のサブサイドバーをレスポンシブWebデザインの時にのみ表示させることができますから、上記の要求に容易に対応できます。

実例で説明します。

add_exp2

上図は本サイト(TAテーマ001の公式サイト)のパソコン版の表示です。

メインとサイドバーのフレーム構成でサブサイドバーは未使用です。

更にヘッダー画像の下にグローバルメニューが存在するため、サイドバー上にはメニューコンテンツは配置していません。

下図はレスポンシブWebデザイン時の表示です。

パソコン版では未使用のサブサイドバーにメニューを配置してレスポンシブWebデザインの時にのみ表示させています。

ドロップダウン画面のメニュー(サブサイドバーのコンテンツ)の下からサイドバーのコンテンツが始まっていることがお分かりいただけるでしょうか。

add_exp3

 

このようにTAテーマ001の『アディショナルモード』はかゆいところに手が届く的な配慮がたくさん施されています。

是非、この高い自由度の機能を組み合わせて先進的で魅力的な表示デザインを制作していただけたらと思います。

 

※ 『アディショナルモード』は高機能追加プラグイン『ハイエンド』限定の機能です。

Viewport設定

TAテーマ001はレスポンシブデザイン時のViewport宣言の設定ができます。

Viewport宣言とは、モバイルなどのように狭いディスプレイ画面を持つ端末で効果的なサイト表示を行うためのものです。

メタデータという隠しコマンドの領域に宣言します。

ディスプレイの縦や横の幅や拡大縮小の倍率の指定、拡大縮小の許可ができ(ることになってい)ます。

 

多様なモバイル端末に意図した表示をさせることができるので、便利な規格です。

しかし、現状では端末のOSによって解釈が異なるためすべての意図が伝わるとは限りません。

Viewportを設定してもAndroid端末とiPhone端末で、更にはOSのバージョンで見え方が統一されていません。(現時点ではAndroid端末の準拠率が高いようです)

 

規格の浸透には時間がかかるので将来は解釈が統一されるはずです。(HTML、CSS、JavaScriptもブラウザによる解釈違いが少なくなってきています)

現状では、お手持ちのモバイル端末で表示の様子確認を行って、『まあ、このようにならない端末もあるよね』と軽く踏まえることが精神的に良いようです。

 

TAテーマ001では規格通りの設定が可能ですから、将来の解釈統一に備えて、あなたのサイトの『あるべき』レスポンシブデザイン表示方法を宣言してください。(特にこだわりがなければ、TAテーマ001のデフォルト設定でOKだと思います)

可能な限りの自動化を・・・

『TAテーマ001』の設定の中でレスポンシブデザインの項目が最も多いです。それも当たり前でして、PC版で作り上げたデザインをまた再デザインするわけですから。

そこで、『TAテーマ001』では、なるべく自動化(最大公約数的な処理もありますが)で対応して、不満がある所だけ手を加えるという感覚を目指しています。

まだ理想半ばですが、作り手の感覚としては現状は70%程度の実現率でしょうか。それでも世の中のレスポンシブデザインよりは遥に自動化が進んでいると思います。皆様が実践している”成長するホームページ”よろしく”成長するテーマ”でもあるわけです。

  • LINEで送る


ta_thm001_downloadta_designing