モーション | 1人design system advent calender 9日目

9日目はモーションについて。 デザインシステムにおいてモーションをどのように管理するか。

モーションの分類

カラーパレットなどと同様に、モーションもプロダクト内でどのようなパターンを持っているのか、全て洗い出す必要がある。全てのモーションが同じイージングである必要も同じ間隔である必要もないだろうけど、プロダクト内にどのようなモーションが存在するかを把握できるようになっていないと一貫性のあるUIを提供することが難しくなる。モーションはプロダクトの印象に関わる重要な要素なので、これまで見てきたデザインシステムの要素と同様に、全てのパターンを洗い出し、適切にデザインシステムで管理できる状態にするのが望ましい。

カラーパレットやタイポグラフィであれば、プロダクト内で使われるものを全て洗い出して、それらを分類して、必要なもの不要なもの統合できるものなどを明確にして、最終的にデザイントークンに落とし込める状態に持っていくことになるけど、モーションの場合、分類するのがこれまでとは同じようにはできない。モーションの場合、分類をどういった視点や粒度で行うのかはプロダクト次第なので、そのあたりから定義する必要がある。

In FutureLearn’s interface we defined three animation patterns based on their purpose: state change, emphasis, and reveal.

Pattern library - Animations - FutureLearn

FutureLearnの場合は、3つのパターンに分類している。

  • State Change: ユーザ操作による状態変更を示すモーション
  • Emphasis: 特別な情報やアクションに対する注意喚起を示すモーション
  • Reveal: 表示・非表示の切り替えを行うモーション

これはあくまで一例。プロダクトによってモーションのカテゴリは独自に定義する必要がある。

モーションのパレット

モーションの分類ができたら、モーションの間隔やイージングをデザイントークンに落とし込む。カラーパレットやスペースなどと同様に、イージングの値やモーションの間隔は決してハードコードせずにデザインシステムで定義したトークンから組み合わせてプロダクトで利用する。 FutureLearnを例にとると、easingdurationの関数を用意してそれらに引数を渡すことでトークンを利用するようにしている。

transition: transform easing('motion') duration('short');

10日目はアクセシビリティについて書く。