ECサイト構築・リニューアルならクラウド型ECサイト構築ASPサービスサイトへ
資料請求
TOP

CATEGORY

SERVICE

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

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

今月初旬に発売された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インチ 1024×600
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インチ 1024×600

▼スマートフォン

端末 画面サイズ 解像度(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の各サイズを意識してサイトをデザインし、ブレークポイントを決めれば、様々な端末からアクセスした場合でも、最適化されたサイズでサイトを表示させることが可能であると言えます。
参考記事(https://www.aiship.jp/knowhow/archives/3376

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

 

レスポンシブECサイトの問合せはこちら

                   
商品の販売に“夢中”になれる
クラウド型ECサイト構築ASP

ECサイト構築、リニューアルを2000社以上支援してきた知見から
ECの専門家として御社のEC事業成長をサポートします。

  • 導入実績2000社以上


    導入実績

  • 注文単価増加率114%

    導入1年後の
    注文単価
    増加率

  • 売上成長率128%

    導入1年後の
    売上成長率

  • EC支援歴20年


    EC支援歴

         

技術カテゴリの最新記事