近年、消費者の検索や発信を促すことを軸に据えたコンテンツ・マーケティングの重要性が認識されつつある。そうしたコンテンツ・マーケティングにおいても、消費者が情報を発見し手に入れるプラットフォームであるWebサイトの機能・デザインの重要性は非常に高いと言える。

そうしたWebサイトの設計に際しての最適解となるかもしれないのが「レスポンシブWebデザイン」である。 今回は〈レスポンシブWebデザイン前編〉として、まずはその概念とそのメリット・デメリットを分かりやすくご説明できればと思う。

今注目の「レスポンシブwebデザイン」とは？

さて、この「レスポンシブWebデザイン」という言葉だが、耳馴染みがないという方もいるかもしれない。

しかし、日頃から多くのWebサイトをブラウジングしている私たちにしてみれば、それほど難しい概念ではない。

「レスポンシブ（＝responsive）」という単語は「すぐ反応する、敏感な」という意味で、つまりは、PCやタブレット、スマートフォンなどブラウジングを行っている端末のディスプレイサイズに従って、最適化された表示がなされるWebサイトのことである。

（分かりづらかったという方は、現在お使いの端末に加えて別の種類の端末を使って、試しにイギリス版WIREDのサイトを、訪れてみてしい。このサイトは「レスポンシブWebデザイン」を採用しているので、いずれの端末でも、同じデザインのWebサイトが各端末に最適化されて表示されるはずだ。）

「レスポンシブwebデザイン」のメリット

では、モバイル、PC、またはその間に位置する端末すべてに対応する単一のWebサイトを設計するこの「リスポンシブWebデザイン」を採用するメリットはなんだろうか。

簡潔にいうならば、消費者とプロモーター、双方の視点からそれぞれ以下のようなメリットを挙げることができる。

消費者視点

→シンプルで迅速なブラウジングが可能になる。

プロモーター視点

→Webサイトの創設時やアップデートの際に、複数の端末に合わせた複数のバージョンのサイトを作成せずに済み、コストダウンにつながる。

そのWebサイトに訪れるユーザーの快適なWeb体験というものがまず第一義であるのは間違いない。

例えば、これまでスマートフォンやタブレットでPCサイトにアクセスした際に、モバイル版が存在せず非常に文字が小さく読みづらかったり、拡大の必要があったりしてイライラした覚えがある方は多いのではないだろうか。

大したことではないと思うかもしれないが、こうした細かな点のブラッシュアップがユーザーにサイトへ再訪してもらう鍵となるのだ。

また、e-コマースのサイトは、モバイル版のデザインがひどく使いづらいものが多く、スマートフォンやタブレットで買い物をすることも一般的になってきた現在、この「リスポンシブWebデザイン」はe-コマースを含んだサイトで絶大な効果を発揮するとも言われている。

そして、プロモーター視点からも単一のサイトで全てをまかなうことのメリットは言わずもがなだろう。

さて、そんな「レスポンシブWebデザイン」にも潜在的なデメリットが存在すると指摘する識者もいる。次に、現状生じうる「レスポンシブWebデザイン」のデメリットを挙げてみよう。

「レスポンシブwebデザイン」で生じうるデメリット

1）サイト上でのユーザー体験に対する、一貫した戦略や理解が必要になる

この点は、「レスポンシブWebデザイン」それ自体にデメリットがあるというわけではなく、上記のような前提の上でリスポンシブなサイトを作成しないと、逆効果になりかねないという指摘である。この点の解決方法については、次回後編で触れる予定だ。

2）モバイル優先のサイト設計の必要、その逆は成立しない

まずもって、モバイル端末で快適なブラウジングが可能なサイト設計であれば、PC画面に最適化することはそう難しくないという、こちらもリスポンシブなデザインそれ自体のデメリットというよりは、留意点である。

３）その作成の難易度が高い

こちらは、現実問題としてのデメリットである。「レスポンシブWebデザイン」はまだ未成熟の分野であり、レスポンシブなWebサイトを作成するためのツールキット等の開発が進んでいないため、現状その作成が高度な専門技術となってしまっているのだ。

次回後編　～「レスポンシブWebデザイン」を用いる際のコツ～

さて、「レスポンシブWebデザイン」がどういったものか、少しはご理解いただけただろうか。ユーザーに快適なブラウジングを提供できる可能性も高い方法だが、中にはそうしたブラウジング体験を好まないユーザーもいたり、一貫したサイトにおけるユーザー体験の戦略無しに作成しても逆効果となってしまうという点があった。

次回後編では、今回触れたメリットやデメリットを踏まえて、実際に「レスポンシブWebデザイン」の概念に基づいてWebサイトを設計もしくは改修する際のコツをご紹介するつもりなので、次回更新をお待ちいただければと思う。

参考元： ・What is responsive design and do you really need it?, Econsultancy ・10 more examples of brands that have adopted responsive design, Econsultancy Photo：Some rights reserved by infocux technologies , flickr