レスポンシブWebデザインとは、1つのページが表示される画面に合わせてレイアウトを変える作り方のことです。小さなスマホから横長のデスクトップモニターまで、同じページで対応します。スマホ用サイトとPC用サイトを別々に用意する代わりに、可変のレイアウト、可変の画像、CSSのメディアクエリを使って同じコンテンツを画面サイズごとに組み替えます。現在はWebサイト制作の標準であり、Googleが推奨している方式でもあります。
レスポンシブWebデザインの始まり
この言葉は、デザイナーのイーサン・マルコット（Ethan Marcotte）が2010年5月に A List Apart に寄稿した記事「Responsive Web Design」で提唱しました。当時はiPhoneの登場から3年ほどで、多くの企業がPCサイトとは別に「m.」で始まるモバイルサイトを運営していました。マルコットは、端末に応じて反応する1つのサイトを提案し、その材料として次の3つを挙げました。
- フルードグリッド：レイアウトの幅を固定ピクセルではなく相対単位（パーセント）で指定する。
- フレキシブルイメージ：画像がコンテナの中で伸縮する。
- メディアクエリ：画面が最小幅などの条件を満たすときだけ適用されるCSSのルール。
CSSの機能はその後大きく進化しましたが、レスポンシブサイトの仕組みはいまもこの3つで説明できます。
基本となる考え方
コンテンツは消さずに並べ替える
レスポンシブなページは、どの端末でも同じコンテンツを配置を変えて表示します。PCの3カラムはスマホでは1カラムになり、横並びのメニューはメニューボタンにまとまり、大きな表は専用の枠内で横スクロールします。スマホで重要なコンテンツを隠してしまうのはよくある失敗です。Googleはページのモバイル版をインデックスするので、なおさら注意が必要です。
ブレイクポイントの間はなめらかに伸縮する
レイアウトは画面幅に合わせて伸び縮みし、構造を変えるのはブレイクポイントと呼ばれるいくつかの幅だけです。ブレイクポイントの選び方は別の記事で詳しく扱っています。レスポンシブのブレイクポイントを参照してください。
モバイルファースト
いまのレスポンシブサイトの多くはモバイルファーストで作られています。基本のCSSをスマホ用のレイアウトにし、大きな画面向けの要素をメディアクエリで追加していく方法です。CSSがシンプルになり、スマホでの表示も速くなりやすくなります。詳しくはモバイルファーストとはをご覧ください。
タッチ操作と画面密度もレスポンシブの一部
レスポンシブデザインは幅だけの話ではありません。スマホは指で操作し、画素密度の高い画面を持ち、縦向きと横向きを行き来します。レスポンシブなサイトは、親指で押しやすい大きさのタップ領域、高密度ディスプレイでもくっきりした画像、画面を回転しても崩れないレイアウトを備えています。
レスポンシブデザインとアダプティブデザインの違い
| レスポンシブデザイン | アダプティブデザイン | |
|---|---|---|
| レイアウト | ブレイクポイントで切り替わる1つの可変レイアウト | 端末の種類ごとに用意した複数の固定レイアウト |
| サイズの中間 | なめらかに伸縮する | 最も近い固定レイアウトに切り替わる |
| 端末の判定 | 不要。CSSがビューポートに反応する | サーバー側でユーザーエージェントを使うことが多い |
| 運用 | コードは1つ | 複数のテンプレートを同期させる必要がある |
| 現在の主な用途 | ほぼすべてのWebサイト | スマホでの要件が大きく異なる一部の大規模サイトやサービス |
「アダプティブ」がレスポンシブと同じ意味でゆるく使われることもあります。実務で役に立つのは、可変か固定か、CSSで対応するかサーバーで対応するか、という区別です。
いまのレスポンシブデザインの作り方
最近のCSSを使えば、2010年当時よりずっと簡単にレスポンシブなレイアウトを作れます。
- viewportのmetaタグは、モバイルブラウザに端末の幅を使うよう指示します。これがないと他の対策は機能しません。詳しくはviewportのmetaタグを参照してください。
- FlexboxとCSS Gridは、要素が自動で折り返すレイアウトを作れます。
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))と書くだけで、メディアクエリを1つも使わずに1列から4列まで変化するカードグリッドができます。 - メディアクエリは、指定した幅でレイアウトを切り替えるほか、画面の向き、ダークモード、視差効果を減らす設定、入力方法にも反応します。書き方と例はCSSメディアクエリの使い方にまとめています。
- コンテナクエリを使うと、コンポーネントが画面全体ではなく自分のコンテナの幅に反応します。同じカードをサイドバーでもメインカラムでも適切に表示できます。
clamp()による可変タイポグラフィで、見出しの文字サイズを画面に合わせてなめらかに変えられます。srcsetとsizesを使ったレスポンシブ画像なら、ブラウザが画面に合ったサイズのファイルを選んでダウンロードします。
Tailwind CSSやBootstrapなどのフレームワークは、これらの手法を定義済みのブレイクポイントとともにまとめて提供しています。
レスポンシブデザインのパターン例
- カラムドロップ：画面が狭くなるにつれて、カラムが1つずつ下に回り込む。
- オフキャンバスメニュー：小さな画面では、ボタンを押すとメニューが横からスライドして出てくる。
- 優先コンテンツ：スマホでは検索や「予約する」などの主要な操作を上部に移す。
- レスポンシブな表：表を専用の枠内で横スクロールさせるか、各行をカード状に変える。
- アートディレクション：
<picture>要素を使い、スマホでは画像を別のトリミングで表示する。
レスポンシブサイトの確認方法
「スマホ」と「PC」の2つだけでなく、いくつもの幅で確認しましょう。Chromeのデベロッパーツールでレスポンシブ表示の幅をドラッグしてレイアウトが崩れる位置を探し、次に実際のユーザーエージェントとピクセル比を持つ具体的な端末で確認します。この段階では、Mobile View Extensionのようなワンクリックでスマホ表示に切り替えられるツールが便利です。デベロッパーツールを開かずに、同じページを端末プリセットで表示できます。最後は実機で確認してください。全体の手順はレスポンシブデザインの確認方法で解説しています。
よくある質問
レスポンシブデザインの主な目的は何ですか？
画面の大きさにかかわらず、すべての訪問者に同じコンテンツを読みやすく使いやすい形で届けることです。しかもそれを1つのコードで実現します。
レスポンシブとモバイルフレンドリーは同じですか？
レスポンシブデザインはモバイルフレンドリーにするための方法の1つで、最も一般的なものです。ただし、ボタンが小さすぎる、スマホでの読み込みが遅いといった理由で、レスポンシブでもスマホで使いにくいサイトはあります。詳しくはスマホ対応サイトの作り方をご覧ください。
レスポンシブWebデザインを考えたのは誰ですか？
イーサン・マルコットが2010年に A List Apart の記事で、この言葉と考え方を紹介しました。