responsive-paradigms

レスポンシブデザインのパラダイム

モバイル、タブレット、デスクトップは、操作のコンテキストが根本的に異なります。入力方法、画面の広さ、画面を見る距離、セッションの目的はそれぞれ異なります。レスポンシブデザインとは、異なる幅で同じレイアウトを使うことではなく、ブレークポイントごとに異なるデザイン上の判断を行うことです。

3つのパラダイム

モバイル（< 768px）

• 入力： タッチ操作 — カーソルではなく指で操作します。タップ対象は 44×44px 以上にします。
• ナビゲーション： 下部タブバー（親指が届く範囲）またはハンバーガードロワーを使います。上部のナビゲーションは操作しにくい位置にあります。
• セッション： 中断されることが多く、タスクに集中した短いものです。最も重要な情報を最初に表示します。
• コンテンツ： 1列にします。縦方向にのみスクロールします。ホバー状態はありません。
• 主なアクション： フローティングアクションボタン（FAB）または画面下部の全幅ボタンを使います。

タブレット（768px–1024px）

• 入力： タッチ操作に加え、キーボードやトラックパッドを使うこともあります。ハイブリッドなパラダイムです。
• ナビゲーション： 横向きでは常時表示のサイドバーを配置できます。縦向きではドロワーに折りたたみます。
• コンテンツ： 2列レイアウトが適しています。マスター・ディテールパターン（リストと詳細を横に並べる）が自然です。
• 主なアクション： コンテンツ内に配置でき、必ずしもフローティングにする必要はありません。

デスクトップ（> 1024px）

• 入力： ホバー状態、キーボードショートカット、精密なクリック操作が可能なマウスを使います。
• ナビゲーション： 常時表示のサイドバーまたは上部ナビゲーションを使います。どちらも同時に表示できます。
• コンテンツ： 複数列のレイアウト、情報量の多い表示、ツールバー、コンテキストメニューに対応します。
• 主なアクション： コンテンツに関連する位置に配置し、熟練ユーザー向けにキーボードショートカットを用意します。

---

ブレークポイントごとのセクションの振る舞い

すべてのセクションを、すべてのブレークポイントで同じ位置に表示する必要はありません。そもそも表示しなくてもかまいません。

モバイルではセクションを非表示にできます

関連記事、補足用サイドバー、装飾的なイラストなどの補助コンテンツは、ブレークポイントより小さい画面では非表示にできます。モバイルユーザーにこれが必要かどうかを考えてください。不要なら、モバイルで display: none にするのが適切です。

基本は積み重ね。同じコンテナ内での再配置も可能です

基本的なレスポンシブ対応は、単に積み重ねることです。水平方向に並んだブロックを、ビューポートが狭くなるにつれて縦1列にします。順序とグループ分けが保たれるため、ブレークポイントが変わっても、ページに対するユーザーのメンタルモデルはそのまま維持されます。まずはこの方法を検討してください。

要素の再配置も可能ですが、ほぼ同じコンテナ領域／リージョン内にとどめる場合に限ります。 デスクトップで左側にあるサイドバーを、モバイルではメインコンテンツの下に移動したり、展開可能なセクションに折りたたんだりできます。フローが変わっただけで、「メインコンテンツの隣や周辺にあるもの」であることに変わりはありません。問題ありません。

避けるべきなのは、要素を別のコンテナやスコープに移動する再配置です。カード内にあったコントロールをグローバルヘッダーに移すと、単なる再配置ではなく、異なるUIとして受け取られます。親となるリージョンは維持し、その中での流れだけを変えてください。

Desktop:              Mobile:
[Main] [Sidebar]  →   [Main]
                       [▼ Related]  ← collapsed accordion, still "around the main content"

ブレークポイントごとにスティッキー動作を変更できます

デスクトップで position: sticky にしている要素は、モバイルでは画面下部に固定したバーにするか、画面領域を確保するためにスティッキー位置指定を解除する必要がある場合があります。

.toolbar {
  position: static; /* mobile: inline, not sticky */
}

@media (min-width: 1024px) {
  .toolbar {
    position: sticky;
    top: var(--header-height);
  }
}

ナビゲーションは大きく変わります

デスクトップ	モバイル
常時表示の上部ナビゲーションまたはサイドバー	下部タブバーまたはハンバーガードロワー
ラベルとアイコンを表示	アイコンのみ（下部ナビゲーション）またはリスト全体（ドロワー）
ナビゲーション項目にホバー状態を設定	なし — タッチ操作のみ
ホバーでドロップダウンを表示	タップして展開。全画面表示またはシート表示

ラベルは短縮できますが、意味全体を確認できるようにします

スペースが限られてくると、ラベルを短縮したり、アイコンのみにしたりできます。短縮すると情報が隠れるため、全文を参照できるようにしてください。切り詰めたテキストと同じ「短縮して参照可能にする」という取り決めです（[[repeated-component-alignment]] を参照）。

• 参照できるようにする： title / aria-label を使います（アイコンのみのコントロールでは必須）。または詳細ビューやデスクトップレイアウトで確認できるようにします。
• アイコンのみ： アイコンの意味が明確な場合に限り有効です。また、aria-label でラベルを設定してください。意味の分かりにくいアイコンは、長い単語よりも不適切です。

---

モバイルファーストのアプローチ

まずモバイル向けに設計・構築し、その後、大きな画面向けに拡張します。モバイルでは優先順位を付ける必要があります。モバイルに載せるものこそ、本当に重要なものです。

/* Mobile first: base styles are mobile */
.container { padding: var(--space-4); }

/* Enhance for larger screens */
@media (min-width: 768px) {
  .container { padding: var(--space-8); }
}

@media (min-width: 1024px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-8);
  }
}

/* Ultra-wide protection */
@media (min-width: 1600px) {
  .container {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }
}

最大幅と超ワイド画面

レスポンシブデザインは「際限なく広げる」という意味ではありません。非常に大きなモニター（2K、4K、超ワイド）では、読みやすさと人間工学的な快適さを保つために、コンテンツの幅に上限を設ける必要があります。

• 人間工学： 4K画面の全幅に重要なUI要素を広げると、首を大きく動かす必要があり、インターフェースが「断片的」に感じられます。
• 読みやすさ： タイポグラフィのガイドラインで述べたように、行の長さは約75文字を超えないようにします。最大幅を設定せずに4K画面を使うと、1行のテキストが数千ピクセルに及ぶことがあります。
• 「セーフゾーン」： 主要コンテンツにはすべて、最大幅コンテナ（通常は1280px〜1600px）を使用します。
• 全幅表示の例外： 背景色、装飾画像、補助的なフッターは全幅のままにできます。コンテンツを中央に配置して幅を制限しつつ、デザインの「勢い」を保てます。

ブレークポイントに応じたヘッダーのUI

固定ヘッダーも同じ考え方に従います。ブランドマークとメニューコントロールはどちらもサイズを調整し、画面の端から同じ余白を保ちます。

• ブランドマークのサイズを調整します。 デスクトップ向けのサイズのロゴは、スマートフォンでは大きすぎます。モバイルでは小さく、タブレットでは中程度に、デスクトップでは通常のサイズにします。モバイルヘッダーでは、ワードマークの高さを18〜24px程度にすると読みやすくなります。高さに上限を設定し、幅はアスペクト比を保つように調整します。
• 端からの余白を揃えます。 ロゴとメニューコントロールは反対側の端に配置し、ブレークポイントに合わせて調整しながら、同じ余白を保ちます。余白が狭すぎると窮屈に見え、丸みのある画面の角にぶつかるおそれがあります。

折り返した行は親要素の配置を引き継ぎます

flex-wrapで作られたピル、統計情報、タグなどの行は、折り返した後も独自の配置を保ちます。モバイルで中央揃えのカラムに配置すると、折り返した行だけが左に寄り、周囲がすべて中央揃えの中で最後の項目が隅に残ってしまいます。内側の配置を周囲のコンテキストに合わせ、モバイルでは中央揃え、デスクトップでは左揃えにします。

手元の入力方法に合ったヘルプ

タッチ操作ではジェスチャーを、キーボード操作ではキーを表示します。判断には、レイアウトを決めるビューポート幅ではなく、ポインターとホバーのメディア特性を使います。スマートフォンではキーの凡例は不要ですが、デスクトップのウィンドウが狭くてもキーは使えます。視覚的な手がかりがないジェスチャーは、ほかに知る方法がないため、一覧に記載する必要があります。

レビューチェックリスト

• モバイルナビゲーションには、親指を伸ばさなければならない上部ナビゲーションではなく、下部タブバーまたはドロワーを使用していますか？
• すべてのインタラクティブ要素のタッチターゲットは、44×44px以上ですか？
• モバイルでは、補助的なセクションを単に縮小するのではなく、非表示または折りたたんでいますか？
• スティッキー配置はブレークポイントごとに調整されていますか？デスクトップのスティッキー要素をすべてモバイルでも固定したままにしていませんか？
• レイアウトはモバイルファーストで構築し、画面が大きくなるにつれて段階的に拡張していますか？
• ホバーに依存するインタラクション（ツールチップ、ドロップダウン）は、タッチ操作に対応するタップ操作に置き換えていますか？
• モバイルで主要なアクションに片手の親指で届きますか？
• 超ワイド／4Kモニターで、主要コンテンツの最大幅を制限していますか（例：1440px）？
• ヘッダーのブランドマークはブレークポイントに応じてサイズが変わり、ロゴとメニューコントロールの端からの余白が揃っていますか？
• 折り返した行（ピル、統計情報、タグ）は、中央揃えのカラムで左揃えになるのではなく、配置されているコンテキストに合わせていますか？
• デフォルトの再配置は積み重ねになっていますか？また、要素の位置変更は別のスコープに移すのではなく、元のコンテナ／領域内にとどめていますか？
• ラベルを短縮したりアイコンのみの表示にしたりする場合、完全な意味を確認できる手段（ツールチップ／aria-label、別の場所に残したラベル、または誤解のないアイコン）がありますか？
• 入力方法の案内はポインターの機能に応じて選択し、視覚的な手がかりがないジェスチャーは一覧に記載していますか？