レスポンシブウェブデザインに対応させたサイトとは、単にワンソースで、PC・スマホ・タブレット端末に応じたサイトを構築すれば良いだけと思っていてはいけません。

各デバイスでサイトを表示させたときに、

・伝えたい情報をファーストビューで伝えられているかどうか、
・TOPページだけでなく、下層ページに遷移したときも、きちんとページの見せ方を意識したレイアウトを構築できているかどうか、
・ユーザーインターフェイスが崩れていないか、

などを考慮して設計する必要があります。

上記のイメージのように、特にHEADERの下部にMENUが並ぶタイプのサイトレイアウトの場合は、画面の大きいPC表示では気にならなかったファーストビューが、画面の小さなスマートフォン表示の場合、画面の大半をHEADERとMENUで占めることになり、肝心のコンテンツを表示させるためには、ページを移動するごとにスクロールの手間が発生します。

従来、PCサイト用として設計されていたサイトを、CSS3 Media Queriesを使ってブレイクポイントを決めたり、変換ツール等使って単にコンテンツを折り返し表示させただけでは、このような状態に陥りかねません。（※ブレイクポイントについての解説はこちら）

特に情報量が多いサイトでは、ワンソースマルチデバイスでのサイト表示を目的とした設計を行う必要があります。

■IMJ GROUP
http://www.imjp.co.jp/
PC表示では右一列に配置されていたグローバルメニューがスマートフォン表示時は、メニューが格納されています。Facebookで馴染みのあるデザインですが、慣れていなければメニューの位置を探してしまうかもしれません。メニューの数が比較的少ないこともあり、メニューを展開させることでサイト全体をスライドさせています。

■SONY The Headphones Park スペシャルコンテンツ
http://www.sony.jp/headphone/special/park/
PC表示では横一列に配置されていたグローバルメニューが、スマートフォン表示においては、スペースが多く必要なグローバルメニューを格納し、ユーザーの意思によりメニューの表示/非表示を操作させています。

メニュー展開時の１つ１つのボタンが大きく、タップしやすいサイズに設計されているのもレスポンシブウェブデザインを設計する上で重要なUIです。
■starbucks.com/
http://www.starbucks.com/
メニューの配置だけでなく、ソーシャルボタンの位置など、些細な部分においても設計されているサイトです。

画像についても単に縮小（リサイズ）させるだけでなく、レイアウトもきちんと設計されています。TOPページのレイアウトについては、各コンテンツページへのスムーズな動線を確保できています。また、各ページに遷移した際に、ファーストビューで目に入ってくる情報がきちんとコンテンツの内容が表示されており、スクロールしなくても、どのページが表示されているのかが、はっきりと分かる構造となっております。

レスポンシブウェブデザインの各事例について、実際にブラウザでご確認頂けましたでしょうか。

レスポンシブウェブデザインでは、各デバイスにあわせたUIの設計だけでなく、各デバイスに応じてコンテンツやテキスト情報を非表示にすることもできます。うまく非表示領域のコンテンツを構成することで、各デバイスに合わせて最適な見せ方を表現することができます。

特に既存サイトをレスポンシブウェブデザインに変更する際は、単にブレイクポイントを決定させるだけでなく、PC表示時には画面の大きさを活かして、より多くのコンテンツを表示させ、スマートフォン表示時は、サイトの目的に応じて最低限必要な情報を見せることでユーザビリティを向上させることが、今後より重要になってきます。

（スマートフォンショッピングカートASP『aiship（アイシップ）』 葉糸）