【動画生成革命】Claude CodeとRemotionで動画編集を「自然言語」で自動化する方法

1. 概要とメリット：なぜ動画をコードで作るのか？

OKIHIROです。あなたは動画編集ソフトの複雑なUIや、素材配置の微調整に時間を奪われた経験はありませんか？私のようなエンジニアにとって、マウス操作主体の作業は時に「フロー」を断ち切る要因になります。

今回紹介する手法は、動画編集の概念を根本から覆します。使用するのは、AnthropicのCLIエージェントツール「Claude Code」と、Reactで動画をプログラム的に生成するライブラリ「Remotion」です。

この組み合わせにより、ターミナルでAIと対話するだけで、コンポーネントの作成からアニメーション調整、さらには外部AIを使った素材生成までを完結できます。UIを一切触らず、Gitでバージョン管理可能な「コードとしての動画」を作る。これが2025年後半の新しい映像制作のスタンダードになりつつあります。

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

このワークフローを実践するには、以下の環境が必要です。

• Node.js: 最新の安定版（LTS）を推奨
• Claude Code: AnthropicのCLIツール
• Anthropic API Key: Claude利用に必要
• Replicate / ElevenLabs API Key: 画像・音声生成を行う場合

まず、動画内で紹介されているスターターキットを利用するのが近道です。以下のコマンドでプロジェクトを開始します。

git clone https://github.com/jhartquist/claude-remotion-kickstart
cd claude-remotion-kickstart
npm install

次に、Claude Codeを起動し、開発サーバーを立ち上げます。

claude
> Run the dev server in the background

これでRemotion Studioが立ち上がり、ブラウザでリアルタイムプレビューが可能になります。ここからの作業はすべて、Claude Codeへの「自然言語による指示」で行います。

3. 実装・使い方の解説

ステップ1：スライドの追加と構成

まずは動画の骨組みを作ります。Claude Codeに対して、以下のように指示を出してみましょう。

「タイトルスライドを追加して。テキストは『How to Explain Things to Programmers』にして」

Claude Codeはプロジェクト内のReactコンポーネントを解析し、適切なファイルを自動で生成・修正します。RemotionはReactコンポーネントをフレーム単位でレンダリングするため、Web開発の知識がそのまま活かせます。

ステップ2：MCPによる外部ツールの活用

ここがこのワークフローの真骨頂です。MCP (Model Context Protocol) を利用することで、Claudeはローカル環境から外部のツールやAPIを直接操作できます。

例えば、スライドの背景画像を生成したい場合、ブラウザで生成サイトに行く必要はありません。

「Replicate MCPを使って、このスライド用にテック感のある背景画像を生成して。配色はGruvboxテーマで」

Claudeは自動的にReplicate APIを叩き、画像生成モデル（Nano Banana Proなど）を実行。生成された画像をassetsフォルダに保存し、コード内のパスを書き換えて適用してくれます。

ステップ3：音声と字幕の自動同期

ナレーションも自動化しましょう。スクリプトをClaudeに考えてもらった後、以下の指示で音声化できます。

「ElevenLabsを使ってナレーションを生成して。Deepgramを使って単語レベルのタイムスタンプを取得し、字幕のアニメーションと同期させて」

音声ファイルの生成から、transcribe コマンドによるタイムスタンプ取得、そしてReactコンポーネント側でのタイミング調整まで、すべてがコマンドライン上の対話で完了します。

4. 応用・注意点

この手法の最大の利点は「再利用性」と「バージョン管理」です。

一度作成した動画テンプレートは、テキストや画像パスを変えるだけで別の動画に転用できます。また、全ての変更履歴がGitに残るため、「3つ前のバージョンのデザインに戻す」といった操作も容易です。

一方で、API利用料には注意が必要です。Replicateでの画像・動画生成やElevenLabsの音声合成は、試行錯誤するたびにコスト（数円〜数十円程度/回）が発生します。プロンプトを練り込み、一発で意図を伝える工夫が求められます。

5. まとめ

Claude CodeとRemotionの組み合わせは、動画制作を「クリエイティブなコーディング」へと昇華させます。

面倒なタイムライン操作から解放され、論理的な構成とデザインコードに集中できるこの体験は、一度味わうと戻れません。ぜひ、あなたの技術発信やドキュメント作成に、この「Vibe Code」な手法を取り入れてみてください。