みなさん、After Effectsで見かけた“神アニメーション”を前に、思わずこうつぶやいたことはありませんか？
「え、これどうやって作ってるの？」
「意味がわからん…！」
「いやいや、まじで動きがプロすぎる」
僕も昔そうでした。
モーショングラフィックスの海に溺れそうになっていた頃、「完コピ」という練習方法に出会って世界が変わりました。
今回は、Illustratorを使ってAfter Effectsのアニメーションを完コピする方法を、初心者の方にもわかりやすく、リアルな感情と実体験を交えてお伝えします！
社会人でもAdobeCreative Cloud学生・教職員版1年プランが使える
完コピ それは「え、これどうやって動かしてんの…？」からの脱却
ステップ1｜「完コピしたい素材」を探そう
まず最初のステップは、「お手本探し」です。
ここで重要なのが、“ただの模写”ではなく、“学ぶためのトレース”をすること。
おすすめの素材収集法：
- Pinterest（静止画）
- Behance（UIやモーショングラフィックス豊富）
- YouTube（短尺モーショングラフィックス系動画）
- Instagramのモーションクリエイター（リールやストーリー）
💡ポイント：気になったものは即スクショ！Macなら「Command＋Shift＋4」で範囲指定スクショできます。
ステップ2｜Illustratorで素材をトレースする
次に、スクショした画像をIllustratorに取り込んでトレースしていきます。
作業の流れ：
- 新規ファイル作成（例：1920×1080pxで作るとAEと互換性◎）
- スクショ素材を配置（File > Place）
- パーツをレイヤーごとに分けてトレース
- 文字、丸、線など、アニメーションしたい部分をレイヤー分け
- 色は仮でもOK。形をしっかり再現することが大事！
🎯リアルなコツ：「細かすぎるデザインは、ざっくり要素に分解」
細かいところまで完璧にやろうとすると疲れるので、“何をどう動かすか”を見抜く力にフォーカスしましょう。
ステップ3｜After EffectsにIllustratorファイルを読み込む
さて、ここでAfter Effectsの出番です。
絶対にやるべきこと：
Illustratorファイルを「コンポジション」として読み込むこと！
読み込み時に出るポップアップで、「コンポジション – レイヤーサイズを保持」を選びます。
これにより、Illustratorで分けたレイヤーがそのままAEでも個別のレイヤーになります。
ステップ4｜アニメーションをつけていく
ここがいちばん楽しい（そして難しい）工程です。
でも大丈夫。焦らず、動きを1つずつ見ていきましょう。
おすすめのやり方：
- Illustratorで取り込んだパーツに対してアニメーションをつける。
- 基本的なアニメーションはこのあたりから始めよう：
- Position（移動）
- Scale（拡大・縮小）
- Opacity（フェードイン/アウト）
- Rotation（回転）
具体的シーン例：
- 「タイトル文字が一文字ずつバウンドしながら出てくる」
- 文字を1文字ずつレイヤー化して、Y軸をバウンドさせるだけ！
- 「線が左から右にスーッと引かれる」
- シェイプレイヤー＋トリミングパスを使えばOK！
🎬一歩進んだ技：イージングで“プロっぽさ”爆上げ
F9（Easy Ease）を多用して、スピード感に抑揚を出すとめっちゃ良くなります。
ステップ5｜完成後に“なぜそうなったか”を振り返る
完成したら、それで終わりじゃありません。
ここが完コピ練習最大のポイントです。
- なぜこの動きが「かっこいい」と感じたのか？
- どんなレイヤー構造になっていたか？
- タイミングの取り方にパターンはあるか？
自分なりに言語化しておくと、次にオリジナルを作るときのヒントになります。
🧠脳内保存メモ：「なるほど、Y軸に変化つけるだけで“生きた動き”になるのか…！」
まとめ｜“動き”は盗め！でも作品は盗むな！
今回紹介したのは、「Illustrator × After Effects」でアニメーションを“完コピ”する方法でした。
覚えておいてほしいのは…
- これは“盗作”ではなく“習作”
- デザインの“動きの構造”を学ぶことが目的
- 何度も繰り返すことで、自分の引き出しが増える
「モーショングラフィックスは、見てるだけじゃうまくならない。手を動かせ！」
最初はしんどいです。でも同じ素材を3回トレースして、3回アニメーションしてみてください。
「いや〜、動かすと気づきが倍になるってのはマジでホント。
不思議と、“その動き”が自分の中に入ってきます。
僕も何度“うわー！これどうなってんの！”って叫んだことか…！完コピは、近道じゃなくて王道でした。」
地味だけど、確実に力がつくこの練習法、ぜひ試してみてくださいね！
シェイプアニメーションを習熟したいと思ったことありませんか。
一から積み上げていくのもいいけれど、お手本になるデザインがあれば「完コピ」しましょう。
もちろんコピーして作った作品を自分のものとして公開するとアウトです。
あくまで練習。
繰り返すことでデザイン感覚が身につき、レイアウトやエフェクトなどの構造の理解が早まります。
シェイプアニメーションを「完コピ」する手順
まず、作りたい素材を探します。
静止画でも動画でもOK。
静止画素材はPinterestなどのツールを使って手の空いた時に撮り溜めておくと便利です。
作りたい素材が決まったら、Illustratorに取り込みます。
動画の場合は必要な部分のスクリーンショットを撮って取り込みます。
Illustratorの画角は、After Effectsのアスペクト比と同じ(例えば1920×1080)にしておきます。
Illustratorを使うと、パーツがレイヤーごとに作ることができることから、AfterEffectsに取り込みやすく、アニメーションするにも楽です。
Illustratorに取り込んだら、素材をトレースします。
オブジェクトをアニメーションするのが目的であれば、始点と終点などの要素を分けてパーツを作ります。
アニメーション用の素材ができたらAfter Effectsに取り込みます。
アニメーション作業
illustratorでレイヤーごと区分けして保存したデータを、After Effects側でレイヤーごとに読み込みます。
After Effectsではレイヤー単位でアニメーションを行います。
そのためillustratorでもアニメーションさせたい素材をレイヤーごとに分けておく必要があります。
注意するのは[フッテージ]として読み込むのではなく、[コンポジション]として読み込むことです。
コンポジションとして読み込むと、レイヤーごとに区分けして読み込んでくれるので、アニメーション化するとき超便利です。
動画素材は、After Effectsのガイド用に取り込みます。
取り込んだデータをもとにAfter Effectsでアニメーション用にトレースを行いアニメーションにします。
まとめ
「完コピ」のメリットはトレースすることで仕組みが学べることですが、アニメーションする際の動きの感覚を学べることも重要です。
動きの感覚は実際に手を動かさないと身につきません。
こんにちは、フルタニです。放送局で番組作りをしてました。 完コピ を書きます。