🔖

Common Fate(共通の運命)

2024/12/26に公開

共通運命の法則

共通運命の法則(The law of common fate)とは、人は同じ方向に動いたり、同じ動きをするものを一つのグループとして認識する傾向があるとする認知心理学上の考え方のことです。

魚や鳥が群れを成して同調しながら同じ向き・スピードで移動している様子から"Common Fate"と名付けられたようです。

グループを表現するための考え方としては、共通運命の法則はあまり一般的ではなく、それよりもプレグナンツの法則として語られる、以下の4つが有名かと思います。

グループを表現する手法はもっとありますが、これら4つが特に有名なのは、使いやすいからだと考えられます。
動きをつけることができない・難しいパンフレットや従来のWeb体験の領域では、共通運命の法則を活かすことは殆どありませんでした。

ですが、昨今のWeb技術の発展により、図形の移動や変形などの簡単なアニメーション表現がかなり容易になっているので、Webの世界では「共通運命の法則」についても積極的に取り入れてみてもよさそうです。

アニメーションを適用したい場合、グルーピングしたい対象にクラスを一つ与え、そのクラスに対してCSS Animationを定義すればよいわけです。

@keyframes groupA {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(0.5);
  }
}

これは、レイアウト上要素同士が離れていても関係なく適用できるため、共通運命の法則を活かすのに配置的な制約をほとんど受けることなく適用できるという利点があります。

上の例では拡大・縮小の変化量(パーセンテージ)と変化スピードの2つを使ってグループを表現していますが、大きさの異なるもの同士をグルーピングしたいこともあるかと思います。
その時、最適な拡大・縮小の変化量は要素のベースの大きさに依るので、個別にscaleの値を設定したいはずです。

そういったケースについても、CSS Custom Propertyを使えば簡単に実現することができます。

@keyframes groupA {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(var(--scale));
  }
}

要素全体としての変化量が異なっていても、easeとkeyframeを共有していさえすれば、Common Fate感は出せそうです。

例えばですが、音楽のリズムに合わせて画面上のいろんな要素が鼓動しているようなグルーヴ感の演出とかに使えそうですね。

コミューン株式会社のメンバーによる技術発信を行います。