【デザイナー向け】基本操作から学ぶAfter Effects

みなさんは「映像を作ってみたい」と思ったことはありませんか？
昨今、モーショングラフィックスやマイクロインタラクションなどWeb上で見る機会が増えてきました。
もしかするとクライアントから「デザインと併せてアニメーションも作ってよ」と依頼される日が来るかもしれません。

WebアニメーションはAdobe After Effectsで簡単に作成できます。
「映像ソフトなんて使ったことないよ…」「難しそう…」と思われる方もいらっしゃるかもしれませんが、普段Adobe製品を使い慣れている方であれば、After Effectsの習得はそこまで難しくありません。

今回のチュートリアルでは、After Effectsの基本操作を学びながら、アニメーションを作成していきます。

Aeを立ち上げ、新規プロジェクトを選択します。
プロジェクト画面の大まかな説明は以下の通りです。

基本操作やショートカットは他のAdobe製アプリケーションとほぼ同じなので、使いながらいろいろ試してみてください。

新規コンポジションを作成します。【Ctrl+N】

コンポジションとはIllustratorやPhotoshopでいうアートボードのようなものです。
コンポジションに複数の素材を配置し動かすことで、アニメーションを作成していきます。
コンポジションは入れ子構造にすることも可能です。

今回は以下のように設定していきます。

アニメーションを作成する前に、プロジェクトに必要な素材データを読み込みます。
>読み込みたい素材をプロジェクトにドラッグアンドドロップしてください。

JPGやPNGの他に、Illustratorファイルも読み込めます。

logoコンポジションを選択した状態で、平面レイヤーを追加します。【Ctrl+Y】

文字ツールでテキストを追加していきます。
文字の編集についてはIllustratorやPhotoshopとほとんど同じです。

いよいよアニメーションを付けていきます。

まずは、テキストレイヤーのトランスフォーム：スケールの値を0にしてください。
これで文字の大きさが0%になりました。
この状態で、プロパティの横にあるストップウォッチを押します。

次に時間インジケーターを1fに移動させ、スケールを110%に設定します。
これで、タイムライン上に、テキストのスケールが0fの時に0%、1fの時に110%になるという情報が記録されました。

このように、特定の位置に設定したエフェクトを記録できるものをキーフレームといいます。

タイムライン上にキーフレームを追加することでアニメーションは作られています。
タイムラインを再生【スペースバー】すると、テキストが拡大するアニメーションができていることが分かります。

テキストをただ拡大するだけでは味気ないので、テキストが一度大きくなった後、少し縮むアニメーションにします。
ここでは、1.08f時点のテキストスケールを100%に設定しました。

キーフレームを設置しただけでは、動きがぎこちなく見えるかと思います。
その悩みを解決してくれるのがイージングです。
イージングを使用することで、エフェクトに緩急をつけることができます。

該当のキーフレームを選択し、右クリック→[キーフレーム補助]→[イージーイーズ]【F9】を選択します。

キーフレームの形が変化していたら成功です。

ここで、前半に読み込んでおいた、画像素材を使用します。
プロジェクトからフラミンゴ.pngをlogoコンポジションにドラッグアンドドロップします。

画像素材が配置できるよう、テキストレイヤーの位置を調整し、イージーイーズをかけます。

フラミンゴを振り子のように揺らすアニメーションを作ります。

まず、アンカーポイントを変更します。
アンカーポイントとは、素材の軸となる部分のことです。
これを変更することにより、フラミンゴを振り子のように回転させることが可能となります。

アンカーポイントツール【Y】を使用し、アンカーポイントをフラミンゴの回転軸に合わせます。

フラミンゴの位置を調整し、振り子運動をするアニメーションを作っていきます。イージーイーズも忘れずに適用して下さい。

アニメーションが完成したら、動画を書き出していきます。

[ファイル]→[書き出し]→[Adobe Media Encoderキューに追加]を選びます。

しばらくすると、Media Encoderが立ち上がり、logoコンポジションが読み込まれていることが確認できます。

[H.264]と書かれている部分を押し、書き出し設定をします。
出力ファイルも任意の場所に変更しておきます。

右上にある緑の▶マークを押すと、動画の書き出しが始まります。
作業が終わると、任意の出力先に書き出しファイルが格納されていると思います。

再生し、問題がなければ完成です。お疲れ様でした。

いかがでしたか。
ここまで入門編を一緒に学んできましたが、思ったよりも簡単にできたのではないでしょうか。
今回使用した要素以外にもたくさんの表現があるので、この記事を足がかりにいろんなアニメーションに挑戦してみてください！