ゲシュタルトの法則とは？イラストで分かり易く解説！

本日コラムで取り扱うのは、「ゲシュタルトの法則」と呼ばれる、人間の認知に関する法則です。

同じ文字を何度も書き続けているときに起こる「ゲシュタルト崩壊」という言葉で、一度は聞いたことある、という方も多いのではないでしょうか。

それでは一体、「ゲシュタルト」とはそもそも何で、どのような法則があるのか、じっくり書いていければと思います。

ゲシュタルトの法則とは？

日常生活でしばしば耳にすることがある、「ゲシュタルト崩壊」。

「ゲシュタルトの法則」が崩壊する、ということなのですが、それでは一体、「ゲシュタルトの法則」とは何なのか。

そもそも「ゲシュタルト」という言葉は、ドイツ語で「形態」を意味する単語です。

「ゲシュタルトの法則」は、20世紀初めに、マックス・ヴェルトハイマーというチェコ出身の心理学者が中心となって研究された心理学の法則です。

人間が物の「形態」をとらえるとき、まず全体像からまとめたり、捉えたりするという、人間の近くに関する法則であり、本来は心理学や認知に関する法則ですが、デザイナーさんからも注目を集める、webデザインが当たり前の現代では、デザインにおいても決して無視できない重要な法則であると言えます。

ゲシュタルトの崩壊

「ゲシュタルト崩壊」、つまり「ゲシュタルトが崩壊する」ということはつまり、「細部に目が行き過ぎて、全体把握ができず、感覚が狂ってしまう」ということです。

同じ文字をずっと眺めていたり、何度も書き続けていたりする時にゲシュタルト崩壊が起こりやすいのは、同じものを何度も見ることによって視野が狭くなり、細部が気になり勝ちだからだといえるでしょう。

ゲシュタルトの7法則

そして、一口に「物事を全体からとらえる」と言っても、その捉え方は7つの観点から説明でき、ゲシュタルトの法則も、7つの法則から成り立っています。

以下では、その7つの法則を1つずつ、見て行きたいと思います。

近接

ゲシュタルトの法則1つ目は「近接」です。

これは、「互いに近接しているもの、つまり、距離が近いもの同士は同じグループとして認識される」という法則です。

例えば、以下の図をご覧ください。

まずは上側にある、青色の水玉が並んでいる2つの正方形から。

どちらも同じように4×4で、合計16個の水玉が並んでいます。

しかし、左側では、16個の水玉の集団が1つあるように感じ、右側では、8個の水玉の集団が2つあるように感じないでしょうか。

これが「近接」です。

人間が、近くにあるものをグループとして認識するので、間に空白列があることにより、2つの水玉の集団が、別々のグループに見えてしまうというわけです。

さて、この「近接」をwebデザインに活かすとどうなるでしょうか。

Case1と書かれた図と、cace2と書かれた図を見比べてください。

どちらとも、とある製品（もしくはサービス）の購入について、会員登録から購入まで、一連の流れを説明したもので、書いてある内容は一言一句たがわず同じです。

しかし、奥の方が、右側の説明図の方を、「わかりやすい」と認識するのではないでしょうか。

これが、ゲシュタルトの法則1つ目「近接」を上手に生かしたwebデザインの特徴です。

つながりのあるものは極力近くに配置することで、ユーザーは、「近くにある」ということがよく理解できますね。

類同

ゲシュタルトの法則2つ目は、「類同」です。

これは色や形、大きさが同じ（似ている）ものは、同じグループだと認識されやすい、ということです。

例えば、下の図をご覧ください。

上半分には、先ほど出てきたのと同じように、4×4の16個の水玉が並んでいます。

―どうでしょうか？先ほどとは異なり、この水玉が、今度は4つのグループに見えないでしょうか。

もし見えているのだとしたら、その原因は、色の違いにあります。

そして「4つのグループ」と聞いてあなたは、縦と横、どちらで水玉を区切り、グループだと認識したでしょうか？

―おそらくほとんどの方が「列（縦）」で、グループに分けたと思います。

これも、「同じ色は同じグループ」だと認識する、「類同」がまさに現れた結果と言えます。

続いて、下半分にある、case1とcase2を見てみましょう。

こちらは、メールアドレス、電話番号、営業日という、一般的な企業のいわゆる「会社情報

と呼ばれるもので、グループ化されていい情報です。

しかし、case1では、いまいち情報にまとまりがなく、なんだかたくさんの情報が雑多に詰め込まれている、という感じがしないでしょうか。

これは、3つの項目それぞれで、背景の色や形が異なっているがために、「類同」が機能せず、ばらばらの情報だと認識してしまうためです。

対してcase2では、背景の色や形が統一されているため、我々はこれを同じグループだと認識します。

その状態で、メール、電話番号、営業日、という文字情報が飛び込んでくるので、「ああ、これは会社の基本情報が書かれているんだな」と、すんなりとわかるわけです。

ゲシュタルトの法則を知ったうえでデザインするのとそうでないのとでは、こんなにも情報の伝わりやすさが違ってくるんですね。

連続

続いて3つ目の法則は、「連続」です。

人は物を認識するとき、「連続性」を見出そうとする、というのがこの法則です。

例えば、下の図の上半分だと、「2色の直線がある」と認識される方がほとんどでしょう。

見方によっては、「4つの長方形」と見ることもできるのですが、そうなっていないのは、この第３の法則「連続」が原因でしょう。

続いて下半分にある、「最低価格」と「最高価格」の図です。

これを、横長の青い長方形と、縦長で少し小さめの長方形と、灰色の長方形、合計3つの長方形の集まりだと認識する方は、きわめて少ないのではないかと思われます。

きっと多くの方が、青色の部分がメーターのようなもので、濃い青色の部分までメーターが伸びているのだ、と認識することでしょう。

色が連続していることから、このような認識になっているわけです。

閉合

4つ目は「閉合」です。

これまで出てきた法則の中で、最も聞きなじみのない単語かと思いますが、これは、人間が、図形の欠けた部分を目にすると、空白部分を補って、四角形や円、三角形などの、閉じた図形を描く、という現象です。

例えば下の図の上半分、かっこが乱立した図はどうでしょうか。

【と】、向かい合っているものがとなりあっていると、長方形を思い描く方が多いのではないでしょうか。

また（と）も同じ理由で、円や球を描いているように認識する方が多いのではないでしょうか。

反対に、】【や）（など、互いに背を向ける形で括弧が並んでいると、違和感を覚えてしまう方も多いのではないでしょうか。

ここまでの説明でも、「】と【」と表現すれば、「括弧2つのことを言っているんだな」とすぐわかりますが、これが「【と】」となると、「と、の文字を強調しているんだな、と思ってしまうのではないでしょうか。

これが「閉合」の最たる例だと言えるでしょう。

続いて下半分の図をご覧ください。

左半分の図は、赤色の円と青色の円が重なっており、中央部分は、赤色と青色が重なった絵結果、紫色になっているのだ、と理解できます。

高校生の数学を覚えておいでの方の中には、「ベン図だ、懐かしい！」とお思いになる方もいらっしゃるのではないでしょうか。

一方、右側の図では、青と紫、そして赤、3つの図形が存在するように見え、青と赤の円が重なっている、と認識される方は少ないのではないでしょうか。

これは、紫色の部分に白い切れ目があり、青い円や赤い円との連続性を欠いてしまっていることが原因です。

共通運命

続いて5つ目は、「共通運命」と呼ばれる法則です。

ふとしたきっかけで出会った男女が籍を入れ、共通の運命を共にする……。

まさかそんな、ロマンチックな法則ではありません。

同じ方向に動いて（いるように見え）たり、同じ周期で点滅したりなど、同じ動きをしているものは、同じグループとして認識されやすい、という法則です。

例えば、左の図を見てください。

上半分は左から右へ、下半分は右から左へ、青い円が動いているのが表現されています。

そうするとどうでしょう。

コラム執筆者が思わず、「上半分」と「下半分」という言葉を使ってしまったように、円が同じ動きをしている上と下で、自然とグルーピングしてしまう方が多いのではないでしょうか。

これが「共通運命」と呼ばれる、ゲシュタルトの法則4つ目です。

続いて右の図をご覧ください。

パソコンを使って仕事をされている方にはお馴染みの、デスクトップ画面です。

縦に3列並んでいるうちの右側2列、エクセルと思われるファイル1つと、ワードだと思われるファイル2つが選択されています。

するとこのファイル3つは、「このあとゴミ箱などに移動されるファイル」などのように、グルーピングされているのが、視覚的にぱっとわかります。

面積

ゲシュタルトの法則6つ目は、「面積」です。

こちらは、面積の違う図形を見ると、一方の図形が別の図形に乗っかってみえるなど、図全体が立体的に見えてくる、という現象です。

例えば、下図の上側、2つの円が描かれた図をご覧ください。

この図は、平面の長方形の上に、同じく平面の、紺色の円と、これまた平面の黄色い円、合わせて2つの円が描かれているだけなのですが、これを「青色の円の上に黄色の円が乗っかっている」と認識される方も多いのではないでしょうか。

これは、2つの円の面積が異なっていることがなす業です。

また、左にある黄色と黒の絵は、『ルビンの壺』という有名な図です。

この絵は実は2つの見方ができます。

まず1つ目は、絵のタイトルの通り、黄色地に黒色で描かれた壺、という見方。

そして2つ目は、2人の人が向き合っている絵。

どちらに見えてもおかしくないはずなのに、瞬間的にこの絵を見せられた人の多くは、これを「壺が描かれている」と認識するそうです。

そして右のパンダの絵、この図は平面なのですが、面積の大きい白地の上に、面積の小さい黒地が乗っかっているので、全体として立体的に見えてしまう、というのが、ゲシュタルトの法則、「面積」の仕業です。

対称

ゲシュタルトの法則、最後の1つは、「対称」です。

これは、「対称な図形ほど認識されやすい」というものです。

左右対称、上下対称、あるいは斜めで対称、ということもあるかもしれませんが、対称なものは認識されやすいようです。

例えば、下記の左側の図です。

上に描かれている図形、皆さんはどのように解釈されるでしょうか。

左のように、二つの正方形が重なっている、と認識される方もいれば、右下のように、2つのL字型の図形が並んでいる、と認識される方もいるでしょう。

さて、他には……？

おそらく、他の何かを思い描いた方は数少ないでしょう。

そして、上記2つの解釈は、いずれも「対称」を認識した結果です。

ひとつの図形を見たとき、やはり人間は、無意識のうちに「対称」を意識しているようです。

あるいは右側の図はどうでしょうか。

単純にいくつかの絵を並べただけですが、うっすらと円を描き、中心を通る2本の線が描かれていることで、「中心の物に関連するものが周りに描かれているんだな」ということが認識されやすくなります。

これは、ゲシュタルトの法則の7番目、「対称」をうまく活用した説明図だといえるでしょう。

ゲシュタルトの法則をデザインに活かすには

以上、ゲシュタルトの法則7つをすべてご紹介してきましたが、ではこの「ゲシュタルトの法則」、デザインにはどのように活かせるでしょうか？

……本来であれば、「デザインに活かす」という表現そのものが、イマイチ的を射ていない表現です。

もっと強い言い方で、「ゲシュタルトの法則に反したデザインはあり得ない」と書いた方がよいでしょう。

これまでの説明で見てきた図のように、ゲシュタルトの法則に反した図は、大変わかりづらく、意味が伝わりづらいものばかりです。

正確にわかりやすく、メッセージを伝えるためには、ゲシュタルトの法則にしたがうことが大原則となります。

一方、ゲシュタルトの法則をうまく使えば、図だけで理解が進むので、無駄な言葉を排除することができ、よりシンプルなデザインを作ることができます。

まとめ

以上、ゲシュタルトの法則について、ご説明してきました。

改めて言われてみると、「そうだったんだ！」という新しい気づきがあるというよりは、「確かにそうだな」という、自分の体験を確かめる、という感覚の方が多かったのではないかと思います。

それくらい、ゲシュタルトの法則は我々の認知の本質に迫る法則であり、これを押さえておかないと、webデザインが命、少しでも「わかりにくい」と思われたらすぐに他ページに遷移されてしまう今の時代を生き残ることは難しいでしょう。

普段無意識で行っている認知の規則性を言語化して、ポイントを押さえておくことは、非常に有用なことだと思います。

こちらの記事もよく読まれています

SEOで不利になる？URL選択時は重複コンテンツに注意しよう

フィッツの法則とは？UIデザインに活かす方法をわかりやすく解説

購入検討中の訪問ユーザーを商品購入に導くマーケティング４つのポイント

コンテンツマーケティングとコンテンツSEOとの違いとは？