レスポンシブWebデザインとは何か

スマートフォン普及によりこれまでとWebサイト制作のトレンドが変化している。レスポンシブWebデザインという言葉を聞く機会も出てきたのではないだろうか。

スマートフォンのWebブラウジングは基本的にPC向けブラウザと同等の挙動であり、スマートフォンからWebサイトを見ることはPC向けサイトを見ていることと変わらない。
スマートフォンに最適化しているというのは（単なる見た目の問題であれば）、そのスマートフォンの画面に適した文字の大きさやレイアウトで見えるように調整しているということで、そのためにWebサイトによって見た目がバラバラになる。ヤフー！トピックスなどをスマートフォンで見ていて関連リンクを辿ったらいきなりPC向けWebサイトを縮小して見ることになる、というのはそのためだ。
ブラウザによってHTML5+CSS3対応は異なるが、スマートフォン向けのWebサイトを別途用意するのではなく、スマートフォンから閲覧したときに最適化した見え方でサービス提供するという考え方がトレンドとなった。
その動きでレスポンシブWebデザインという言葉が出てきた。基本的にはブラウザの表示幅の違いをサイト側で対応して表示順序や大きさを調整するものだ。メディアクエリによってCSSを場合わけしている。

http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
このサイトは有名な例だが、実際にブラウザの幅を変えて試してみていただきたい。PCで見ているような画面の大きさであれば気づかない工夫が随所にある。









ウインドウ幅を小さくしていくと、画像があわせて縮小したり、2ペインが1ペインに変化したりする。だんだんと必要最低限の表現になっていき、タイトル画像が消えたりする。一番幅が狭い状態がスマートフォンでの見え方と同じになる。

先ほど「単なる見た目の問題であれば」と書いたのは、モバイルファースト的な、まずスマートフォンに対応しようというプチリニューアルであれば単にCSSの調整だけである。このレスポンシブWebデザインの重要なところは、Webサイトの機能を見直す機会になっていることだ。スマートフォンでアクセスするということは、どういうシーンなのか？どういうコンテンツが最低限として必要なのか？という絞込みから始まる。3G回線などでアクセスしたユーザに重いクリエイティブは必要なのだろうかということを考える。
そうすると、スマートフォン向けに最低限必要なコンテンツを絞り、そこからブラウザ幅を広げてPC向けWebサイトということで機能を拡張するやり方がある、ということになる。

クロスメディア研究会2月のセミナーではこのレスポンシブWebデザインについて。実際にどういう案件が多いか、どういう提案が効くかなども踏まえて検討する。
スマートフォン向けWebサイト構築のポイント

また、PAGE2012カンファレンスではスマホ関連のWebソリューション事例に加えて最近のトレンド、アプリ動向など周辺ビジネスも俯瞰できる内容となっている。こちらもご参加いただきたい。
スマートフォンの急速な普及によりコミュニケーションインフラがどう変容するか


（JAGAT　研究調査部　木下智之）