レスポンシブWebデザイン

大きなパソコンのモニター向けに作られた新聞のようなレイアウトを、小さなスマートフォンで見るところを想像してみてください。文字がアリのように小さくなり、指で拡大したり、左右に何度もスクロールしたりしないと読めませんよね。逆にスマートフォンの画面を大型テレビに映すと、左右がぽっかり空いて不自然に見えます。

昔はこうした問題を解決するため、PC用サイトとモバイル用サイトを別々に作っていました。しかしこの方法では、記事を1つ直すだけでも両方のサイトを更新しなければならず、手間がかかります。そのうえ、タブレットのようにサイズが中間的な端末が登場するたびに、どちらを表示すべきか、あるいは専用サイトをもう1つ作るべきか悩むことになりました。

レスポンシブWebデザインは、この悩みをスマートに解決しました。端末ごとに別々のサイトを用意するのではなく、画面の幅に反応して自動的にレイアウトを組み替える仕組みを作ったのです。広い画面では横に3列並んでいた商品一覧が、スマートフォンでは縦1列にすっきりと並び替わります。

レスポンシブWebデザインの核となる秘密は、Webサイトの見た目を装飾する言語（CSS）に含まれる「メディアクエリ（Media Query）」という技術です。これはブラウザが画面の横幅をリアルタイムで測り、サイズに合わせた服に着替えるよう指示を出すセンサーのような役割を果たします。

例えば、「画面の幅が600ピクセルより狭くなったらメニューを隠し、3本線のハンバーガーアイコンを表示せよ」といったルールを書いておきます。すると、スマートフォンを横向きに回転させたり、ブラウザウィンドウの端をドラッグして縮めたりしたときに、設定した条件に合わせてリアルタイムにデザインが変身します。

さらに、ピクセル（px）のような固定された単位の代わりにパーセント（%）などを使う柔軟なグリッド構造が組み合わされます。画面の幅が狭くなると、テキストボックスや画像も比率に合わせてしなやかに縮むため、文字が画面からはみ出してしまうことがありません。

私たちがスマートフォンで見ているWebサイトのすべてがレスポンシブというわけではありません。よく「アダプティブWebデザイン」という手法と比較されます。アダプティブは、スマホサイズ、タブレットサイズ、PCサイズのように、あらかじめ決められたいくつかの固定サイズに合わせて別々にレイアウトを用意し、切り替えて表示する手法です。

一方、レスポンシブWebデザインは、画面サイズが1ピクセルずつ連続して変化しても、あらゆる画面サイズに滑らかに適応します。Webサイトのコードを1つだけ作れば済むため、内容を更新する際にかかる時間やコストを大幅に抑えられます。

また、URLが1つに統一されているため、検索エンジンのクローラーがページを巡回・管理しやすくなります。Googleも導入や管理のしやすさからレスポンシブ構成を推奨しています。このように管理がしやすくユーザー体験にも優れているため、現代のほとんどのWebサイトがレスポンシブを標準として採用しています。