AI動画生成ツールやAIが書いたHTMLアニメーションは見栄えがよくても、人が部分ごとに手直しするのは難しいものです。文字を一つ直したり、一つの要素の動きを遅くしたりするだけで、全体を作り直すことになりかねません。Claude CodeをAdobe After Effectsにつなぐと、この状況が変わります。AIモデルを外部のツールやデータにつなぐオープンな標準規格であるModel Context Protocol(MCP)を通じて、ClaudeはAfter Effectsの中に本物のテキストレイヤー、シェイプレイヤー、キーフレームを作れます。出来上がるのは平板な動画ではなく、人が開いて調整し、そのまま引き渡せるプロジェクトファイルです。本記事では準備の手順と2つの検証を紹介します。6.7秒のクリップから既存のモーショングラフィックスを作り直す検証と、参考素材なしで20秒の製品ローンチ動画を作る検証です。

編集できるプロジェクトが大切な理由

After Effectsは、モーショングラフィックス、UIモックアップ、アニメーションタイトル、製品紹介動画、図解の制作に業界で広く使われているソフトウェアです。After Effectsのモーショングラフィックスは、テキスト、シェイプ、背景という別々のレイヤーを組み合わせて作り、タイムライン上のキーフレームが各レイヤーをいつ、どう動かすかを決めます。キーフレームとは、位置などのプロパティの値を特定の時点で記録したものです。

Claudeはこの構造の中で作業するため、生成したものはすべて編集できる状態で残ります。色や位置、テキストの変更を普段の言葉で頼めば作り直す必要はなく、自分で直すこともできます。文言はテキストレイヤーにあり、速さはキーフレームの間隔で決まるからです。一人で制作する場合は、現実的な分業も可能になります。AIが実用的な初稿を作り、プロの編集者がネイティブの.aepプロジェクトファイルを受け取って最終的な仕上げを担当します。

必要なもの

主な条件はシンプルで、Claudeのサブスクリプションと、自分のコンピューターにインストールしたAdobe After Effectsだけです。間にサードパーティーの動画プラットフォームを挟む必要はありません。

このワークフローでは、Claude CodeをClaudeのデスクトップアプリ上でClaude Opus 5.5モデルとともに使います。ターミナルからも使え、そちらの方がやや速いかもしれませんが、デスクトップアプリのチャット画面の方が分かりやすいようです。After Effectsは自分のマシンで動くため、Claude CodeのセッションはRemoteではなくLocalに設定します。

2つのプログラムの橋渡しをするのは、公開されているAfter Effects用のMCPサーバーです。このサーバーは、Claudeが呼び出せる関数をひとそろい提供します。たとえば、プロジェクトの状態を読み取るget_project_summary、レイヤーを追加するcreate_shape_layerとcreate_text_layer、それらに動きを付けるadd_keyframeとset_temporal_easeです。Claude Codeはこうしたツール呼び出しを、ファイル操作とあわせて自分のコンピューター上で直接実行します。

最初のアニメーションの前にやる3つのこと

  1. 接続を確認する。 Claudeにcheck_setupとget_project_summaryを実行させます。この2つで、Claudeが開いているプロジェクトにつながっていることと、プロジェクトが空の状態から始まることを確認できます。
  2. フォルダーを用意する。 作業フォルダーを1つ作り、その中にプロジェクト、参考素材、レンダリング結果用のサブフォルダーを分けて置きます。
  3. バージョンを保存する。 生成の各段階がうまくいくたびに、v1、v2のように新しい名前でプロジェクトを保存します。

最も大切なのは3つ目です。小さな要素を一つ直してほしいと頼んだだけで、モデルがコンポジション全体を書き直し、うまくいっていたレイアウトを壊してしまうことがあります。以前のバージョンが残っていれば、作業を失わずに元に戻せます。

チャットパネルとレイヤー状のアニメーション作業画面を光るケーブルがつなぎ、フォルダーと保存したプロジェクトの各バージョンが並ぶ様子

▲ MCP接続と保存したプロジェクトの各バージョン

検証1:6.7秒のクリップからグラフィックを作り直す

最初の検証では、あるテック教育企業の動画に使われた既存のモーショングラフィックスを作り直します。伝えたいことはシンプルで、AIのレイヤーを載せる前にインフラが整っていなければならない、というものです。下には「01 Infrastructure」と書かれた暗い土台のブロックがあり、その上に輪郭線だけの設計図のような「02 AI」のブロックが浮かび、アクセントのタグと柔らかい床の影がデザインを仕上げています。

元のグラフィックの6.7秒のMP4をそのままClaude Codeに渡し、テキストとシェイプを別々のレイヤーにすることと、クリップの動きに沿ったキーフレームを付けることをプロンプトで指示します。するとClaudeは0.6秒、2.0秒、4.5秒といった複数の時点で映像をサンプリングし、どのレイヤーが最初に入ってくるか、それぞれがどれだけ速く動くかを割り出します。その分析をもとに、シーンのレイヤーをまとめるAfter Effectsの入れ物であるコンポジションを組み立てます。

参考素材としてスクリーンショットよりクリップの方が優れているのは、このためです。静止画1枚には時間の情報がないため、登場の順番や速さは分かりません。複数の時点をサンプリングすれば、モデルは時間の流れを十分につかめ、タイミングとイージング、つまり動きが加速し減速する具合の両方を合わせられます。

元のグラフィックと並べてみると、作り直したグラフィックはレイヤーの配置、文字サイズ、ブロックの比率、イージングをほぼ忠実になぞっています。違うのは、Claude版ではすべての要素が変更できるレイヤーとして残っている点です。

うまくいった部分を壊さずに修正する

修正は、短い番号付きリストで頼むのが最もうまくいきます。典型的な1回分は次のとおりです。

  1. ピーチ色のパネルを青に変える。
  2. 「first」のラベルを「Foundation」に置き換える。
  3. 下のブロックの動きを遅くし、その直後にAIのブロックを入れる。
  4. ほかの要素はすべて今の位置のまま保つ。

残したいものをすべて固定しておけば、何が変わったかを簡単に確かめられます。数十の修正を1つのプロンプトに詰め込むと、モデルが混乱しやすく、実際に何が動いたのかも見えにくくなり、確認と再依頼を延々と繰り返す羽目になりかねません。順序も大切です。まず全体のレイアウトとブロックの階層を固め、細かな見た目の調整は後の回に回します。

小さく直し、うまくいったバージョンを保存する流れ いいえ はい 参考クリップからv1を作る 最後に保存したバージョンから番号付きで数点を依頼 変わった所と固定した所を確認 意図どおり? 新しいバージョンで保存 次の修正へ、または.movと.aepを保管
▲ 小さく直し、うまくいったバージョンを保存する流れ

プロジェクトファイルの中身

修正後のv2プロジェクトをAfter Effects 2026で開くと、CARD、CAM、TOWER、TITLE、BASE_Plateといった名前の付いた個別のレイヤーが並んでいます。シェイプレイヤーやテキストレイヤーの横には、レイヤーのグループをまとめて動かす見えない制御用レイヤーであるヌルオブジェクトのリグと、あるレイヤーを使って別のレイヤーの見える範囲を決めるトラックマットもあります。

文言の小さな変更なら、プロンプトをもう一度送る必要はありません。テキストレイヤーを選んで打ち直すだけで、たとえば「Engineering」を「Design」に変えられ、AIに何かを作り直させる必要もありません。

タイミングも同じように手軽に扱えます。各キーフレームは時間と値を持っているため、2つのキーフレームの間の距離と時間がレイヤーの速さと軌道を決めます。ある例では、位置の値が1.0秒から2.5秒の間に780から420へ動きます。終わりのキーフレームをタイムラインの後ろへドラッグするとその動きが引き伸ばされ、登場がよりゆっくり、なめらかになります。

検証2:20秒のローンチ動画をゼロから作る

2つ目の検証はより難しく、手本にする素材なしで新しい作品を作ります。題材はあるSaaS製品のローンチ動画です。同じ製品ではプロのモーショングラフィックスデザイナーがすでに1本作っていたため、よい比較基準になります。

プロンプトには、製品の仕様、ブランドガイドライン、ビジュアルの参考資料に加えて、シーンの順番を入れます。ストーリーはIdea、Angle、Script、Packageの4段階で進み、Packageにはタイトル、サムネイルの方向性、説明文が含まれます。ClaudeとAfter Effectsについての動画を作るという1つの例を全シーンで通して使い、文脈が途切れないようにします。目標の長さは約20秒で、余計な機能紹介を詰め込まずに各シーンにゆとりを持たせられる長さです。

設定 値
長さ 約20秒
解像度 1920x1080
フレームレート 30fps
シーン Idea、AngleとScript、Package、ワードマーク
入力 製品仕様、ブランドガイドライン、ビジュアル参考資料、シーンの順番

フルのレンダリングを再生する前に、各シーンの静止フレームを確認し、文字が読みやすいか、ブランドの雰囲気がそろっているかを見ます。

初稿のあとの修正では、流れを整えることに重点を置きます。Packageのシーンでは、台本のカードをフレーム内に残したまま、タイトル、サムネイルの方向性、説明文のパネルがその周りにアニメーションで入ってくるようにして、シーンに一体感を持たせます。エンディングには締めくくりの行動喚起を製品のロゴとWebアドレスの横に置き、読めるだけの時間を最後に確保します。

出来上がったプロジェクトでは、各シーンのコンポジションがそれぞれのサブフォルダーに収まり、リグ、スライダー制御、フェード用のエクスプレッションまでそろっています。エクスプレッションとは、After Effectsでプロパティの値を計算する短いスクリプトです。シーンがモジュール化されているので、編集者はシーケンス全体を生成し直さなくても、カメラの動き、スケッチの線、背景のカードを1つだけ調整できます。

タブレットで動きの軌道を整える手と、細い矢印でつながった4枚の絵コンテカード

▲ 人のデザイナーの技とAIの初稿

人間のデザイナーとの比較

プロのデザイナーの版と並べ、レイアウト、タイポグラフィー、動きの印象を直接比べると、差ははっきり分かります。人が作った作品には独特の芸術的なニュアンスがあり、Claudeはまだ熟練したモーションデザイナーの繊細な技には完全には及ばないようです。

それでもAI版は、実用に足る、完全に編集可能な作業用プロジェクトであり、多くの人が予想するよりも出来がよいものです。人が仕上げる前提の初稿を素早く用意し、制作をかなり速めるのが現実的な役割かもしれません。

よりよい結果を得るには

見た目の判断をすべてモデルに任せると、モーションデザインはくじ引きのようになります。明確なクリエイティブの方向性、構成の整ったシーンのアウトライン、ブランド素材を渡すと、結果は目に見えてよくなり、再現もしやすくなります。最もきれいな出力は、UIモックアップや実際のスクリーンショット、画面録画のような具体的な素材を再現するときに得られやすく、抽象的なアートワークをゼロから生み出すのは比較的苦手なようです。

始めるための現実的な手順は次のとおりです。

  1. ClaudeのサブスクリプションとAfter Effectsを用意し、Claude CodeのセッションをLocalモードで開いて、After Effects用のMCPサーバーを接続します。
  2. 接続確認を実行してから、プロジェクト、参考素材、レンダリング結果用のフォルダーを分けて用意します。
  3. 何かを作り直すときは、静止画ではなく短いクリップをClaudeに渡し、シーンの順番と全体の長さをはっきり伝えます。
  4. 確認できる小さな変更を依頼し、うまくいった段階ごとに新しいバージョンを保存します。
  5. 簡単な文言やタイミングの調整は、After Effectsで自分で行います。
  6. 最終的なレンダリング(.mov)と編集可能なプロジェクト(.aep)を一緒に保管し、後から自分や編集者が文言、イージング、タイミングを変えられるようにします。

この方法の本当の価値は、AIの出力が一度きりのレンダリングではなく、人が改良を重ねられる作業ファイルになる点にありそうです。