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

2012年12月3日 13:52

※この記事は読者によって投稿されたユーザー投稿のため、編集部の見解や意向と異なる場合があります。
また、編集部はこの内容について正確性を保証できません。

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

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

▼7インチ型タブレット

端末	画面サイズ	解像度（px）
iPad mini	7.9インチ	1024×768
Nexus 7	7.0インチ	1280×800
KindleFire	7.0インチ	1024x600
GALAXY Tab	7.7インチ	1280×800

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

▼9インチ型タブレット

端末	画面サイズ	解像度（px）
iPad	9.7インチ	2048×1536
iPad 2	9.7インチ	1280×800
Xperia Tablet S	9.0インチ	1024x600

▼スマートフォン

端末	画面サイズ	解像度（px）
iPhone 5	4.0インチ	640×1136
iPhone 4（s）	3.5インチ	640×960
Galaxy Nexus	4.7インチ	720×1280
Galaxy S Ⅱ	4.3インチ	560×960
Galaxy S	4.0インチ	480×800
Xperia	4.2インチ	480×854

これだけ見ても、ディスプレイ解像度は様々であり、今後、さらなる多様化が進めば、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
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

この記事のキーワード：