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

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

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

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

レスポンシブウェブデザイン対応サイト事例から学ぶ、UI設計の重要性

  • 2012.10.10
  • 2012.10.12
  • 技術
レスポンシブウェブデザイン対応サイト事例から学ぶ、UI設計の重要性

レスポンシブウェブデザインに対応させたサイトとは、単にワンソースで、PC・スマホ・タブレット端末に応じたサイトを構築すれば良いだけと思っていてはいけません。

各デバイスでサイトを表示させたときに、

・伝えたい情報をファーストビューで伝えられているかどうか、
・TOPページだけでなく、下層ページに遷移したときも、きちんとページの見せ方を意識したレイアウトを構築できているかどうか、
・ユーザーインターフェイスが崩れていないか、

などを考慮して設計する必要があります。

上記のイメージのように、特にHEADERの下部にMENUが並ぶタイプのサイトレイアウトの場合は、画面の大きいPC表示では気にならなかったファーストビューが、画面の小さなスマートフォン表示の場合、画面の大半をHEADERとMENUで占めることになり、肝心のコンテンツを表示させるためには、ページを移動するごとにスクロールの手間が発生します。

従来、PCサイト用として設計されていたサイトを、CSS3 Media Queriesを使ってブレイクポイントを決めたり、変換ツール等使って単にコンテンツを折り返し表示させただけでは、このような状態に陥りかねません。(※ブレイクポイントについての解説はこちら

特に情報量が多いサイトでは、ワンソースマルチデバイスでのサイト表示を目的とした設計を行う必要があります。

レスポンシブウェブデザイン 事例に学ぶUIの設計


■IMJ GROUP
http://www.imjp.co.jp/
PC表示では右一列に配置されていたグローバルメニューがスマートフォン表示時は、メニューが格納されています。Facebookで馴染みのあるデザインですが、慣れていなければメニューの位置を探してしまうかもしれません。メニューの数が比較的少ないこともあり、メニューを展開させることでサイト全体をスライドさせています。

■SONY The Headphones Park スペシャルコンテンツ
http://www.sony.jp/headphone/special/park/
PC表示では横一列に配置されていたグローバルメニューが、スマートフォン表示においては、スペースが多く必要なグローバルメニューを格納し、ユーザーの意思によりメニューの表示/非表示を操作させています。

メニュー展開時の1つ1つのボタンが大きく、タップしやすいサイズに設計されているのもレスポンシブウェブデザインを設計する上で重要なUIです。
■starbucks.com/
http://www.starbucks.com/
メニューの配置だけでなく、ソーシャルボタンの位置など、些細な部分においても設計されているサイトです。

画像についても単に縮小(リサイズ)させるだけでなく、レイアウトもきちんと設計されています。TOPページのレイアウトについては、各コンテンツページへのスムーズな動線を確保できています。また、各ページに遷移した際に、ファーストビューで目に入ってくる情報がきちんとコンテンツの内容が表示されており、スクロールしなくても、どのページが表示されているのかが、はっきりと分かる構造となっております。

まとめ

レスポンシブウェブデザインの各事例について、実際にブラウザでご確認頂けましたでしょうか。

レスポンシブウェブデザインでは、各デバイスにあわせたUIの設計だけでなく、各デバイスに応じてコンテンツやテキスト情報を非表示にすることもできます。うまく非表示領域のコンテンツを構成することで、各デバイスに合わせて最適な見せ方を表現することができます。

特に既存サイトをレスポンシブウェブデザインに変更する際は、単にブレイクポイントを決定させるだけでなく、PC表示時には画面の大きさを活かして、より多くのコンテンツを表示させ、スマートフォン表示時は、サイトの目的に応じて最低限必要な情報を見せることでユーザビリティを向上させることが、今後より重要になってきます。

(スマートフォンショッピングカートASP『aiship(アイシップ)』 葉糸)

”スマホで売れる”ためには必須の「レスポンシブ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
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+