「ゲシュタルトの法則」を取り入れてユーザー目線のデザインをしよう！

デザイナーのyamaです！
今回は情報整理に欠かせない法則の1つ、「ゲシュタルトの法則」をご紹介しようと思います。

「なぜ、そのデザインなんですか？」

日々アウトプットしているデザインに対して、この質問をされた際、みなさんはこの問答える事ができますか？

見た目のカッコよさや美しさは必要かもしれません。ですがそれ以上にユーザー目線に立って考えられるデザインが大切です。

見た目をよくする事はあくまでも方法の1つであり、どの方法を選ぶか？はユーザーや戦略により変わるからです。

心理学のテクニックや技法を取り入れる事で理論に基づいたデザイン制作が行えるだけでなく、「なぜ？そのデザイン」という問に対しての根拠を答える事が可能となります。それらを積み重ねることで、信頼やデザイナーとしての価値向上につながるのではないでしょうか。

それでは、ゲシュタルトについてご紹介していきますね！

ゲシュタルトってなに？

「ゲシュタルト」はゲシュタルト心理学の基本概念です。
この概念を人間の感覚構造を中心に研究したのが「ゲシュタルト心理学」図形による印象などの研究が中心でした。

ちなみに、人間の視覚系は目から入ってきたものを全体を部分や要素の集合ではなく、全体性を持ったまとまりのある構造として知覚するようにできているそうです。その研究において、「人間が視覚を使ってどのように物事を見分け、捉えているか？」の傾向を法則化したものが「ゲシュタルトの法則（※）」で、別名「プレグナンツの法則」（簡潔の法則）と呼ばれています。

※対象の姿や形の事をドイツ語でゲシュタルト(Gestalt)全体的な構造」というため、「ゲシュタルトの法則」と呼ばれるようになったそうですよ。

ちなみに、ゲシュタルト崩壊って…

図形や文字などの全体（まとまり）が把握できず、構成する要素を個別にしか認知できなくなった状態のこと。

漢字の練習をしている際に同じ漢字をずっと書き続けていると…「あれ、この漢字ってこんな字だったっけ？（汗）」ってなった事があると思いますが、あの現象を想像していただけるとわかりやすいのではないでしょうか。

持続的に注視することにより、漢字をまとまりとしてではなく、バラバラな図形として知覚してしまう事が原因かと思われます。

覚えといたほうがいい「ゲシュタルトの法則」7選！

1. 近接の法則（principle of proximity）

距離の近いものは１つの形にまとまって見える。（近いものをパーターンとして認識）

デザインの基本である「合わせる（この場合は上下）」や「均等配置」を使うことで、情報をわかりやすくレイアウトする事が可能です。しかしオブジェクト（情報）が多くなった場合、次に大切になるのがオブジェクト（情報）の「グループ化」。

同じオブジェクト同士を近づけ、それ以外（グループ以外）のオブジェクトを遠ざけるよう、余白を取ることで、オブジェクトが同じ塊であると知覚されやすくなります。さらに、配置する際、グループ間の余白を均等にするとノイズがなくなり、わかりやすくなりますよ。

デザインの基本である「合わせる」は忘れずに！
そして、余計な情報（※）は入れない。ということも大切です。
※人はパターンで知覚する傾向があるため、グループ間の微妙にずれた余白も1パターンとして認識されてしまいますよ。

2. 類同の法則（principle of similarity）

形や色などが似ているもの同士は、まとまって見える。（同種のものをパターンとして認識）

上記の画像の場合、「ベタ塗りの○」「ラインの○」の2グループに分かれて知覚できると思います。1.では「近づける」＋「余白を取る」ことで同じオブジェクト同士をグループ化しました。2.では、似たように見えるオブジェクト同士がグループ化されます。

○である。○と○の余白が均等。という成約条件がある場合、「色の違い」や「形の違い」が別のグループと知覚されやすくなるポイントです。

3. 連続の法則（principle of good continuation）

連続した形やパターンをつくっているものは、まとまって見える。

切れ目や変化のない線は定められた方向に続いていくと考える傾向があり、＞＜や4つのラインの組み合わせとしてではなく、途切れることのないライン☓として知覚されます。

4. 閉合の法則（principle of closure）

閉じた領域を作っているものは、まとまって見える。

1.や2.のように「オブジェクトをグループ化する」傾向のほかに、人にはオブジェクト（情報）を完全な形で知覚できるよう、曖昧な部分や欠けている部分を補う傾向があります。

開いたものを閉じようとするため、上記の[　　]の中の●は同じグループだと知覚しやすくなり、右の図は三角形と3つの●の上に三角が積み重なっていると認識します。

5. 共通運命の法則（principle of common fate）

一緒に動いたり変化したりするものは、まとまって見える。

同じ動作をするものには関連があると知覚されやすく、この傾向を利用することで、ユーザーの注目をあつめ、目的の場所へ導く事が可能となります。（コンバージョンボタンなど）

6. 面積の法則（principle of area）

重なっているオブジェクトは、面積の小さい方が手前に見える

（左の図）■の方が面積が大きいので「背景」になり（右の図）■よりも●の方が面積が大きいので■は「（背景の上にのっている）図」として知覚されます。

7. 対称性の法則（rinciple of symmetry）

複雑なものは簡略化して解釈する

人は複雑な情報をを簡略化し、対称性を持つようにデータを整理して解釈する傾向があります。上記の画像の左のオブジェクト、●が3つ重なって見えますが、本当は右のように5枚の図形の組み合わせかもしれないのです。しかし、先程もお話しましたが、人は複雑なものを簡略化する傾向にあるため、右のように5枚の画像の組み合わせ。と知覚しないでしょう。

まとめ

いかがだったでしょうか？
私たちが触れているコンテンツの多くは、目的を達成できるよう適切な方法で構造化されています。その構造を考える上でも、注目されているUI/UXの基礎となる情報設計（IA：Information Architecture）を考える上でも、人間の心理や特性を理解する事は大切ではないでしょうか。

今回ご紹介した「ゲシュタルトの法則」を理解することで、理論に基づいたデザイン制作が行えるだけでなく、デザインにおいての根拠を答える事が可能となります。感覚派の人はもちろん、デザインの説明が苦手な人も覚えておいて損はないですよ！