Claude Code × Remotion：AIエージェントにReactを書かせて動画を自動生成する方法

1. Claude Code × Remotionとは？ - プログラマブル動画制作の未来

AIアーキテクトのOKIHIROです🚀

動画編集ソフトを使わず、「コード」で動画を作ることを想像したことはありますか？React開発者にとって馴染み深い「Remotion」というライブラリを使えば、それが可能です。そして今、Anthropic社のCLIツール「Claude Code」を組み合わせることで、そのコーディング作業自体をAIエージェントに任せる手法が注目されています。

本記事のゴールは、Claude Codeを使ってRemotionプロジェクトを立ち上げ、プロンプトだけで複雑なアニメーション動画を「実装」することです。手作業でのキーフレーム設定はもう不要です。AIに指示を出して、ブラウザ上で動画が組み上がっていく様子を体験しましょう。

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

今回は高速なパッケージマネージャーであるBunを使用しますが、npmやyarnでも代用可能です。また、Claude Codeを使用するためにはAnthropicのアカウントとAPI設定が必要です。

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

まずはターミナルを開き、Remotionのテンプレートプロジェクトを作成します。

bun create video

コマンドを実行すると、いくつかの設定を聞かれます。以下のように選択してください。

• Template: Blank (余計なコードが入っていない空の状態から始めます)
• TailwindCSS: Yes (スタイリングをAIに任せやすくするため推奨)

インストールが完了したら、ディレクトリに移動し、依存関係をインストールします。

cd remotion-test
bun install

2-2. Remotion Agent Skillsの導入

ここが重要なポイントです。RemotionにはAIエージェント（特にClaude CodeやCursorなど）がプロジェクト構造を理解しやすくするための「Skills」というパッケージが用意されています。これを導入することで、AIによるコード編集の精度が劇的に向上します。

bunx skills add remotion-dev/skills

実行時に「どのエージェント用のスキルをインストールするか」を聞かれた場合は、Claude Codeを選択してください（または全エージェント対応を選択）。

3. 実装・使い方の解説

準備が整ったら、開発サーバーを立ち上げます。

bun run dev

ブラウザで http://localhost:3000 が開き、Remotion Studio（プレビュー画面）が表示されます。初期状態では白いキャンバスが表示されているはずです。

Claude Codeによる動画生成

ここからはターミナル上のClaude Code（CLI）を使って指示を出します。動画内で行われていたように、具体的なプロンプトを入力してみましょう。

プロンプト例：

YouTubeの動画画面の中に、ブラウザのウィンドウが表示されているようなUIを作って。
チャンネル名は「OKIHIRO AI Lab」にして。
その中のターミナルで「This is way too cool」とタイピングされるアニメーションを追加して。

Claude Codeはこの指示を受け取ると、以下の処理を自動で行います。

1. 現在のファイル構造を読み取る。
2. Reactコンポーネント（Composition.tsxなど）を編集し、
   やCSSを追加。
3. Remotionのフック（useCurrentFrameなど）を使用してアニメーションロジックを実装。

プレビュー画面を見ると、コードの変更が即座に反映され、動画が再生されます。もしデザインが気に入らなければ、「もっとウィンドウを大きくして」「背景をダークモードにして」と続けて指示を出すだけで修正してくれます。

4. 応用・より高度な演出

動画の後半では、より複雑なインタラクション（スクロールやクリック動作）を追加していました。これらもRemotionなら数値計算で制御可能です。

スクロールとクリックの自動化

例えば、以下のような指示を追加します。

追加プロンプト例：

タイピングが終わったら、画面を下にスクロールさせて。
マウスカーソルが現れて、「チャンネル登録」ボタンをクリックする動きを作って。
クリックした瞬間にボタンの色をグレーに変えて。

これを実装する際、Claude Codeは interpolate 関数を使ってフレーム数に応じたY座標の変化を計算し、CSSの transform プロパティに適用します。手動でやると面倒なイージング（動きの加速・減速）の設定も、AIなら一瞬です。

注意点

Claude Codeは非常に優秀ですが、長時間の動画や複雑すぎるコンポーネント構成になると、コンテキスト（記憶容量）の制限で修正が難しくなる場合があります。コンポーネントを細かくファイル分割するよう指示するなど、人間側での設計支援も重要です。

5. まとめ

Claude CodeとRemotionを組み合わせることで、動画制作は「編集作業」から「ディレクション業務」へと変化します。

• Bun で高速に環境構築 ⚡
• Remotion Skills でAIにプロジェクト構造を理解させる 🧠
• Claude Code で対話的に動画を実装する 🗣️

このワークフローは、チュートリアル動画の作成や、データに基づいた動的な動画生成（ユーザーごとに名前を変える動画など）に革命をもたらします。ぜひ、あなたの手で次世代のクリエイティブフローを体験してみてください✨