← 記事一覧へ もどる
モーション

キーフレームとイージング
グラフエディターでなめらかに動かす

テキストや画像を動かしたとき、なんだかカクカクして機械的——その原因はほぼ「等速(リニア)」です。 イージングとグラフエディターを覚えれば、動きに“加速と減速”が生まれ、一気にプロっぽく、気持ちよくなります。

この記事のゴール ① なぜ等速がダサいのかを理解し、② イーズイン/アウトを付け、③ グラフエディター(速度グラフ・ベジェハンドル)で 加速・減速の“効き”を調整して、ぬるっと気持ちいい動きを自分で作れるようになること。

なぜ等速(リニア)は機械的に見えるのか

現実のものは、いきなり最高速で動き出したりピタッと止まったりしません。徐々に加速し、徐々に減速します。 ところがキーフレームの初期設定は等速(リニア)。始点から終点まで同じ速さで動くため、無機質でカクついて見えるのです。 これを直すのがイージングです。

まずはイーズイン/アウトを付ける

いちばん簡単で効果的な方法。エフェクトコントロールでキーフレームを右クリックし、時間補間から選びます。

種類動き使いどころ
リニア(等速)一定速度基本は避ける(機械的)
イーズイン終わりに向けて減速止まる動き(スライドして止まる)
イーズアウト始まりから加速動き出し(すっと出ていく)
イーズイン+アウト加速して減速登場→停止など大半の動き

まずは最初のキーフレームに「イーズアウト」、最後に「イーズイン」を付けるだけ。これだけで動きが見違えます。

グラフエディターで“効き”を調整する

イーズイン/アウトはあくまで初期カーブ。本当の気持ちよさはグラフエディターで作ります。 エフェクトコントロールで、プロパティ名の左の三角を開くと値グラフ速度グラフが出ます。

  1. 速度グラフを開く プロパティを展開し、速度(Velocity)グラフを表示します。
  2. ベジェハンドルを引っ張る キーフレームから伸びるハンドルをドラッグ。カーブが急なほど“キレのある”動き、ゆるいほど“ぬるっと”した動きに。
  3. 山を高く・谷を平らに 中盤で速く(山を高く)、両端で遅く(平らに)すると、加速→減速のメリハリが出ます。

速度グラフの形=動きの気持ちよさ。ここを触れるようになると、既製プリセットに頼らず“自分の間”を作れます。

スポンサーリンク
広告スペース(記事内・レスポンシブ)

“気持ちいい動き”を作る3つのコツ

  • 短く速く:ダラダラ動かさない。0.3〜0.6秒でキビキビ。
  • 両端を必ず殺す:動き出しと止まりを減速させると、上品に見える。
  • やりすぎない:オーバーシュート(行き過ぎて戻る)は“ここぞ”だけ。多用は逆効果。

トランジションにイージングをかけると、さらに滑らかになります(シームレストランジションの記事と相性◎)。

つまずきポイント ・イーズを付けても機械的 → 速度グラフでハンドルを引ききれていない。もっと大胆に。
・動きがモタつく → 尺が長すぎ。短くする。
・キーフレームが四角のまま → まだリニア。右クリックで補間を変える(ベジェは砂時計/丸型の表示)。
・毎回やるのが面倒 → よく使うイージングはプリセット保存やスクリプトで。

よくある質問

イーズインとイーズアウト、どっちを先に付ける?

動き“出し”にはイーズアウト(加速)、動きが“止まる”所にはイーズイン(減速)です。登場して止まるアニメなら、最初のキーフレームにアウト、最後にインを付けます。名前が直感と逆に感じるので注意。

数値でイージングを揃えたい。

ベジェハンドルの引き具合を一定にするか、イージング用の拡張(Smoothifyなど)を使うと再現性が上がります。まずは手動で感覚を掴むのがおすすめです。

After Effectsのイージングとは違う?

考え方は同じ(時間補間+速度グラフ+ベジェ)です。AEの方が制御が細かく、エクスプレッションで自動化もできます。基礎はエクスプレッションの記事もどうぞ。

まとめ

なめらかな動きは「等速をやめる → イーズイン/アウト → 速度グラフで加速・減速を彫る」。 たったこれだけで、テロップも画像も“気持ちよく”動きます。まずは全部のキーフレームからリニアを追放するところから始めてください。

スポンサーリンク
広告スペース(記事末・レスポンシブ)

この記事は英語の一次情報をもとに検証・再構成したものです。UIや名称はバージョンにより異なる場合があります。