ゲシュタルトのデザイン原理を探る
公開: 2022-03-11この記事の音声バージョンを聞く
ネガティブスペースは長い間、優れたデザインの定番でした。 デザインの要素の周りに空白を残すことは、通常最初に頭に浮かぶことです。 しかし、その空白を使用して実際には存在しない要素を推測するデザインがあります（例として、FedExロゴのEとXの間に隠された矢印がすぐに思い浮かびます）。
人間の脳は、画像の空白を埋めて、その部分の合計よりも大きい全体を作成するのに非常に優れています。 木の葉や歩道のひび割れなどに顔が見えるのはそのためです。
この原則は、視覚のゲシュタルト原則の背後にある最も重要な基本的な考え方の1つです。 理論について書かれた最も影響力のある初期の提案は、マックス・ヴェルトハイマーによって1923年の知覚組織のゲシュタルト法で発表されましたが、ヴォルフガング・コーラーの1920年の物理的ゲシュタルトに関する議論にもこの主題に関する多くの影響力のあるアイデアが含まれています。
誰が最初にアイデアを提案したかに関係なく（1890年までさかのぼるエッセイがあります）、ゲシュタルトの原則はすべてのデザイナーが学ぶための重要なアイデアのセットであり、それらの実装はデザインの美学だけでなく、その機能性と使いやすさ。
簡単に言えば、ゲシュタルト理論は、人間の脳が無意識のうちにパーツを配置して、単なる一連の異なる要素。 私たちの脳は、私たちが住んでいる環境をよりよく理解するために、構造とパターンを見るために構築されています。
ゲシュタルト理論に一般的に関連する6つの個別の原則があります：類似性、継続、閉鎖、近接性、図/地面、および対称性と秩序（プラニャンツとも呼ばれます）。 また、一般的な運命など、ゲシュタルトに関連することがある、いくつかの新しい新しい原則もあります。
類似性
好きなものを一緒にグループ化するのは人間の本性です。 ゲシュタルトでは、類似した要素は、互いに近接しているかどうかに関係なく、視覚的にグループ化されます。 それらは、色、形、またはサイズでグループ化できます。 類似性を使用して、デザイン内で互いに隣接していない可能性のある要素を結び付けることができます。
もちろん、群衆から目立たせたい場合は、物事を非類似にすることができます。 そのため、行動を促すフレーズのボタンは、ページの他の部分とは異なる色でデザインされていることが多いため、目立ち、目的のアクションに訪問者の注意を引き付けます。
UXデザインでは、類似性を使用すると、訪問者にどのアイテムが類似しているかが明確になります。 たとえば、反復的なデザイン要素（3〜4行のテキストを伴うアイコンなど）を使用する機能リストでは、類似性の原則により、それらを簡単にスキャンできます。 対照的に、強調したい機能のデザイン要素を変更すると、それらが目立つようになり、訪問者の認識においてより重要になります。
デザイン全体のリンクが同じようにフォーマットされていることを確認するような単純なことでも、訪問者がサイトの構成と構造を認識する方法の類似性の原則に依存しています。
継続
連続の法則は、線が実際にどのように描かれたかに関係なく、線を表示するときに人間の目が最も滑らかな経路をたどることを前提としています。
この継続は、訪問者の目を特定の方向に導くことが目標である場合に役立つツールになります。 彼らはページ上の最も単純なパスをたどるので、彼らが見るべき最も重要な部分がそのパス内にあることを確認してください。
目は自然に線をたどるので、アイテムを一列に並べると、あるアイテムから次のアイテムに自然に目を引きます。 アマゾンのようなサイトの関連商品リストと同様に、水平スライダーはそのような例の1つです。
閉鎖
クロージャは、最もクールなゲシュタルトの原則の1つであり、この記事の冒頭ですでに触れたものです。 それはあなたの脳が全体を作成するためにデザインや画像の欠けている部分を埋めるという考えです。
最も単純な形では、閉鎖の原理により、目は点線のようなものを最後までたどることができます。 しかし、世界自然保護基金のように、より複雑なアプリケーションがロゴによく見られます。 パンダの輪郭の大きな塊が欠けていますが、あなたの脳は動物全体を見るために欠けている部分を埋めるのに問題はありません。
クロージャーはロゴデザインでよく使用され、USAネットワーク、NBC、サンマイクロシステムズ、さらにはアドビなどの他の例もあります。
UXおよびUIデザインで機能するクロージャーのもう1つの非常に重要な例は、ユーザーが左または右にスワイプするとさらに多くの画像が見つかることを示すために、ユーザーの画面からフェードアウトする部分的な画像を表示する場合です。 部分的な画像がない場合、つまり完全な画像のみが表示されている場合、脳はさらに多くの画像が表示される可能性があるとすぐに解釈しないため、ユーザーがスクロールする可能性は低くなります（閉鎖がすでに明らかであるため）。
近接性
近接性とは、要素が互いにどれだけ近いかを指します。 最も強い近接関係は、重なり合う被写体間の関係ですが、オブジェクトを1つの領域にグループ化するだけでも、強い近接効果が得られます。
もちろん、その逆も当てはまります。 要素間にスペースを入れることで、他の特性が同じでも分離を加えることができます。
このサークルのグループを例にとってみましょう。
UXデザインでは、ユーザーがハードボーダーなどを使用せずに特定のものをグループ化するために、近接性が最もよく使用されます。 各グループの間にスペースを空けて、同じようなものを近づけることで、視聴者はあなたが知覚したい組織と構造をすぐに理解します。
図/地面
フィギュア/グラウンドの原理は、脳がネガティブスペースを処理する方法を利用するという点でクロージャーの原理に似ています。 この原則の例は、ソーシャルメディアのミームで、またはロゴの一部として（すでに述べたFedExロゴのように）浮かんでいるのを見たことがあるでしょう。
あなたの脳は、画像の前景（図または焦点）と背景（図が置かれている領域）にあると見なすオブジェクトを区別します。 興味深いのは、前景と背景に次のような2つの異なる画像が実際に含まれている場合です。
この画像では、2つの顔がろうそく立てまたは花瓶を作成している、より簡単な例を見ることができます。
一般的に、あなたの脳は画像の広い領域を地面として解釈し、小さな領域を図として解釈します。 ただし、上の画像に示されているように、明るい色と暗い色が、図として表示されるものと地面として表示されるものに影響を与える可能性があることがわかります。
図/地面の原理は、製品設計者が焦点を強調したい場合、特にアクティブまたは使用中の場合、たとえば、モーダルウィンドウがポップアップし、サイトの残りの部分が背景にフェードインする場合に非常に便利です。検索バーをクリックすると、検索バーとサイトの他の部分とのコントラストが向上します。
対称性と秩序
対称性と秩序の法則は、ドイツ語で「良い姿」を意味するプラグナンツとしても知られています。 この原則が言うことは、あなたの脳は可能な限り単純な方法で曖昧な形を知覚するということです。 たとえば、オリンピックのロゴのモノクロバージョンは、曲線の集まりではなく、一連の重なり合う円として表示されます。
ゲシュタルト設計原理「プラグナンツ」のもう1つの良い例を次に示します。
左側の画像は、画像全体よりも単純な形状であるため、それぞれの輪郭が不完全な場合でも、脳は左側の画像を長方形、円、三角形として解釈します。
共通の運命
一般的な運命はもともとゲシュタルト理論に含まれていませんでしたが、その後追加されました。 UXデザインでは、その有用性を見逃すことはできません。 この原則は、人々が同じ方向を指している、または同じ方向に動いているものをグループ化することを示しています。
自然界では、これは鳥の群れや魚の群れのようなもので見られます。 それらはたくさんの個々の要素で構成されていますが、それらは一見一つとして動くので、私たちの脳はそれらを一緒にグループ化し、それらを単一の刺激と見なします。
アニメーション効果が現代のデザインでより一般的になるので、これはUXで非常に便利です。 この原理の恩恵を受けるために要素が実際に動いている必要はありませんが、動きの印象を与える必要があることに注意してください。
UXデザインにおけるゲシュタルトの原則
他の心理学の原則と同様に、ゲシュタルトの視覚の原則をデザイン作業に組み込むことを学ぶことで、ユーザーエクスペリエンスを大幅に向上させることができます。 人間の脳がどのように機能するかを理解し、人の自然な傾向を利用することで、ユーザーが初めてアクセスした場合でも、Webサイトで快適に感じることができるよりシームレスな対話が作成されます。
ゲシュタルトの原則は、ほぼすべてのデザインに比較的簡単に組み込むことができ、無計画に見えるデザインや、ユーザーの注意を引くために戦っているようなデザインを、ユーザーが実行したいアクションに導くシームレスで自然な相互作用を提供するデザインにすばやく引き上げることができます。
Toptal Designブログでさらに読む：
- 設計原則：階層の概要
- UIデザインのベストプラクティスとよくある間違い
- デザインで強力なゲシュタルト原理を使用する方法（インフォグラフィック付き）
- 情報アーキテクチャの包括的なガイド
- これらの成功したインタラクションデザインの原則でUXを後押しする