「この画面はなんとなく使いにくい」「入力箇所に迷う」といったユーザーの不満を探ると「人間の認知の仕組み」を無視している場合があります。
本記事では、人間の視覚的な認知法則を体系化した「ゲシュタルト心理学」をベースに、ユーザーが直感的に操作できる、画面設計のロジックを、入力フォームを例に解説します。
ユーザーが直感的に利用できる画面デザインには「論理」があります。
フロントエンドエンジニアやプロダクトマネージャーの方にもぜひ知っていただきたい内容です。
ゲシュタルト心理学とは？
「ゲシュタルト（Gestalt）」はドイツ語で「形」「姿」「形態」を表す言葉です。
ゲシュタルト心理学は、20世紀初頭にドイツで生まれた心理学で、簡単に言うと、「人間は物事をバラバラのパーツとしてではなく、まとまった一つの全体（ゲシュタルト）として認識する」という法則を説いたものです。
これは「プレグナンツの法則」とも呼ばれ、私たちの脳が複雑な情報を可能な限りシンプルで秩序ある形として理解しようとする働きを指します。
人間の脳は、無意識のうちに視覚情報を整理し、グループ化しようとします。この脳の特性（錯覚）をUIデザインに逆算して組み込むことで、「説明書を読まなくても使い方や関係性がわかる画面」を作ることができます。
今回は、フォーム設計に直結する3つの法則を紹介します。
1. 「近接の法則」で関係性を明確にする
近接の法則とは、「物理的に距離が近いもの同士は、同じグループとして認識される」という法則です。基本でありながら抜けやすいのがこの「余白（マージン）」の扱いです。
わかりにくいUI
- 「名前」というラベル、その入力欄、次の「メールアドレス」というラベルが、すべて同じ8pxの等間隔で並んでいる。
人間の脳は、どれとどれがペアなのかを一瞬で判断できず、視線が迷います。
わかりやすいUI
ラベル（項目名）と入力フィールドの関係性を視覚的に明示するために、余白にメリハリをつけます。
- ラベルと入力欄の余白： 4px〜8px（近づける）
- 次の項目との余白： 24px〜32px（離す）
このように「ペアとなる要素の距離」を「他の要素との距離」よりも明らかに短くすることで、ユーザーは無意識に「このラベルはこの入力欄に対するものだ」と認識でき、入力スピードが向上します。
2. 「類同の法則」で操作の期待値を揃える
類同の法則とは、「形、色、大きさなどの視覚的特徴が似ているものは、同じ機能や性質を持つと認識される」という法則です。
わかりにくいUI
- テキスト入力欄（input）と、ドロップダウン（select）の枠線のデザインや背景色が違う。
わかりやすいUI
ユーザーの「これは入力できる場所だ」というメンタルモデルを裏切らないよう、要素のスタイルを統一します。
- 入力可能なフィールドは、角丸（border-radius）や枠線の色、フォーカス時のハイライト色（outline）をシステム全体で統一します。
同様の機能を持つものは同じ見た目にし、違う機能を持つものは明確に見た目を変えることで、ユーザーは画面内のルールを瞬時に学習できます。
3. 「閉合の法則 / 共通領域の法則」で複雑さを軽減する
閉合の法則や共通領域の法則は、「線で囲まれたり、同じ背景色の上に配置されたりした要素は、ひとつのグループとして認識される」という法則です。
入力項目が数十個に及ぶ巨大なフォームで非常に有効です。
わかりにくいUI
- 「会社情報」「担当者情報」「請求先情報」などの異なるカテゴリの入力項目が、仕切りもなく延々と縦に羅列されている。
ユーザーは情報のゴールが見えず、心理的ハードルが高まり離脱に繋がります。
わかりやすいUI
情報を意味のあるグループに分け、視覚的な境界線を設けます。
- カードUIの活用: 「会社情報」で1つの白いカード、「請求先情報」で別のカードにし、背景（グレー系）の上に配置します。
- セクション区切り: カードを使わない場合でも、セクション間に罫線（ボーダー）を引き、見出し（h2やh3）を大きく配置することで情報のまとまりを作ります。
「ここからここまでがセットだな」と視覚的に区切られているだけで、ユーザーが処理しなければならない情報の認知負荷は下がります。
おわりに：デザインは「エンジニアリング」できる
「デザインが垢抜けない」「使いにくい」との評価を受けて、つい「色」や「装飾」といった表面的な要素に目が行きがちですが、UIにおける使いやすさは、今回ご紹介したような「余白」と「配置」の論理的な設計で、ほとんど決まります。
次に入力フォームを実装する際に、「この余白はどう認識されるか？」という視点を持ってみてください。それだけで、プロダクトのUXは向上するはずです。
余談
ちなみに、上記の「複数の要素をまとまりとして捉える」のがゲシュタルト心理学の基本ですが、それとは反対に、特定の対象を凝視し続けることで「まとまり」が見えなくなり、バラバラな部分としてしか認識できなくなる現象があります。これが「ゲシュタルト崩壊」です。
