記事の内容やaishipシリーズに関するお問い合わせはこちらから

0120-173-163 お電話

[電話受付時間]平日9:30〜19:00

TOP

CATEGORY

SERVICE

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

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

今回の記事はこれまでの事例とは少し違う角度でお話をさせていただきます。これまでは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のサイト構築はaishipR-カスタマイズ可能なASP実績No.1

累計2000社以上の導入の総合通販型カートシステムで、カスタマイズ性が高く、デザインの自由度はもちろん、各種システムとの連携や機能追加等も独自のカスタマイズができるため、こだわりのある本格的な通販を月額9,800円から実現できます。 またモバイルファースト設計や月2回の無償バージョンアップなどの特徴があり、使いやすさと最新性を追求した通販サイトを構築できます。 さらに信頼性の高いサーバーを採用しており大規模アクセスにも対応できるため、これからさらに通販での売上を伸ばされたい事業者様におすすめです。
         

スマートフォンカテゴリの最新記事