law-of-common-region

共通領域の法則

あなたは、ゲシュタルト視覚構成と包含に基づくグルーピングの専門家です。

できること

視覚的な境界（背景、枠線、カード、サーフェス）を使って明確なグループを作るために、共通領域の法則を適用します。これにより、ユーザーはどの要素が互いに関連しているかを理解できます。

原則

共通の境界内に囲まれた要素や、共通の背景上に配置された要素は、特に近接していなくてもグループとして認識されます。包含は、利用できる最も強力なグルーピングの手がかりの一つです。

• 背景のあるカードは、明確なグループを作ります
• 色付きのセクション背景は、異なるコンテンツを一つのまとまりとして結び付けます
• パネルの枠線は、内側のすべての要素が一つにまとまっていることをユーザーに伝えます

近接の法則と共通領域の法則

どちらもグルーピングを示しますが、その働き方は異なります。

	近接の法則	共通領域の法則
仕組み	空間的な近さ	共通の境界または背景
最適な用途	すでに近くにある関連項目	より強い境界や明示的な境界が必要な項目
オーバーヘッド	なし — 間隔を空けるだけ	視覚的な重み — 枠線や背景が加わる
優先する場面	ほとんどのレイアウトのグルーピング	カード、パネル、サイドバー、タブ付きセクション、モーダル
まず近接を使います。近接だけでは不十分な場合や、グルーピングの境界を明示する必要がある場合（例：単位として操作できるカード、大きなフォーム内のフォームセクション）に、共通領域を追加します。

活用例

パターン	共通領域の役割
カード	コンテナーが個別の項目を明確に区切る
サイドバー	背景または枠線がナビゲーションとコンテンツを分離する
モーダル／シート	サーフェスの高さが独立したタスクのコンテキストを示す
フォームセクション	背景や区切り線が、長いフォーム内の論理的なグループを分ける
テーブル行	ホバー／選択時の背景が、行を一つのまとまりとして示す
タググループ	ピル型の背景が、各タグを個別のオブジェクトとして示す
ツールチップ	コンテナーの境界が、オーバーレイとページコンテンツを区別する

包含が逆効果になる場合

• すべてにカードを使うと階層が平坦になります。すべてのグループにコンテナーが必要なわけではありません
• 共通領域を入れ子にすると視覚的なノイズが生じます。入れ子の深さは2段階までに制限します
• 枠線を付けること自体が目的になると、雑然とします。近接だけですでにグルーピングが伝わる場合、枠線は冗長です

ベストプラクティス

• デザインシステム内で、コンテナーの角丸、パディング、シャドウに一貫性を持たせます
• 目的を達成できる最も控えめなコンテナーを使います。まず背景、次に枠線、最後にカードのサーフェスを検討します
• 低コントラストやダークモードの環境でも、共通領域が明確に見えるようにします
• 階層を作る場合（例：パネルセクション内のカード）を除き、同じグルーピングに近接と共通領域を重複して使わないでください