この記事の要点（UIXHERO視点） UIXHEROでは、図と地の関係を「主役（操作対象）と舞台（背景）の照明設計」と捉える。 本記事では、影・ぼかし・余白を駆使して、ユーザーが今見るべき「図」を背景から明確に切り離すコントラストの技法を整理する。
図と地の関係とは？
「ルビンの壺」という有名な絵があります。 白い部分に注目すると「壺」に見え、黒い部分に注目すると「向き合う2人の顔」に見えます。 このように、私たちは視野の中のどこをメイン（図：Figure）とし、どこをバック（地：Ground）とするかを切り分けますが、その境界が曖昧だと認知に混乱が生じます。 UIデザインにおいては、「何が操作できる要素で、何が背景なのか」を明確に区別させることが不可欠です。
UXデザインでの活用事例
1. ドロップシャドウと奥行き（Elevation）
マテリアルデザインなどで見られる「影」は、オブジェクトを背景から浮き上がらせ、「これは操作可能なカードである（図）」ことを直感的に伝えます。フラットデザインでも、適度な影や枠線がないとクリック可能かどうかが分かりづらくなります。
2. モーダルとオーバーレイ
重要な確認画面（モーダル）を表示する際、背景を半透明の黒（バックドロップ）で覆うのは、強制的に背景を「地」に落とし込み、モーダルを「図」として際立たせるためです。
3. ホワイトスペース
たっぷりと余白（背景）を取ることで、中央にあるコンテンツ（図）の輪郭が際立ち、注目を集めやすくなります。詰め込みすぎたレイアウトは「図と地」の分離を困難にします。
実装例: どっちが主役？
図（Figure）と地（Ground）の境界が曖昧なUIと、明確なUI。 情報の見やすさと、操作の迷いにどう影響するか比較するデモです。
倫理的配慮 (Ethical Considerations)
- 視認性の低下: デザイン性を優先して背景画像の上にテキストを直接載せるなど、図と地のコントラスト比が低い配色にすると、視覚障害者や高齢者にとって全く読めない（図として認識できない）ものになります。WCAGのコントラスト基準を守るべきです。
