画面サイズ（モバイル・タブレット・デスクトップ）に応じてUIのレイアウトや表示方式を切り替える設計パターン集。単なる「幅が変わる」だけでなく、ナビゲーションの形態変化・グリッドの折り畳み・コンポーネントの完全な入れ替えまで、UIの根本的な適応方法を扱う。
この記事を読むと、モバイルファーストの設計原則・代表的な5つのレスポンシブパターン・ブレークポイント選定の考え方・コンポーネントレベルのレスポンシブ実装が自分でできるようになります。
1. UI例（Preview / Live）
2. 定義（Definition）
画面サイズに応じてUIのレイアウト・コンポーネント・操作方式を適応させる設計パターンの総称。CSSのメディアクエリ（@media）とTailwindのブレークポイントプレフィックス（sm: / md: / lg:）で実装される。
代表的な5つのレスポンシブパターン：
| パターン名 | 内容 | 例 |
|---|---|---|
| リフロー（Reflow） | レイアウトの方向・カラム数を変える | 3カラム→1カラム |
| リビール（Reveal） | 大画面で追加要素を表示する | デスクトップでサイドバー表示 |
| コンポーネント置換 | コンポーネントそのものを入れ替える | テーブル→カード、ナビ→ハンバーガー |
| コンパクト化 | ラベルを隠してアイコンのみにする | タブレットでアイコンサイドバー |
| オフスクリーン | 使用頻度が低いUIをドロワーに移動 | モバイルでフィルターをSheetに |
3. 使い分け（When to use / When NOT to use）
3.1 When to use
- ナビゲーション：デスクトップ横並び → タブレット省略 → モバイルハンバーガー
- データテーブル：デスクトップ全カラム → モバイルカード形式
- サイドバー：デスクトップ常時表示 → タブレットアイコンのみ → モバイルSheet/Drawer
- フォーム：デスクトップ横並びフィールド → モバイル縦積み
3.2 When NOT to use（避けるべきアンチパターン）
- モバイルで単純に縮小するだけ：レイアウトを変えず縮小すると、タッチターゲットが小さくなり操作しにくい
- デスクトップで全情報・モバイルで一部非表示：重要情報がモバイルで見えないのはUXの問題
4. 設計判断の核（Decision Principles）
レスポンシブパターンの核は「モバイルファースト」——小さな画面から設計し、大きな画面に機能を追加する。大きな画面を縮小してモバイルに対応しようとすると、必ず破綻する。
判断の優先順位：① モバイルファーストのブレークポイント設計 → ② コンポーネント置換の判断 → ③ タッチターゲットの確保 → ④ ARIAの維持
- ブレークポイントはコンテンツが壊れる点で決める：デバイスサイズ（375px / 768px / 1024px）で決めるのではなく、「このコンテンツがこの幅では崩れる」という点にブレークポイントを置く。Tailwindの
sm:(640px) /md:(768px) /lg:(1024px) /xl:(1280px) はあくまで目安 - テーブルはモバイルでカードに変換する：横スクロールテーブルは多くのモバイルUXで最悪のパターン。
block md:tableでモバイルのみカード形式に切り替えると、情報が読みやすくなる - ナビゲーションのハンバーガーメニューには
aria-expandedが必須：aria-expanded="false"→ 開いた後aria-expanded="true"に更新することで、スクリーンリーダーがメニューの開閉状態を認識できる - タッチターゲットは最低44×44px：モバイルのタップ対象は指の大きさに合わせて44×44px以上確保する。デスクトップでは24px程度でも機能するが、モバイルでは必ず拡大する
5. ブレークポイント設計（Breakpoints）
Tailwindのデフォルトブレークポイント：
| プレフィックス | 幅 | 対象デバイス |
|---|---|---|
| （なし） | 0px〜 | モバイル（デフォルト） |
sm: | 640px〜 | 大きいスマートフォン・タブレット縦 |
md: | 768px〜 | タブレット横 |
lg: | 1024px〜 | ノートPC・デスクトップ |
xl: | 1280px〜 | 大きなデスクトップ |
2xl: | 1536px〜 | ワイドモニター |
モバイルファーストの書き方：
/* ✅ モバイルファースト：まずモバイルを書いて、大きい画面で上書き */
.grid { grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } }
/* ❌ デスクトップファースト（非推奨） */
.grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .grid { grid-template-columns: 1fr; } }
6. パターン集（Good / Bad / How to fix）
6.0 よく崩れる設計パターン（3つ）
- デスクトップのテーブルをモバイルで横スクロールに：ユーザーが横スクロールを必要とするテーブルはモバイルで最悪のUX。カード形式への変換が解決策
- ハンバーガーメニューに
aria-expandedがない：スクリーンリーダーがメニューの開閉状態を把握できない - モバイルでタップターゲットが小さすぎる：デスクトップ向けの小さなリンクやボタン（16〜20px）がモバイルでタップしにくい
6.1 Bad（典型3つ）
- モバイルでデスクトップ用のデータテーブルを表示し、右側の重要カラムが見切れる
- ハンバーガーボタンを
<div onClick>で実装し、role="button"もARIAもtabIndexもない - デスクトップの12カラムグリッドをモバイルで
transform: scale(0.5)で縮小して表示する
6.2 Good（対になる3つ）
<table className="hidden md:table">+<div className="md:hidden space-y-2">でモバイルはカード、デスクトップはテーブルを表示する- ハンバーガーボタンを
<button aria-expanded={isOpen} aria-controls="mobile-menu" aria-label="メニュー">で実装する - モバイルのリンク・ボタンに
min-h-[44px] min-w-[44px]を設定してタップしやすくする
6.3 How to fix（手順）
- 全コンポーネントのモバイル表示を確認し、「テーブル」「横並びナビ」「小さいボタン」をリストアップする
- テーブルにモバイル用のカード表示を追加する（
display: none/display: blockの切り替え） - ナビゲーションのハンバーガーメニューに
aria-expanded+aria-controls+aria-labelを付与する - モバイルの全タップターゲットに最低44×44pxを確保する
7. ルール（Must / Better）
Must（守らないと壊れる）
Better（品質が跳ねる）
8. アクセシビリティ要件（必須）
ハンバーガーメニュー
<button
aria-expanded="false"
aria-controls="mobile-nav"
aria-label="ナビゲーションメニューを開く"
>
<!-- ハンバーガーアイコン -->
</button>
<nav id="mobile-nav" hidden>
<!-- ナビゲーション項目 -->
</nav>
aria-expanded を開閉に合わせて動的に更新し、hidden 属性でコンテンツの可視性を制御する。
Focus Management
モバイルメニューを開いた時は、メニュー内の最初のフォーカス可能な要素にフォーカスを移動する。閉じた時はハンバーガーボタンにフォーカスを戻す。
9. 実装メモ（Implementation Notes）
- Tailwindのレスポンシブクラス：
hidden sm:block（smサイズ以上で表示）、block md:hidden（mdサイズ以上で非表示）を組み合わせてコンポーネントの表示・非表示を制御する useMediaQueryフック：JSで画面サイズを検知して完全に異なるコンポーネントをレンダリングする場合（テーブル→カード）、カスタムフックuseMediaQuery('(min-width: 768px)')を使ってisMobileフラグを管理する- Container Query（CSS）：Tailwind v3.2+ の
@containerとcontainer-typeを使うと、親コンテナのサイズに応じたスタイリングが可能。ビューポート幅ではなくコンポーネントのコンテナ幅で条件分岐できるため、再利用性が高い
10. 関連リンク
- 関連するUIデザイン原則: 情報密度 (Information Density), スキャンしやすさ (Scannability)
- 用語集（定義）: レスポンシブデザイン (Responsive Design)
- 関連するUIコンポーネント（横）: Scroll Area（スクロールエリア）, Resizable（リサイザブル）, Sidebar（サイドバー）, Sheet / Drawer（ドロワー / シート）, Table（テーブル）
11. まとめ
Responsive Patternsの設計で最重要なのは「モバイルファーストの原則」と「コンポーネント置換の判断」です。迷ったら 4. 設計判断の核 に戻り、「モバイルから設計しているか」「テーブルをモバイルでカードに変換しているか」「ハンバーガーメニューに aria-expanded があるか」の3点を確認してください。「デスクトップで見せているものをモバイルでも見せる方法」を考えるのではなく、「モバイルで必要な情報は何か」から考えることがレスポンシブ設計の出発点です。
