Claude Code × Remotionで動画生成を自動化！AIにReactコードを書かせる新手法

1. Claude Code × Remotion とは？

私、OKIHIROが今最も注目しているAI開発トレンドの一つが「エージェント型コーディング」です。今回紹介するのは、Anthropicが提供するCLIツールClaude Codeと、Reactで動画を作成できるライブラリRemotionの強力な連携です。

通常、Remotionを使った動画制作はReactの深い知識とコンポーネント設計が必要でした。しかし、Claude Codeの新機能「Agent Skills」を活用することで、AIにRemotionのベストプラクティスを注入し、「このWebサイトの紹介動画を作って」と指示するだけで、実際のレンダリング可能なコードを生成・修正させることが可能になります。

2. 必要な準備と環境構築

このワークフローを試すには、Node.js環境とClaude Codeの権限が必要です。以下の手順でセットアップを行いましょう。

2-1. Claude Code のインストール

まだインストールしていない場合は、以下のコマンドでセットアップします。AnthropicのAPIキーが必要になるため、事前にコンソールで取得しておいてください。

npm install -g @anthropic-ai/claude-code
cd 任意のディレクトリ
claude

初回起動時に認証フローが走ります。画面の指示に従ってブラウザで認証を完了させてください。

2-2. Remotion プロジェクトの作成

動画生成の基盤となるRemotionプロジェクトを作成します。

npx create-video@latest

テンプレートの選択を求められたら、まずはシンプルなもの（例: Hello WorldやBlank）を選ぶと良いでしょう。

3. 「Agent Skills」でRemotionを学習させる

ここからが本記事のハイライトです。Claude Codeには、特定のライブラリの使い方やドキュメントを「スキル」として外部から読み込む機能があります。

Remotion公式が提供しているスキルセットを以下のコマンドでClaude Codeに追加します。

npx skills add remotion-dev/skills

このコマンドを実行すると、Claude CodeはRemotionのディレクトリ構造、コンポーネントの書き方、レンダリング設定などの「文脈」を理解します。これにより、単にReactコードを書くのではなく、「Remotionとして正しく動く動画用コード」を出力できるようになります。

4. 実践：プロンプトで動画を作成する

準備が整ったら、実際に動画を作らせてみましょう。Claude Codeの対話モードで以下のように指示を出します。

プロンプト例：

新しいRemotionコンポジションを作成してください。
テーマは「最新のAIニュース」です。
背景はダークモードで、画面中央に「AI Revolution」というテキストが
フェードインしながら現れるアニメーションを実装してください。
動画の長さは5秒でお願いします。

すると、Claude Codeは以下の作業を自律的に行います。

• 必要なReactコンポーネントファイル（.tsx）の作成
• remotion.config.ts や Root.tsx へのコンポジション登録
• アニメーション用フック（useCurrentFrame, interpolate）の実装

作成されたコードは、Remotionのプレビュー画面（npm start）で即座に確認できます。「文字をもっと大きくして」「背景色を変えて」といった修正も、続けて指示するだけでAIがコードを書き換えてくれます。

5. 応用と注意点

この手法の最大のメリットは、Webサイトのスクリーンショットやデータを動的に組み込める点です。例えば、自社サービスのダッシュボード画面のスクショをAIに渡し、「この画面の数値を強調するプロモーション動画を作って」と依頼することも可能です。

ただし、生成される動画のクオリティはAIの推論能力に依存します。複雑な3D表現や物理演算はまだ手動での調整が必要です。あくまで「ベースとなるReactコードの爆速構築」として活用するのが、現時点での最適解と言えるでしょう。

6. まとめ

Claude CodeとRemotionの組み合わせは、エンジニアにとっての「動画制作」のハードルを劇的に下げました。動画編集ソフトを一切開かず、使い慣れたVS Codeとターミナルだけで動画が完成する体験は感動的です。

ぜひ皆さんも、npx skills add remotion-dev/skills を叩いて、AIとのペアプログラミングによる動画制作を体験してみてください。未来の制作フローがそこにあります。