スマートフォン、ノートパソコン、テレビの順にウェブサイトを開いてみてください。ピンチ操作や目を細める動作をせずに3つの画面すべてで正しく表示されるなら、それはレスポンシブデザインで構築されています。この手法により、単一のコードベースでレイアウト、画像、フォントをあらゆる画面サイズに合わせて自動的に調整できます。

イーサン・マルコットが2010年にこの用語を考案したのは、モバイルブラウジングが爆発的に普及し、デザイナーがデバイスごとに個別のサイトを構築するか、あらゆるデバイスに対応するサイトを構築するかの選択を迫られていた時期のことでした。結果、レスポンシブデザインが勝利を収めました。その中核となるツールは、流動的なグリッド、柔軟な画像、そしてメディアクエリです。メディアクエリは、ブラウザにビューポートの幅を問い合わせ、その回答に応じて異なるCSSルールを適用します。

レスポンシブデザインとはどのようなものか

• 固定ピクセルではなくパーセンテージを使用する流動的なグリッド
• コンテナ内で拡大縮小可能な柔軟な画像
• 異なる画面サイズに対してブレークポイントを適用するメディアクエリ
• モバイルレイアウトにおけるタッチ操作に適したターゲット

目標は、コンテンツを小さな画面に収めることだけではありません。あらゆる状況において、読みやすさ、階層構造、そして使いやすさを維持することです。デスクトップでは3列レイアウトでも、スマートフォンでは1列に縮小されることがあります。フルナビゲーションバーの代わりにハンバーガーメニューが採用されることもあります。優れたレスポンシブデザインは、まるで最初からそのデバイスでそのように表示されることを想定して作られたかのように、自然な印象を与えます。