画面設計の指針

コンポーネントを組み合わせて画面を作るときの、視覚的階層と複雑さの判断基準を定める

本ページは、個々のコンポーネントの規約や色・余白などの値を前提に、どう並べ、どこまで一度に見せるかという画面合成の観点を補う。

扱う観点は 2 つである。ひとつは見た目の階層（デザインの 4 原則）、もうひとつは選択と複雑さ（ヒックの法則・段階的開示）である。いずれも機械的に強制する規約ではなく、レビューで判断を揃えるための拠り所とする。

視覚的階層（4 原則の運用）

デザインの 4 原則は、近接・整列・反復・コントラストの 4 つである。本システムでは次のように運用する。

反復は、semantic トークン・cva のバリアント・className を公開しない方針によって、すでに仕組みとして担保している。新しい見た目が要るときはワンオフのスタイルを作らず、バリアントを追加する。本ページでは追加の規定を持たない。

文字サイズトークンは見た目ではなく役割で選ぶ。判断に迷ったときの既定を次のとおりとする。

役割と文字スケールの対応を固定するのは、画面をまたいでも階層の見え方が揃うようにするためである。

要素間の余白は、要素どうしの関係の強さを表す。関連が強いものほど狭く、グループ間は広く、セクション間はさらに広くする。余白は末端のコンポーネントに持たせず、Stack や Grid の gap で与える。判断に迷ったときの既定を次のとおりとする。

近接で十分に区切れる場合は、区切り線（Divider）を足しすぎない。

既定は左揃えとする。本文の長文は中央揃えにしない。コンテンツ幅は Container のバリアントで選ぶ。表の数値列は右揃えにする（DataTable は対応済みである）。1 つの画面で揃える軸を増やしすぎない。

ヒックの法則は、選択肢が増えるほど意思決定にかかる時間が長くなるという経験則である。段階的開示は、重要で頻繁に使うものを先に見せ、二次的なものは要求されたときに開く手法であり、ヒックの法則を緩和する代表的な手段である。本システムでは次のように運用する。

1 つの画面の主要アクション（主 CTA）は原則 1 つにする。残りは控えめなバリアント（secondary／ghost／outline）で従属させる。
選択肢が多いときは、数を減らせないなら分類・グループ化・検索で実際に比較する選択肢を小さくする。
既定値や推奨を用意し、ゼロから選ばせない（プレースホルダや既定選択など）。

なお「7 ± 2」のような数値はあくまで目安であり、絶対値で縛らない。

二次的・上級者向け・まれにしか使わない情報や操作は、既定では隠し、要求されたときに開く。手段は Tabs・Dialog・Tooltip・ネイティブの details、必要になれば Accordion とする。
頻繁に使うもの・必須のもの・重要なものは隠さない。段階的開示を理由に必須情報を埋めない。重要な情報をツールチップだけに置かないことはアフォーダンスに従う。
開閉のキーボード操作・フォーカス管理・aria-* は自前で実装せず、ヘッドレスライブラリに委ねる。

公開アーカイブは、検索エンジン・JavaScript 無効の環境・支援技術からも読まれる。重要な本文を JavaScript 依存の開示の内側だけに閉じ込めない。段階的開示は補助にとどめ、内容そのものは初期 DOM に含める。

画面を組んだら、/dev/components と実画面で、視覚的階層（見出し・余白・整列）と、選択肢の数・隠した情報への到達性を目視で確認する。モバイル・タブレット・PC の各幅で破綻しないことはレスポンシブに従って確かめる。