製品のモーショングラフィックスに合うイージングの選び方
二つのパネルが、同じ時間で同じ距離を移動しても、印象はまったく異なることがあります。一方は、誰かが丁寧に置いたように到着します。もう一方は、見えない壁に衝突したように見えます。さらに別のパネルは、目的地を通り過ぎてから戻り、日常的な画面の変化を小さな見せ場に変えます。
この違いは多くの場合、アニメーションのイージングによるものです。経過時間を、開始状態から終了状態までの進み具合に対応付ける関数です。しかし、流行のプリセット一覧から選ぶだけでは、製品の動きを適切に演出するのは難しいでしょう。装飾的なカードでは見栄えのよいカーブでも、価格を読みにくくしたり、カーソル操作とその結果のつながりを弱めたりするかもしれません。
出発点にするべきなのは、その動きの役割です。情報を画面に出すのか、何かを取り除くのか、二つの状態をつなぐのか、実際の値を追うのか、背景の動きを持続させるのか。そこが明確になれば、カーブはスタイルの名前ではなく、実用的な道具になります。
インターフェースのトランジションは、途中の割り込みにも対応する必要があります。一方、レンダリング済みの動画は、決まったタイムラインに従います。インタラクティブな例から視覚的な考え方を借りた上で、自分のシーンの次の操作に照らして判断してください。
イージング関数が何を制御するかを理解する
単純な動きとして、0から始まり1で終わる進行値を考えてみます。オブジェクトは左端から中央へ移動したり、小さなカードから大きなパネルに成長したり、透明から不透明へ変わったりします。イージングは、各時点でその進行値がどれだけ速く変化するかを決めます。
linearでは、同じ時間に同じ量だけ変化が進みます。ease-outでは、初めは速く、目的地に近づくほど遅くなります。ease-inは逆です。ease-in-outは両端でゆっくりになり、中間では速く進みます。これらは進行の説明であり、特定の距離や視覚効果の説明ではありません。
最後の点は重要です。カーブに、知覚上の一定の速さが備わっているわけではありません。同じカーブでも、0.5秒でパネルを600ピクセル動かす場合と、60ピクセル動かす場合では、印象が異なります。同様に、同じカーブで不透明度を変えることと、位置を大きく動かすことは、知覚上同じではありません。
MDNのイージングリファレンスは、時間の進行とアニメーションする値の関係を、3次ベジェ関数やステップ関数も含めて説明しています。プリセット名に頼るのではなく、仕組みを確かめるのに役立つ例が掲載されています。MDNのeasing-functionリファレンスに、技術的な定義があります。
華やかさより先に、到着の仕方を決める
製品動画の要素が登場するのは、通常、視聴者がその内容を確認する必要があるからです。そのため、移動中の見せ場よりも、到着の質が重要になります。
新しいレポートが入ったパネルを考えてみましょう。ease-outで登場させると、素早く画面内へ運び、制御された減速で落ち着かせられます。視聴者は早い段階で内容の位置を把握し始め、その後で安定した結果を見られます。ease-inでは、パネルが開始位置の近くに長くとどまり、読む位置に到着する直前に最も速く動くことがあります。すぐに次の指示が始まるなら、唐突に感じられるかもしれません。
どちらのカーブも、それ自体が正解ではありません。問うべきなのは、動きが次に必要な知覚の作業を支えているかどうかです。操作完了後に小さなインジケーターが去るなら、加速しながら退場するのは適切かもしれません。正確に読む見出しが登場するなら、最後に急停止させる理由は説明しにくくなります。
状態変化が明確になる、最も単純な登場から始めます。その後、落ち着いたフレームを確認します。ナレーションがその文字に言及する前に、完全に読める状態になりますか。元の操作対象との関係を保てる位置で、パネルは止まりますか。位置が止まった後も、影やぼかしが変わり続けていませんか。こうした副次的な性質が、実際に読める瞬間を遅らせることがあります。
洗練されて見えるアニメーションでも、注意を内容へ渡す働きが弱い場合があります。目標は、単に滑らかにすることではなく、到着の瞬間を役立つものにすることです。
距離、時間、カーブを一緒に評価する
登場の動きが強すぎると感じると、まず時間を延ばしたくなりがちです。役立つ場合もありますが、シーン全体が鈍くなることもあります。少なくとも三つの調整項目があります。移動距離、所要時間、進行の配分です。
ラベルが画面のはるか外から滑り込むとします。長い経路は、そのラベルに必要な以上の視覚的な騒がしさを生むかもしれません。距離を短くすれば、シーンの速さを保ちながら、動きを落ち着かせられます。その上で控えめなカーブを使えば、長い遅延を足さずに仕上げられます。
UIを大きくズームする場合には、逆の問題も起こります。大きな拡大率の変化を短時間で行うと、視聴者は内容の位置を急に探し直さなければなりません。イージングの微調整だけでは足りないかもしれません。ズーム量を減らす、途中に文脈を示すフレームを置く、トランジションを長くしてから明確なホールドを設ける、といった対応が必要です。
二つの変数を固定して比較します。まず、距離と時間をそろえてカーブを比べます。次に、選んだカーブを保ち、時間を変えます。最後に、経路そのものが長すぎないかを問います。三つを一度に変えると、見栄えがよくなっても、何が解決につながったかを学べません。
あらゆる場面に使える、完璧な秒数の表は必要ありません。目の前の動きを、条件を整理して理解する方法が必要です。有用なモーションの指示書には、移動の感触に加え、目的地と、読める状態にしたい瞬間を記します。
意味を損なわない場合だけオーバーシュートを使う
オーバーシュートは、弾力、遊び心、勢いを感じさせます。同時に、目的地を越えてから戻るという、もう一つの出来事も生みます。その出来事は注意を使い、暗示する挙動を変える可能性があります。
装飾的なバッジなら、弾んでも問題ないことが多いでしょう。グラフの値、カーソル位置、進捗バー、価格では、そうとは限りません。棒が一時的に最終値を超えると、その途中状態をデータだと誤解するかもしれません。カーソルが小さな操作対象を通り過ぎると、記録した操作が不正確に見える場合があります。数値が落ち着く前に大きく拡大縮小すると、単位や条件が視覚的に切り離されることもあります。
そのオーバーシュートがオブジェクトにふさわしいのか、それともタイムラインが地味に感じたために加えたのかを考えます。物理的な比喩は、関係を明らかにするときに役立ちます。目的に関係なくすべての要素が同じばねのように動けば、注意を散らします。
ばねのシミュレーションと、出力が終点を超える固定のイージングカーブも区別してください。どちらも弾力があるように見えますが、仕組みは異なります。ばねは剛性や減衰といった性質で記述でき、挙動は実装に依存します。3次ベジェカーブは、固定された進行区間を対応付けます。パラメーター名を別のツールへそのまま持ち込めると考えないでください。
Materialの新しいモーション指針には、M3 Expressive向けの物理ベースのシステムがあります。利用できるか、どう適用するかは、使用している実装によって異なります。「Materialのイージング」が、時代を超えて変わらない一つのカーブではないことを示す、よい例です。参考資料がどの世代、どの実装に属するかを確認します。Materialのモーション概要は、現在のシステムの範囲を説明しています。
連続する動きの意味を保つ
linearの動きは機械的に見えることがありますが、機械的であることが適切な場合もあります。等速回転、ベルトコンベヤーのようなパターン、タイムラインのインジケーターは、一定の進行が必要かもしれません。繰り返すたびにease-in-outを加えると、つなぎ目でためらうような動きが見える場合があります。
値をアニメーションさせる場合にも、同じ問題があります。数値が経過時間を表すなら、装飾的なイージングによって、時間が加速・減速するように見えるかもしれません。実時間を測らず、カウントを例示する動画なら許容できる場合もありますが、その違いは意図的に扱う必要があります。
データの変化では、途中の状態が何を意味するかを決めます。二つの値を補間すると変化を追いやすくなりますが、中間の値はデータセットの観測値とは限りません。滑らかな動きによって、元のプロセスがその各時点で連続的に測定されたように示唆するべきではありません。
カーソルを追うカメラ移動では、カメラのカーブとカーソルのカーブも影響し合います。両方に独立したイージングがあると、フレーム内でカーソルが漂い、操作対象が逃げるように見えることがあります。操作中はカメラを固定し、その後で結果の状態へ移す方がよい場合もあります。
実際に望む視覚的な出来事を表現するために、イージングを使ってください。一定の動き、情報を伝える状態変化、装飾的な強調は、それぞれ別の仕事です。一つのブランド用プリセットは一貫性を与えますが、動きの意味に応じた例外は必要です。
関連する要素を一つの出来事として連動させる
パネル、タイトル、影に、それぞれ魅力的なカーブを使っても、一緒に見るとばらばらに感じることがあります。内容を載せる面より先にタイトルが到着したり、影の遅れによってパネルの奥行きが不意に変わったように見えたりするかもしれません。
関連する性質は、知覚上の一つの出来事として扱います。視聴者に最初に何を理解してほしいか、どの要素を一体として動かすかを決めてください。文を載せたパネルでは、移動中も内部の位置関係が安定していると効果的なことが多くあります。その後、主要な面が落ち着いてから、意図的な時間差で補助的な内容を見せられます。
ツールで簡単にできるという理由だけで、すべての子要素に個別の登場を付けるのは誤りです。視聴者は、一つの目的地ではなく、複数の軌道を追う必要が生まれます。アニメーションを増やしても、必ずしも情報の優先順位が強まるわけではありません。
製品デモでは、カーソル操作とUIの結果を丁寧に連動させます。ボタンを押した後に、関連のない弾む登場を見せると、作り物めいて感じられることがあります。操作、応答、落ち着いた結果という因果のつながりを保ってください。元の録画にインターフェース自身のトランジションが含まれるなら、さらに大きな効果を加えると、重複したり矛盾したりする場合があります。
出来事全体を通常速度で見直します。ゆっくりスクラブすれば重なりを見つけやすくなりますが、各部分を見る時間があるため、過剰な時間差も上品に見えてしまうことがあります。実際の視聴者は、ナレーションやほかの情報にも注意を向けながら、その流れを一度だけ受け取ります。
AIエージェントに実行できる指示を出す
「もっと滑らかにして」では、多くの変数が未指定です。エージェントは、シーンを長くする、バウンドを加える、距離を減らす、すべてのカーブを変える、動く内容をぼかす、といった変更をするかもしれません。その中には、元の目的を損なうものもあります。
より有用な指示は、出来事と望む結果を指定します。「レポートパネルを読む位置へ素早く運び、止まる前に減速させてください。テキストはパネルに対して固定し、現在の最終位置と2秒のホールドを保ってください。」これなら、修正する動きが具体的になり、守るべき範囲も伝わります。
比較を頼むときは、時間と経路を同じにした別案を求めます。これにより、イージングの判断を切り分けられます。ほかの流れを変える前に、各案を確認してください。挙動を選んだら、カーブ名だけでなく、どの出来事のための挙動かという形で記録します。
ソースでアニメーションを定義するプロジェクトなら、タイミングの設定の近くに、名前を付けた値としてカーブを置きます。後の変更を追いやすくなります。コード構造自体が創作の成果ではありませんが、イージングの小さな修正が無関係なシーンへ予測できない形で広がるのを防げます。
数値による比較を丁寧に読む
説明の例として、400ピクセルを0.6秒で移動する動きを考えます。平均速度は、イージングカーブに関係なく、毎秒約667ピクセルです。カーブが変えるのは、その速度が時間内でどう配分されるかです。
「1から、正規化時間を1から引いた値の3乗を引く」と定義する単純な3次のease-outでは、初速は平均の3倍で、目的地ではゼロになります。linearの移動では、常に平均速度を保ちます。
この比較から、ease-outが速さと制御された落ち着きを同時に感じさせる理由が分かります。変位の大部分を早い段階に使い、目的地には穏やかに近づくためです。同じカーブでも、経路が長いと過剰になり得る理由も分かります。時間を固定したまま距離を伸ばすと、最初の勢いが大きくなります。
その400ピクセルの移動の、中間フレームを見てみましょう。0.3秒後、linearは200ピクセル進んでいます。3次のease-outは350ピクセル進み、後半に残るのは50ピクセルだけです。所要時間は同じですが、パネルはすでに目的地のずっと近くにいます。
この違いは、目的地を早く認識させたいときに役立ちます。一方、視聴者が正確な経路を追ったり、移動中の情報を確かめたりする必要があるときには、それほど役立たないかもしれません。安定が必要な瞬間を決め、その瞬間に実際のホールドを与えます。ease-outに変更するだけで、ホールドが生まれるわけではありません。変わるのは、目的地への近づき方です。
数値は、すべてに使える速度目標を選ぶためではなく、動きを診断するために使います。最初の動きが激しく感じるなら、最後の減速をさらに長くするより、経路を短くする方が有効かもしれません。短時間なのに鈍く感じるなら、その時間のどれだけを、ほとんど動かずに過ごしているかを調べます。カーブ、経路、目的地は、一つの出来事として判断する必要があります。
最終的な動きを実際のサイズで判断する
大きなプレビューでは、移動の大きすぎることも、最終的な文字の小ささも見落とす場合があります。書き出したシーンを、想定するプレーヤーのサイズで見てください。アニメーションが終わる瞬間だけでなく、どこを見ればよいか分かる瞬間に注意を向けます。
次に、効果を抑えた案を試します。オーバーシュートを取り除く、経路を短くする、面を静止させたままハイライトだけを変える、といった方法です。製品が理解しやすくなるなら、その単純な案を採用する理由があります。より豊かな動きが重要な関係を説明しているなら、それを残し、視聴者が結果を使えるだけの時間を与えます。
モーショングラフィックスに最適なイージングとは、出来事に一貫性を感じさせ、重要な情報を確認できる状態にするものです。視聴者がカーブそのものを考えることなく動作を追えたとき、そのカーブは役割を果たしています。