Claude Codeで動画自動生成！Remotion Agent Skill完全ガイド

1. Remotion Agent Skillとは？ - 動画生成の自動化

AIアーキテクトのOKIHIROです。今回は、Reactエンジニアにとって革命的とも言える動画生成ツールチェーンを紹介します。

Remotionは、Reactを使って「プログラムコードから動画（MP4など）」を生成できる強力なフレームワークです。これまではReactの知識とアニメーションロジックの深い理解が必要でしたが、新しく登場したAgent Skillを使えば、状況が一変します。

この機能を使うと、AnthropicのCLIツールClaude Codeに対して「自然言語で指示」するだけで、ClaudeがRemotionのプロジェクトを操作し、コンポーネントを作成し、アニメーションを実装してくれます。まさに「動画版の生成AIコーディング」と言える体験です。

2. 必要な準備（環境構築）

このワークフローを試すには、以下のツールが必要です。

• Node.js (LTSバージョン推奨)
• Claude Code (AnthropicのCLIツール)
• Remotion プロジェクト

まず、Node.jsがインストールされていることを確認してください。次に、Claude Codeをグローバルインストールします。これにはAnthropicのAPIキーが必要です。

npm install -g @anthropic-ai/claude-code
claude login

認証が完了したら、Remotionのプロジェクトを作成します。以下のコマンドを実行し、テンプレート（例: Hello World）を選択してください。

npx create-video@latest

プロジェクト作成後、ディレクトリに移動し、今回の主役であるAgent Skillをインストールします。

cd my-video
npx skills add remotion-dev/skills

このコマンドにより、Claude CodeがRemotionプロジェクトを理解し、操作するための設定（.cursorrules や専用のプロンプトコンテキストなど）が注入されます。

3. 実装・使い方の解説

準備が整ったら、いよいよAIに動画を作らせてみましょう。

ステップ1: Claude Codeの起動

プロジェクトルートで以下のコマンドを実行し、Claude Codeを起動します。

claude

ステップ2: プロンプトで動画作成を指示

例えば、手元にあるHTML製の静的なインフォグラフィックやデータ可視化のデザインがあるとします。これを動画化するようにClaudeに指示します。

以下のようなプロンプトを入力してください。

プロジェクトルートにあるHTMLファイルを参考に、これをRemotionコンポーネントに変換してください。
カードが1つずつ順番に表示される「スタガーアニメーション」を実装してください。
Remotion Agent Skillを使用してください。

ポイント：明示的に「Remotion Agent Skillを使用して」と伝えることで、Claudeはインストールされたスキルセット（ベストプラクティスや専用コマンド）を確実に活用します。

ステップ3: プレビューと修正

Claudeがコードの生成を終えたら、別のターミナルでプレビューサーバーを立ち上げます。

npm run dev

ブラウザでRemotion Studio（通常は http://localhost:3000）が開き、生成された動画を確認できます。もしアニメーションのタイミングや動きを変えたい場合は、再度Claude Codeに戻って修正を指示します。

各カードが表示される際、スポットライト効果を追加してください。
フォーカスされているカード以外は透明度を下げて、3秒間強調表示してください。

このように、対話形式でどんどんクオリティを上げていけるのが最大の特徴です。

4. 動画の書き出し（レンダリング）

納得のいく動画ができたら、最後にMP4ファイルとして書き出します。Remotionはブラウザベースのレンダリングではなく、コマンドラインからヘッドレスブラウザを使って高品質にレンダリングを行います。

以下のコマンドを実行します。

npx remotion render BenchmarkResults out/video.mp4

BenchmarkResults は作成したコンポジションID（コンポーネント名）、out/video.mp4 は出力先のパスです。数秒〜数分待てば、Reactコードが実際の動画ファイルとして生成されます。

5. まとめ

今回は、Claude CodeとRemotionを組み合わせた次世代の動画制作フローを解説しました。

この技術の素晴らしい点は、動画編集ソフトのタイムラインとにらめっこするのではなく、コードとしての再現性とAIによる生産性を両立できる点です。データの差し替えだけで動画を量産したり、CI/CDパイプラインに動画生成を組み込むことも容易になります。

ぜひ、あなたのWeb開発スキルを活かして、新しい動画クリエイションの世界に挑戦してみてください🚀