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

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

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

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

▼7インチ型タブレット

端末画面サイズ解像度(px)
iPad mini7.9インチ1024×768
Nexus 77.0インチ1280×800
KindleFire7.0インチ1024x600
GALAXY Tab7.7インチ1280×800

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

▼9インチ型タブレット

端末画面サイズ解像度(px)
iPad9.7インチ2048×1536
iPad 29.7インチ1280×800
Xperia Tablet S9.0インチ1024x600

▼スマートフォン

端末画面サイズ解像度(px)
iPhone 54.0インチ640×1136
iPhone 4(s)3.5インチ640×960
Galaxy Nexus4.7インチ720×1280
Galaxy S Ⅱ4.3インチ560×960
Galaxy S4.0インチ480×800
Xperia4.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
=============================

この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

インデックス
検索エンジンがWebページをデータベースに保存しているデータベース。データベース ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]