RemotionがAgent Skillsを公開：Claude Codeへの指示だけでMG動画を自動生成・レンダリング

プロダクトの機能を紹介する洗練されたモーショングラフィックス動画を作りたいとき、これまではAfter Effectsを開いてキーフレームを手作業で打つか、専門の映像作家に依頼するのが普通でした。

しかし、その制作フローが大きく変わりつつあります。1月19日、Remotionの公式Agent SkillsとClaude Codeを組み合わせ、自然言語の指示だけでコードを自動生成し、UIや3Dアニメーションを含むMG動画をレンダリングまで完結させる事例が公開されました。

動画編集ソフトを一切開くことなく、Claude Codeがコンポーネント設計からカメラワークの実装、書き出しまでを自律的にやり切っています。

プロンプトだけで仕上がる8秒間のターミナル演出

今回のデモは、特定のCLIインストールコマンドを解説するアニメーションを作ってほしい、というプロンプトから始まりました。

初期設定は1280x1000ピクセルのmacOS風ライトテーマのターミナル画面です。Claude Codeは既存のリポジトリ構成を読み込み、MacTerminalコンポーネントを新規作成し、フィードバックに応じて背景やフォントを微調整しました。

続いてマスターコンポジションを組み、ターミナルが画面下部から滑り込みながらY軸で回転し、拡大する多層的な3D動効を実装しました。

さらにコマンド実行時のASCIIアート表示、ロゴ同士のトランジション、最後にはターミナルがカメラに向かってX軸に90度回転して退場する演出までをコード化し、最終的に8秒の完成動画をレンダリングしました。

AIエージェントに作法を教えるAgent Skills

Remotionは、ReactやWeb標準技術を使ってプログラムで動画を構築できるオープンソースフレームワークです。今回提供されたAgent Skillsは、Claude CodeやCursor、Codexなどのコーディングエージェント向けに最適化されたベストプラクティス集です。

ターミナルからコマンドを1行実行するだけでインストールでき、エージェントはRemotionの仕様に沿った正しいコードを即座に出力できるようになります。

スキルには基本のレイアウトやタイポグラフィだけでなく、CesiumJSを用いた3Dマップ演出、字幕制御、プレビュー環境の起動、SaaSへの組み込み指針まで網羅されています。

なぜ重要か

この取り組みが示しているのは、生成AI動画のもうひとつの極めて実用的な進化ルートです。

ピクセルを直接確率的に生成する動画生成モデルは、UIの再現や文字の正確なレンダリングが苦手で、狙い通りの修正も困難です。一方、RemotionとAIエージェントの組み合わせなら、AIは構造化されたReactコードを書くだけで、描画自体は確定的なレンダリングエンジンが行います。

開発者やスタートアップにとって、新機能のデモ動画や年次レポート動画の制作コストは劇的に下がります。文言の修正や配色の変更も、エージェントにテキストで1行伝えるだけで差分が反映されます。

実写的な映像表現には向きませんが、UIアニメーションやインフォグラフィックといった用途において、コードベースの動画生成はすでに実用段階に入ったと言えます。