ニーズ急上昇中のレスポンシブウェブデザイン（RWD）。 多様化するスマートフォン、タブレット端末にマルチ対応させるポイント

今月初旬に発売されたiPad mini。7.9インチタブレットは、耳にあてて電話するには、少々無理がありそうなサイズですが、従来のiPad（9.7インチ）よりも一回り小さくなり、持ち運びしやすくなりました。

iPad miniの他にも今秋、7インチ型のタブレット端末は相次いで発売され、タブレット市場は盛り上がりを見せております。ひとくくりに7インチ型ディスプレイとまとめても、サイトを制作する上で考慮しなければいけないディスプレイ解像度はそれぞれで異なっています。

▼7インチ型タブレット

加えて、当然のことながら、既存の9インチ型タブレットや、スマートフォンも考慮しなければなりません。

▼9インチ型タブレット

▼スマートフォン

これだけ見ても、ディスプレイ解像度は様々であり、今後、さらなる多様化が進めば、Webサイト製作者はますます頭を悩ませていくことが予想されます。

まず、自サイトにどのデバイスでアクセスしている人が多いかを確認

サイトコンセプトや商材により、利用デバイスの傾向が異なる為、まずは現在、どのような端末からアクセスが多いのか、Googleアナリティクスのレポートで、自サイトにどのデバイスでアクセスしている人が多いかを確認してみましょう。

Googleアナリティクス管理画面、ユーザー＞モバイルのメニューよりデバイスのレポートを表示させ、さらにセカンダリディメンションで、ユーザーの環境＞画面の解像度を選択すると、以下のようなレポートが表示されます。

画像を見る

ブレークポイントを決めてCSS3 Media Queriesを使用してみよう！

弊社が管理しておりますサイトにおける上記例を参考に挙げますと、
320px、720px、768px、1080pxの各サイズを意識してサイトをデザインし、ブレークポイントを決めれば、様々な端末からアクセスした場合でも、最適化されたサイズでサイトを表示させることが可能であると言えます。
参考記事（http://www.aiship.jp/knowhow/archives/3376）

これらに加え、今後アクセスの増加が予想される7インチ型タブレットに対応させるべく、試行錯誤していくことが必要であり、試行錯誤していける環境を整えておくために、レスポンシブウェブデザイン（RWD）サイトを構築しておく必要が重要であります。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
掲載元のブログではわかりやすい画像つきで公開しています。
■aishipスマートフォン＆モバイルEC事例・ノウハウ集
http://www.aiship.jp/knowhow/archives/5049
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝