【Claude Code × Remotion】ReactとAIで動画編集を自動化！プログラマティック動画生成入門

1. Claude Code と Remotion とは？ - 概要とメリット

今回は、動画編集というクリエイティブな作業を、エンジニアリングのアプローチで劇的に効率化する方法をご紹介します。使用するのは、Anthropic社が提供する強力なCLIツールClaude Codeと、Reactで動画を作成できるライブラリRemotionです。

Remotion: Reactで動画を作る

Remotionは、Reactコンポーネントとして動画の各フレームを定義し、それをMP4動画としてレンダリングできる画期的なライブラリです。CSSやSVG、Web API（データのフェッチなど）をそのまま動画制作に利用できるため、Web開発者にとって非常に親和性が高いツールです。

Claude Code: ターミナルから開発するAIエージェント

Claude Codeは、ターミナル上で動作するAIコーディングパートナーです。単にコードを提案するだけでなく、プロジェクトのファイル構造を理解し、ファイルの作成や編集、コマンドの実行までを自律的に行います。今回は、このClaude CodeにRemotionのコードを書かせることで、「自然言語による指示だけで動画を生成する」ワークフローを実現します。

2. 必要な準備（環境構築・インストール）

まず、開発環境を整えましょう。Node.jsがインストールされていることが前提となります。

Remotionプロジェクトの作成

ターミナルを開き、以下のコマンドでRemotionのテンプレートプロジェクトを作成します。今回は動画内で使用されていたTailwind CSS対応のテンプレートを選択することをお勧めします。

npx create-video@latest

インストール後、プロジェクトディレクトリに移動し、依存関係をインストールして開発サーバーを起動します。

npm install
npm run dev

これで、ブラウザ上の「Remotion Studio」で動画のプレビュー確認ができるようになります。

Claude Codeの導入

次に、AnthropicのClaude Codeをインストールします。これにはAnthropicのAPIキーが必要になる場合があります。

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

インストール後、プロジェクトのルートディレクトリで以下のコマンドを実行し、Claudeにプロジェクトを認識させます。

claude init

これにより、CLAUDE.md というファイルが生成されます。ここにプロジェクトの概要やルール（Remotion特有の記述ルールなど）を記述しておくと、AIの回答精度が飛躍的に向上します。

3. 実装・使い方の解説

ここからは実際に、Claude Codeを使って動画コンポーネントを作成していきます。動画では「GitHubプロフィールのプロモーション動画」と「SNS投稿風のアニメーション」が例に挙げられていました。

GitHubプロフィール動画の自動生成

Remotionの強みは、APIからデータを取得して動的に動画を作れる点です。Claude Codeに対して、次のように指示を出します。

GithubのプロフィールURL (https://github.com/yourname) を元に、
主要なリポジトリや活動状況を紹介するプロモーション動画のコンポーネントを作成してください。
Remotionを使用し、データの取得からアニメーションまで実装してください。

Claude Codeは以下のステップを自律的に実行します。

• データの取得ロジックの実装: GitHub APIなどを用いてデータをフェッチするコードを書きます。
• UIデザインの実装: Tailwind CSSを使用し、ダークモード風の洗練されたデザインを構築します。
• アニメーションの適用: Remotionの useCurrentFrame や interpolate 関数を使用し、要素がフェードインしたり、数値がカウントアップしたりする動きをつけます。

開発者は、生成されたコードを npm run dev で起動したRemotion Studioで確認し、微調整を行うだけです。

スクリーンショットからのUI再現

さらに高度な使い方として、SNSの投稿画面などの「スクリーンショット」をClaude Code（またはv0などのツール）に渡し、「この画像をReactコンポーネントとして再現して」と依頼する手法があります。

画像から生成された静的なReactコンポーネントをRemotionに組み込み、spring アニメーションなどで動きをつけることで、本物そっくりのモックアップ動画を短時間で作成できます。これは製品デモやSNSマーケティング動画の作成において非常に強力な武器になります。

4. 応用・注意点

このワークフローを実践する上で、いくつかの技術的なポイントがあります。

Remotion特有の制約をAIに教える

一般的なReactと異なり、Remotionには「動画の尺（durationInFrames）」や「フレームレート（fps）」の概念があります。Claude Codeがこれを無視してしまうことがあるため、CLAUDE.md に以下のような指示を含めると良いでしょう。

• フレーム管理: 動画の長さはフレーム単位で管理することを明記する。
• 非同期処理: データのフェッチには delayRender や continueRender ハンドルを使用する必要があることを教える。
• 絶対配置: 動画内の要素配置には absolute ポジショニングが多用される傾向があることを伝える。

レンダリングコスト

複雑なコンポーネントや高解像度の画像を使用すると、プレビューやレンダリングが重くなる可能性があります。パフォーマンスを意識し、必要に応じて静的な画像アセットに置き換えるなどの工夫が必要です。

5. まとめ

Claude CodeとRemotionを組み合わせることで、動画制作は「手作業による編集」から「コードによる生成」へと進化します。特に、データに基づいた動画や、大量のバリエーションが必要な動画を作成する場合、このアプローチは圧倒的な生産性を発揮します。

最初は環境構築やAIへの指示出しに慣れが必要かもしれませんが、一度仕組みを作ってしまえば、あとはコマンド一つで高品質な動画を生み出せるようになります。ぜひ、あなたのエンジニアリングスキルを動画制作という新たな領域で活かしてみてください。