人間がゲシュタルト(形態)を見る際に、全体像から見て近くに並んでいるものを無意識にグループとして理解したり、閉じているものをセットで認識する傾向を言う。「ゲシュタルト」はドイツ語で「形態」を意味する。
1910年にチェコ出身の心理学者 Max Wertheimer らを中心に仮現運動というアニメーションの研究が始まる。それを基に1923年「ゲシュタルト原則」の基礎となる6原則(近接・類同・連続・閉合・共通運命・良い形)が発表された。
2つの思考モードとの関係
人間の脳には「直感的で速い思考(システム1)」と「論理的で遅い思考(システム2)」がある。(参照:2つの思考モード)
「ゲシュタルト原則」は形を全体像から直感的に捉えるということで、システム1に関連している。
グループと認識する要因は10以上ある
ゲシュタルト原則は、無意識に見てしまう「見方」に関するさまざまな要因のことで、グループと認識される法則がいくつも存在する。グループと認識される要因をまとめて「群化の法則」「グループ化の法則 」(principles of grouping / Gestalt laws of grouping)とも呼ばれる。
グループ化に関する法則は「近接」、「類同」、「連続」、「閉合」、「共通運命」、「面積」、「対称性」、「図と地」、「過去の経験」、「良い形」など、10以上の法則があり、近年でも発見され続けている。
・近接(Proximity)
https://uxdaystokyo.com/articles/glossary/Proximity/
距離が近いものは、それぞれの要素が異なっていても「関係があるもの」として認識する。
以下は色も形も違う図形が並んでいるが、左右2つのグループがあるものとして受け取られる。
UIでも近接を利用して意図的に余白を作ると、まとまりを認識し見やすくできる。
左右のフォームを比較してみると、右のフォームより左のフォームの方がそれぞれの要素をグループとして認識するため、見やすくなっている。
・類同(Similarity)
色や形、向きが同じものは、それぞれの要素が異なっていても「関係があるもの」として認識する。
以下は並び順はバラバラであるが、赤・青・緑それぞれの三角形のグループとして受け取ることができる。
UX DAYS TOKYOのカンファレンスページでは、写真・氏名・肩書を同サイズで並べることで、すべての要素が同じ「スピーカー」というグループと分かりやすくしている。
・連続(Continuity/Good Continuity)
連続しているものは1つのまとまりとして認識する。「良い連続の法則」とも言われる。
以下①の図からは「連続」の法則に従い、②もしくは③のつながりを認識する。
④や⑤を直感的に認識することはない。
ボタンの並びを右よりも左のレイアウトにすると、視線を自然に次のボタンへと移すことができる。
・閉合(Closure)
https://uxdaystokyo.com/articles/glossary/closure-gestalt-principles/
閉じた領域は1つのまとまりとして認識する。
以下は[ ]によって閉じられた3つのグループとなっている。
UX TIMES内でも、記事の情報をカードとして閉じることで、ひとつずつの記事をわかりやすく表示している。
・共通運命(Common Fate)
https://uxdaystokyo.com/articles/glossary/principle-of-common-fate/
同じ方向に動く・同じ周期で点滅する複数の要素は、同じグループだと認識する。
人は隣接や類同よりも共通運命がある方を強く感じるため、以下のように同じ方向に同じ速度で動く3つのアイコンをグループとして見る。
例えばmac上のメニューも矢印をたどっていくと、すべて右側に下階層のメニューが出ることで、操作を認識しやすくしている。
・面積(Area)
重なっている図形では面積が小さい方が主になるもの・手前にあるものとして認識する。
以下のボタンでは、面積が大きい紫の丸ではなく、面積の小さいアイコンの方を主になるものと認識される。
・対称性(Symmetry)
左右対称な図形はグループとして認識しやすい。
UX DAYS TOKYOのカンファレンスページでは、左右対称にイベントの詳細を並べてわかりやすくしている。
・図と地(Figure & Ground)
https://uxdaystokyo.com/articles/glossary/figure-ground/
人は複数の要素をもつ領域を形(図)と背景(地)に分けて認識している。
一般的に背景と認識された要素は、ほとんど知覚されない。
以下は「ルビンのつぼ」と呼ばれる有名な図である。
白い部分を「図」・黒い部分を「地」と認識するとつぼの画像、逆に黒い部分を「図」・白い部分を「地」と認識すると向きあっている人の顔が見える。
Facebookでは投稿時に半透明の黒幕を入れ、フォーム部分以外を「地」として投稿の邪魔にならないようにしている。
・過去の経験(Past Experiences)
要素は過去の経験に従って知覚される。
以下は色の違う円が3つならんでいるだけであるが、信号機と同じ色の並びなので経験を通して、これらをグループとして認識する。
良い形/単純性の法則(Good Form/Good Figure/Law of Simplicity)
類似した形・色・パターンから、重なり合っていたとしても違いを認識し、区別することができる。
「単純性の法則(Law of Simplicity)」とも言われる。
以下の①は、②のように3つの円が重なったものとして認識され、③の形の集合体と認識されることはない。
Mac OS版Safariでは多くのサイトを同時に開いている場合でも、「タブ」によってそれぞれを認識することができる。
「ゲシュタルト原則」と「プレグナンツの法則」
ゲシュタルト原則の中でも、要因が複数あるときに、より簡潔に認識できる方を優先することを「プレグナンツの法則」という。
複数の「ゲシュタルト原則」が存在する場合、プレグナンツの法則に従えば、より単純に見える方を認識する。
緑・黄色・赤の円の並びは「過去の経験」から信号機だと認識すると、前に例示した。
しかし脳がより簡単に知覚する「閉合」や「近接」も同時に存在する以下の画像は、1つの信号機ではなく「緑と黄色のグループ」「赤だけのグループ」の2グループが存在するものとして認識する。
関連用語
https://uxdaystokyo.com/articles/glossary/ploximity/