共通運命の法則
Principle of Common Fate

同じ方向に動く・同じ周期で点滅する複数の要素は、同じグループだと認識される法則

同じ方向に並んで飛んでいる鳥は同じグループだと認識されやすい。このように、複数の要素が同じ方向に動いたり、同じ周期で点滅することで、関連性があると解釈される法則を「共通運命」と言う。

同じ方向に飛んでいる鳥の群れ

同じ方向に飛んでいる鳥の群れ

共通運命の法則の例:
動いている要素同士が同じグループだと認識される

ゲシュタルト原則のひとつ

ゲシュタルト原則は、異なる複数の法則で構成され、要素の共通点からグループと認識される。「共通運命」は、ゲシュタルト原則の7つのうちの1つである。

ゲシュタルトの7法則

  1. 近接(Ploximity)
  2. 類同(Similarity)
  3. 連続(Continuity)
  4. 閉合(Closure)
  5. 共通運命(Common Fate)
  6. 面積(Area)
  7. 対称性(Symmetry)

提唱者はチェコの心理学者Max Wertheimerマックス・ヴェルトハイマーであり、ゲシュタルト心理学の創設者の1人である。

マックス・ヴェルトハイマー
引用元:SCIENCEphotoLIBRARY

近接・類同の法則より強く作用する

共通運命の法則は、ゲシュタルト原則の他の要因である「近接の法則」、「類同の法則」よりも強く作用する。

  • 近接の法則:距離が近いものほど同グループと認識しやすい
  • 類同の法則:色・形・大きさなどの類似性によって同グループと認識しやすい

共通運命の法則は、近接・類同の法則より強く作用する

類同の法則と共通運命の法則の関係

「類同の法則」は、色・形・大きさの要素で同じグループと認識されるが、異なる色や形、大きさであっても、同じ方向や速度で移動する「共通運命の法則」は、要素同士の関連性がより高いと認識される。

例えば、同じ黄色の星()、紫の丸()の様に要素が同じ(「類同の法則」の効果が成り立っている場合)でも、異なる要素が一緒に移動すれば関連していると認識される。つまり、共通運命の法則の方が強く作用することを示している。

類同の法則の例

類同の法則
色・形でグルーピングされている

類同の法則+共通運命の法則
同じ動きをする要素は、色や形が違っても同じグループだと認識される

関連性が強く認識されるパターン

関連性が最も強くなるのは次のときである。

  • 複数の要素が同時に、同じ速さで、同じ方向へ動く時。
    または、認識可能で明白なパターンやリズムを伴って動く時(波形など)。
  • 複数の要素が同時に、同じ頻度で、同じ強度で明滅する時。
    または、認識可能で明白なパターンやリズムを伴って明滅する時。

速度やタイミングが同期していないと関連性が認識しづらい

動きの方向、タイミング、または速度が同一でなくなると、認識される関連性は弱まる。

以下のように、同じ動くというグループであっても、異なる方向に異なる速度で動くと、同じグループであると認識しづらくなる。

動きの方向、タイミング、速度が異なると、動いていても同じグループと認識されない

UIでの活用

共通運命の法則は、スクロール、アコーディオンメニュー、スライダーなど様々なUIに利用されている。

コーディネート共有サイトWEARでの利用例

異なる位置、文字数・アイコンの複数のタグを、同じ動き・タイミングのアニメーションで表示・非表示させることで、同じグループの要素と認識しやすくしている。

WEARでの事例

参照元: WEAR
写真下部のタグボタンを押すと、写真上に複数のタグが同じタイミング・同じ動きで現れることで、タグが写真とは異なる要素のまとまりとして認識される

「図と地」との関連性

共通運命の法則は、各要素が図と地のどちらに認識されるかにも影響を及ぼす。

静止している要素と動いている要素がある場合、動いている領域の要素は「地(=背景) 」・静止している要素は「図(= 形)」と認識されやすい。

例えば以下のような図で、文字とアイコンが同時に動いた場合は両方の要素が「地」と認識されるが、アイコンのみが動いた場合は地図が「地」でアイコンが「図」と認識されやすい。

地図と飛行機のアイコン両方動く
→ 両方の要素が「地」として認識される

地図が動いていて飛行機のアイコンは動かない
→ アイコンが「図」 地図が「地」として認識される

図と地と共通運命の法則を組み合わせたUIの例

共通運命の法則と図と地の組み合わせは、さまざまなUIに応用されている。そのひとつが、ボタンが動かず常に表示されている「フローティングアクションボタン(Floating Action Button, FAB)」である。

フローティングアクションボタンが使われているマップアプリでは、地図をスクロールしてもボタンが動かずに常に表示されていて、スクロールで動くマップに対してボタンが浮かんでいるように見える。

常に表示され動かないボタンは、地図と異なる動きであるため、地図と異なるグループであると見なされ、「図」として解釈される。

地図に表示されている駅やコンビニ、学校の説明の文字やアイコンは、地図と同じ方向・同じタイミングで動くため、地図と共通した要素であるとみなされ、「地」として解釈される。

Google mapでのフローティングアクションボタン
スクロールで動かない画面右端のボタンは、スクロールで動く地図と異なるグループと解釈され、ボタンが浮いているように見える

関連用語

参考文献

参考サイト

この記事を書いた人:イケダマリカ

千葉大学・大学院でプロダクト・サービスデザインを学び、現在はメンバー5名の小さなスタートアップで1人デザイナーとして調査、UX設計、UIデザインとフロントエンド実装をやっています。UXも技術も日々勉強中!趣味は片付け、インテリア小物とゲームです。