人の脳は知覚した複数の情報がグループだと認識できると、すばやく効率的に情報を処理することができる。たとえ、要素同士の間隔が離れている場合でも、色や形、サイズや向きなど、似ている要素に関連性を見出し、同じグループとして認識する。
一方、その状況下において、周囲のどのグループにも属さない要素は孤立した印象を受けるため目立つ傾向にある。
色や形、サイズや向きでグループを認識できる
The Gestalt Principles – Theory Of Good Design Psychology
類同は、人が情報を目にして認識する際の特徴をまとめた「ゲシュタルト原則」のひとつである。
1910年にチェコ出身の心理学者Max Wertheimerらを中心に仮現運動というアニメーションの研究が始まる。それを基に1923年「ゲシュタルト原則」の基礎となる6原則の近接・類同・連続・閉合・共通運命・良い形が発表された。
マックス・ヴェルトハイマー
引用：Max Wertheimer – Wikiquote
要素同士に違いがあっても関連性を見出す
色や形状の違いによる類同
赤・青・緑、三角形・四角形の要素がバラバラに配置されている図を見ると、赤と青の三角形は距離が離れていても、「赤い三角形」「青い三角形」のグループとして認識できる。また、緑は三角形と四角形という別の形状だが、同じ「緑の図形グループ」だと認識できる。
形状が違っても同じ属性同士は、同じグループであると認識できる
サイズ違いによる類同
色や形だけでなく、サイズの違いでも類同を感じることができる。赤・青・緑、三角形・四角形の要素の色の配置は同じで、一部のサイズを変化させたものである。色が違っても同じ大きさの図形は、グループとして認識できる。
大きな図形と、小さな図形同士が同じグループだと認識できる
方向の違いによる類同
要素の方向によっても類同を感じることができる。緑の三角形と、四角形の画像のうち、一部の三角形は上下を反転して配置している。同じ向きの三角形は同じグループとして認識できる。
図形の方向が同じものは、同じグループであると認識できる
類同の法則を破った要素は目立つ
要素は周囲のグループから孤立した要素は目立ちやすい。緑の図形の中に、一つだけ赤い三角形を配置した。赤い三角形だけが周囲の色の要素から孤立しているため、無意識に注目してしまう。
法則を破るとグループから孤立するため、注目されやすい
Webサイトで類同を活用する
ファッションECサイト「ZOZOTOWN」のトップページでは、モデルの写真や色彩を抑えたサイトデザインのなかに、イラストを使った明るい黄緑色のバナーで、タイムセールへのリンクを表示している。タイムセールの情報がサイト内で孤立しているように感じ、自然と目立つように設計されている。
ファッションECサイトのトップページ。タイムセールバナーはページ内の要素のどのグループにも属しておらず、自然と目立っている
引用：https://zozo.jp/
食器やパッケージデザインで類同を活用する
類同を活用すると、違う要素同士に関連性を生み出すことができ、分かりやすくなる。
例えば、家族それぞれで専用の食器を用意したい場合、平皿やマグカップなど形状は違っても同じ色系統で揃えると、誰の食器か区別がつきやすい。
赤と青の食器は、1セットの食器であると認識できる
他にも、製品の形状を似せることで製品のブランディングや、使い方の学習コストを下げることができる。
例えば、某社のスパイスボトルは、パッケージデザインと容器の形状を共通させている。売り場に陳列された際に、同一ブランドからのシリーズ商品であることが一目で理解できる。また、自宅で使用する際には、容器の形状が同じなので、迷わず使えるようになる。
容器の形状が同じで中身が違う、6種類のミル付きスパイスボトル
ただし、似ているパッケージの場合、注意すべき点がある。パッケージが似すぎていると、ユーザーが本当に欲しかった商品と間違えて、別の商品を手に取る可能性がある。ユーザーが急いでいる時でも間違えないよう、区別のつきやすいパッケージや、売り場での陳列に工夫が必要となる。
関連用語
https://uxdaystokyo.com/articles/glossary/ploximity/
