デザイナーのためのゲシュタルト原則

信頼できるインターフェースはすべてゲシュタルトで動いています。Linear、Stripe、Vercel、Figma、Notion、Apple。どれも新しい知覚ルールを発明してはいません。人間の視覚システムが、画面が存在する前から走らせてきたルールに従っただけです。その従順さこそが、自分で読み解ける画面と、ユーザーが解読しなければならない画面との差です。

ゲシュタルト原則は、意識が登場する前に、脳が生のピクセルを意味へと組み立てる仕組みです。これを知っているデザイナーは、落ち着いたインターフェースを出荷します。知らないデザイナーは、視覚的な密度がまったく同じでも、ごちゃついたインターフェースを出荷します。ピクセルは同じです。変わるのはグルーピングです。

この記事は正典です。8つの原則、1原則につき1つのルール、それぞれに実在プロダクトの例、そして出荷前にどの画面でも回せる監査。ブックマークしてください。

8つの原則、1原則につき1つの法則

ゲシュタルトとは「全体は部分の総和より大きい」という意味です。点の集まりが顔になります。カードの列がリストになります。脳は内容より先にグルーピングを行います。デザインがそれを無視すれば、ユーザーは脳の仕事を手作業で肩代わりすることになり、そしてやってくれません。

現場のデザイナーに必要な8原則です。ルールを覚えれば、あとは応用です。

1. 近接。 近くにあるものはグループとして読まれる。

2. 類似。 見た目が似ているものはグループとして読まれる。

3. 連続。 目はレイアウト上の最もなめらかな経路をたどる。

4. 閉合。 脳は不完全な形を完全な形に補完する。

5. 図と地。 目はレイアウトを前景と背景に分ける。

6. 共通運命。 一緒に動くものはグループとして読まれる。

7. 対称性と秩序。 対称で規則的なレイアウトは、内容が届く前に完成して見える。

8. 焦点。 パターンを破る唯一の点が、画面全体の注意を獲得する。

あなたが敬意を払うプロダクトの、どの画面も、これらを同時にいくつも使っています。ほとんどは8つすべてです。原則は組み合わさるもので、競合しません。

近接:余白がそのままグルーピング

余白は、罫線や区切り線やラベルより多くの意味を運びます。 2つの要素が近ければ、目は関連していると読みます。3つ目が倍の距離にあれば、目は切れ目と読みます。ラベルは要りません。余白が仕事をしました。

Linearのサイドバーは、出荷された中で最もきれいな近接のデモです。Inbox、My Issues、Activeがひとつの密なグループ。Projects、Views、Teamsが別のグループ。Settingsは下に単独で座っています。グループ間に区切り線はなく、あるのは余白だけで、それでもカテゴリは一瞬で読めます。

Stripe Dashboardも指標の行で同じことをやっています。売上、支払い、顧客がひとつのタイルにまとまり、残高と入金が別のタイルになります。同じキャンバス、違うリズム、明快な3セクション。

アンチパターンは、画面全体で均一な余白です。どの要素も他のどの要素とも同じ距離にあり、ユーザーは構造を見つけるためにすべてのラベルを読まなければなりません。解決策は、罫線を増やすことでは決してありません。

解決策は、グループ間のガターを広げ、グループ内の隙間を詰めることです。余白はデザインの不在ではありません。余白こそがデザインです。さらに深い話は余白の用語集にあります。

適用ルール: グループ内は詰める。グループ間は広げる。2つの要素をひとつと見なしたいのでない限り、隣り合う間隔に同じ値を2回使わない。

類似:同じ形は同じ意味

視覚的な扱いの反復は、機能の反復を知らせます。 2つの要素が似ていれば、ユーザーは同じように動くと思い込みます。そうでなければ、そのデザインは嘘をついています。

Notionは類似の上に成り立っています。同じ種類のブロックは、すべて同じ見た目でレンダリングされます。見出しは見出しらしく、コールアウトはコールアウトらしく、コードブロックはコードブロックらしく。ユーザーは5分で視覚的な語彙を覚え、その後は1,000ブロックのドキュメントでも読まずにスキャンできます。

Figmaの左パネルも同じ論理で動きます。フレームはフレームらしく、コンポーネントはコンポーネントらしく、インスタンスはメインの見た目を継ぎつつ「これはコピーです」と告げる紫の縁取りを持ちます。形がユーザーにルールを教えます。

AppleのiOSホームグリッドは、コンシューマー規模の版です。すべてのアプリアイコンが同じサイズ、同じ角丸、同じグリッド間隔。目は「アプリ」をひとつのカテゴリとして読み、意図が働いたときだけ選択に切り替わります。類似を崩せば、読みも崩れます。グリッドから外れたアイコンがひとつあるだけで、グリッド全体がひとまとまりとして崩壊します。

Cursorのdiffビューは、同じ論理をもっと小さな規模で走らせています。追加行は同じ緑、削除行は同じ赤、変更なしの行は同じニュートラル。3つのカテゴリ、3つの扱い、ラベルは不要です。

アンチパターンは「注目を集めたいから、このボタンだけ違う見た目にしよう」です。それは他のあらゆる場所の類似の契約を破ります。ユーザーはどのルールがまだ有効かを確かめるために、すべてのボタンを読み直す羽目になります。単一のアクションを目立たせたいなら、類似の違反ではなく、後述の焦点の原則を使ってください。

連続:目は線を追う

目は、途切れた経路よりなめらかな経路を好みます。 整列、曲線、軸に沿って動き出したら、そのまま進み続けたがります。これを尊重するデザイナーは、ひと息でスキャンできるレイアウトを出荷します。しないデザイナーは、引っかかるレイアウトを出荷します。

Vercelのデプロイビューは、本番稼働している連続です。パイプラインは縦一列のステージとして流れ、各ステージは同じ軸、同じインデントに収まっています。目は上のビルドコミットから下のデプロイまでを、長いログでもひと撫でで読みます。この画面がなぜこれほど長く見られるのかは、ローディング状態こそがプロダクトであるで扱っています。Cursorのdiffガターも小さな軸で同じことをしていて、変更マーカーがきれいな縦の罫線に寄り添い、目が1行ずつ追えます。

アンチパターンは、視覚的な変化のために整列を崩すことです。インデントをずらし、行の高さを変え、途中に中央揃えの要素を放り込めば、目は経路を見失います。ユーザーはレイアウトを読んでいるのではなく、パズルを解読しています。

解決策は、軸をひとつ選び、個々の要素が違っていてもコンテンツをその上に載せることです。Stripeの請求書リスト、Linearのイシューリスト、Anthropicのドキュメントナビ。どれもフラットで、整列していて、ひと目で読めます。

適用ルール: 迷ったら揃える。強制された整列は、芸術的な非対称より速く読める。

閉合:脳が形を完成させる

不完全な形は自動的に補完されます。 40度欠けた円も円として読まれます。意図的な切り欠きのあるロゴも、そのブランドとして読まれます。脳は途切れより全体を見たがるので、隙間を埋めます。

Anthropicのロゴマークは教科書的な例です。2つの斜めの形は決して閉じませんが、目はそれらをひとつのマークに縫い合わせます。Loopsはループのロゴで閉合を使っていて、形は開いているのに、曲がりが完全な回路を暗示します。

Figmaは選択で閉合を使います。四隅の青いハンドルは、角しか描かれていなくても完全な外接矩形を暗示します。ユーザーが見ているのは、フレームであって、宙に浮く4つの点ではありません。

閉合は、ヒーローセクションが罫線なしで成立する理由でもあります。余白と見出しだけで定義されたヒーローセクションは、目が暗示された矩形を閉じるため、まとまりのある単位として読まれます。同じ論理が、ミニマルなカード、プルクォート、ゴーストCTAボタンにも働きます。内容が境界を暗示するなら、境界を描く必要はありません。それを成立させるには、暗示された境界がちゃんと読めるようコントラスト比を守る必要があります。

アンチパターンは、すべてのコンテナを描きすぎることです。太い罫線、厚い区切り線、すべてのパネルにフルストロークのアウトライン。画面は散らかり、あらゆる形が閉合の注意を奪い合います。線を削ってください。目を信じてください。

図と地:罫線なしの奥行き

目はすべての場面を前景と背景に分けます。 この分離が注意の仕組みです。後ろに押しやったものは文脈になり、前に持ち上げたものは主役になります。

Appleのモーダルパターンが決定版のデモです。背景はぼけて暗くなり、モーダルはやわらかい影とともに前へせり上がり、コピーを読む前にユーザーの注意が動きます。Stripeのオーバーレイも同じパターンに従っていて、やや控えめですが論理は同一です。支払いボタンのきらめきは、わずかに後退したカードの上に乗っています。Resendの確認ダイアログもほぼ同じ図と地の動きを使い、アプリ全体がひとつ下がって、ダイアログが前に出ます。

アンチパターンは、奥行きの変化がないフラットなオーバーレイです。モーダルが他のUIと同じ高さでキャンバスに載っていて、ユーザーは焦点の切り替わりを感じません。解決策は、前景を示す実際の知覚の手がかりを重ねることです。

影、ぼかし、暗転、スケール。少なくとも2つ選んでください。すべてのパネルが同じ高さにあるとき、ダッシュボードがどう図と地を漏らしてしまうかは、アンチダッシュボードで扱っています。

適用ルール: すべての要素が同じ平面にあるなら、前景は存在しない。大事なものを選んで、持ち上げる。

共通運命:動きがグルーピングになる

一緒に動くものは、ひとつのものとして読まれます。 3つの項目をドラッグして、同時にずれるのを見れば、形が違っていても目はそれをひとつの単位として読みます。動きを止めれば、まとまりは壊れます。

Figmaの複数選択は、共通運命が働いている例です。3つのレイヤーをつかんで動かせば、協調した単位として移動します。Figmaはグループ化を頼んでいないのに、ユーザーは単一のグループ化されたオブジェクトを編集しています。

Linearのドラッグによる並べ替えは、イシューリストで同じ手を使っています。イシューを持ち上げると、周囲の行が協調してずれ、新しい位置が自明に読めます。Notionのブロックドラッグも同じで、周囲のブロックが一斉にアニメーションして場所を空けます。

共通運命のもう一方の端は、削除です。3つの項目を同じ速度、同じ方向で画面外へアニメーションさせれば、ユーザーはそれをまとめて削除されたと読みます。違う速度でアニメーションさせれば、ユーザーはいくつか失敗したのではと疑います。オンボーディングフローはこれを借りています。スライドは単一のモーションベクトルで進み、ユーザーは旅をひとつの道として読みます。構造としての動きについてのより深い話は、オンボーディングなきオンボーディングにあります。

アンチパターンは、論理的にグループ化された項目の非同期なモーションです。同じ選択に属する3枚のカードが、異なるタイミング、異なるイージング、わずかに異なるベクトルでアニメーションする。データ上はひとつなのに、ユーザーはそれらを別々と読みます。モーションをロックしてください。グループは、グループとして動くところで読まれます。

対称性と秩序:均衡は完成して見える

対称なレイアウトは、読み込みが終わる前から完成して見えます。 脳は規則性を有能さとして読みます。非対称なレイアウトも強力になり得ますが、ほかの手段で稼ぎ出さなければならない知覚税をユーザーに課します。

Stripeの料金ページは教科書的な例です。3カラム、同一のカード構造、完璧に整った垂直リズム、おすすめを示すためにわずかに持ち上げられた中央のプラン。ユーザーは価格を読む前に「これは本物のプロダクトチームだ」と読みます。

Appleのプロダクトグリッドも、マーケティングサイトで同じことをしています。Vercelのダッシュボードパネルは、パネルがリフローしても保たれる厳密なグリッドで動いています。構成が安定性を伝えます。この種の料金構造についてのより深い話は、料金ページの問題と、より広い2026年のマーケティングサイトスタックの解説にあります。

アンチパターンは「クリエイティブに見せよう」です。不規則な幅のカード、揃っていないカラム、機能的な理由なく高さがばらばらの行。ユーザーが読み取るのはカオスです。

非対称なデザインにも居場所はありますが、それは強い焦点と明確なヒエラルキーを必要とする意図的な構図の選択です。SaaSダッシュボードのデフォルトではありません。グリッドを破ったダッシュボードは、すべてスキャン時間で代償を払います。

適用ルール: 対称から始めて、意図的に崩す。画面が退屈に見えたからという理由では、決して崩さない。

焦点:ひとつの破れが画面を制する

目は、パターンを破るただひとつの要素に全注意を向けます。 だから、くすんだグレーのセカンダリアクションが並ぶ画面で、コーラル色のプライマリボタンが勝つのです。そして、「プライマリ」が5つある画面にプライマリがゼロである理由でもあります。

Linearのコマンドパレットは、焦点の教室です。残りのUIは暗くなって後退し、パレットは高コントラストのひとつの面として前に出て、ハイライトされたデフォルトアクションはきっかり1つ。ユーザーは考えなくても、どこを見ればいいか分かります。

Stripeの支払いボタンは、Eコマース版です。ボタンはブランドカラー、穏やかなモーション、わずかに大きいスケールでパターンを破ります。Anthropicのランディングページは、ほかはニュートラルなページの中で、ただひとつのコーラル色のCTAを軸にしていて、見出しを読み終える前に目がそこに着地します。CursorのAI提案にある「Apply」ボタンも同じ論理です。

アンチパターンは、「プライマリ」ボタンが3つあり、同じ重みのナビ項目が海のように広がる画面です。すべての焦点がほかのすべての焦点を打ち消します。勝てるほど強くパターンを破るものがないので、ユーザーの目は止まります。

解決策は、容赦ない降格です。プライマリをひとつ選び、ほかのすべてをセカンダリかターシャリの扱いに降格させる。重みを取り除いたのに画面はむしろ力強くなります。生き残ったひとつが、いまや本当に目を引くからです。より深い話はデザインにおけるビジュアルヒエラルキーと、業界全体の焦点のインフレを解説したなぜ2026年のSaaSはどれも同じに見えるのかにあります。

ゲシュタルト原則とUIパターン

最速のリファレンスです。1原則につき1行、1つのルール、1つのモダンな例、1つのプロダクト。この表は一生保存してください。

保存する資産をひとつだけ身につけるなら、これを身につけてください。現場のデザイナーなら誰でも、最初のデザインレビューの前に、この行を暗唱できるべきです。

ゲシュタルトで画面を監査する方法

出荷前に、画面をこの8つの質問に通してください。ひとつでも答えが「ノー」なら、その画面は、表面上は問題なく見えても、知覚を漏らしています。

1. 近接。 関連する要素は、無関係な要素よりも互いに近いか。画面全体で余白が均一なら、近接によるグルーピングは起きていない。

2. 類似。 同じ機能の要素は、同じ視覚的扱いを共有しているか。2つのボタンが同じことをするのに見た目が違うなら、類似は壊れている。

3. 連続。 目に、上から下、または左から右への明確な経路があるか。レイアウトが理由なくジグザグなら、連続は壊れている。

4. 閉合。 コンテナは、読める範囲で最も軽い扱いで描かれているか。すべてのパネルに太い罫線があるなら、閉合は描きすぎ。

5. 図と地。 画面に明確な前景があるか。すべての要素が同じ高さにあるなら、注意は着地する場所がない。

6. 共通運命。 グループ化された項目のアニメーションは、一斉に動くか。複数選択された要素が別々のタイミングでずれるなら、グループは壊れて読まれる。

7. 対称性と秩序。 レイアウトは、ひと目で完成して感じられるか。目が構造を見つけるために働かなければならないなら、グリッドがユーザーと戦っている。

8. 焦点。 プライマリアクションはきっかり1つか。2つ以上あれば、焦点は打ち消されている。

これを、どのプロダクトの、どの画面の、どの状態でも回してください。通る画面は落ち着いて感じられます。落ちる画面は、視覚的な密度がまったく同じでも、ごちゃついて感じられます。この監査を設定ページの問題の規律と組み合わせれば、最悪の違反箇所を素早く見つけられます。少ないもので多くを成す教義、たとえばデザインシステムは要らないの話も、この監査と自然に組み合わさります。

原則は組み合わさる、競合はしない

優れた画面は、8つすべてを同時に走らせています。近接が整理し、類似が確認し、連続が導き、閉合が掃除し、図と地が優先順位をつけ、共通運命が動かし、対称性が安定させ、焦点が決める。どれも単独では働きません。順序を尊重すれば、どれも互いに争いません。

Linearのアプリは、生きた名講義です。サイドバーは近接でグループ化され、イシューは類似で繰り返され、リストは連続でスクロールし、カードは軽い罫線で閉じ、モーダルは図と地で持ち上がり、ドラッグは共通運命を使い、グリッドは対称性で保たれ、cmd-Kパレットは焦点で勝つ。プロダクト全体が、ゲシュタルトへの従順をひとつのタブに圧縮したものです。

Stripeは、別の規模での同じ教訓です。Vercel、Figma、Notion、Apple、Anthropic、Cursor、Loops、Resend。どれも新しい知覚法則を発明していません。競合より徹底して、既存の法則に従っただけです。

それがデザイン品質の堀のすべてです。秘密はありません。あるのは、知覚の正典への流暢さと、それをすべての画面、すべてのフロー、すべての状態に適用する忍耐だけです。プログレッシブディスクロージャーの背景も、特定のフローの中で同じ役割を果たします。

FAQ

デザイナーのためのゲシュタルト8原則とは?

近接、類似、連続、閉合、図と地、共通運命、対称性と秩序、そして焦点です。それぞれ、人間の視覚システムが自動的に走らせている知覚の法則です。これらを尊重するデザイナーは、自分で読み解けるインターフェースを出荷します。しないデザイナーは、ごちゃついて感じられるインターフェースを出荷します。

UIデザインで最も重要なゲシュタルト原則はどれ?

圧倒的に近接です。余白は、罫線、色、ラベルを含めたどんな扱いよりも多くのグルーピングの信号を運びます。画面でひとつの原則しか正せる時間がないなら、余白を直してください。

ゲシュタルトとビジュアルヒエラルキーの違いは?

ビジュアルヒエラルキーは戦略です。ゲシュタルトはその下にある知覚の物理学です。ヒエラルキーは「ユーザーはまずここを見るべき」と言います。ゲシュタルトは、なぜ実際に目がそこへ行くのかを説明します。ゲシュタルトに従わずにヒエラルキーは作れませんし、ヒエラルキーの計画なしにゲシュタルトに従うと、落ち着いてはいるが方向性のない画面になります。

ゲシュタルト原則はAIネイティブなインターフェースにも関係ある?

関係は薄れるどころか増します。AIネイティブなインターフェースは、従来のアプリより、動的なコンテンツ、ストリーミング出力、不確かなレイアウトを多く出荷します。ゲシュタルトは、そうした動的な面を読めるまま保つルールセットです。コンテンツがリアルタイムで変化するとき、共通運命、類似、焦点が大半の重みを担います。

デザインチームにゲシュタルトを教えるには?

一緒に1つの画面を監査してください。実在の画面を選び、8つの質問をすべて当て、チームがこれまで名前をつけられなかった失敗を見つけるのを眺めましょう。ゲシュタルトは抽象では身につきません。実際のプロダクトで違反を見つけ、目が自動的に拾い始めるまで続けることで身につきます。

CTA

ユーザーがコピーを読む前に、すべての画面が自分で読み解ける。そんなプロダクトが欲しくありませんか?Brainyは、最後に塗るのではなく、骨の中に知覚を焼き込んだインターフェースを設計します。すべてのフロー、すべての状態、すべてのディテールで正典に従います。Brainyに依頼すると、Linear、Stripe、Anthropicが当たり前のように出荷している明快さを、あなたも出荷できます。