- 動画編集
- 2021/12/29
After Effectsでアニメーションを付けてみよう!初心者でもわかる方法をご紹介!
最近では、SNSの動画広告やWebデザインの一部、アプリのインタラクションなど、さまざまな媒体・メディアでアニメーションに触れる機会が増え、「自分もアニメーションを作ってみたい!」という方も多いのではないでしょうか?
アニメーション作成は、感覚的でセンスが必要なスキルのように思うかもしれません。しかし、センスの有無にかかわらず、基本のアニメーションを組み合わせて、手順通りに作業を行えば作成できるタイプのものもあります。
したがって、動画編集ソフトの使い方とアニメーションの付け方さえ覚えれば、あとはアイデアや工夫次第でどんどん伸ばしていけるスキルです。
この記事では、Adobeの動画編集ソフト「After Effects」を使って、実際に簡単なロゴのアニメーションを作っていきながら、After Effectsの概要やアニメーションの付け方を画像付きで解説します。
この記事がアニメーション作成を始めるきっかけになれば幸いです。
After Effectsでできることとは?
After Effects(アフターエフェクツ)は、Adobeが提供する有料の動画編集ソフトです。
名前の通り、エフェクト(写真で言うところのフィルターのようなもの)関係に強く、色味の変更などの単純なものはもちろん、要素の動きなどもエフェクトだけで指定できます。
また、3Dカメラや3Dカメラトラッカーなど、After Effectsにしか表現できない演出もあるので、これらにこだわりたいプロにも愛用されています。
豊富なエフェクトで手軽に表現力を高められる反面、複数のシーンを切り替え、繋ぎ合わせたり、長時間の動画制作をしたりするのは、ほかのソフトと比べて苦手とされています。この場合は、同じAdobeのPremiere Proを使用する、あるいは併用することで、効率的に作成することができます。
このように、Adobeが提供するほかのソフトとスムーズに連携できるのも特徴です。前述のPremiere Proはもちろん、Illustratorと連携することもできます。
After Effectsの特徴や基本的な機能について詳しく知りたい方は、「Adobe After Effects(アフターエフェクツ)の使い方は?動画へのエフェクト追加が簡単にできる!」もご覧ください。
After Effectsでアニメーションを付ける方法
After Effectsでは豊富なエフェクトを組み合わせることで、映画で使われるような複雑なアニメーションを付けることができます。
初心者の方はまず練習として、難易度が低い「ロゴを動かすアニメーションの作成」から始めてみましょう!
この記事では、「LOGO」という何もデザインされていない4文字のロゴを作例に、After EffectsとIllustratorを連携しながら、アニメーションを付ける手順を画像付きで解説します。
ステップ① コンポジションを選択
After Effectsを起動したら、まずはコンポジションを作成します。コンポジションとは素材を入れる箱のようなもので、解像度や尺の長さ、背景色など、アニメーション全体の設定を決めることができます。
まずは一つコンポジションを作ってみましょう。「新規コンポジション」をクリックしてください(表示されていない場合は、上部メニューの「コンポジション > 新規コンポジション(Ctrl+N)」から)。
コンポジション設定が表示されました。通常は設定後に「OK」を選択すればいいのですが、今回はIllustratorと連携しながら別のコンポジションを作成するので、「キャンセル」を選択してください。
コンポジションの設定内容については後述します。
ステップ② 素材を作成
今回はIllustratorで素材を作成し、After Effectsに連携する方法を解説します。Illustratorを起動してください。
文字ツールで「LOGO」と入力します。フォントは適当なものを選択し、サイズや文字組みも特にこだわらずに進めていきます。
LOGOをアウトライン化します。Ctrl+Aで全選択し、Ctrl+Shift+Oでアウトライン化します。
1文字ずつアニメーションを付けたい場合は、1文字ずつレイヤーを分ける作業が必要です。まずはCtrl+Aで全選択し、Ctrl+Shift+Gでグループを解除してください。
レイヤーパネルで4文字分のレイヤーを作成し、それぞれのレイヤーに1文字ずつ入れていきます。
これでAfter Effectsと連携する準備が整いました。上部メニューの「ファイル > 保存(Ctrl+S)」から、AIファイルとして保存しましょう。
ステップ③ アニメーションをつける
After Effectsで「新規コンポジション フッテージから」をクリックしてください。
先ほど作成したAIファイルを読み込みます。読み込みの種類を「コンポジション – レイヤーサイズを維持」にして「読み込み」をクリックしてください。
読み込まれたAIファイルのファイル名をダブルクリックすることで、レイヤー構造とタイムライン、プレビューを確認できます。今回はレイヤーが4つに分かれて読み込まれていたら成功です。
コンポジションの設定をします。ファイル名の上で右クリックして「コンポジション設定…」を選択してください。
コンポジション設定が表示されました。今回は2秒のアニメーションにしたいので、デュレーションを「0:00:02:00」にして「OK」をクリックしてください。
白色の背景レイヤーを追加します。タイムライン上で右クリックして「新規 > 平面」を選択してください。
カラーを「白色」に設定して「OK」をクリックしてください。また、背景レイヤーはレイヤー構造の一番下に移動させます。
これで一通りの準備が整いました。今回は文字を「0.5秒かけて」「大きくなりながら」「回転しながら」「出現させる」アニメーションを「1文字ずつ」作っていきます。
まずは文字の「最初の状態」を設定します。「レイヤー1をクリック > Shift + レイヤー4をクリック」して、「4文字すべて」を選択します。
「レイヤー名の左の「>」をクリック > トランスフォームの左の「>」をクリック」して、「スケール」「回転」「不透明度」の左にあるストップウォッチアイコンをクリックしてください。
続いてスケールを「0.0,0.0%」、不透明度を「0%」にしてください。これで「最初の状態」を設定することができました。
続いては「0.5秒後の状態」を設定します。まずは1文字目を出現させたいので、「レイヤー1のトランスフォーム」をクリックして「レイヤー1のみ」選択します。
左上の時間を「0:00:00:15」にしてスケールを「100.0%,100.0%」、回転を「1×+0.0°」、不透明度を「100%」に変更してください。これで0.5秒後に1文字目が表示されるようになりました。
2文字目以降も同様の手順を繰り返していきます。レイヤー2は「0:00:01:00」、レイヤー3は「0:00:01:15」、レイヤー4は「0:00:01:29」の位置で同様の変更をしてください。
このまま完成でもよいのですが、最後にもう一工夫をしたいと思います。このままだと「4文字同時」にアニメーションがスタートしてしまうのですが、これを「前の文字が表示されてから、次の文字のアニメーションがスタートする」形にしたいと思います。
タイムラインに「◆」がありますが、これの左側の三つを動かして、「アニメーションのスタート地点」を調整します。
具体的には、レイヤー1はそのまま、レイヤー2は「0:00:00:15」、レイヤー3は「0:00:01:00」、レイヤー4は「0:00:01:15」の位置に動かすことで、それぞれが「前の文字が表示されたタイミング」でアニメーションがスタートするようになります。
これでロゴを動かすアニメーションが完成しました。
ステップ④ 作成したものの書き出し
作成したアニメーションを動画として書き出しましょう。上部メニューの「ファイル > 書き出し > Adobe Media Encoder キューに追加…」を選択してください。
Adobe Media Encoderが起動します。形式に「H.264」、出力ファイルに「アニメーションの保存先」を指定して、右上の「▶」をクリックすると、MP4形式で書き出すことができます。
アニメーションプリセットの活用も効率的!
After Effectsには、一度作ったアニメーションをオリジナルのアニメーションとして保存できる、「アニメーションプリセット」という機能があります。
今回のように、同じアニメーションを繰り返し使うときはもちろんのこと、別のプロジェクトでも使い回すことができますので、こまめに活用することで、作業時間の短縮につながります。
今回の作例でアニメーションプリセットを活用してみましょう。まずはレイヤー1のタイムラインにある「◆」をすべて選択してください。ドラッグで囲むことで、すべて選択できます。
上部メニューの「アニメーション > アニメーションプリセットを保存」を選択してください。今回は「奥から回転しながらフェードイン.ffx」というファイル名で保存しました。
アニメーションプリセットは、「エフェクト&プリセットパネル」が表示されていると便利です。上部メニューから「ウィンドウ > エフェクト&プリセット」にチェックを入れてください(既にある場合は不要)。
エフェクト&プリセットパネルから「* アニメーションプリセット > User Presets > 奥から回転しながらフェードイン」を選択し、アニメーションを付けたいレイヤーのタイムラインにドラッグ&ドロップすることで、簡単にアニメーションを付けることができます。
今回のようにアニメーションのスタート地点が違う場合は、左上の時間(タイムラインの青いバーの位置)を動かしてからドラッグ&ドロップすることで、任意のタイミングでアニメーションを付けることができます。
効果的なアニメーションの考え方について詳しく知りたい方は「モーショングラフィックスとは?作成のコツやおすすめのソフト・サイトを初心者向けに紹介!」もご覧ください。 この記事ではAfter Effectsの概要から、実際のアニメーションの付け方・効率的な作成方法までを見てきました。ぜひ、この記事を参考にして、アニメーション作成に挑戦してみてください。
WEBデザイン学習者が学ぶべきスキルセット
Webデザイナーを目指すなら
Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座
Webデザインに挑戦したい人が一気通貫して学べる総合学習コースです。
イラレの基本~実践的なテクニックを学ぶ
【初級〜中級】Illustrator(イラストレーター)でグラフィックデザインをしよう!!ロゴ・印刷物・WEB用素材
グラフィックデザイン・印刷の基礎知識を手に入れて、仕事に役立ててみませんか?
最新のAdobe XDを最短でマスター
【2020年最新版】Adobe XD 手を動かして覚えるUI/UXプロトタイピング。初級から高度テクニックまで全てを学ぶ
実践的な作品制作をしながら、機能の完全理解と応用力を育てることに重点を置いたXDマスター講座!
動画編集をマスターしよう!
業界最先端の動画制作テクニックを制覇!Adobe Premiere Pro 完全版
動画制作をはじめたい方へ、短期間で仕事で応用できるほどのスキルアップ技をお届け。
関連記事

【検証】スマホ vs パソコン Excelの仕事が早いのはどっち!?
「スマホ世代はパソコンが苦手」と言われますが、先輩社員や上…

モーショングラフィックスとは?作成のコツやおすすめのソフト・サイトを初心者向けに…
テレビCMやWebサイトの動画広告、案内板などに使われている表…

YouTubeに投稿する動画の編集方法は?方法やおすすめソフトを解説
近年、動画コンテンツの人気が高まり、老若男女問わずYouTubeな…

Adobe After Effects(アフターエフェクツ)の使い方は?動画へのエフェクト追加が簡単に…
Adobe After Effectsは、印象的な動画が簡単に作成できるソフ…
最新情報・キャンペーン情報発信中