認知科学

ものの位置によって理解が変わる|「図と地の関係」効果とは?

この記事から得られること

この記事では、人間の認知的な特性の1つである「図と地の関係」の概要と、UIデザインへの活用方法について学ぶことができます。

画面レイアウトにおける「安定さ」「不安定さ」の考え方について学ぶことができますので、よろしければ最後までご確認ください。

なお、この記事は「約2〜4分」で読める内容となっています。

「図と地の関係」とは?

人は認知的な特性上、画面上の要素を「図」もしくは「地」のどちらかに区別して認識します。

「図」「焦点を合わせる対象」として扱い、「地」「その他の視界に入ってくるエリア(つまり背景のようなもの)」というかたちで区別して認識されます。

上の図の場合、人は図の中央にある「島」「図」として扱い、「空の部分」「地」として扱う傾向があります。

それでは、「図」と「地」の特徴についてそれぞれ解説します。

画面上の要素を「図」にするには?

まず「図」「明確な形」を持ち、「明確な領域」を持つ必要があります。

また地平線(水平線)よりも「下」にある要素のほうが「図」として認識されやすい、という特徴があります。

さらに、要素が「画面内の上部」よりも「画面内の下部」にあるほうが、「図」として認識されやすい傾向があります。

上の図では、図の下に位置する「架け橋」「図」として認識されやすい傾向があります。

なお「図」は「より近くに見える」という傾向もあります。

画面上の要素「地」の特徴とは?

「地」ははっきりした形がなく、「図」の後ろにも続いているように描かれる傾向があります。

また「明確な領域を持たず」、遠く離れて見える傾向があります。

さらに、地平線(水平線)より上にある要素のほうが「地」として認識されやすく、「画面内の上部」にある要素ほど「地」として認識されやすい傾向があります。

なお、この認知科学的な「地」とは、必ずしも「地面」であるとは限りません。

「図と地の関係」が明確だと、ユーザーにとって何がうれしい?

「図」と「地」が明確ですと、安定した見た目となり、「見ている人が安心する」効果があります。

そしてユーザーは「地」よりも「図」に集中することができ、「図」を記憶しやすくなります。

例えば、上の図ですと「図」となっている「架け橋」を記憶しやすくなります。

逆に「図と地の関係」が不安定ですと、ユーザーに異なった解釈をされてしまう懸念があります。

そのため、ユーザーの「認知的な混乱」を最小限にするためにも、画面上のそれぞれの要素に対して「図と地の関係」を意識して画面レイアウトを検討することをおすすめします。

UIデザインにはどのように活用すればよい?

グラフィックデザインよりの話にはなりますが、画面上にロゴ配置する場合は「地」の下に配置しますと、「図」として扱われ、印象に残りやすいという効果があります。

上の図は意図的に地平線を用意していますが、地平線よりも下にロゴを配置したほうが「図」として認知され、ユーザーの印象には残りやすいです。

UIデザインにおいては、画面レイアウトに対して一度「図」と「地」の関係として見ることによって、ユーザーに集中してほしい要素が「図」になっているか、確認してみることをおすすめします。

まとめ

繰り返しとはなりますが、人は認知的な特性上、画面上の要素を「図」もしくは「地」のどちらかに区別して認識します。

「図」は「焦点を合わせる対象」として扱い、「地」は「その他のエリア」というかたちで区別して認識されます。

「図」と「地」が明確ですと、安定した見た目となり「見ている人が安心する」効果があります。

そしてユーザーは「地」よりも「図」に集中することができ、「図」を記憶しやすくなります。

UIのレイアウトを検討する際は、この「図と地の関係」を意識した上でレイアウトしますと、ユーザーが自然に認識できるレイアウトにすることができますので、ぜひためしてみてください。

最後までお読みいただきありがとうございます。
今回の記事は以上です。

この内容がみなさんの認知科学、UIデザインの勉強になりましたらうれしいです。
引き続き、認知科学、UIデザインの勉強を一緒にしていきましょう。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA