better-layout

構造を伝えるレイアウト

レイアウトは、ひとことも読まれる前から情報を伝えます。配置、間隔、整列だけで階層を示せるため、装飾を施すよりもゆとりある空間を確保するほうが効果的です。また、優れたレイアウトは厳しい条件にも耐えます。サイズを変更し、翻訳し、RTL 向けに反転しても、全体のまとまりが保たれる必要があります。UI コードの作成やレビューでは、これらの原則を適用し、修正にはプロジェクト独自の記法を使ってください。すでに使われているスタイリングシステムを使い、別のシステムを併用してはいけません。

タップ領域のサイズとフォーカスの動作については better-accessibility スキル、視覚的な仕上げ（角丸、影、アニメーション）については better-ui スキル、行の長さとテキストの間隔については better-typography スキルで扱います。

以下の数値は、密度や間隔のシステムが確立されていないインターフェース向けの出発点として扱ってください。タップ領域、ズーム、ローカライズ、ビューポートのストレステストでも使いやすさが保たれるなら、意図的に設計されたプラットフォームのクローム、コンパクトなプロ向けツール、プロジェクトのトークンをそのまま使用してください。

クイックリファレンス

カテゴリー	使用する場面
グループ化と整列	空間と区切り線の使い分け、整列させる辺、論理プロパティ、重要度に基づく順序
間隔と適応性	ターゲット間の間隔、レイアウトの余白、段階的開示、画面幅いっぱいのコンテンツ、ブレークポイント、i18n によるテキストの増加
レビューの出力形式	重要度の尺度、指摘事項の表、検証、判定

基本原則

1. 線ではなく、空間でグループ化する

余白をグループ化の主な手段とし、背景の形状を次に使います。区切り線は最後の手段とし、余白だけでは構造を示せない場合に限って使用してください。グループ間の間隔はグループ内の間隔の少なくとも 2 倍にします（グループ内が 8px なら、グループ間は 16px 以上）。そうしないと、グループ分けがノイズのように見えてしまいます。

2. コントロールとコンテンツを区別する

インタラクティブ要素は、背景の形状、境界線、一貫した配置領域などを使い、操作できることが見た目から伝わるようにしてください。コントロールを、隣接する静的なテキストと同じ見た目にしてはいけません。

3. 共通の辺にそろえる

整列させる辺を決め、そのルールを一貫して適用してください。そろわない辺はすべてノイズとして認識されます。階層をひとつ下げるごとに、プロジェクトの間隔単位をひとつ使います（デフォルトとしては 16px が適切です）。方向に応じて変わるレイアウトには論理プロパティ（padding-inline-start、margin-inline-end）を使い、物理的な左／右は、本当に物理的な位置が重要な場合に限って使用してください。

4. 重要度に応じて順序を決める

最も重要なコンテンツは上部と進行方向の端に配置し、読み順は上から下へ、進行方向の端から反対側の端へと流れるようにします。左／右ではなく、進行方向の端／反対側の端で考えてください。

5. 隠れたコンテンツの存在を示す

段階的開示では、視覚的な手がかりが必要です。プロジェクトで確立された手がかりを使い、それがない場合は、次の項目がスクロール領域の端から 16–32px 見えるようにするか、開示コントロールを表示してください。手がかりなしで隠されたコンテンツは、存在しないも同然です。

6. ターゲットの間にゆとりを持たせる

密度のシステムが確立されていない場合、隣接する、境界線付きまたは塗りつぶしのコントロール間には 12px、境界線のないテキストのみ・アイコンのみのコントロールの周囲には 24px の余白を設けることから始めてください。better-accessibility のタップ領域が重ならず、コントロールが見た目で区別できるなら、コンパクトなレイアウトでは間隔を狭めてもかまいません。

7. ボタンを端から内側に配置する

コンテンツのレイアウトでは、全幅ボタンもレイアウトの余白の内側に配置してください（モバイルでは、インライン方向の端から 16px を目安にします）。また、角丸が見えるようにしてください。画面の端から端まで広がるアクションは、確立されたプラットフォームやアプリケーションのクロームに意図的に沿い、セーフエリアに配慮し、システム UI と区別できる場合には使用できます。

8. コンテンツは端まで広げ、コントロールは内側に配置する

背景やメディアはビューポートの端まで広げ、コントロールやテキストはレイアウトの余白とセーフエリア（env(safe-area-inset-*)）の内側に配置してください。固定表示されるクロームはコンテンツ層の上に浮かせ、コンテンツをせき止めないようにします。

9. レイアウトが破綻するまで構造を維持する

ブレークポイントはデバイスのプリセットではなく、コンテンツに基づいて決めます。実際に収まる限り拡張レイアウトを維持し、折りたたみはできるだけ遅らせます。コンポーネント単位の適応には、コンテナークエリを優先してください。まず最小サイズと最大サイズでテストします。

10. 拡大とクリッピングを想定する

一律の割合に頼らず、文字列が大幅に増える場合や言語によって増える場合を想定して計画します。テキストコンテナーに固定の幅や高さを設定せず、行の折り返しを許可してください。サイズ変更やスクロールで重要なアクションがクリッピングされる場所には配置しないでください。製品に適した通常のフロー内、または安定したクローム内でアクセス可能な状態に保ちます。

よくある間違い

間違い	修正方法
余白で済むところに区切り線を入れる	線を削除し、グループ間の余白を2倍にします
ローカライズ可能なレイアウトで margin-left / padding-right を使う	margin-inline-start / padding-inline-end を使います
コンテンツレイアウトのボタンが誤ってビューポートに接している	プロジェクトのマージン内に配置し、意図的なプラットフォームクロームは維持します
完全に表示されているように見えるカルーセル／スクローラー	次の項目が端から 16–32px はみ出して見えるようにします
隣接するコントロールが一体化する、または拡張されたヒット領域が重なる	プロジェクトのスケールに沿って間隔を広げます。最初の目安として 12px／24px を使います
既定値だからといって 768/1024 にブレークポイントを設定する	コンテンツが実際に収まらなくなる位置で区切ります
1つの言語に合わせて固定幅のテキストコンテナーを設定する	max-width と折り返しを使い、疑似ローカライズと代表的なロケールでテストします
ペインのクリッピングされやすい下部にプライマリーアクションを配置する	スティッキー配置、またはセーフエリアのパディングを備えた安定したクロームを使います

レポート

単独のレイアウトレビューは、確認済みのすべての指摘事項が、検証と判定を含め、review-output.md に記載された形式で報告されると完了です。better-interface の場合は、その形式が優先されます。