Material Design 3 要点まとめ #11 Motion - Easing and duration

Material Design 3 ガイドラインの要点をまとめたものです。
第11・12回はMotionの章。ちょっと長いので記事を2つに分けます。今回はOverview＋Easing and durationの項。Overviewではモーションがデザイントークンとして整備されたことが紹介されています。Easing and durationは、物理世界の動きを模倣する「イージング」と、変化の継続時間である「デュレーション」についての内容です。

Motion – Material Design 3

Overview

Motion – Material Design 3

M2からの更新ポイント

• モーションのパラメータがデザイントークンとして整備された。

• イージングトークン：「強調（Emphasized）」と「標準（Standard）」の2種類。

• デュレーショントークン：ショート、ミディアム、ロング、エクストラロングの4種類。

• よくあるトランジションパターンの解説が追加された。（次の記事で触れます）

ここには書かれていませんが、M2からの変更点としてもう一点。イージングが強調され、デュレーションも少し長くなって、全体的によりエモーショナルな印象に変わっています。

---

Easing and duration

Easing and duration – Material Design 3

・イージングとは
・2つのイージングセット
・4つのイージングタイプ
・デュレーションの選択

もしかしたらTransitionsの記事を先に読んだほうがわかりやすいかもです。

イージングとは

• 現実世界での物理法則を模倣した動きのこと。動き始めは遅く、だんだん速度がついて、徐々に止まる動き。

• イージングのないトランジションは硬く機械的に見え、イージングのあるトランジションはより自然に感じられる。

2つのイージングセット

「強調イージングセット」と「標準イージングセット」の2種類があります。

• 強調：ほとんどのトランジションで使用推奨。

• 標準：トランジションの自然さよりも実用性や素早さを優先させたい場合に使用。

6つのイージングタイプ

各イージングセットの中に3つずつ、イージングタイプが用意されています。

• 強調：開始時に徐々に速度を上げ、停止時に徐々に速度を下げる。

• 強調減速：最大速度で開始し、停止時に徐々に速度を下げる。

• 強調加速：開始時に徐々に速度を上げ、最大速度のまま停止する。（主な使い方としては、停止というより画面外へ消失する。後述の消失を参照。）

• 標準・標準減速・標準加速：変化の仕方は上記3つとそれぞれ対応する。強調セットよりも変化の度合いが少ない。

テキストを読むよりも動画を見ると一目瞭然です。
・強調イージングセット
・標準イージングセット

イージングタイプの選択

どんなトランジションのときにどのイージングタイプを選択するのが適切か、4つの例が挙げられています。

• 開始と終了：トランジションの開始から終了までが画面内で収まるパターン。強調イージングを採用。

• 出現：対象が画面外から出現し、画面内で停止する場合は強調減速イージングを使用する。

• 消失：出現の逆で、画面内の対象が停止しないまま画面外へ消えるパターン。強調加速イージングを使用。

• 一時的な消失：消失と同じく対象が画面外へ消える動きだが、すぐに再び画面内に呼び戻せる場合は強調イージングを採用する。ナビゲーションドロワーなどが代表的な例。

消失と一時的な消失の使い分けが面白いです。画面外へ出ていったきり戻ってこれない場合は減速せず、すぐに戻ってこれる場合は消失直前に減速することでユーザーに示唆を与えています。

デュレーションの選択

「デュレーション」とは、トランジションの開始から終了までにかかる時間の長さのことです。トランジションの変化の大きさや種類に応じて適切なデュレーションを選択することが重要です。

• 小さい変化には短いデュレーションを、大きい変化には長いデュレーションを採用する。そうすることで一貫したスピード感が得られる。

• 「終了」「解除」「折りたたむ」のようなトランジションは比較的短いデュレーションを用いる。終了するトランジションは、ユーザーが次に行うタスクよりも注意を向ける優先度が低いため、手早く処理する。

• 「画面に入る」「画面に残る」トランジションは、比較的長いデュレーションを用いる。これにより、ユーザーは画面上の新しい情報に注目できる。