【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

ニーズ急上昇中のレスポンシブウェブデザイン(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サイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+