レスポンシブWebデザイン

レスポンシブWebデザイン（Responsive Web Design、RWD）とは、スマートフォン、タブレット、パソコンなど、異なる画面サイズや解像度でもWebページを利用しやすく表示できるように、レイアウトや画像、文字などを柔軟に変化させるWebデザインの手法です。[1]

一般的には、同じURL・同じHTMLを基本としながら、CSSのレイアウト機能、メディアクエリー、相対的なサイズ指定、レスポンシブ画像などを組み合わせて、閲覧環境に応じた表示へ調整します。[1][2][3]

画面サイズに応じてレイアウトを変化させる設計手法

Webサイトは、同じページでもさまざまな端末から閲覧されます。

例えば、パソコンでは横に3列並べたレイアウトでも、スマートフォンで同じ幅のまま表示すると、文字や画像が小さくなりすぎたり、横スクロールが必要になったりすることがあります。

レスポンシブWebデザインでは、利用できる表示領域に合わせて、

• 横並びを縦並びへ変更する
• 文字サイズや余白を調整する
• ナビゲーションの表示方法を変える
• 画像や動画のサイズを調整する
• 不要な装飾を簡略化する

などの対応を行います。

目的は「スマートフォン専用ページを作ること」ではなく、さまざまな表示環境へ柔軟に対応できるWebページを設計することです。

単一の技術名ではない

レスポンシブWebデザインは、特定のCSS機能ひとつを指す名称ではありません。

レイアウト、単位、メディアクエリー、画像、viewportの設定など、複数の技術と設計上の考え方を組み合わせて実現します。[1]

そのため、

• メディアクエリーを使えば自動的にレスポンシブになる
• スマートフォン用CSSがあればレスポンシブである
• 画面幅だけを2種類に分ければ十分

と一律に考えるものではありません。

サイトの内容やUIに合わせて、複数の技術を組み合わせて設計します。

柔軟なレイアウト

固定されたピクセル幅だけでページ全体を設計すると、想定より狭い画面や広い画面で表示が崩れることがあります。

現在のCSSでは、FlexboxやGridなどを利用して、利用できる領域に合わせて要素を並べたり、幅を伸縮させたりできます。[1]

また、%、rem、vw、min()、max()、clamp()など、さまざまな単位や関数を利用して柔軟なサイズ設計を行う方法もあります。

FlexboxやGridなど現在のレイアウト手法はもともと可変的に動作するため、メディアクエリーを使わなくても画面幅の変化にある程度対応できます。すべてを相対単位にすればよいという意味でもなく、コンテンツやUIに応じて固定値と可変値を使い分けます。

メディアクエリー

メディアクエリーは、表示環境の条件に応じてCSSを適用できる仕組みです。[2]

例えば、

• 画面幅が一定以上の場合は2列にする
• 狭い画面ではナビゲーションを縦方向へ変更する
• 特定の表示領域では余白を小さくする

といった切り替えに利用できます。

レイアウトが変化する境界は「ブレークポイント」と呼ばれます。

ブレークポイントは「iPhone用」「特定のAndroid端末用」のように端末名だけを基準にする必要はありません。端末は多様で、同じ端末でもウィンドウ幅や表示倍率によって条件が変わるためです。コンテンツが収まらなくなる幅を確認しながら決める考え方が一般的です。[2]

viewportメタタグ

モバイルブラウザーでWebページを意図した幅で表示するために、viewportメタタグが利用されます。

一般的にはHTMLのhead内に、次のような設定を記述します。

<meta name="viewport" content="width=device-width, initial-scale=1">

この指定がない場合、モバイルブラウザーがパソコン向けの幅でページを描画し、全体を縮小表示することがあります。[1][2]

レスポンシブ画像

画面上では画像の表示幅を柔軟に変えられても、常に非常に大きな画像ファイルを配信すると、通信量や表示速度の面で無駄が発生する場合があります。

HTMLでは、srcsetやsizes、picture要素などを利用し、閲覧環境や表示サイズに応じて適切な画像を選択させることができます。[3]

srcsetは候補となる画像とそのサイズを、sizesは表示条件ごとの画像の表示幅を指定します。ブラウザーはこれらの情報をもとに読み込む画像を選びます。[3]

レスポンシブWebデザインでは「レイアウトだけ」ではなく、画像や動画などのメディアも含めて考えることが重要です。

レスポンシブWebデザインとモバイルファーストは同じ意味ではない

レスポンシブWebデザインは、複数の表示環境に対応するための設計手法です。

一方、モバイルファーストは、狭い画面・小さい表示領域を起点として設計し、画面が広くなるにつれてレイアウトや表現を追加していく考え方を指します。

例えばCSSでは、

1. まずスマートフォンなど狭い画面向けの基本レイアウトを書く
2. 画面幅が広くなった場合にメディアクエリーで2列・3列へ変更する

といった実装がモバイルファーストの一例です。

レスポンシブWebデザインはモバイルファーストで実装できますが、両者は同義ではありません。

モバイル対応には複数の構成方法がある

Google Search Centralでは、モバイル向けサイトの構成として、次の3つが説明されています。[4]

• レスポンシブデザイン
• 動的な配信（同じURLで、デバイスに応じて異なるHTMLを配信する）
• 別個のURL（デバイスに応じて別のURLで異なるHTMLを配信する）

Googleは、レスポンシブデザインでは各ページのコンテンツとメタデータがモバイル版とパソコン版で同じになると説明しています。モバイルファーストインデックスに関する個別の注意点の多くは、動的な配信と別個のURLの構成に向けられたものです。[4]

一方、別URL方式では、例えばパソコン向けexample.comとモバイル向けm.example.comのようにURLを分ける構成があります。この場合は、正規URLと代替URLの指定など、追加の設定が必要になります。[4]

GoogleはレスポンシブWebデザインを推奨しているが、採用自体が順位を上げるわけではない

Googleは、モバイルフレンドリーなサイトの3つの構成方法のうち、実装と維持が最も簡単なデザインパターンとしてレスポンシブWebデザインを推奨しています。[4]

同じURL・同じHTMLを基本に運用できるため、パソコン版とモバイル版で別々のURLやリダイレクトを管理する手間を減らせる点もレスポンシブデザインの利点です。[4]

ただし、「レスポンシブWebデザインを採用すれば検索順位が上がる」という意味ではありません。

Google検索ではモバイル版のコンテンツを中心にインデックス・ランキングへ利用するモバイルファーストインデックスが採用されています。[4] 検索評価にはコンテンツや技術的な状態など複数の要素が関係するため、レスポンシブという実装方式だけで順位が決まるものではありません。

パソコン版を縮小するだけでは十分ではない

レスポンシブWebデザインでは、単に要素の横幅を小さくすればよいわけではありません。

スマートフォンでは、

• タップしやすい操作領域
• 読みやすい文字サイズ
• 適切な余白
• メニューの操作性
• フォーム入力
• 画像・動画の表示
• ページ速度

なども利用しやすさに影響します。

デザインが画面内に収まっていても、ボタンが押しにくい、文字が小さい、読み込みが重いといった状態では、良いモバイル体験とは言えません。

パソコンとモバイルで重要な情報を大きく変えない

Googleはモバイルファーストインデックスのガイドで、パソコン向けとモバイル向けで主要なコンテンツを同等にすることを推奨しています。[4]

画面を小さくするために重要な文章や画像を削除するのではなく、アコーディオンやタブ、レイアウト変更などを使って、必要な情報を利用できる状態にする方法があります。

実機と複数の画面幅で確認する

レスポンシブWebデザインでは、制作時に決めた数種類の画面幅だけでなく、その中間の幅でもレイアウトが崩れないか確認する必要があります。

開発者ツールによる確認に加え、可能であれば実際のスマートフォンやタブレットなどでも、

• 横スクロールが発生していないか
• テキストが読めるか
• ボタンやリンクを操作できるか
• フォームが使えるか
• ナビゲーションが機能するか

などを確認します。

「スマホ対応」と完全に同じ言葉ではない

実務では「レスポンシブ対応」と「スマホ対応」が同じような意味で使われることがあります。

ただし、スマホ対応は広い概念であり、レスポンシブWebデザイン以外にも、動的配信や別URLによるモバイルサイトなどの方法があります。[4]

制作見積もりや要件定義では、「スマホ対応」という言葉だけでなく、どの構成・どの画面幅・どのデバイスまで確認するのかを具体的に決めることが重要です。

ブレークポイントの数が多いほど良いわけではない

ブレークポイントを細かく増やせば、特定の画面には合わせやすくなります。

一方、条件が増えすぎるとCSSが複雑になり、保守しにくくなる場合があります。

コンテンツが自然に収まらなくなる場所を確認しながら、必要なブレークポイントを設計することが基本です。

• [1] MDN Web Docs「レスポンシブデザイン」
• [2] MDN Web Docs「メディアクエリーの初心者向けガイド」
• [3] MDN Web Docs「HTML におけるレスポンシブ画像の使用」
• [4] Google Search Central「モバイルファースト インデックスに関するおすすめの方法」

※2026年9月28日確認