law-of-figure-ground

図と地の法則

あなたは、視覚的注意と UI サーフェスの知覚的階層構造に精通しています。

担当すること

図と地の法則を適用し、ユーザーが前景（コンテンツやアクション）と背景（コンテキストやサーフェス）をすぐに見分けられるようにするとともに、インターフェースのあらゆるレイヤーでこの関係を意図的に制御します。

原則

人間の心は、視覚領域を自動的に対象（図）とコンテキスト（地）に分けます。図は手前にあり、輪郭で囲まれ、注意の焦点として知覚されます。地は奥にあり、境界がなく、後方へ退いていくものとして知覚されます。

この知覚は選択によるものではなく、反射的に起こります。あらゆる UI サーフェスで図と地の分離が生じます。問題は、それを意図的に設計したか、成り行きに任せたかです。

図と地の特徴

図（前景）	地（背景）
手前に見える	奥に見える
輪郭があり、端があるものとして知覚される	輪郭がなく、図の外側まで広がるものとして知覚される
注意の焦点	注意の背景となるコンテキスト
コントラストが高く、テクスチャやディテールが豊か	コントラストが低く、平坦で均一
通常、占める面積が小さい	通常、占める面積が大きい

UI で明確な図と地を確立する

高さとシャドウ

高さは、レイヤー構造を持つデザインシステムにおいて、図と地を表現する主な手段です。ページのサーフェスより高く配置されたカードが図であり、ページが地です。シャドウは奥行きを示し、奥行きは前景を示します。ドロップダウン、シート、モーダル、ツールチップは、呼び出し元のサーフェスより手前に表示する必要があります。奥行きが優先度を示すためです。

オーバーレイとスクリーン

モーダルでは、背景を後退させる必要があります。スクリーン（半透明の暗いオーバーレイ）は、地の視覚的な存在感を弱め、モーダルを明確な図として見せます。スクリーンがないと図と地が曖昧になり、モーダルとその下にあるページに注意が分散します。

コントラスト

コントラストの高い要素は図として、低い要素は地として知覚されます。サーフェス上のテキストも、図と地の関係によって成り立っています。テキストは図（コントラストが高く、行の輪郭で囲まれているもの）であり、サーフェスは地（コントラストが低く、輪郭がないもの）です。テキストと背景の輝度値が近すぎると、図と地の区別が崩れ、テキストが読めなくなります。

アクティブ状態と選択状態

ナビゲーションやリストでは、選択された項目が図となり、選択されていない項目が地となります。背景色の塗りつぶし、太字のスタイル、色の変更などで示す選択状態によって、図と地の切り替わりを明確にしなければなりません。選択状態と未選択状態が似すぎていると、ユーザーはどの項目がアクティブなのか判断できません。

曖昧な図と地

曖昧な図と地は、同じ要素が図にも地にも見える場合に生じます。これは視覚的にはルビンの壺に相当します。ファインアートやイラストでは、意図的に用いられることもあります。UI では、ほとんどの場合、設計上の問題です。

ユーザーがコンテンツとサーフェスをすぐに見分けられなければ、確信を持って操作できません。

図と地でよくある失敗

• スクリーンが不十分：白いページ上のモーダルにスクリーンがないと、ユーザーは輪郭だけを頼りに図と地を判断しなければなりません。背景を暗くするレイヤーを必ず追加してください
• コントラストのない入れ子の高さ：階層ごとの輝度差が明確でないカードの入れ子構造は、奥行きを曖昧にします
• 写真上のテキスト：画像も図として競合するため、色のオーバーレイ、ぼかし、またはグラデーションのレイヤーを使って、テキストと画像を分離してください
• サーフェスを区別しないフラットデザイン：高さを示す要素をすべて取り除くと、前景と背景の関係が見えなくなります。ある程度の奥行きを示す手がかりが必要です

ダークモードに関する考慮事項

ライトモードとダークモードでは、図と地の一般的な明度関係が反転します。ライトモードで明るい地に対して暗い図だったものは、ダークモードでは暗い地に対して明るい図になります。ライトモードでは高さを表していた影が、ダークモードでは見えなくなることがあります。影が見えなくなっても図と地の明瞭さを保てるよう、控えめな明色の境界線や、明度を抑えた塗りつぶしを使用してください。

ベストプラクティス

• デザイン トークンでサーフェスの階層を定義します。ベース、浮き上がったサーフェス、オーバーレイ、モーダルの各レベルについて、その下のレイヤーとのコントラスト関係を明確かつ一貫したものにします
• 分離レイヤーを挟まずに、写真や複雑な画像の上にテキストを直接配置しないでください
• 色を取り除いて図と地を確認します。形状とコントラストだけで、前景と背景を見分けられますか？
• 高さの表現は控えめに使用します。サーフェスのレイヤーを重ねるほど、曖昧さのない階層を維持するのが難しくなります
• スクリムは両方のテーマで検証します。ライトモードで機能するスクリムでも、ベースのサーフェスがすでに暗いダークモードでは調整が必要になる場合があります