フレームワーク活用ガイドひとことで言うと#
1つのデザインで、スマホ・タブレット・PCなどあらゆる画面サイズに対応する設計手法。画面幅に応じてレイアウトを柔軟に変化させることで、どのデバイスでも最適な閲覧体験を提供する。
押さえておきたい用語#
- メディアクエリ（Media Query）
- 画面幅などの条件に応じて異なるCSSを適用する仕組み。レスポンシブの中核技術。
- フルイドグリッド（Fluid Grid）
- 固定px幅ではなくパーセンテージで幅を指定するレイアウト手法。
- ビューポート（Viewport）
- ブラウザの表示領域サイズ。vwやvhはビューポートに対する相対単位。
- srcset属性
- 画面サイズに応じて最適なサイズの画像を自動選択するHTML属性。
レスポンシブデザインの全体像#
こんな悩みに効く#
- PC向けに作ったサイトがスマホだと使いづらい
- デバイスごとに別々のデザインを管理するのが大変
- モバイルからのアクセスが増えているのに対応できていない
基本の使い方#
一番小さい画面（モバイル）から設計を始め、大きい画面に拡張していく。
- モバイルは制約が多い（画面小、タッチ操作、通信遅い）。制約の中で本当に必要な要素を見極める
- まず320px幅で必要なコンテンツと優先順位を決める
- PCで「あったらいいな」要素は、モバイルでは省くか折りたたむ
PC→モバイルの順だと「何を削るか」の議論になるが、モバイル→PCなら「何を追加するか」のポジティブな設計になる。
画面幅の区切り（ブレイクポイント）でレイアウトを切り替える。
- 〜599px: モバイル（1カラム、タッチ最適化）
- 600〜899px: タブレット（2カラム可能に）
- 900〜1199px: 小型デスクトップ（サイドバー表示）
- 1200px〜: 大型デスクトップ（フルレイアウト）
コンテンツが「壊れる」タイミングでブレイクポイントを設定するのが理想。デバイスの種類ではなく、コンテンツの読みやすさで判断する。
固定値（px）ではなく相対値を基本にする。
- フォントサイズ: rem（ルートに対する相対値）
- 幅: %、vw、max-width
- 画像:
max-width: 100%で親要素に合わせて縮小 - 余白: clamp() で最小〜最大の範囲を指定
タッチターゲット: モバイルではボタン・リンクのサイズを最低44px×44pxに。指で押しやすいサイズを確保する。
ブラウザのデバイスシミュレーターだけでなく、実際のデバイスで確認する。
- 実機では指の太さ、画面の反射、通信速度など、シミュレーターではわからない問題が見つかる
- iOS Safari、Android Chrome の両方で確認する
- ランドスケープ（横向き）モードも忘れずにチェック
具体例#
モバイル（〜599px）:
- ハンバーガーメニュー
- ヒーロー画像（全幅、高さ50vh）
- メニュー一覧は縦1列のカード
- 予約ボタンは画面下部に固定（sticky）
- 電話番号タップで発信
タブレット（600〜899px）:
- メニューカードは2列並び
- 予約ボタンはヘッダーに移動
デスクトップ（900px〜）:
- ナビゲーション全表示（ハンバーガー不要）
- メニューカードは3列
- サイドに営業時間・地図を常時表示
結果: 同じHTMLで3パターンのレイアウトを実現。モバイルからの予約数が前年比135%に増加。 Lighthouseスコアは42から88に改善。
Before: 社内ポータルはPC専用設計。営業チームが外出先でスマホからアクセスすると文字が小さすぎて使えず、モバイル利用率は8%。
レスポンシブ対応:
- ダッシュボードのウィジェットを1カラム縦積みに（モバイル）→ 3カラムグリッド（PC）
- 承認ボタンを44px以上のタッチターゲットに拡大
- テーブル表示をモバイルではカード表示に切り替え
- 社内通知をプッシュ対応に
結果: モバイル利用率が8%から32%に増加（4倍）。 外出先での承認処理が可能になり、承認待ち時間が平均2.5日から0.5日に短縮。
Before: オンライン講座サイトがデスクトップ専用。動画プレーヤーが固定幅で、スマホでは横スクロールが必要。モバイルの受講完了率は41%。
レスポンシブ対応:
- 動画プレーヤーを
max-width: 100%; aspect-ratio: 16/9で可変に - 講義ノートをアコーディオン形式に（モバイル）→ サイドパネル（PC）
- クイズのラジオボタンを48px角のカード選択UIに変更
- srcsetで動画サムネイル画像をモバイル最適化
結果: モバイルの受講完了率が41%から63%に改善（+22pt）。 通勤時間に学習するユーザーが増え、全体の受講数も15%増加。
やりがちな失敗パターン#
- PCデザインを縮小しただけの「レスポンシブ」 — 文字が小さくなるだけで、タッチ操作に最適化されていない。モバイルはモバイル専用のインタラクションを設計する
- ブレイクポイントが多すぎる — 3〜4段階で十分。あまり細かく分けると管理が複雑になる
- 画像の最適化を忘れる — モバイルでPC用の大きな画像を読み込むと表示が遅くなる。srcset属性やWebP形式で画面サイズに合った画像を配信する
- テーブルをそのままモバイルに表示する — 横幅の広いテーブルはモバイルでは壊れる。カード表示やスクロール可能なコンテナに切り替える
まとめ#
レスポンシブデザインは「モバイルファーストで始め、ブレイクポイントで拡張し、柔軟な単位で実装する」の3ステップ。世界のWebトラフィックの半分以上がモバイルである今、レスポンシブ対応は選択肢ではなく前提条件。