ゲシュタルト要因とUIデザイン

UIを考える上で非常に重要な法則である、「ゲシュタルト要因（プレグナンツの法則）」について。

ゲシュタルト要因とは？

「ゲシュタルト要因」とは、ゲシュタルト心理学という分野で使われる言葉で、「プレグナンツの法則」とも呼ばれます。

人間があるものを知覚（見る）ときの法則をまとめたもので、私たちが無意識のうちに「まとまり」と感じるのはどういうものかを示したものです。

比較的有名な法則で、デザイナーをはじめ多くの方が実際に利用しているものです。

中には感覚的に無意識で利用している場合もあります。

7つのゲシュタルト要因

ゲシュタルト要因には以下の7つがあります。

• 近接の要因
• 類同の要因
• 連続の要因
• 閉合の要因
• 共同運命の要因
• 面積の要因
• 対称の要因

今回は特にUIを考える上で利用しやすい、「近接の要因」「類同の要因」の2つについてご紹介します。

近接の要因

近接の要因とは、近くにあるもの同士は「まとまり」を感じるというものです。

上下どちらも24個の点が描画されていますが、下は4個の点のまとまりが6グループあるように感じます。

このように、近くにあるものは「まとまり」を感じる、というのが近接の要因です。

つまり、意味的にまとまりのあるUI要素は、他の要素と比べて近づけることが大事です。

自作アプリのcubironの例で説明します。

上の例で言うと、「BGM」「SE」はサウンド関係ということでまとまりがあるので、「BGM」「SE」間の余白は「SE」「Swipe Mode」間の余白よりも小さくします。　

これによって「BGM/SE」と「Swipe Mode」というまとまりの分かれ方を感じられるようになりました。

さらに、「BGM」という文字と「BGMを操作するスライダー」もひとつのまとまりと認識される必要があります。

そのため、ラベルとスライダーの間の余白はさらに小さくします。

類同の要因

類同の要因とは、色や形が似ているもの同士は「まとまり」を感じるというものです。

24個の点は、8個の点の集まりが3グループあるように感じられます。 　

このように色や形の似ているものは「まとまり」を感じる、というのが類同の要因です。 　

つまり、意味的にまとまりのあるUI要素は、同じ見た目にすることが大事です。

コロプラの「白猫テニス」の例で見てみます。

画面の下半分に多くのボタンが配置されています。

　
操作内容によって見た目を揃えることで、適切にグループ化されているように感じ、見やすくなっています。 　

これがもし全て同じ見た目のボタンだった場合、複雑に感じるのは容易に想像できるでしょう。

また、画面上部のヘッダー部分も見てください。

「ゴールド」「ソウル」「ジュエル」というゲーム内で使用するアイテムの所持数を表示している部分です。

これらは「アイテムの所有数を表している」という共通点があるので、アイコンや下線などのレイアウトを統一し、類同の要因を使ってまとまりを表現しています。

一方で、それぞれ種類や用途は異なるものです。

そのためアイコン画像を変えたり色分けをしたりすることで、「別のものである」ということも分かりやすくしています。

多くのゲームでは、デフォルトのボタンというものが決められており、色や形が統一されています。
　

「ボタンである」というのもまとまりのひとつなので、ユーザーにボタンであると認識されるようにある程度デザインを統一することが重要です。

特に同じ用途のボタンなのに見た目が異なる、というのはユーザーが理解しづらいデザインとなってしまいます。

ダイアログ、「戻る」「進む」ボタン、タブボタンなど、同じ用途で使われるボタンはそれぞれできる限り見た目は統一しましょう。

統一感が出るとともに、開発者目線からしてもボタンを複製するだけで作れるので、お互いにWin-Winなはず。

また、ボタン自体の見た目だけではなく画面全体におけるボタンの配置の統一も重要です。
　

「戻る」ボタンが左にあったり右にあったり下にあったりしては、混乱を招く原因になります。

大体の場所だけではなく、余白のサイズなども含めて数値的にきっちり同じ位置に配置されるようにすることが必要です。（これも開発者目線で言えば、コピペするだけで済むので簡単なはずです。）

まとめ

ゲシュタルト要因のうち、UIにも利用しやすい「近接の要因」「類同の要因」について、実際の例を交えながら説明しました。