【図と地・ゲシュタルトの法則】バラバラな要素が「ひとまとまり」に見える理由

フォームに名前や住所を入力する画面を思い浮かべてみてください。
『名前』というラベルのすぐ下に入力欄があれば、迷わず記入できます。
けれど、そのラベルが入力欄から離れた場所にあると、どの項目を指しているのか一瞬迷ってしまいます。
私たちは、要素同士の距離や形の共通点から、無意識のうちに『これとこれは同じグループだ』と判断しています。
この判断のしくみを説明するのが、ゲシュタルトの法則です。

興味深いのは、この判断がほとんど一瞬で、しかも意識に上らないまま行われている点です。
私たちは『なぜこの2つが同じグループに見えるのか』を、いちいち考えてから納得しているわけではありません。
先に『同じグループだ』という感覚が立ち上がり、理由はあとから説明を求められて初めて言葉にする、という順番になっています。
デザインにおいてこの法則を知っておく意味は、読み手の意識に上らない部分に働きかけられるという点にあります。

ゲシュタルトの法則とは何か

ゲシュタルトの法則は、20世紀初頭のドイツで発展したゲシュタルト心理学から生まれた考え方です。
心理学者マックス・ヴェルトハイマーを中心とする研究者たちが、人間がバラバラな要素をどのように1つのまとまり（ゲシュタルト）として知覚するかを研究し、1923年に近接・類同・連続・閉合等を含む一連の原則としてまとめました。
『ゲシュタルト』はドイツ語で『形』や『まとまりのある全体』を意味する言葉です。
彼らが注目したのは、人間が世界を細かい部品の集まりとしてではなく、まず全体の形として捉えるという性質でした。
バラバラな点の集まりを見せられても、そこに顔や動物の輪郭を見出してしまうのはこのためです。
100年ほど前の研究でありながら、人間の脳の知覚のしくみそのものを扱っているため、画面のデザインやレイアウトを考えるうえで今も変わらず使われています。

主な法則を1つずつ見る

ゲシュタルトの法則にはいくつかの種類があります。
それぞれ、どんな条件で要素が『同じグループ』に見えるかを説明しています。

【近接の法則】距離が近いものは同じグループに見える

要素同士の物理的な距離が近いほど、人はそれらを同じグループとして認識します。
先ほどのフォームの例がまさにこれで、ラベルと入力欄を近づけるだけで、両者の関連性が一目で伝わるようになります。
逆に、複数の項目を等間隔にびっしり並べてしまうと、どこからどこまでが1つのまとまりなのか読み手が判断できなくなります。
グループ間の余白をグループ内の余白より広く取る、という単純な調整だけで、情報の構造が一気に読み取りやすくなります。
UIデザインにおいて、余白の取り方がそのまま情報の関係性を語る、というのはこの法則に基づいています。
文章の段落分けも、実は同じ原理の応用です。
段落の間に1行分の余白を入れるだけで、読み手は意識せずとも『ここで話の区切りがついた』と受け取ります。

【類同の法則】見た目が似ているものは同じグループに見える

色・形・大きさが似ている要素は、離れていても同じグループとして認識されます。
カテゴリーごとに色分けされたタグやラベルは、この法則を利用しています。
ある通販サイトで、セール品には赤いラベル、新着品には緑のラベルを一貫して使っているとします。
利用者は説明文を読まなくても、色を見た瞬間に『これはセール品の仲間だ』と判断できるようになります。
『同じ色は、同じ種類の情報』というルールをサイト全体で統一しておくと、読み手は直感的にグループを把握できるようになります。

【閉合の法則】欠けていても、脳が補って1つの形として見る

一部が欠けている図形を見せられても、人は空白を脳内で補い、完結した1つの形として認識しようとします。
『【』と『】のような2つの括弧が、離れていても1セットの記号として見える』というのも、この法則の働きです。
ロゴマークのデザインでも、あえて図形の一部を欠けさせることで、見る人の脳に補完させ、印象に残りやすくするという手法がよく使われます。
モバイル画面でよく見かける水平スクロールのカードリストで、右端のカードをあえて少し切れた状態で見せる手法も、閉合の法則を応用しています。
続きがあることが直感的に伝わり、スクロールを促す効果があります。

【連続の法則】なめらかな流れは、つながって見える

視線は、なめらかに続く曲線や直線を自然にたどっていく性質を持っています。
グリッドレイアウトで縦方向に並んだコンテンツを、1つの連続した流れとして認識するのはこの法則によります。
たとえば画像共有サイトの縦長フィードを眺めるとき、投稿ごとの区切りをいちいち意識しなくても、視線は自然に上から下へと流れていきます。
折れ線グラフの推移を目で追うときも、同じ性質が働いています。
読み手に迷わず視線を運んでほしい場面で、要素の並べ方1つが大きな効果を持ちます。

【図と地】同じ絵が2通りに見える理由

ゲシュタルトの法則を語るうえで欠かせないのが『図と地』という考え方です。
私たちは何かを見るとき、注目する対象を『図』として、その背後にある部分を『地』として無意識に分けています。
この分け方が入れ替わることで2通りの見え方をする図形として知られるのが、心理学者エドガー・ルビンが1921年に発表した『ルビンの杯』です。
向き合う2つの横顔にも、1つの杯にも見えるこの図形は、図と地の分離が固定されたものではなく、状況によって切り替わることを示しています。
1つの絵の中に、実は2つの見方が同時に潜んでいるという事実は、私たちの知覚が思っているほど客観的ではないということを教えてくれます。

UIデザインでは、要素をタイル状に並べたときに、要素同士の隙間（地）が意図せず目立ってしまうことがあります。
背景とのコントラストが強いと、余白の交差する部分に灰色の点が浮かんで見えるという錯視まで起きます。
これは、脳が『図』であるべき要素と『地』であるべき余白を、こちらの意図通りに区別できていないサインです。
『主役として見せたい図』と『背景に徹してほしい地』を意識して設計しないと、読み手に余計な認知の負荷を与えてしまいます。
色のコントラストを弱める、要素同士の間隔を調整する、といった小さな工夫で、この負荷はかなり軽減できます。

半透明という表現が階層を語れる理由

この図と地の原理は、近年のUIスタイルを読み解くうえでも役立ちます。
たとえば、すりガラスのような半透明パネルを背景の上に重ねるグラスモーフィズムでは、パネル（図）と背景（地）の分離を保ちながら、透明感によって『奥にも情報がある』という階層を同時に伝えています。
完全に不透明な板を重ねただけでは、単に手前と奥という2層があることしか伝わりません。
半透明にすることで、図と地の分離を保ったまま『奥の存在も感じさせる』という、一段階複雑な情報を1つの視覚表現の中に込められます。
影だけで立体感を演出するニューモーフィズムも、近接や図と地の知覚を利用して、装飾を最小限に抑えながら『押せる場所』を伝える工夫といえます。

デザイン全体の見取り図としては、『デザイン入門』もあわせてご覧ください。
原理とスタイル、両方の視点を行き来することで、目の前の画面がなぜそう見えるのかを説明できるようになります。
色によるグループ分け（類同の法則）に関心のある方は、色彩心理シリーズの入門ページも参考になります。

ここまで紹介した法則は、どれも単体で使うとは限りません。
実際の画面では、近接によってグループがまとまり、そのグループ内で類同によって役割が示され、さらに図と地の分離によって主役がはっきりする、というように、複数の法則が同時に働いています。
1つの法則だけを意識するより『今、読み手の脳はどの法則を手がかりに情報を整理しようとしているか』を想像しながら画面を見直すと、改善すべき点が見つかりやすくなります。
最初から完璧な配置を狙うより、既にある画面を法則の視点で見直すところから始めると、負担なく取り組めます。