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

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

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

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

コンテンツの共通化で効率的なレスポンシブウェブデザイン構築を実現

コンテンツの共通化で効率的なレスポンシブウェブデザイン構築を実現

今回の記事はこれまでの事例とは少し違う角度でお話をさせていただきます。これまではECサイトの事例について色々お話してきましたが、今回は「レスポンシブウェブデザイン」の構築について言及したいと思います。

はじめに

このサイトでも何度か耳にしているレスポンシブウェブデザインについて、少しおさらいも兼ねてお話しします。

既にECサイトを含むWebサイトは、スマートフォン・タブレットなどのモバイル端末やPCなどのデスクトップ端末のみならず様々なデバイスで表示されています。その様々な端末によって可変し、最適に表示されるのがレスポンシブウェブデザインです。これは言い換えると、ブラウザの横幅などサイズに応じてレイアウトが調整されるということです。

ここで注意したいのは、各デバイスやブラウザのサイズによってコンテンツが変化するということではありません。サイズによってコンテンツが変化してしまってはサイトに訪れたユーザーを混乱させ、ユーザーの目的が達成されないWebサイトとなってしまいます。

これらのことから各デバイスやブラウザサイズにも対応したデザインが必要とされ、「ブロックに分けたコンテンツおよびデザインやレイアウト」「各デバイスに共通化された素材」などが重要となります。これはWeb制作者様やEC事業者様のマネージメントに関わる重要なことでもあります。

スタジオパークのレスポンシブ事例

では、事例のサイトを見てみましょう。
NHKスタジオパーク

色々なブラウザサイズ(デバイス)によって可変しているのが見て取れると思います。ですが、コンテンツは変わっていません。配置(レイアウト)を変えることによって対応させているのが分かります。

コンテンツを共通化し、デバイスサイズによって配置を最適化することで、コンテンツを変えるよりも効率的なレスポンシブサイトの構築を実現することができます。

studiopark01
まずは一般的な3カラムのレイアウト。紫で囲った枠と、緑で囲った枠にご注目下さい。

studiopark02
少しブラウザサイズを狭めるとサイドバーにあったコンテンツが横になり、メインコンテンツの下に移動します。

studiopark03
さらに狭めるとサイドバーが下に落ちました。

studiopark04
続けて狭めていくと、紫のコンテンツが縦になり、緑のコンテンツと横並びになりました。

studiopark05
最終的にスマートフォンサイズまで狭めたところです。

コンテンツがブロックごとに配置され、様々なブラウザサイズやデバイスによって配置を変えていますが、コンテンツの中身は基本的に変わっていません。

ちなみに・・・

普通のレスポンシブデザインのサイトと違って、コンテンツの動きがアニメーションのようにスムーズになっていませんか?

調べたところ、jQuery MasonryというjQueryプラグインが使われているようでした。
http://masonry.desandro.com/
jQuery Masonry

スタジオパークの他にもアマナグループさんのサイトでもこのjQuery Masonryが使われています。Pinterestのように、コンテンツごとに見やすくすっきりとしてレイアウトを実現することができますね。

まとめ

いかがでしたでしょうか。レスポンシブウェブデザインだからといって、単にそれぞれのデバイスやブラウザサイズによって構築していてもサイトに訪れる閲覧者によってコンテンツを削ったり変化させてはユーザーのためとはいいがたいです。
また運営者にとってもそれぞれに対応した構築をしていると大変な手間になります。

様々なデバイスやブラウザサイズが多様化されるなかでレスポンシブウェブデザインはますます必要とされますが、その際には「ブロックに分けたコンテンツおよびデザインやレイアウト」「各デバイスに共通化された素材」を意識した構築を行ってください。

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
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+