レイアウト
位置、間隔、配置は、テキストが読まれる前に階層を伝えます。このスキルはその構造を構築し、ストレステスト（リサイズ、翻訳、RTLミラーリング）を行います。
すべての修正はプロジェクトのスタイリングシステムで記述してください。以下の数値は、確立された密度システムがないインターフェースのための出発点であり、密度システムが適用される場合は、使い慣れた代替手段ではなく、記述されたとおりに使用してください。意図的なプラットフォームクローム、コンパクトなプロフェッショナルツール、プロジェクトトークンは、ストレステストに合格している限り維持してください。
ヒット領域とフォーカス動作は better-accessibility に、半径、シャドウ、アニメーションは better-ui に、行長とテキスト間隔は better-typography に属します。
線ではなく、スペースでグループ化する
最初にスペースでグループ化し、次に背景形状、最後に区切り線を使用します。区切り線は、スペースだけでは構造を伝えきれない場合に限ります。グループ間のギャップは、グループ内のギャップの少なくとも2倍（ 8px のグループ内 → 16px 以上のグループ間）必要です。そうでなければ、グループ化はノイズとして認識されます。配置のエッジと重要度の順序については、grouping-and-alignment.md を参照してください。
コントロールをコンテンツと区別する
すべてのインタラクティブ要素に、背景形状、境界線、または一貫した配置ゾーンを与えてください。横にある静的テキストと同じようにスタイル設定されたコントロールは、コントロールとして認識されません。
共有エッジに揃える
配置エッジを選択し、それに固執してください。ずれたエッジはすべてノイズとして認識されます。従属関係のレベルごとに1つのプロジェクト間隔ステップを使用します。16px は便利なデフォルト値です。
方向依存のレイアウトには論理プロパティ（ padding-inline-start、margin-inline-end ）を使用してください。物理的な左右は、真に物理的なジオメトリのために予約します。
重要度順に並べる
最も重要なコンテンツは、上部と先頭エッジの近くに配置します。読み取り順序は上から下へ、先頭から末尾へと流れます。左右ではなく、先頭と末尾で考えてください。
隠れたコンテンツをほのめかす
プログレッシブ・ディスクロージャーには、目に見えるアフォーダンスが必要です。プロジェクトの確立された手がかりを使用するか、次のアイテムをスクロールエッジから 16～32px だけ覗かせるか、ディスクロージャーコントロールを表示してください。手がかりなしに隠されたコンテンツは、存在しないも同然です。
ターゲット間の余白
確立された密度システムがない場合、隣接する境界線または塗りつぶしのコントロール間は 12px から始め、境界線のないテキスト専用およびアイコン専用のコントロールの周囲は 24px とします。コンパクトなレイアウトでは、better-accessibility のヒット領域が重ならず、コントロールが区別可能である限り、より狭い間隔を使用しても構いません。レイアウトマージンとブレークポイントのレシピは、spacing-and-adaptivity.md を参照してください。
ボタンを端から内側に配置する
コンテンツレイアウトでは、全幅ボタンをレイアウトマージンの内側に配置し、目に見える角丸を持たせます。モバイルではインラインで 16px 付近から始めてください。端から端までのアクションは、確立されたプラットフォームクロームに従い、安全領域を考慮し、システムUIと区別できる場合に機能します。
コンテンツはあふれ、コントロールは浮く
背景とメディアはビューポートの端まで拡張します。コントロールとテキストはレイアウトマージンと安全領域（ env(safe-area-inset-*) ）の内側に留めます。スティッキークロームはコンテンツレイヤーの上に浮かび、コンテンツをブロックしません。
構造が崩れるまで保持する
ブレークポイントはデバイスのプリセットではなく、コンテンツから導き出します。拡張レイアウトが実際に収まる限り保持し、タイトに崩すのは遅らせます。コンポーネントレベルの適応にはコンテナクエリを優先し、最初に最小サイズと最大サイズをテストしてください。
拡張とクリッピングに備える
翻訳された文字列は拡張し、短い文字列は比例してより拡張するため、1単語のボタンラベルは画面上で最もリスクの高いものです。テキストコンテナに固定の幅や高さを設定せず、行を折り返し可能にしてください。パーセンテージを予算化するのではなく、擬似ローカライゼーションと1つの代表的なロケールでテストしてください。
リサイズやスクロールによってクリッピングされる可能性のある場所に、重要なアクションを決して置かないでください。通常のフロー内、または製品に適した安定したクローム内に保持してください。
終了前に確認
| 誤り | 修正方法 |
|---|---|
ローカライズ可能なレイアウトでの margin-left / padding-right | margin-inline-start / padding-inline-end |
| コンテンツレイアウトのボタンがビューポート端に接触している | プロジェクトのマージン内に配置。意図的なプラットフォームクロームは維持 |
| デフォルト値だからという理由で768/1024でブレークポイントを設定 | コンテンツが実際に収まらなくなる場所でブレーク |
| 1言語に合わせてサイズ設定された固定幅テキストコンテナ | max-width と折り返し。擬似ローカライゼーションでテスト |
| ペインのクリップされやすい下部にあるプライマリアクション | スティッキー配置、または安全領域パディング付きの安定したクローム |
報告
重大度. HIGH は、サポートされているビューポートでコンテンツまたはアクションをブロックします。MEDIUM は、階層、読み取り順序、または適応性を損なうものです。LOW は、孤立した配置または間隔の調整です。
検証. ブラウザを使用しない場合：物理プロパティの代わりに論理プロパティ、サポートされているビューポートリストに対するコンテナおよびメディアクエリ、意図された読み取り順序に対するDOM順序。ブラウザを使用する場合：サポートされているすべての幅、200%ズーム、RTLミラー。実行できなかったすべてのチェックを「未検証」として報告してください。
形式. 調査結果を、違反する各原則の下にグループ化し、重大度順に並べ、原因ごとに1行、それが現れるすべての場所をリストして記述します：
| 重大度 | 場所 | 変更前 | 変更後 | 理由 |
|---|
場所 は path/to/file:line です。理由 は、原則とユーザーへの影響を示します。
HIGH が残っている場合は Block で終了し、そうでない場合は Approve で終了します。残りは表の中に作業として残します。調査していない範囲を Approve してはいけません。報告することがない場合は、「アクション可能なレイアウトの調査結果はありません」と述べ、検証を報告します。