.

ビデオ

初心者向けのキーフレームアニメーション

キーフレームは、アニメーション、エフェクト、モーショングラフィックにおいて基本的な要素です。キーフレームがAdobe After Effects、Animate、Character Animatorでどのように使われているか理解しましょう。

無料で始める Premiereの詳細を見る

Adobe After Effectsでキーフレームを作成する人

キーフレームとは？

アニメーションの初期の頃、フレームは1枚1枚手で描きました。現在、アニメーターは、デジタルキーフレームを使ってそれぞれのグラフィックの要素を識別し、その要素をどのように動かすのか、または一定の時間の中で、どのように変えていくかを選ぶことができ、何時間、何週間、何ヶ月という作業時間を節約することができています。デジタルアニメーションのシーケンスでアクションを作るには、まずそのアクションの始まりと終わりを決めなければなりません。このようなマーカーをキーフレームと呼び、これはAdobe After Effects、Animate、Character Animatorなど、様々なタイプのアニメーションプログラムで、アクションのアンカーポイントを示すのに使われます。

アニメーションの基本、キーフレーム

円形をスクリーン上で、または動画のフレームの中で、ボールのように跳ねさせたいとします。このボールを、ある地点から別の地点まで動かしたい場合、アニメーションタイムラインで、ボールがスタートする地点に最初のキーフレームを設定します。そして、タイムラインでボールが止まる位置に、新しいキーフレームを設定します。

キーフレームで変更する

キーフレームを使えば、位置の変更以外のことも可能です。アニメ化したオブジェクトの質感をキーフレームで変更でき、これをパラメーターと呼びます。パラメーターには、アンカーポイント、ポジション、スケール、回転、不透明度などがあります。オブジェクトのポジションや回転など動きを変更させる場合、パラメーター値を調整してからオブジェクトをクリック、ドラッグしてキーフレームを配置します。

キーフレームの補間のタイプ

補間法とは、表示させアクションまたは動きを、どのように動かすのかその方法のことです。ベジェ、または「イージングムーブメント」は、自然の動きを模倣するので、大抵の場合これが適切な選択肢となります。オブジェクトは自然に動きに入り、目的とする動きに応じて変化の度合いを変えて、自然に動きを止めます。

  • リニア補間法： これはデフォルトの変化で、均一的なロボットのような動き方です。
  • ホールド補間法： 次のキーフレームで突然変化が起きるタイプです。
  • ベジェまたはイーズ補間法： これはマニュアルで調整できる曲線の動きをベースとした変化です。

目を引くモーションデザインを作成

Adobe After Effectsのキーフレーム

After Effectsでアニメ化した効果を作る、またモーショングラフィックを作るにはキーフレームは必須です。AnimateまたはCharacter Animatorといったプログラムでは、アニメーションの部分だけを処理します。一方、After Effectsでは、アニメ化したエレメントを、実際の動画クリップに組み込むことができます。After Effectsでキーフレームの設定、選択、削除する方法について学びます。また、動画チュートリアルで、モーションパスを作成する方法を確認しましょう。

Adobe After Effectsでキーフレームを追加する画像

After Effectsでキーフレームを加える方法

以下のステップに従って、After Effectsのグラフィックにキーフレームを加えてみましょう：

1. アニメ化したいレイヤーを選択し、クリックしてそのレイヤー用のTransformパラメーターを表示する。

2. パラメーターを選択するか、レイヤーをどのように変えたいか選択する。

3. プレイヘッド（タイムラインで現在の作業の場所を示す青のマーカー）を、キーフレームを加えたい位置に動かし、次にグラフィックを希望するスタート地点に表示するか、パラメーターを設定する。

4. 選択したパラメーターの隣にあるストップウォッチをクリックして、最初のキーフレームを加える。

5. タイムラインで前方にスクロールし、アクションが終了する位置にプレイヘッドを配置する。次に、グラフィックを希望するアクション終了の位置に配置するか、パラメーターの設定を終了して2番目のキーフレームを設定する。

6. 補間法を変えるには、キーフレームを右クリックし、キーフレームアシスタントをクリックして、希望する方法を選択する。

7. 途中のフレームで以前のアクションを繰り返す場合は、キーフレームをコピーする。または、なげなわツールを使って最初の部分を選択し、タイムライン上でリピートしたい部分にコピー＆ペーストする。

Adobe Animate

Adobe Animateのキーフレーム

ゲーム、テレビ番組、Web ページ向けに2Dアニメーションクリップを作りたい場合、Animateが最適なプログラムです。 After Effectsと同様に、Animateでもキーフレームは基本的な要素です。 Animateのアニメーションでは、トゥイーンフレームスパンを使います。これは2つのキーフレームの間のフレームにアニメ要素が含まれていることを意味します。After EffectsやCharacter Animatorでは、キーフレームはダイヤモンド型ですが、このアプリでは長方形をしています。

Adobe Animateでキーフレームを追加する画像

Animateのキーフレームとトゥイーンについて理解する

アニメ制作やゲームのデザインを始める前に、Animateのタイムラインでキーフレームがどのように機能するのか、その基本を学びます。そしてこのチュートリアルで、Animateのトゥイーンとキーフレームについて学びましょう。

Adobe Character Animator

Adobe Character Animatorのキーフレーム

Character Animatorは、モーショントラッキング技術を使ってコンピューターカメラで顔の動きや表情を追跡し、それらを2Dのキャラクターかパペットに変えます。より精度の高い動きを表示したい場合や、モーショントラッキングでは作れない複雑な動きが欲しい場合は、アニメーションにキーフレームを選択し、加えます。Character Animatorのキーフレームは、After Effectsのキーフレームと良く似た表示と動きをします。

Adobe Character Animatorでキーフレームを追加する画像

キーフレームとモーショントラッキングを結合

Character Animatorでキーフレームを使う方法を簡単に学びます。また、このさらに詳しい手順を踏んだ動画でキーフレームを詳しく見ていきます。手順を踏んだ動画

よくある質問

キーフレームとCreative Cloud

アプリケーションの多くは、キーフレームを加えたシーケンスが必要ですが、Adobe Creative Cloudには処理する上で多くの利点があります。異なるタイプのメディアを1つの動画プロジェクトに合成する場合に、Adobe IllustratorやPhotoshopなど他のアプリケーションからそのデザインを取り込むことができるのも、そういった利点の1つです。しかも、Creative Cloudであれば、1つのアプリケーションで得た知識を、他のアプリでも活用できます。アドビで様々なタイプのキーフレームを活用して、どのような動きでも思い通りに作っていきましょう。

Adobe Premiereの多彩な機能

無料で始める 詳細を見る

style
l spacing, center, static-links, dark
background
title
初心者向けのキーフレームアニメーション
tags
caas:content-type/video,caas:content-type/article,caas:products/after-effects,caas:products/animate
description
キーフレームは、アニメーション、エフェクト、モーショングラフィックにおいて基本的な要素です。キーフレームがAdobe After Effects、Animate、Character Animatorでどのように使われているか理解しましょう。
cardImage
cardImageAltText
Adobe After Effectsでキーフレームを作成する人