図と地の法則(面積の法則)

認知-認識[状況理解・把握]

人はオブジェクトと背景を分離し、
主となるオブジェクトの「形」を知覚する。

人は二つのオブジェクトを持つ領域情報は、同時に知覚することができないため、それぞれを分離して、一方のオブジェクトは「図」として浮き出て見え、もう一方は「背景」として退いて見える。
一度、意味のある情報として「図」を知覚すると、その情報は図として定着し、背景と認識することはない。

図として認識されやすいオブジェクトの形にはいくつかのパターンがある。

●面積が狭い方のオブジェクト
●形として閉じられた方のオブジェクト
●同一の形がならぶ場合は水平・垂直方向のオブジェクト
●平行に等間隔でならぶオブジェクト
●凸部を持つオブジェクト
●上下にならぶ同型は下にあるオブジェクト
●対象性のあるオブジェクト

また、図と地には主従関係があり、

●図には形や輪郭があるが、背景にはない
●図は手前に浮き出て見えるが、背景は退いて見える。
●図と地は反転することがある

ちなみに、デザインにおいて、特定のオブジェクトを「図」として認識されやすいようにデザインすれば、ユーザーの視線を集めることができる。
図と地を意識せずにデザインした場合、「ユーザーの意識を向けたいはずの領域が背景として認識されてしまう等の問題が発生する場合がある。

具体例

  • INAXやFedExのように二つの意味を持たせた企業ロゴ
  • 錯視などを活用したエッシャーに代表される隠し絵・だまし絵
  • 帯となるデザインの上に配置するボタンデザイン

提唱者・発祥エピソード

1912年、デンマークの心理学者エドガー・J・ルビン氏が考案した「ルビンの壺」という反転図形において、視野に二つのオブジェクトが存在するとき、一方の形が明瞭に浮き上がって知覚された時、他方の形は背景として退いて知覚される。
このように、前者を「図」といい、背景を「地」ということから、反転を示す「図と地」として有名になった。

参考文献・参考サイト

図と地
https://maenoshinn.com/figure-and-ground/

スクールカウンセラー養成所

図と地
https://uxdaystokyo.com/articles/glossary/figure-ground/

UX TIMES

図と地
https://kotobank.jp/word/図と地-542555

コトバンク

反転図形・多義図形(ルビンの壺など)
https://it-counselor.net/psychology-terms/reversible-figure

This is Media

図と地
https://dessin.art-map.net/technique/level19/01.html

デッサンと言う礎

企業内セミナーや社員のUI/UXスキルアップ講座の開催を
ご検討の企業様からのお問い合わせはこちら

香西 睦

香西 睦

論理的で客観的なデザイン理論と、ユーザーの視点に立った情報デザインは、Webサイトの課題を見極め、わかりやすいインタフェースを実現!

同じテーマのおすすめ記事

人気コンテンツ

  1. 1

    短期記憶に関するミラーの法則(マジカルナンバー)

  2. 2

    UIデザイン・認知科学講座:01|UIデザインが必ずわかりやすくなる心理テクニック

  3. 3

    非注意性盲目(ミスディレクション)

  4. 4

    05:ユーザー視点で作る高い説得力を持つUI設計&提案書

  5. 5

    意味記憶

最近の記事 おすすめ記事 特集記事
  1. シャルパンティエ効果

  2. [11月4日]福岡DAY2セット|直感的で使いやすいUIデザインが作れる!

  3. [11月3日]福岡DAY1セット|直感的でわかりやすいUIデザインが作れる!

  4. 手続き記憶

  5. エピソード記憶

  1. 近接の法則

  2. 類同の法則(類似性の法則)

  3. シグニファイア(知覚されたアフォーダンス)

  4. 画像優位性効果

  5. 選択的注意(カクテルパーティー効果)

  1. あらゆる人に直感的でなければいけない、エラー表示と使えないヘルプ

  2. わざわざ入力を面倒くさくしているドロップダウンリスト

  3. ユーザーの「知りたい度」によって変わる、「読み方」と「読む範囲」

  4. カッコいいだけなのはデザインとは言わない。

  5. UIデザインはデザインではなく統計だ!

香西 睦

香西 睦

「だから、そのデザインはダメなんだ。(エムディエヌコーポレーション刊) 」の著者。 論理的で客観的なデザイン理論とユーザー視点の構造設計・情報デザインを用いて、Webサイトの課題を見極め、Webサイトの性能をアップさせる利用者の目線に立ったわかりやすいインタフェースの設計で多くの企業様のお手伝いをしてきました!

TOP