responsive-design

レスポンシブデザイン

すべてのレイアウトとインタラクティブな領域に、これらのルールを適用してください。例では、フレームワークに依存しない CSS を使用しています。どのフレームワークやユーティリティシステムにも、そのまま適用できます。レスポンシブなインターフェースは、固定されたデバイスの一覧ではなく、ビューポート、コンテナ、入力方法、ユーザー自身の設定に合わせて変化します。詳細なルールとコード例は ./reference/ にまとめられています。ルールを適用または引用する前に、該当するファイルを読んでください。

基本原則

デバイス名ではなく、コンテンツと制約に合わせて設計してください。約 320px から超ワイドまでのあらゆる幅、両方の画面方向、最大 400% のズーム、タッチ操作またはポインター操作で、さらにユーザーのフォントサイズ、モーション、カラースキームの設定を尊重したうえで、使いやすく読みやすいレイアウトであれば、レスポンシブだと言えます。まず妥当な最小幅から始め、そこから段階的に機能を拡張する「モバイルファースト」と呼ばれる手法を採用してください。これにより、CSS を減らし、あらゆる環境で機能するベースラインを実現できます。

デバイスのブランド、オペレーティングシステム、製品名を基準にレイアウトを決めてはいけません。それらは変化し、増え続けます。レイアウトを変更する必要があるタイミングは、コンテンツに判断させてください。

確認

レビューのみを行う場合は、中断せずに指摘事項を報告してください。既存ファイルを編集する前に、まず変更内容を確認し、適切に判断するために必要な情報があれば、推測するのではなく質問してください。

重大度

レベル	意味
重大	一般的なサイズまたは入力方法で、コンテンツにアクセスできない、読めない、または使用できない
深刻	横スクロール、コンテンツの欠落、または操作対象の使いにくさによる大きな摩擦
中程度	回避策はあるものの、目立つ摩擦がある
軽微	影響はわずかだが、仕上げに不備がある

ルールだけでなく、実際のサイズと入力方法でタスクに与える実際の影響に基づいて重大度を判断してください。静的なレビューでは、コードを読むだけではビューポートへの対応、ズーム、画面の向き、タッチ操作への応答を確認できないため、合格ではなく「確認待ち」としてください。

リファレンス一覧

ルールとコード例は ./reference/ にまとめられています。ルールを適用または引用する前に、該当するファイルを読んでください。

• 基礎：
  • reference/foundation.md — 基礎を整える
  • reference/strategies.md — レスポンシブ対応の手法
  • reference/breakpoints.md — ブレークポイントは規約であり、標準ではありません
• レイアウト：
  • reference/layout-tools.md — モダンなレイアウトツール
  • reference/container-queries.md — メディアクエリとコンテナクエリの比較
  • reference/layout-patterns.md — レイアウトパターン
• 入力と使いやすさ：
  • reference/input-methods.md — 入力方法への適応
  • reference/safe-areas.md — セーフエリア
• コンテンツ：
  • reference/typography.md — レスポンシブなタイポグラフィ
  • reference/images.md — レスポンシブ画像
  • reference/user-preferences.md — ユーザー設定
• テスト：
  • reference/checklist.md — テストチェックリスト

アンチパターン

• コンテンツではなく、デバイスやオペレーティングシステムにちなんで名付けたブレークポイント。
• 小さな画面で横スクロールを強いる、固定ピクセル幅。
• ポインター操作やキーボード操作で代替できない、ホバー専用のコントロール。
• スクロールバーを考慮せず、はみ出しが発生する width: 100vw。
• user-scalable=no や maximum-scale の上限によるズームの無効化。

---

執筆者：@planetabhi