BARBEDESIGN / RESEARCH

Resources

#graphic

ゲシュタルト原理|視覚デザインを支える7つの原理

December 16, 2025
ゲシュタルト原理|視覚デザインを支える7つの原理 image

私たちがデザインを見るとき、脳は無意識のうちに「どう解釈するか」を瞬時に判断しています。線や点、形がバラバラに配置されていても、私たちは自然と「意味のあるまとまり」に見ようとします。このまとまりを知覚する脳の働きを体系化するのに、ゲシュタルト心理学が利用されます。 ビジュアルデザインにおいてゲシュタルト原理を理解することは、“作品がどう見えるか”ではなく、“どう見せられるか” に繋がります。本稿では、ビジュアルの観点からデザイナーが押さえておくべき7つの主要原理を、例とともに解説していきます。

ゲシュタルト心理学とは何か?

ゲシュタルト(Gestalt)とは、ドイツ語で、形、形態、状態を意味します。ゲシュタルト心理学(Gestalt Psychology)は、20世紀初頭にドイツで誕生した心理学の一学派で、「形態心理学」とも呼ばれます。その主な考え方は、「全体は部分の総和以上のものである、(The whole is greater than the sum of its parts)」というものです。

例えば、メロディーを聴くとき、私たちは個々の音(ド、レ、ミ...)をバラバラに認識するのではなく、「一つの曲」や「メロディー」といったまとまりとして捉えます。

人間は、目に入ってきた情報を、可能な限り単純で、規則的で、安定した、まとまりのある(簡潔な)形態として知覚しようとする傾向があります。ゲシュタルト心理学は、人がものごとを「部分」ではなく、「まとまり」として知覚するという考えを体系化しています。これらは、知覚心理学・認知科学・デザイン・アート・UI/UX・広告など、多くの分野に影響を与えています。


デザイナーが押さえるべき7つのゲシュタルト原理

ビジュアルデザインにて、特に使用されるゲシュタルト原理を7つを下記にて解説します。

  1. 近接(Proximity):近いものをグループとして見る
  2. 類似(Similarity):似ているものをまとめて見る
  3. 連続(Continuity):視線は自然な流れに沿って見る
  4. 閉鎖(Closure):欠けていても形を補完して見る
  5. 対称性(Symmetry):対称なものはまとまりとして見る
  6. 図と地(Figure–Ground):主役(図)と背景(地)に分けて見る
  7. 共通領域(Common Region):共通の要素でまとまりとして見る

01|近接(Proximity)「距離が近いものは、仲間に見える」

  • 原理: 近くに配置された要素は関連があると認識され、グループ化と階層を明確にする。
  • デザインへの応用: リストやグループ化したい要素を近づけ、周囲に余白をとることで、視覚的な階層構造を作る。

間に余白(空間)があることで、左右の2つをまとまりとして認識される。

02|類似(Similarity)──「似ているものは、同じグループに見える」

  • 原理: 色、形、大きさ、質感、向きなど見た目が似ている要素は関連があると認識され、パターンやグループを素早く識別できる。
  • デザインへの応用: リンクボタンや見出しなど、同じ機能を持つ要素には同じ色や形を使用することで、ユーザーに機能の統一性を伝える。

形態の違う⚫︎と◻︎にて、2種類のグループと認識される。

03|連続(Continuity)──「線や流れは、途切れずに続くように見える」

  • 原理: 直線や滑らかな曲線といった連続性のある要素をひとまとまりとして認識され、整列したり流れるような要素は注意を無理なく導く。
  • デザインへの応用: 視線誘導。Z型・F型・N型といった、広告のレイアウトパータンなどに活用される。

曲線と直線のまとまりとして認識される。

04|閉鎖(Closure)──「足りない部分を脳が勝手に補う」

  • 原理: 不完全な図形や線が途切れた形であっても、欠けている部分を自然に埋めて全体を認識され、最小限のディテールで伝達を可能にする。
  • デザインへの応用: シンボルマークやピクトグラムなど、少ない情報で視覚的に表現する際に活用される。

円の欠けた部分に焦点を当てると欠けた部分が補われ、左は三角、右は四角が認識される。

05|対称性(Symmetry)──「対称形は安定・統一・美しさとして認識される」

  • 原理: 左右対称や点対称など、バランスが取れた対称性を持つ図形や配置は、たとえ個々の要素が離れていても、一つの安定したまとまりとして強く認識さる。
  • デザインへの応用: 画面全体のレイアウトや、重要度の高いアイコンなどで対称性を用いると、安定感と信頼性を与えることができる。

対象としてレイアウトすることで全体が整理され、まとまりとして認識される。

06|図と地(Figure-Ground)──「主役(図)と背景(地)を区別して見る」

  • 原理: 注意を向ける「図(主役、対象物)」と、その周囲の「地(背景)」に分けてられる。図としたものは、より手前にあるように認識され明確に際立たせる。
  • デザインへの応用: 背景と要素のコントラストを調整することで、何を主役として見せたいかをコントロールすることができる。

有名なルビンの壺。注意を向ける視点によって図と地が変わり、意味も変わる。

07|共通領域(Common Region)──「同じ要素を含むものは、ひとまとまりに見える」

  • 原理: 色や形が異なっていたとしても、同じ枠や背景、方向や速度の動きなどの要素を含むことで関連していると認識される。グループ化を直感的に理解しやすくする。
  • デザインへの応用: ドロップダウンメニューの項目をスライドさせて表示したり、関連する通知を同時にフェードインさせたりすることで、グループであることを示したりする。

要素が違っていても背景の枠組みによって2つのまとまりとして認識される。