時間(タイミング)、変化量、緩急について

はじめに

アニメーションの気持ちよさは時間(タイミング)、変化量、緩急で表現

アプリゲームのUIアニメーションをさせる時に気持ちが良いと感じる要素が時間(タイミング)、変化量、緩急です。

時間(タイミング)が遅すぎたり早すぎると違和感があり、
変化量が大きすぎるとうるさく、小さすぎても変化がわからず、
緩急がないと単調な動きになります。

そのため、同じ「動き」でも「時間(タイミング)、変化量、緩急」で体感は大きく変わることになります。

時間(タイミング)、変化量、緩急について

時間(タイミング)

「いつ始まるか」「どのくらいの長さで終わるか」「どの瞬間に動き出すか」など、動きの発生・変化に関わる時間(フレーム数)になります。
タイミングが遅くても早くても違和感が出てしまうため、何度も再生確認して違和感がないかを知ることがアニメーション作りの一歩目となります。

では、キーフレームの変化する時間だけを変えたアニメーションを比較してみます。
一見同じに見えるかもしれませんが、冒頭に最初のキーが打たれてから4つ目のキーまでの長さは同じで、間のキーのタイミングだけ変えている状態です。
※ダイアログが出現するまでのキーの長さは同じになります。

ここでは3が一番違和感があるように見え、2が一番違和感のない動きに見えると思います。
ただし、出現アニメーションは一律で2の徐々に間隔が広くなるように出現の仕方がいいというわけではなく、
緩急を含めて動かすとまた違った印象になるため、キーフレームの間隔をまずは微調整していき、より良いタイミングを見極めることが大切になります。

出現と消失アニメーションの違い

出現時のアニメーションの意図としては画面内のUIの情報を整理することや、どの情報が更新されたかをわかりやすくすることですが、消失時は次の画面のためにUIを消すことやどこのボタンが押されたのかをわかりやすくするなどがありますが、ほとんどの場合は出現アニメーションよりもシンプルになります。

消失時のアニメーションに変化を入れた場合

消失のアニメーションでは出現のアニメーションを反転させたアニメーションを入れると全く意味の違うアニメーションになってしまったり、予備動作を入れると目立たせなくて良い部分を目立たせたりと違和感が出るため、消失アニメーションはシンプルで短めが良いとされています。ダイアログに関してはほぼアニメーションなしで消えるゲームアプリもあります。

出現と消失の時間は何fが良いのか

出現
6f-15fあたりを目処に作成します。
ただし、アニメーションにバウンドやエフェクトが入ることによって時間は前後することになります。
その場からのフェードインで出現するだけなら短くても良いですし、ポップアップはバウンドする動きが入るのでバウンド分の時間が長くなるなどがあります。

消失
4f-8fあたりを目処に作成します。
ほとんどの場合はシンプルなアニメーションになりますが、押したボタンを最後に残して消すなどの特殊なアニメーションの場合はその限りではありません。

変化量

「次のキーまでの数値がどのくらい変化するか」「最初と最後のキーの変化量はどのくらい変化するか」など、アニメーションの位置やスケールなどのアニメーションによる変化量になります。
変化量が大きいとよく目につきますが、大きすぎてうるさくなってしまうのはよくなかったり、数値の微妙な変化をさせてアニメーションを作ることになります。

変化量の違いについて比較してみます。
※ダイアログが出現するまでのキーの長さは同じになります。

変化量は小さければ小さいほど優しさや優雅な印象を与え、大きければ大きいほど可愛らしさやインパクトのある印象を与えます。
また、極端に短いフレーム数(1-3f)で極端に大きい変化量がある場合は破裂や衝撃といった特殊効果になるため、UIアニメーションで使用することは少ないと思います。

不透明度による変化

不透明度による変化量は大きければ大きいほど優しい印象を与え、小さければ小さいほど唐突感が出ます。
不透明度は画面変化を急激に行うものではなく他の変化を優しく整えるため、数値の変化が大きくても真逆の効果を出します。
優しくフェードインアニメーションを入れることで、画面外からUIを遷移させるときに移動距離が大きい動きの緩和として使用することができます。

緩急

緩急とは、動きにおける速度に時間変化をつけることです。
全ての動きが同じテンポ・同じ速度で続くと、機械的で無感情な印象になります。
そこに「一瞬だけ速く」「最後はゆっくり」「急に加速」など、動きに変化をつけることで、動きの抑揚、緩急をつけることができます。

これらの設定を決めるのがイージングになり、アニメーションの質を大きく左右する最も重要で、アニメーションの核になります。
イージングは、横が時間、縦が変化量で表現し、カーブを使用した緩急による速度変化を作り出します。
※ダイアログが出現するまでのキーの長さは同じになります。

1の緩急の付け方が一般的な緩急の付け方になります。
点と点を波のように結んだカーブにすることで、自然な動きで柔なか印象を与えることができます。
2はトゲトゲしていて動きを機敏に見せることができ、何か驚かせたいときに使うことが多いです。
3は1の緩急をより強めたものになりますが、緩急をつけることで速度が極端に速い時と遅い時が出るため、こちらも可愛らしさをより強調するなどで使用します。

出現と消失の緩急

一般的には出現時の緩急の付け方は、前半が一番速く、後半はゆっくりさせることが多く、消失は前半がゆっくりで後半が一番速くなるようにすることが多くなります。

また、緩急をつける時のポイントとして、加速が強い箇所を短く、減速が強い箇所を長くすると気持ちの良い動きになります。

時間と変化量、緩急を組み合わせる

キーフレームの間隔が狭い場合は変化量を小さくし、キーフレームの間隔が離れるごとに変化量と緩急を強くしていくことを意識すると、整ったアニメーションになりやすいです。。

キーフレームの間隔が広ければ変化の大きい動きをしても目で追えますが、キーフレームの間隔が短い中で変化量の大きいアニメーションをさせると、破裂したような印象を与えてしまいます。

また、UIの大きさによっても時間と変化量、緩急は変える必要があります。

特にアニメーションの時間は大きさによって大きく印象を変えるため、次の要点だけ押さえておくと良いでしょう。
・小さいUIほど動きの時間を短くする
・大きいUIほど動きの時間は長くする

ネズミの動きと巨人の動きを想像するとわかりやすいかもしれません。
大きいものは早く動きすぎると画面全体の変化量が大きく、ユーザーが驚いてしまうので、UIが大きい場合は少し優しく動かすことやフェードインを取り入れるなどをしてユーザーが驚かないように設計する必要があります。

こちらに関してはこちらのアニメーションのスピードを同じにしてはいけないポイントで詳しく紹介しています。

まとめ

時間（タイミング）

動きの開始・終了・発動瞬間を指す。
キー間隔の配置だけで印象が変わる。
等間隔/広がる/詰まるの比較では「徐々に広がる」配置が違和感が少ない傾向。
出現は情報整理が目的、消失は次画面準備が目的なので、消失は反転や予備動作を避けて短くシンプルに。
目安は出現6–15f、消失4–8f（演出やバウンド有無で調整）。

変化量

位置・スケール・不透明度などの値の増減幅。
大きいほど可愛さ/インパクト、小さいほど上品/穏やか。
極端に短いフレームで大きな変化は“破裂/衝撃”の特殊効果になりやすく、通常UIでは非推奨。
フェードイン（不透明度）を併用すると、移動距離の大きい遷移の目立ちすぎを緩和できる。

緩急

速度の時間変化（イージング）。
出現は前半速く後半ゆっくり、消失は前半ゆっくり後半速くが一般的。
加速の強い区間は短く、減速の強い区間は長めにすると上品に収まる。
滑らかな“波形”が自然さを生む。

組み合わせの指針

キーフレーム間隔が狭いほど変化量は小さく、間隔が広いほど変化量と緩急を強く。
間隔が狭いのに大きな変化量は“破裂感”。
UIサイズにも依存し、小さいUIは短時間・大きいUIはやや長時間が基本。
大きいUIは強い動きで画面全体の変化量が大きくなるため、穏やかな緩急やフェードで驚きを抑える。

関連解説