視覚的グルーピング

関連する要素を余白・矩形でまとめ、ユーザーが情報の塊を直感的に読み取れるようにする手法。ゲシュタルト心理学の近接の法則・共通領域の法則を設計に活かす。

目的

関連する項目をひとかたまりとして認識させ、スキャン速度を上げる
無関係な項目が混在することによる混乱を防ぐ
画面の情報階層を視覚だけで伝える

原則

階層を深くしない: グルーピングは最大 2 段階まで。入れ子が深いほど認知負荷が増す。
一貫性を保つ: 同じ役割のグルーピングには同じ手法を使う。セクション区切りは矩形、などルールを統一する。
グルーピングと余白を両立させる: 矩形を使っても、内側の余白が詰まっていると窮屈に見える。

フォームフィールドでの余白指定

フォーム内の余白は 3 段階で使い分ける。ラベルと入力欄の間 < 同一グループ内のフィールド間 < グループ間、の順に広くすることで、視覚的なかたまりが自然に伝わる。

フォームフィールドの余白指定: ラベルと入力欄の間 8px、フィールド間（横）16px、グループ間（縦）24px

ラベルと入力欄の間: 8px（--spacing-xxs）
同一グループ内フィールド間（横）: 16px（--spacing-s）
グループ間（縦）: 24px（--spacing-m）

矩形（共通領域の法則）

Card コンポーネントや背景色の変化でグループを囲む。区切りの意図が明確で、独立したブロックとして見せたい場合に使う。

AI機能設定画面の実例。「通話録音」「対面録音」「その他」ごとにチェックボックス群が背景色の矩形で囲まれ、独立したグループとして視認できる

カード内にさらにカードを入れると階層が深くなりすぎる。入れ子は 1 段まで
背景色での区別は --background-background と --secondary-white の組み合わせを使う
背景色で囲んだグレー領域の内側余白（Padding）は上下左右とも 16px（--spacing-xs）で統一する

セクション

ページ内の大きなトピックの区切り。見出し + 余白でグループを表し、Card などの矩形は使わない。レイヤーケーキの「層」と対応する。

セクションの実画面例。見出しとアクションボタンを余白のみで配置し、その下に説明文とフォーム項目を含む白いCardを続ける

セクション間の余白は --spacing-xl 以上
見出し直下のコンテンツとの余白は --spacing-s
見出しは h2 または h3 を階層に合わせて使う