図と地
figure & ground

人間が複数の分離した領域をもつ対象を知覚する際、形(=図)と背景(=地)に分離して解釈される現象、およびその現象により分割された2つの領域を指す概念

日の丸を例に考えてみる

この図形は、大きく分けて2つの領域に分割することができる。

図形としての領域区分

本来であれば領域1領域2は同列のものだが、私たちは日の丸を見るとき「中央に赤い丸があり、その後ろに白い背景がある」という印象を受ける。

知覚上の領域区分

このとき、赤い丸が「図」、白い背景が「地」である。

なお、このとき知覚者の意識が向くのは赤い丸(図)であり、背景(地)にはほとんど意識が向かない

図地反転図形

図と地の概念が語られる際、「ルビンの壺」と呼ばれる図形がしばしば登場する。

ルビンの壺

図形の白い部分に注目すると、壺(杯)の形が見えてくる。このとき、白い部分が「図」、黒い部分が「地」である。

逆に、図形の黒い部分に注目すると、向かい合った2つの横顔が見えてくる。このとき、黒い部分が「図」、白い部分が「地」である。

ルビンの壺は、先に挙げた日の丸と異なり、注目する箇所によって図と地が入れ替わる可能性をもった「図地反転図形」である。

図として認識されやすい条件

図として認識されやすい条件のうち代表的なものは以下である。

より狭い部分(近さの法則)

幅が狭い部分が図として認識される。

出っ張りがある部分(凸面の法則)

左は白い部分、右は黒い部分が図として認識される。

左右対称の部分(シンメトリーの法則)

左は黒い部分、右は白い部分が図として認識される。

など。他にも様々なものがあるが、ここでは割愛する。

 

図と地の活用方法

図と地の概念はビジュアルデザインにおいて特に有益である。

ポイントは、「日の丸」の中の赤い丸のように、図として認識されやすい領域というものが存在することだ。図形の中の特定の領域を図として認識されやすいようにデザインすれば、そこに見る人の意識を向けることができる。

例えばウェブサイトをデザインする際、ユーザーに特に注目してもらいたい要素があれば、その要素が図として認識されやすいようにデザインする必要がある。

“セール中”の要素に注目を集めたい場合、右のUIのほうが適している。

図と地の法則を意識せずデザインすると「ユーザーの意識を向けたいはずの領域が地として認識されてしまう」「図地反転図形になる」等の問題が発生するので注意したい。

 

参考文献

メッツガー(1968)『視覚の法則』(盛永四郎訳)岩波書店.

道又爾・北崎充晃・大久保街亜・今井久登・山川恵子・黒沢学(2003)『認知心理学―知のアーキテクチャを探る』有斐閣アルマ.

この記事を書いた人:大本 あかね

UX DAYS TOKYO オーガナイザ/デジタルマーケティングコンサルタント

著書
ノンデザイナーでもわかる UX+理論で作るWebデザイン
Google Search Consoleの教科書

毎年春に行われているUX DAYS TOKYOは私自身の学びの場にもなっています。学んだ知識を実践し勉強会やブログなどでフィードバックしています。
UXは奥が深いので、みなさん一緒に勉強していきましょう!

スローガンは「早く学ぶより深く学ぶ」「本質のUXを突き止める」です。