類同の法則とは?資料や画面の情報がまとまって見える仕組み

判断・認知バイアス
Psychology Laws 編集部

資料の中で同じ色の見出しが並んでいると、離れた位置にあっても「同じ種類の情報」と感じることがあります。画面上のボタンやカードでも、形や色が似ているものは同じ役割のように見えやすくなります。

類同の法則とは、色・形・大きさ・向きなどが似ている要素ほど、ひとまとまりとして知覚されやすいというゲシュタルト心理学の群化原理です。ただし、似ていれば必ず同じグループに見えるわけではありません。近さや配置など、ほかの群化要因との組み合わせで見え方は変わります。

この記事では、類同の法則の意味と研究上の位置づけを確認し、資料や画面で情報を整理するときにどう使えばよいかを説明します。

類同の法則とは?意味と別名

類同の法則は、英語では principle of similarity や factor of similarity と呼ばれます。日本語では「類同の要因」「類似性の法則」などの表現も使われます。

ゲシュタルト心理学では、私たちは視野の中の要素を一つずつ独立して見るだけでなく、いくつかを「まとまり」として知覚すると考えます。類同は、そのまとまりを生みやすくする要因の一つです。

たとえば、同じ間隔で丸が並んでいても、赤い丸と青い丸が交互ではなく列ごとにそろっていれば、同じ色同士が一つの列として見えやすくなります。現代のレビューでも、他の条件が同じなら、色・大きさ・向きなどが似た要素はまとまって知覚されやすいと整理されています(Wagemans et al., 2012)。

なお、「法則」という名前から、物理法則のように必ず起こると考えるのは適切ではありません。ゲシュタルト研究では「群化の要因」「原理」として扱われてきました。日本語の研究でも、これらは後に「ゲシュタルトの法則」と呼ばれるようになったことが説明されています(渡辺, 2019)。

研究で分かっていること

似ている要素は、距離が同じでもまとまりやすい

Wertheimer(1923)は、点などの簡単な要素の配列例を用いて、知覚上のまとまりに関わる要因を示しました。

類同については、要素どうしの距離を同じままにして色を変えると、似た色の要素同士がまとまって見えることを示しました。Wertheimerはこれを「似た部分が結びつく傾向」として、類似性の要因と呼んでいます(Wertheimer, 1923/1938)。

この考え方は現在の知覚研究でも引き継がれています。Wagemansら(2012)のレビューでは、色だけでなく、大きさや向きの類似も群化に関わる古典的な原理として整理されています。

類同と近接は、同時に働くことがある

重要なのは、類同だけで見え方が決まるわけではないことです。

Wertheimerは、似ているもの同士をまとめる「類同」と、近いもの同士をまとめる「近接」が同じ配置の中で働く場合も検討しました。二つが同じまとまりを支持すれば群化は強まり、反対のまとまりを支持すれば、条件によってどちらかが優勢になります(Wertheimer, 1923/1938)。

つまり、「同じ色にすれば離れた要素でも必ず同じグループに見える」とは言えません。色、形、距離、配置などを合わせて見る必要があります。

類似性によるまとまりは、視覚的な記憶にも関係した

PetersonとBerryhill(2013)は、色付きの円を使って、類似した要素のまとまりが視覚ワーキングメモリ(見た情報を短い間、頭の中に保つ働き)にどう関わるかを調べました。用いたのは変化検出課題で、円を短時間見せたあとに間を置いて再び提示し、色が変わったかどうかを答えてもらう方法です。

実験1では、同じ色の要素がまとまる条件で記憶成績がよくなりました。一方、実験2では、似た要素が空間的に近いときには利点が見られましたが、離れていると同じ利点は確認されませんでした(Peterson & Berryhill, 2013)。

この研究は資料やWeb画面の理解度を直接調べたものではありません。そのため、「類同を使えば資料の理解度が上がる」とまでは言えません。また、PetersonとBerryhill(2013)で見られた「類似性による記憶上の利点は似た要素が近い場合に限られる」という相互作用は、後続研究では同じ形で再現されていません。MagenとBerger-Mandelbaum(2018)は、この点について類似性と近接の関係はさらに検討が必要だと整理しています(Magen & Berger-Mandelbaum, 2018)。

仕事での具体例

ここからは研究そのものではなく、資料や画面で類同の原理を考えるための説明用の例です。

たとえば、営業会議で使うダッシュボードに「売上」「粗利」「問い合わせ件数」「対応遅延」の四つのカードがあるとします。

  • 売上と粗利は同じ形・同じ見出し色にする
  • 問い合わせ件数と対応遅延は別の共通スタイルにする
  • 同じ種類のカードは近い位置にも配置する

こうすると、見た目の類似と位置の近さが同じ分類を支持するため、「どの情報が同じ種類か」を視覚的に読み取りやすくなります。

反対に、売上の「目標達成」を示す色と、問い合わせの「緊急」を示す色に同じ赤を使うと、意味が違うのに同じグループや状態のように見える可能性があります。類同は、意図したまとまりだけでなく、意図しないまとまりも作ります。

仕事で活かす方法

1. まず「何を同じ仲間として見せたいか」を決める

色や形を先に決めるのではなく、情報の意味を先に分けます。

たとえば資料なら、「同じ階層の見出し」「同じ種類の数値」「同じ状態の項目」など、読者に同じグループとして理解してほしいものを決めます。

2. 同じ意味には、同じ視覚ルールを使う

同じ種類の情報には、見出しの文字サイズ、背景、アイコン、枠線、形などをそろえます。

たとえば、すべての「注意事項」に同じアイコンと見出し形式を使えば、ページが変わっても同じ役割の情報だと判断しやすくなります。

3. 類同だけでなく、近接も合わせる

研究では、類同と近接が協力したり競合したりすることが示されています。そのため、同じグループとして見せたい要素は、見た目をそろえるだけでなく、位置も近づけるほうが意図が伝わりやすくなります。

逆に、意味の異なる要素を近くに置く場合は、余白、見出し、囲みなどを使って区切りを明確にします。

4. 「同じ見た目なのに意味が違う」箇所を探す

仕上げでは、同じ色・形・アイコンが別の意味にも使われていないかを確認します。

見る側は作成者の意図を知りません。見た目が同じなら、同じ役割や関係があると受け取る可能性があります。デザインルールを増やすより、同じ見た目には同じ意味を持たせるほうが整理しやすくなります。

活用するときの注意点

類同は、情報を分類して見せるための手がかりであって、内容そのものを理解させる万能な方法ではありません。重要な情報は、見た目だけでなく、見出しやラベルでも意味を示す必要があります。

特に色だけに分類を任せるのは避けたほうが安全です。Web Content Accessibility Guidelines(WCAG)2.2は、ウェブコンテンツを、障害のある人を含めて利用しやすくするための国際的なアクセシビリティ指針です。その成功基準1.4.1では、情報の伝達、操作の提示、反応の促し、視覚要素の区別において、色だけを唯一の視覚的手段として使わないことが求められています(W3C, WCAG 2.2)。色に加えて、文字、形、アイコンなど別の手がかりを併用できます。

参考文献・出典