以前、〈「レスポンシブWebデザイン」前編〉快適なユーザー体験を導く「レスポンシブWebデザイン」とは？という記事で、「レスポンシブWebデザイン」を簡単にご説明させていただいた。

まとめると、ブラウジングする端末に従ってその表示が最適化されるこの「レスポンシブWebデザイン」は、消費者にとってもプロモーターにとってもメリットがあり、Webサイトの設計における最適解となるポテンシャルを持っている。

しかし、「レスポンシブWebデザイン」を活用したサイト設計には、サイト上でのユーザー体験への一貫した戦略が必要になり、またその設計の技術的ハードルも未だ高いというような問題が指摘されているということだった。

今回の後編では、そうした前編の内容を踏まえ、実際のサイト設計段階において大切にしたい考え方とそれを具体化するためのヒントをご紹介しようと思う。

いかにユーザーに役に立つサイトであるか

消費者の検索や発信を促すことを軸に据えたコンテンツ・マーケティング（＝インバウンド・マーケティング）を実行していくにあたっては、「我々がいかにあなた（＝消費者）の役に立てるのか」ということを示せるかどうかが大切になってくる。

この考え方に基づけば、webサイトの設計においても、「このサイトがいかにあなたの役に立つか」を示せるかどうかが重要となってくると言える。

では、「役に立つ」とはどういうことだろうか。それは、ユーザーがWebサイトを訪れたときに持っている欲求を満たすということだ。

LyntonWebに掲載されているJason Kosarekによる“Designing a Website Built for Leads”という記事にその欲求が３つ（＋１つ）の質問の形で簡潔にまとめられているので、それを引用してご説明しよう。

１．あなたの会社の製品やサービスはどのようなものか

これはまず第一に重要になってくることだが、自社の製品やサービスがどのようなものなのかを、ユーザーがWebサイトに辿り着いてすぐの段階ではっきりと認識できるようにしておかなければならない。

２．このサイトで何ができるのか

このサイトでユーザーには何ができるのか、それはブログのエントリーを読むことや企業キャラクターの画像をダウンロードすること、はたまた商品を購入することなど多岐に渡る。webサイトで重要なのは、それらの目的をユーザーにすぐさま分かるように示すことである。

３．なぜこのサイトでそれをすべきなのか

同業他社のサイトではなく、なぜこのサイトでなければ消費者が解決したいと思っている問題を解決することができないのかを示す必要がある。これを訴求したコンテンツをwebサイトに入れなければ、ユーザーはそのサイトで商品の購入などアクションを起こす決断には至ってくれないのである。

４．いかに早く目的を達成できるか

モバイル端末でのブラウジングを想定した際には更にもう１つユーザーの欲求が加わるとJason Kosarekは指摘しているが、それはこのポイントである。

もちろん、デスクトップPCでブラウジングしている際にもユーザーは早さを求めていることだろう。

しかし、モバイル端末はPCやその間にある端末に比して、「ダウンロードに時間がかかる」「TVを観たり移動中だったりマルチタスクになりやすい」「画面が小さくなる」という特性があるため、この「より早く」という欲求は他端末以上に満たす必要があると言える。

このように、ユーザーがWebサイトにやってきた際に抱く３つの欲求に答える設計・デザインをとることで、ユーザーにとって「役に立つ」Webサイトに近づけることが可能となるだろう。

また、４つ目として欲求を満たすことも、「レスポンシブWebデザイン」としての完成度を考えたときには必須となってくるだろう。

「レスポンシブWebデザイン」を実現するための３つの具体的なアドバイス

さて、ここまではいささか抽象的な方針のレベルに留まるものだった。

というわけで、最後に、この考え方の下で実際に「レスポンシブWebデザイン」の設計・デザインに移る際に有効な技術的アドバイスを最後にご紹介したい。こちらも、先述のJason Kosarekによるものだ。

１．簡潔で分かりやすいコンテンツであること

文字を使ったコンテンツにおいては、業界用語を多用したり、要点になかなか辿り着かなかったり、不要な文字数を割いたりしないように気をつけよう。

内容面においても、ビジュアルの面においても、画像や動画のサイズは極力小さくし、引き締まったデザインにしよう。

２．価値のあるコンテンツや情報はトップに置くこと

多くの利用が見込めるコンテンツや利用して欲しいコンテンツを、ユーザーがサイト内で探し回らずに済むように配置しよう。

３．より快適なユーザーインターフェースであること

押しづらいボタン、それからポップアップリンクで余計なタブやウィンドウを開くことなどがないようにしよう。

まとめ

いかがだっただろうか。

誰でも簡単に「レスポンシブWebデザイン」に基づいたWebサイトを設計できるようになるには、ツールキットの開発を待たなければならず、現状では専門のエンジニアにある程度任せる必要がある。

しかし、前編・後編を通して紹介した一連の「レスポンシブWebデザイン」に関する知識やWebサイト設計における基本的な考え方を、自社サイトへの「レスポンシブWebデザイン」の採用の検討、もしくは実際の設計のプランニングに役立てていたただければ幸いである。

参考元： ・Desktop & Mobile: One Content Strategy to Rule Them All, Hubspot ・Designing a Website Built for Leads, LyntonWeb Photo：Some rights reserved by Screenmedia, flickr