#421
心理学・認知バイアス
#421図と地の関係
図と地の関係
別名・表記:Figure Ground Relationship
UIXHERO Definition
人間は視覚情報を見た時、それを「意味のある対象（図）」と「背景（地）」に瞬時に分離して認識する。ゲシュタルト心理学の基本原理。
概要
ゲシュタルト心理学の原理の一つ。人間は視野に入ったものを、関心を向ける対象である「図（Figure）」と、その背景となる「地（Ground）」に瞬時に切り分けて認識する。 例えば、紙に書かれた文字を読むとき、文字が「図」で紙の余白が「地」になる。「ルビンの壺」のように、図と地が反転する錯視も有名だが、UIにおいては「何が主役か」を明確に区別させることが重要。
図と地は固定されたものではなく、知覚は文脈に依存する。
UXでの活用
- モーダルダイアログ: 背景を暗く（ディムアウト）し、ぼかすことで、手前のウィンドウを明確な「図」として認識させ、ユーザーの注意を一点に集中させる。
- ドロップシャドウ（影）: カード型UIやボタンに影をつけることで、背景から浮き上がっているように見せ、操作可能な要素であることを伝える。
- ホワイトスペースの活用: 重要なコンテンツの周囲に十分な余白（地）を設けることで、コンテンツ（図）の視認性と注目度を高める。
💡 使いどころ
モーダルウィンドウやポップアップの表示時。背景を暗くする（オーバーレイ）ことで、手前の要素（図）を際立たせる。
⚠️ 注意点・誤用
図と地の区別がつかないデザイン（コントラスト不足）は、ユーザーを混乱させる。どちらが主役かを明確にする。
具体例
- ライトボックス（画像をクリックすると拡大され、背景が暗転する）
- ドロップシャドウ（影をつけることで、要素が浮き上がって見える）
出典・参考文献:
- Rubin, E. (1915). Synsoplevede Figurer: Studier i psykologisk Analyse. Copenhagen: Gyldendal.
- Wertheimer, M. (1923). Laws of organization in perceptual forms. Psychologische Forschung, 4, 301–350.
- Palmer, S. E. (1999). Vision Science: Photons to Phenomenology. MIT Press.