心地良さを感じるトランジションタイミング

UIを考えていく上で、軽微なアニメーションへの理解や対応へのニーズはここ最近グッと高まっていると感じます。Invision Studio が標準でそれに細かく応えるような機能を持っている点を見ても、スクリーンデザインには今後欠かせない要素になっていくだろうなと思います。

状態の変化を伝えるアニメーション

「トランジション」 とは、ある画面やカットから次の状態に切り替わる際のアニメーション処理のことを指します。例えば、フェードやスライド、ポップアップなどの演出のことだと思って下さい。これらは画面をリッチに見せる役割以上に、ユーザーに要素の変化を認知させやすくする ことを担っています。

当然ですが切り替わる際に演出時間が生まれるため、その分利用者は待たされることを強制されます。一方で、切り替えがあまりに一瞬過ぎるとユーザーは変化の処理に追いつけず混乱を抱く原因となってしまいます（爆速な操作体験で話題になった Dev.to とか）

前置きが長くなりましたが、今回は遅過ぎず早過ぎない「心地良さ」を感じるトランジション効果のタイミングを探っていきたいと思います。

有名なデザインシステムではどうなっているのか

糸口として、知名度の高いサービスやプラットフォームから公開されているデザインシステムより、モーションに関する記載を集めてみました。

・Fluent Design System（マイクロソフト）
・Carbon Design System（IBM）
・Lightning Design System（Salesforce）

Fluent Design Systemのモーションルール

記事の詳細は こちら

Fluent では、3つのタイミングが定義されており、利用するシーンや用途に合わせて使い分けるようです。

・150ms（画面の終了時に利用）
・300ms（画面の切り替わりや開始時に利用）
・500ms（要素の配置移動時に利用）

イージング（緩急）については、次の3つ定義され、上記の3つの用途でそれぞれ対応しているようです。

・加速（イーズアウト）... cubic-bezier(0.7 , 0 , 1 , 0.5)
・減速（イーズイン）... cubic-bezier(0.1 , 0.9 , 0.2 , 1)
・標準（イーズインアウト）... cubic-bezier(0.8 , 0 , 0.2 , 1)

アニメーションカーブについてもきっちり値が決められている点と、加減速する動きを「標準」の動きと定めている点が印象的です。

また、興味深い点として、

The timing of motion in Fluent uses 500ms (or one-half second) as a baseline because this is the maximum amount of time that a user perceives as instant.

という記述があって、Fluent 的には 500msが人間が「瞬間」と認知できる最大時間 だとしています。つまりこれ以上の時間を効果に用いるとユーザーは「遅さ」を意識してしまう、ということのようです。

Carbon Design System のモーションルール

記事の詳細は こちら

Carbonでは、4つのタイミングが定義されていて、こちらはUI要素ごとで使い分けるルールでした。

・100-200ms（ボタンなどの小さな要素）
・250-300ms（アラートやテーブルの並び替え）
・300-400ms（パネルやモーダル）
・500-700ms（ページ遷移）

Fluent と比べると、それぞれの値に幅をもたせている点、秒数だけなら全体的にややゆったりとしている印象となりますが、ほとんどのモーションは100ms~300ms の間 に収まるとのことです。

イージングについては、Fluent同様に次の3つ定義されていますが、アニメーションカーブの動きは比較的緩やかな印象です。こちらでも、加減速の動きを標準としています。また、Carbon では緩急のない線形の動きについては、使用しないことが明記されています。

・加速（イーズアウト）... cubic-bezier(0, 0, 0.25, 1)
・減速（イーズイン）... cubic-bezier(0.25, 0, 1, 1)
・標準（イーズインアウト）... cubic-bezier(0.5, 0, 0.1, 1)

Lightning Design System のモーションルール

記事の詳細は こちら

これまでの例と違い、Lightning では

Timings are calculated as even multiples of 100ms which is 6 frames at 60 frames-per-second.

とあって、100ms の偶数倍の時間でタイミングを設定すること がルールとされています。Lightning では「心地良さ」のポイントを、一貫したリズム（時間のグリッド）という点にあると考えているようです。今回のテーマとはちょっとズレますが、これはこれで面白い考えだと思いました。

サンプル を見る限り、トランジションやマイクロインタラクションだけでなく、キャラクターを動かすような複雑なアニメーションにもこのルールは適応されているようです。

まとめ

3つのデザインシステムを例に上げて探ってみましたが、何を基準にタイミングを使い分けるのか、どういう視点で「心地良さ」を定義するのかはそれぞれ異なるようで、興味深かったです。これ以外でも多くの例と比較できれば、より面白い発見がありそうです。

全然サンプルが少ないんですが、100ms程度を下限とし、500ms程度を上限とする のが、アニメーションのタイミングを考える上では指標となりそうです。また、イージングについては 加減速する動きを標準として、状況や用途で使い分ける と、自然で心地よい動きを作りやすいように思われます。