レスポンシブWebデザイン
どんな形の器に入れても、自然とその形にぴたっと馴染むやわらかいゼリーのようなWebサイトです。
定義 ユーザーが見ている端末の画面サイズや解像度に合わせて、文字サイズや画像、レイアウトが柔軟に自動で変化するWeb制作の手法です。パソコン、タブレット、スマートフォンなど画面の大きさが違っても、たったひとつのURLで常に最適な画面を表示してくれます。
なぜ端末ごとに異なる画面が必要なのでしょうか？
大きなパソコンのモニターに合わせて作られた新聞のような画面を、小さなスマートフォンで見るところを想像してみてください。文字が米粒のように小さくなり、指で何度も拡大したり左右にスクロールしたりしなければ読めませんよね。逆にスマートフォンの画面を大型テレビにそのまま映すと、両端がスカスカで不自然に見えてしまいます。
昔はこうした問題を解決するため、パソコン用とスマホ用で別々にWebサイトを作っていました。しかしこのやり方では、お知らせを1つ更新するだけでも両方のサイトを修正しなければならず大変でした。さらにタブレットや折りたたみスマホなど、新しい画面サイズの端末が登場するたびに作り直す必要があったのです。
レスポンシブWebデザインは、この悩みをすっきりと解決しました。端末ごとにサイトを分けるのではなく、画面の幅に反応して自分からレイアウトを組み替える仕組みを作ったのです。広い画面では横に3列並んでいた商品一覧が、スマートフォンでは縦1列に見やすくスッキリ並び替わります。
魔法のように変身する秘密「メディアクエリ」
レスポンシブWebデザインの最大の秘密は、Webサイトの見た目を整える言語（CSS）に含まれる「メディアクエリ（Media Query）」という技術です。これはブラウザが画面の横幅をリアルタイムで測り、その大きさに合わせた「服」に着替えるよう指示を出すセンサーのような役割を果たします。
たとえば、「画面の幅が600ピクセルより狭くなったらメニューを隠し、3本線のハンバーガーメニューを表示しなさい」といったルールを書いておきます。すると、ユーザーがスマートフォンを横向きに傾けたり、ブラウザの端をつかんでウィンドウを縮めたりしたときに、条件に合わせてリアルタイムにデザインが変身します。
ここに、ピクセル（px）のような固定されたサイズではなく、パーセント（%）で広さを指定する柔軟なレイアウト技術が組み合わさります。画面の幅が縮むと文字枠や画像も比率に合わせて柔軟に小さくなるため、文字が画面からはみ出してしまうことがありません。
もう少し詳しく：アダプティブWebとの違い
私たちが普段見ているモバイル画面のすべてがレスポンシブWebというわけではありません。よく比較される手法に「アダプティブWeb（適応型Web）」があります。アダプティブWebは、スマホ用、タブレット用、PC用といったあらかじめ決めておいたいくつかの固定サイズに合わせて、それぞれ専用の画面を出し分ける仕組みです。
一方、レスポンシブWebは画面サイズが1ピクセルずつ連続して変わっても、あらゆる画面サイズに滑らかに適応します。Webサイトのプログラムコードを1つだけ作ればよいため、内容を修正する際の手間やコストを大幅に抑えられます。
さらに、検索エンジンのロボットにとってもURLが1つだけで済むため、検索結果で上位に表示されやすくなる（SEOに有利な）メリットもあります。管理がしやすく使い心地も抜群なため、今日ではほとんどのWebサイトでレスポンシブ対応が標準となっています。
🤔 よくある誤解
レスポンシブWebデザインとは、モバイル専用のサイトをもう1つ別に作る技術のことだ。
サイトを2つ作るのではなく、たった1つのコードとURLで、あらゆる端末の画面サイズに合わせてデザインだけを柔軟に変える技術です。
🧺 日常で出会う場面
画面の大きさに合わせてレイアウトを自動調整し、スマホでもパソコンでも見やすく快適に利用できるようにしたWebサイトの仕組みです。