脳は勝手にまとめてしまう——ゲシュタルトの法則とUIの『まとまり』

同じ数の入力欄でも、ラベルと枠の置き方ひとつで「分かりやすいフォーム」と「ごちゃついたフォーム」に分かれる。違いを生んでいるのは、利用者の頭の中で起きる「勝手なグループ分け」だ。人は目に映ったものを一つひとつ独立に処理せず、無意識にまとめて意味のかたまりとして見る。この知覚のクセを体系化したのがゲシュタルト心理学の諸法則で、デザインの「なんとなく見やすい」の多くはここで説明がつく。

「全体は部分の総和ではない」

ゲシュタルト心理学は20世紀初頭、マックス・ヴェルトハイマーらが提唱した心理学の一派だ。標語的に言えば「全体は部分の総和ではない」。バラバラの点や線が、近さや形の似かたによって、ひとつの”かたまり”として立ち上がる——その立ち上がり方には規則性がある、というのが出発点だった。

重要なのは、これが好みや文化ではなく、知覚レベルでほぼ自動的に起きるという点だ。だからデザイナーが意図しなくても、要素の配置は何らかの「まとまり」を勝手に主張してしまう。ならば、その主張を味方につけたほうがいい。

まとまりを生む主な法則

ゲシュタルトの法則はいくつもあるが、UIで効くのはまずこの4つだ。

• 近接（Proximity）： 近くにあるもの同士は、同じグループだと見なされる。ラベルとその入力欄を近づけ、別の項目とは離す——これだけで説明書きなしに構造が伝わる。最強かつ最も使うグルーピング手段だ。
• 類同（Similarity）： 色・形・大きさが似たものは仲間に見える。同じ見た目のボタンは「同じ種類の操作」と読まれる。だから削除ボタンだけ色を変える。
• 閉合（Closure）： 輪郭が完全に閉じていなくても、人は隙間を補ってひとつの図形として認識する。アイコンやロゴが少ない線で成立するのはこの働きのおかげだ。
• 連続（Continuity）： 視線はなめらかな線や並びに沿って流れる。整列したリストやグリッドが追いやすいのは、目が「続き」を自然にたどるからだ。

図と地：何を前に出すか

もうひとつ外せないのが**図と地（figure–ground）**の関係だ。人は視界を「主役（図）」と「背景（地）」に瞬時に振り分ける。ボタンが背景から浮いて見えるのも、モーダルが開いたとき後ろが暗くなると手前に集中できるのも、図と地の操作だ。前に出したい要素は、地との差（明るさ・余白・影）をはっきりつける。どちらが図か曖昧なデザインは、見る人に負荷をかける。

UIに効かせる：余白は最強のグルーピング

実務での結論はシンプルだ。枠線を増やす前に、余白で語れ。 関係する要素を近づけ、無関係な要素を離す。それだけで多くの仕切り線やボックスは要らなくなる。線で囲うのは、近接だけでは足りないときの最後の手段でいい。

「なんとなく見やすい」には、毎回ちゃんと理由がある。フォームがすっきり見えたとき、それは近接と類同が効いている。逆にごちゃついて見えたら、たいてい関係ないもの同士が近すぎるか、似すぎている。まとまりは、人の脳が先に作ってくれる——こちらの仕事は、その自動処理を裏切らないように配置することだ。

お役立ち情報

• 📄 ゲシュタルト原則（ゲシュタルトの法則）— UX TIMES
  • 近接・類同・閉合など主要な法則を、UIの具体例つきで網羅した日本語の用語集。手元に置いておきたい一覧。
• 📄 ゲシュタルトの法則とは？（unprinted）
  • 各法則とプレグナンツの法則の関係、デザインで使うときの注意点まで踏み込んだ日本語の解説記事。
• 📄 5 Principles of Visual Design in UX（NN/g・英語）
  • ゲシュタルトを含む視覚デザインの5原則を、UXの観点から簡潔にまとめたNielsen Norman Groupの記事。