レイアウト
位置、間隔、整列は、単語が読まれる前に階層を伝えます。このスキルはその構造を構築し、ストレステストを実施します。サイズ変更、翻訳、RTL（右から左）のミラーリングを行います。
すべての修正は、プロジェクトのスタイリングシステムで記述してください。以下の数値は、確立された密度システムがないインターフェースのための出発点であり、該当するものがある場合は、見慣れた代替値ではなく、そのまま使用してください。意図的なプラットフォームクローム、コンパクトなプロフェッショナルツール、プロジェクトトークンは、ストレステストに合格する限り維持してください。
ヒット領域とフォーカス動作は hr-better-accessibility に属します。半径、影、およびアニメーションはこのスキルの範囲外です。行の長さとテキストの間隔は hr-better-typography に属します。
スペースでグループ化し、線は使わない
まずスペースでグループ化し、次に背景形状、最後に区切り線を使用し、線はスペースだけでは構造を表現できない場合にのみ使用します。グループ間のギャップは、グループ内のギャップの少なくとも2倍（グループ内 8px からグループ間 16px 以上）でなければならず、そうでないとグループ化がノイズとして認識されます。整列エッジと重要度の順序については、grouping-and-alignment.md を参照してください。
コントロールをコンテンツから区別する
すべてのインタラクティブ要素に、背景形状、境界線、または一貫した配置ゾーンを設定してください。隣接する静的テキストと同じようにスタイル設定されたコントロールは、コントロールとして認識されません。
共有エッジに整列する
整列エッジを選択し、それに従ってください。外れたエッジはすべてノイズとして認識されます。従属関係のレベルごとに1つのプロジェクト間隔ステップを使用します。16px が便利なデフォルトです。
方向に依存するレイアウトには論理プロパティを使用します：padding-inline-start、margin-inline-end。物理的な left と right は、真に物理的なジオメトリのために予約します。
重要度で順序付ける
最も重要なコンテンツは、上部および先頭側（leading edge）に配置します。読み取り順序は、上から下、先頭から末尾（trailing）へと流れます。left と right ではなく、先頭（leading）と末尾（trailing）で考えてください。
隠されたコンテンツをヒントで示す
プログレッシブディスクロージャーには、可視のアフォーダンスが必要です。プロジェクトで確立されたキューを使用するか、次のアイテムをスクロールエッジから 16–32px はみ出させて表示するか、開示コントロールを表示します。何の手がかりもなく隠されたコンテンツは、存在しないも同然です。
ターゲット間のゆとり
確立された密度システムがない場合、隣接する境界線または塗りつぶしのあるコントロールの間は 12px、境界線のないテキストのみ、アイコンのみのコントロールの周囲は 24px から始めてください。コンパクトなレイアウトでは、hr-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 と折り返し；擬似ローカリゼーションでテストする |
| クリッピングされやすいペインの下部にあるプライマリアクション | スティッキーポジショニング、または安全領域パディング付きの安定したクローム |
モバイルでの 100vh アプリシェルまたはヒーロー | ブラウザのクロームを追跡するシェルには 100dvh、最初の画面には 100svh |
| 長いテキストが行の末尾のアクションを画面外に押し出したり、アバターをつぶしたりする | テキストカラムには min-width: 0、固定サイズのアイテムには flex-shrink: 0 |
報告
重大度。 HIGH はサポート対象のビューポートでコンテンツまたはアクションをブロックします。MEDIUM は階層、読み取り順序、または適応性を損ないます。LOW は孤立した整列または間隔の調整です。
検証。 ブラウザなしの場合：物理プロパティの代わりに論理プロパティが使用されているか、サポート対象のビューポートリストに対するコンテナクエリとメディアクエリ、および意図された読み取り順序に対するDOM順序を確認します。ブラウザありの場合：サポート対象のすべての幅、200% ズーム、RTLミラーで確認します。実行できなかった確認はすべて「未検証」として報告します。
形式。 違反する原則ごとに、重大度順に並べて所見をグループ化します。根本原因ごとに1行、それが現れるすべての場所をリストします：
| 重大度 | 場所 | 修正前 | 修正後 | 理由 |
|---|
場所 は path/to/file:line です。理由 は原則とユーザーへの影響を示します。
HIGH が1つでも残っている場合は Block を報告し、それ以外の場合は Approve を報告して、残りの作業はテーブルに残します。検査していない範囲に対して Approve を決して行わないでください。報告するものがない場合は、「アクション可能なレイアウト所見なし」と述べ、検証を報告します。