ゲシュタルトの法則とは？ノンデザイナーこそ知っておきたい法則を解説

「ゲシュタルトの法則」と聞いて、みなさんは何を思い浮かべるでしょうか。
「ゲシュタルト崩壊」という言葉は聞いたことがあるかもしれませんが、その意味を正確に答えられる方は少ないのではないでしょうか。

AIや機械学習の時代の到来で、Web関係者はユーザーのニーズや習性を理解することがますます重要になってきています。
実は、そこで新たに注目を集めているのが、人間の視覚や知覚に関する法則である「ゲシュタルトの法則」なのです。

「ゲシュタルトの法則」自体は、20世紀初頭にマックス・ヴェルトハイマーなどを中心にして研究された心理学に関する法則ですが、デザイン法則の基本として多くのデザイナーが学んでいます(あるいは無意識的に利用しているデザイナーもいます)。

しかし、AIや機械学習の時代において、人間の特性を理解することはあらゆる分野で役に立つので、この法則のことを知っておいて損はないでしょう。

今回は、ノンデザイナーこそ知っておきたい「ゲシュタルトの法則」を解説します。

目次

1. ノンデザイナーこそ知っておきたい「ゲシュタルトの法則」と「ゲシュタルト崩壊」とは？
2. ゲシュタルトの基本7法則
3. ゲシュタルトの法則がUXやデザインにおいて重要な理由
4. まとめ

▼ディレクターとデザイナーで読みたい資料

マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ

リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。

ノンデザイナーこそ知っておきたい「ゲシュタルトの法則」と「ゲシュタルト崩壊」とは？

ゲシュタルトの法則

ゲシュタルトの法則とは、人間は近いものや似ているものをグループ化したり、閉じた図形を見出そうとする性向があるという法則のことです。

心理学者クルト・コフカの言葉を借りれば、人間は「部分の総和」ではなく全体性をもったまとまりのある構造を認識する傾向にあり、この全体性のある構造のことをドイツ語でゲシュタルト(Gestalt：「形態」の意味)と呼びます。

ゲシュタルト崩壊

ゲシュタルト崩壊とは、ゲシュタルトの法則がうまく当てはまらなくなった状態のことを指します。
つまり、図形や文字などの全体像を把握することができず、構成する部分を部分的にしか認知できなくなった状態のことです。

ゲシュタルトの基本7法則

人間が何かを知覚する際、私たちは個々のパーツを見る前に全体性を認識します。
デザイナーは(意識的もしくは無意識的に)このゲシュタルトの法則に基づいてデザインを行なっていきますが、実際どのような着眼点でデザインを行なっているのでしょうか。

ここでは、ゲシュタルトの法則の根幹をなす、基本7法則について見ていきましょう。

1. 近接の法則 (Law of Proximity)

近接の法則は、距離が近いもの同士が同じグループだと考えるという法則です。
それぞれの要素数が異なっていても同じグループと認識します。

アイコンとテキストを数段に分けて並べたいときに、詰めて配置するとセクションが分かれて見えないことがあります。
十分に余白を取り、同じ意味内容のものを極力近づけて配置するのが大切です。

2. 類同の法則 (Law of Similarity)

類同の法則は、同じ色や同じ形、同じ向きのもの同士が同じグループだと認識されやすいという法則です。
近接の要素同様、それぞれの要素数が異なっていてもグループと認識します。

同じくアイコンやテキストを並べたいときには、周りのアイコンの大きさを揃えておきましょう。
一つだけ色や形が違うと、大きなグループの中で一つだけ別の役割のグループのように見えます。

3. 連続の法則 (Law of Continuity)

連続の法則は、図形はつながった形になりやすいという法則です。

例えば、上記左の図形は、2直線が交差していると判断され、「4本の線の集合」や「2つの『く』の字の形の集まり」とは認識されないでしょう。

Webデザインにおいては、グリッドレイアウトでのデザインが連続の法則を利用していると言われています。
例えば、Pinterestのフィードをパソコンのブラウザで見たときには、縦のコンテンツを1グループとして連続したものだと認識するはずです。

4. 閉合の法則 (Law of Closure)

閉合の法則は、閉じた形をしているものは１つの同じグループだと認識されやすいという法則です。
【　】や（　）のような括弧が２つで１セットのように見えるのは、閉合の法則によるもので、】と【 が同じグループだとは認識されにくいでしょう。

これを応用したのが、モバイルデザインで流行中の水平スクロール(horizontal scroll)デザインです。
Instagramの冒頭にあるアバターリストのを見ればわかるように、最後のアバターが欠けているように見せていますが、こうすることによってまだ続きがあるように見えます。

5. 共通運命の法則 (Law of Common Fate)

共通運命の法則は、同じ方向に動くものや同じ周期で点滅するものなどが同じグループだと認識されやすいという法則です。
例えば、道路に連なっている自動車の向きが違えば、真逆の方向に向かっている２つのグループを認識することができます。

デザインで応用されている例で一番わかりやすいのが、ブラウザの右側に出てくるようなスクロールバーです。
私たちが操作を行い画面をスクロールすると、同じようにスクロールバーも上がったり下がったりします。
これにより、全体の位置がわかったり、スクロールの方向が正しかったりするのかを認識することができます。

6. 面積の法則 (Law of Area)

面積の法則は、重なっている２つの図形では面積の小さいほうが手前にあるように見えるという法則です。

面積の法則は、ヒーロー画像におけるタイポグラフィに利用されています。
全面的に画像を敷いてその上に文字を置くと、文字のほうが占有面積が小さいので、浮き出て見えるのです。

また、WWFのパンダのロゴマークのように、ネガティブスペースを活用したロゴマークも、面積の法則を活用して、図形を立体的に見せています。

7. 対称の法則 (Law of Symmetry)

対称の法則は、左右対称な図形ほど認識されやすいという法則です。
有名な「ルビンの壺」の図はよく引き合いに出されますが、対称的な輪郭があると意図せずに壺の絵や人の顔を認識し、入れ替えて認識することができます。

シンメトリーを活用したデザインはWeb業界の中ではよく用いられており、それを顕著にしたものがスプリットスクリーンと呼ばれるものです。
左右対称にすると一つのグループとして認識しやすくなります。

ゲシュタルトの法則がUXやデザインにおいて重要な理由

ゲシュタルトの法則はWebを語る上で無視できないものになっています。
それは、人間は無意識的にゲシュタルトの法則に基づいて知覚しているからです。

例えば、メニューがバラバラな場所に位置していたり、予測不可能な場所に置かれていたらどうでしょうか。
当然ながら、使いづらくストレスがたまり、UXは劇的に悪化してしまいます。

一方、同じ意味内容のメニューをまとめて設置したり、意味段落を分けて文章を書いたりすれば、ユーザーはまとまりを意識しながらWebコンテンツを見ることができるので、ストレスなく閲覧することができるでしょう。

昨今見かける「ブルータリズム」のウェブデザインはある種の「ゲシュタルト崩壊」を意図して再現したホームページだと言うことができます。
前衛的で斬新な表現方法でありながらも、使いづらくため息が出てしまうのは、ゲシュタルトの法則から外れているからでしょう。

参考：
今までの常識を覆す？斬新すぎる「ブルータル」なWebデザインを取り入れたホームページ11選

まとめ

ゲシュタルトの法則はある意味でデザイナーの「常識」とも言えるデザイン法則ですが、もともとは人間の視知覚に関する心理学から登場した法則です。

「ゲシュタルト崩壊」という言葉だけが先行してしまい、意味をよく理解していないかもしれませんが、言葉の意味をしっかりと理解して、ぜひ制作現場で会話のネタとして取り入れてみてはいかがでしょうか。

また、美しいと感じるデザインのほとんどは、ゲシュタルト法則にのっとった、まとまりのあるものになっているはずです。
ある種の「感覚」だけを頼りにデザインをしている場合は、ゲシュタルトの法則のどれにあてはまるかを考えながらデザインしてみるのもいいでしょう。

▼ディレクターとデザイナーで読みたい資料

マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ

リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。