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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

aiship　昆