better-layout

レイアウト

このスキルでは、グループ化、配置、間隔、レスポンシブな構造を設定します。さらに、サイズ変更、翻訳、RTL 用のミラーリングを行い、その構造を徹底的にテストします。

修正はすべて、プロジェクトのスタイリングシステムで行ってください。以下の数値は、プロジェクトに間隔スケールや密度システムがない場合にのみ適用します。それ以外の場合は、プロジェクトのトークンを使用してください。問題として指摘するには、はみ出し、重なり、ミラーリングの破綻、グループの誤読など、実際に示せる不具合が必要です。これらの基準値と異なる値であることだけを問題としてはいけません。

ヒット領域とフォーカスの動作は better-accessibility の対象です。角丸、影、アニメーションは better-ui の対象です。行の長さ、テキスト間隔、省略表示の仕組みは better-typography の対象です。言葉そのものは better-writing の対象です。

線ではなく余白でグループ化する

まず余白でグループ化し、次に背景の形状を使い、それでも余白だけでは構造を表せない場合に限り、最後の手段として区切り線を使います。グループ内の間隔の2倍以上を、グループ間の間隔として確保してください。そのため、グループ内が 8px なら、グループ間は 16px 以上にします。具体的な方法は grouping-and-alignment.md を参照してください。

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

すべてのインタラクティブ要素には、背景の形状、境界線、下線、またはツールバーのような一貫した配置領域を設けてください。隣接する静的テキストと同じスタイルのコントロールは、コントロールとして認識されません。grouping-and-alignment.md を参照してください。

共通の端に揃える

配置の基準となる端を少数に絞り、すべての要素をそれらに揃えてください。ネストのレベルごとに、プロジェクトの間隔単位を1つ使います。既定値としては 16px が適しています。grouping-and-alignment.md を参照してください。

ミラーリングするものには論理プロパティを使う

方向に依存するレイアウトは、先頭と末尾を基準に記述してください。margin-inline-start、padding-inline-end、inset-inline-start、text-align: start などを使います。物理的な左と右は、セーフエリアのインセットなど、物理的な位置関係にのみ使用してください。対応表と RTL の進行ルールは grouping-and-alignment.md に記載されています。

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

最も重要なコンテンツは上部と先頭側に配置します。行内では、内容を識別する情報を先頭に、メタデータやアクションを末尾に配置します。視覚的な順序は DOM の順序と一致させてください。そのため、order、row-reverse、グリッド配置を使って、コンテンツをソースの順序から移動させてはいけません。grouping-and-alignment.md を参照してください。

ビューごとに主要アクションは1つにする

各ビューに主要アクションを1つ設けてください。アクションが3つを超えたら、二次アクションはメニューの中に配置します。すべてをトップレベルに表示する長いビューよりも、さらに深い階層へ移動できる短いビューを優先してください。色で主要アクションを示す方法は better-colors の対象です。

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

画面外または折りたたまれたコンテンツには、すべて目に見える手がかりが必要です。プロジェクトで定められた手がかりを使うか、スクロール領域の端から次の項目を 16–32px 覗かせるか、開示コントロールを表示してください。

ユーザーが必要とする省略表示された値には、展開コントロール、詳細ビュー、またはキーボードでもアクセスできるツールチップなど、全文を確認する方法を用意してください。省略表示の仕組みは better-typography の対象です。具体的な方法は spacing-and-adaptivity.md を参照してください。

枠線のないコントロールには、より広い間隔を設ける

定められた密度システムがない場合は、隣接する枠線付きまたは塗りつぶしのコントロール間に、まず 12px の間隔を設けます。枠線のないテキストコントロールとアイコンコントロールの、見えているグリフ同士の間隔は 24px としてください。各ボタン自身のパディングも含めて数えます。ヒット領域が重ならず、コントロールを区別できる限り、コンパクトなレイアウトでは間隔を狭めてもかまいません。spacing-and-adaptivity.md を参照してください。

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

コンテンツレイアウトでは、全幅ボタンをレイアウトの余白内に収め、モバイルではインライン方向に 16px ほどの位置から始めます。端から端まで広がるアクションは、確立されたプラットフォームのクロームに沿い、セーフエリアを考慮し、システム UI と見分けられる場合に適しています。spacing-and-adaptivity.md を参照してください。

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

背景とメディアはビューポートの端まで広げます。コントロールとテキストは、レイアウトの余白とセーフエリア内に収めます。env(safe-area-inset-*) がゼロ以外になるのは、ビューポートの meta に viewport-fit=cover が含まれている場合のみです。

コンテンツは固定クロームの下をスクロールします。アンカーのターゲットやフォーカスされた要素が固定ヘッダーの下に隠れないよう、scroll-padding-block-start を固定ヘッダーの高さに設定します。spacing-and-adaptivity.md を参照してください。

構造は崩れるまで維持する

ブレークポイントはデバイスのプリセットではなく、コンテンツに合わせて決めます。拡張レイアウトが収まる間は維持し、収まらなくなったら折りたたみます。コンポーネント単位の適応にはコンテナクエリを優先し、まずサポート対象の最小サイズと最大サイズでテストします。spacing-and-adaptivity.md を参照してください。

拡大とクリッピングを考慮する

翻訳された文字列は長くなり、短い文字列ほど比例して大きく伸びるため、画面上で最もリスクが高いのは一語だけのボタンラベルです。テキストコンテナのサイズ指定には max-width と min-height を使い、固定の幅や高さは使わず、行の折り返しを許可します。疑似ローカライズと、ドイツ語などの長い文字列を使うロケールでテストしてください。

サイズ変更、ズーム、スクロールによってクリップされる位置に、重要なアクションを配置してはいけません。通常のフロー内、または安定したクローム内に配置します。spacing-and-adaptivity.md を参照してください。

仕上げる前に

検出パターン	修正
grid-template-columns: … 1fr、または長いテキストや幅の広いテーブルを含む flex の子要素がトラックからはみ出す	トラックに minmax(0, 1fr)、flex の子要素に min-width: 0 を設定する
width: 100vw	width: 100%。100vw はスクロールバーを含み、デスクトップでは横スクロールが発生します
高さ全体を占めるモバイルペインでの height: 100vh	100dvh。ブラウザーのツールバーやキーボードが下部を覆わないようにします
テキストを含むボックスに固定値を指定した height:	min-height、または overflow-y: auto を指定した max-height
再利用可能なコンポーネント内の @media (max-width: …)	コンポーネントの親に @container を設定する
幅が指定されていない flex アイテム、inline-block、または絶対配置要素に対する container-type: inline-size	明示的な幅を指定する。サイズ包含によって shrink-to-fit ボックスの幅がゼロになります
ビューポートの meta に viewport-fit=cover がない状態での env(safe-area-inset-*)	viewport-fit=cover を追加する。追加しない場合、インセットは 0 として解決されます
safe-area-inset-left または -right と組み合わせた inset-inline-* または *-inline-*	対応するインセットを指定した物理方向の left または right と、[dir="rtl"] のオーバーライド
左右反転された UI での float: left	float: inline-start
左右反転された UI での translateX または background-position: left	[dir="rtl"] のオーバーライド。どちらにも論理方向の形式はありません
scroll-padding-block-start が設定されていない固定ヘッダー	ヘッダーの高さに設定する

報告

重大度。 HIGH は、対応するビューポートでコンテンツまたは操作が妨げられる場合です。幅 320px またはズーム 200% でのクリッピングや重なりは常に HIGH です。また、完全な値を確認する方法がないままコンテンツが途中で切れている場合も該当します。スクロール領域の端より先にあるコンテンツや、表示される手がかりがないまま開示要素の背後に隠れているコンテンツも該当します。MEDIUM は、階層構造、読み取り順序、または適応性を損なう場合です。LOW は、局所的な配置や間隔の微調整に関するものです。

検証。 ブラウザーを使わない場合は、物理プロパティの代わりに論理プロパティが使われているか、コンテナークエリとメディアクエリが対応ビューポートの一覧に沿っているか、DOM の順序が視覚的な順序と一致しているかを確認します。ブラウザーを使う場合は、対応するすべての幅、320px、ズーム 200%、および RTL ミラー表示を確認します。実行できなかった確認項目はすべて Not verified と報告してください。

形式。 指摘事項は、違反している原則ごとに重大度の高い順にまとめ、根本原因ごとに 1 行で、その原因が見られるすべての箇所を記載します。

重大度	場所	変更前	変更後	理由

Location は path/to/file:line の形式です。Why には原則とユーザーへの影響を記載します。

HIGH が残っている場合は最後に Block、それ以外の場合は Approve と記載し、残りの項目は対応が必要な作業として表に残します。確認していない範囲について Approve としてはなりません。報告事項がない場合は、「対応が必要なレイアウト上の指摘事項はありません」と記載し、検証内容も報告します。