レスポンシブwebデザインと3カラムの表示調整

pak88_denwadaboo15155554_tp_v

Web制作現場では、これまで常にPCをメインとした閲覧者を前提に、フィーチャーフォン専用サイトを作ってきました。これからさらにタブレットやスマートフォンのなどの新たなデバイスが登場したことで、閲覧する端末ごとの個別ページを作って対応することが難しい状況が出てきています。
これによって、環境が違うそれぞれに対応することができるマルチデバイス・マルチブラウザが望まれるようになって来ています。

○レスポンシブwebデザインの導入

tsu_syuccyousakideiphone7_tp_v
ひとつのHTMLコードやCSS記述だけで、スマートフォンやタブレット等の画面サイズにフィックスしたコンテンツを、最適なレイアウトで表示させることを、「レスポンシブwebデザイン」と呼んでいます。レスポンシブwebデザインではCSS3のメディアクエリを使用しているのが大きな特徴で、動作環境を問わずに導入することができるうえに、ファイル数が圧倒的に少なくなるため、運用する上ではもちろんのこと、更新の手間が少なく効率的です。

○スマートフォン対応の重要性

hw20160708082316_tp_v
現在は、モバイルフレンドリー対応のサイトに対する評価をGoogleが公開したことで、一層モバイルデバイスにおける検索エンジンの評価が厳しくなっていきます。
モバイルのトラフィックを求めていくことを考えれば、スマホ対応のサイト制作は必須となりますが、レスポンシブwebデザインを導入する際には、サイト全体の設計時点で織り込まなければならないため、部分的な導入にはこれまでどおりの対応を迫られる事になります。
レスポンシブwebデザインを導入してサイト全体のリニューアルを行うか、それぞれ個別の対応を継続していくか、いずれの方法がサイトに向いているかを制作側で判断しなければならない場面が出てくるでしょう。

○3カラム表示のサイトをフィーチャーしたい場合

kawamura20160818403614_tp_v
トップページのメイン画像フィールド以下に、webサイトを分割して、縦枠を区切り整列させる表示形式をカラムと言いますが、商品やブログの掲載・更新情報・カレンダーやメニュー、の三分割(3カラム)表示がよくつかわれています。
PC画面上では2分割だと間延びし、4分割では手狭で各アイテムが小さくなってしまうので、やはりデスクトップ表示では3カラムがベストだというシーンが多いため、一般的には3カラムを採用するwebサイトが多いでしょう。
●マルチデバイスで3カラムを導入
スマートフォンやタブレットなどのデバイスでは、コンテンツひとつの情報量は縦スクロール表示を前提とします。しかし、どの画面サイズでも表示を隠したくない、アイテムの扱いは平等にしたい、などの条件がある場合は、無理に1カラム表示にするのは難点が多くなります。
その場合は、全ての画面サイズにおいて3カラムを導入するほうが得策でしょう。
●マルチデバイスの3カラム表示注意点
スマートフォンや小さめのタブレットで縦3カラム表示を閲覧するのが難しい条件もあります。
例えば、画像が小さくなると詳細が見えづらいとき、またテキストコンテンツが多いとき、画像の上に文字を配置する時などです。
このような時は、3カラムを更に2・1に上下に分割して表示に返す方法もあります。ただ、上段にくるアイテムに視点が集まりやすく、全体が表示される時には大きいカラムに注意を引きますので、全体が均等なバランスになりづらい印象もあります。
また、2カラムで左右の片方を上下段組みして3カラム表示をする方法もあります。

○まとめ

既存PCサイトでは広く使われている3カラムをマルチデバイスでレスポンシブ表記するには、全体の構成バランスや画像、コンテンツのボリュームや重要度に配慮して、同等の扱いに見せる難しさがあります。コンテンツバランスの均衡とレイアウトに配慮して、上手に段組みするのがポイントです。

お問い合わせ

CONTACT
Copyright 2017 IMGINOTE INC.