superior-responsive

優れたレスポンシブ対応

利用可能なスペースや入力条件に合わせて、同じタスクを使えるようにします。レスポンシブ対応とは、デスクトップ版を縮小することではなく、構成を組み直すことです。

コンテンツから問題を診断する

• 読む順序、コントロール、データ、ナビゲーションが機能しなくなる最初の幅を特定します。
• 不適切な幅を生み出している要素を突き止めます。原因を見つける前に、ページのオーバーフローを隠してはいけません。
• 固定幅、最小サイズ、グリッドトラック、改行できないテキスト、配置された要素、メディア、表、ビューポート単位を調べます。
• 空の理想的な状態だけでなく、実際にありそうな長いラベルや密度の高いコンテンツでテストします。

構成が破綻する箇所にブレークポイントを設定します。デバイス名はテスト対象にはなりますが、デザインの根拠にはなりません。

構成のバリエーションを選ぶ

ビューポートを問わず変わらないもの、つまりユーザーのタスク、コンテンツの意味、利用できるアクション、状態を定義します。そのうえで、変更してよいもの、つまりグループ化、配置、密度、ナビゲーションモデル、表現、操作の手順を決めます。

新しいレスポンシブレイアウトを作成するとき、複数の領域を再設計するとき、またはモバイルとデスクトップで異なる構成を選ぶときは、references/responsive-composition-patterns.mdを参照してください。ナビゲーション、サイドバー、グリッド、表、フォーム、ヒーロー、ダッシュボード、フッターの変換パターンを比較する際に活用します。オーバーフローやブレークポイントを限定的に修正する場合は、リファレンスを読み込まずに直接作業してください。

機能やコンテンツの管理主体が異なるモバイル版とデスクトップ版を実装してはいけません。見た目や動作が異なる場合でも、同じタスク上の契約を維持する必要があります。

意図的に構成を組み直す

• カラムを縦に並べる場合は、タスクの順序を維持します。ソースの順序が意味を成すようにします。
• すべてのブレークポイントで、意味とコンテンツの階層を一元的に保ちます。異なる構成を実現するためだけに、主要コンテンツをデスクトップ用とモバイル用に複製して隠してはいけません。
• コンテンツの要件に応じて、折りたたむ、折り返す、範囲を限定したデータ領域をスクロール可能にする、または表現を変更します。
• 各項目の有用性を保てる最小限の列数でグリッドを構成します。見た目の対称性だけを理由にデスクトップのグリッドを維持してはいけません。
• 読みやすさを損なわない範囲で文字サイズや余白を調整します。形式上収まるようにコントロールやテキストを縮小しすぎてはいけません。
• ブラウザーのUIやキーボードが利用可能なスペースに影響する場合は、動的なビューポート単位とコンテンツに基づく最小サイズを優先します。
• 固定配置は、占有するスペースに見合う継続的な利用可能性がある要素に限って使用します。

ナビゲーションとタッチ操作

• ラベルが衝突したり、ターゲットが小さくなりすぎたりする前に、ナビゲーションを調整します。
• 現在の場所を明示し、折りたたんだメニューをキーボードとタッチで操作できるようにします。
• 固定ヘッダー、ボトムバー、ダイアログ、仮想キーボードがコンテンツやフォーカス中のフィールドを覆わないようにします。
• コントロールに十分なターゲット領域と間隔を確保します。表示されるアイコンは、操作可能な領域より小さくてもかまいません。
• 開示や必須の操作をホバーだけに依存させてはいけません。

ブラウザーのUI、仮想キーボード、ノッチ、折りたたみ式画面の領域、向き、ポインターの機能、スタンドアロン表示モード、埋め込みコンテナーが利用可能なスペースや操作に影響する場合は、references/viewport-input-and-safe-areas.mdを参照してください。

オーバーフローへの対処

• 意図しないページ全体の横スクロールは、原因となっている要素側で修正します。
• 幅の広い表、タイムライン、キャンバスでは意図的に領域内スクロールを許可し、境界が明確にわかるようにします。
• テキスト、フォーカスリング、メニュー、レイアウトの崩れを隠すためにoverflow: hiddenを使用してはいけません。
• 長いトークンは折り返すか省略します。ただし、値全体にアクセスできるようにします。

検証マトリックス

変更箇所を、以下の条件でテストしてください。

• サポートされる最大幅の構成
• 影響を受ける各ブレークポイントの直上と直下
• 狭いスマートフォンサイズのビューポート
• プラットフォームに応じたテキストズームまたはブラウザーズーム
• 短いコンテンツと長いコンテンツ
• 変更したフォームのキーボードフォーカス時と、モバイルキーボードを開いた状態

意図しないページのはみ出し、クリッピング、重なり、操作不能なアクション、順序の変化がないことを確認してください。代表的な寸法と、未検証の項目を報告してください。

異なる動作が生じる場合は、レイアウトビューポート、ビジュアルビューポート、コンテナー、入力の制約を区別して報告してください。キーボード、安全領域、向き、タッチ操作にリスクがある場合、幅だけのエミュレーションでモバイル対応を確認したと主張しないでください。