ゲシュタルト（まとまりに見える仕組み）

人は、ばらばらのものを勝手にまとめて見ます。その癖を知っていれば、線を引かずに組を作れます。

図を大きく見る

図の中身を文字で読む

• 近接　類似　閉合　連続
• 近いものが1つに見える　似たものが1つに見える　欠けても形が見える　滑らかな並びは一続き
• 共通運命　共通領域　図と地　プレグナンツ
• 同じ方向へ動くものは仲間　同じ枠の中は仲間　前に出る形と背景に分かれる　最も単純な解釈に落ち着く
• = 円と四角
• この8つはすべて「人はばらばらのものを、まとまりとして見てしまう」という同じ性質から出ている。
• だから枠や線を足さなくても、位置・見た目・動きだけでグループが作れる。

ひと目で#

まとまって見える現れ方は、8つあります。

近接

近いものは一組に見える

類似

似ているものは一組に見える。離れていても効く

閉合

輪郭が欠けていても、閉じた形に見える

連続

なめらかに続く並びは、一続きに見える

共通運命

同じ向きに動くものは仲間に見える

共通領域

同じ枠の中にあるものは仲間に見える

図と地

前に出る形と、後ろに退く面とに分かれて見える

プレグナンツ

解釈に迷うと、いちばん単純な形に落ち着く

手段としての強さは、共通領域がいちばん上です。強い手ほど画面を重くするので、近接で足りる場面では使いません。

使い分け#

迷ったら、弱い手から試します。強い手は迷わず伝わるかわりに、線と面が画面に増えていきます。

図を大きく見る

図の中身を文字で読む

• 近接　類似　共通領域
• 距離だけ。いちばん軽い　離れていても、見た目の共通で組になる　枠が最優先で効き、そのぶん重い
• 弱い・画面は軽い　強い・画面は重い
• 読み取れる組は3面とも同じだ。近接で足りるところに強い手を使うと、枠だけが増えて階層が消える。

間違えやすいところ#

• ✕すべてを枠で囲う画面が箱だらけになり、階層が消える。近接で足りるなら囲わない
• ✕押せない文字をリンクの色に近づける類似が働き、押せるものと誤解される
• ✕動く背景の上に文字を置く背景が図になり、文字が地に沈む
• ✕「ゲシュタルトが効いていない」と指摘するどの法則かを言わないと、直しようがない

直す例#

架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。

制作会社の料金プラン3列です。プラン名とその説明の距離より、隣のプランとの距離のほうが近い。これを開いた読者は、スタンダードの説明をライトの機能だと読み違えました。近接が逆向きに働いています。

直しは2段です。まずプラン名・価格・説明を1つの .plan にまとめて gap: var(--space-2)、プランどうしは --space-5 に広げます。距離の大小が正しい向きになれば、それだけで誤読は消えます。それでも列の境界が曖昧に見えるときに、はじめて共通領域を出します。枠を1本足すのは、近接で足りないと確かめたあとです。

確認する#

• セットの内側の余白が、セットとセットの間より小さい
• 枠と背景色の箱を1つずつ数え、近接で置き換えられる箱が残っていない
• 押せない文字が、リンクと同じ色や下線になっていない

使えるパターン#

• 3列カードグリッド
• スクリムグラデーション

この話が要る場面#

このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。

この場面のほかの困り事と、そのまま貼れる部品は並べる・揃えるにまとめてある。逆引きには全188件。

区切りを見比べる#

同じ機能の一覧を、罫線で区切った面と、余白だけで組にした面で並べます。線の量だけが違います。

出典#

• Laws of UX「Law of Proximity」
• Laws of UX「Law of Common Region」

関連#

• デザインの4原則この法則を、手を動かす処方に直したもの
• 視覚階層図と地と対比で、読む順序を作る
• レイアウトの型共通領域を部品にしたもの
• 動きの設計共通運命を使う場面