動画制作を自動化する
🎥 今回の参考動画はこちら ▼
1. Remotion と Claude Code とは？
こんにちは、OKIHIROです。今回は「動画編集」の概念を根底から覆す、エンジニアのための映像制作フローをご紹介します🚀
皆さんは Remotion をご存知でしょうか？これは、Premiere ProやAfter EffectsのようなGUIツールを使わず、React (TypeScript) のコードだけで動画を作成できるフレームワークです。Web開発の知識があれば、コンポーネントを組み立てるように動画を作れるのが最大の特徴です。
そして今回の主役は、ここに Claude Code を組み合わせる点にあります。Claude Codeは、Anthropicが提供する強力なコーディングエージェント機能です。これを使うことで、「Reactのコードを書く」という工程すらAIに任せ、自然言語で指示するだけで動画をレンダリングまで持っていくことが可能になります。
2. 必要な準備（環境構築）
このワークフローを試すには、以下のツールが必要です。すべて無料で始められますが、Node.js環境が必須となります。
- Node.js (v18以上推奨)
- npm または yarn, pnpm, bun
- Remotion CLI
- Claude Code (CLIツール)
まず、Remotionのプロジェクトを作成します。ターミナルを開き、以下のコマンドを実行してください。
npm init videoセットアップウィザードが立ち上がるので、プロジェクト名を入力し、テンプレートには「Blank」や「HelloWorld」を選択すると良いでしょう。
次に、Claude Codeを使用するための準備です。もしCLI版を使用する場合は、以下のコマンドなどで導入し、AnthropicのAPIキーを設定しておいてください。
npm install -g @anthropic-ai/claude-code
claude login3. 実装・使い方の解説
それでは実際に動画を作っていきましょう。ここでのポイントは、「どんな動画を作りたいか」をClaude Codeに的確に伝えることです。
ステップ1: プロジェクト構造の理解
Remotionプロジェクトの中核は src/Root.tsx です。ここで動画の構成（Composition）を定義します。そして各シーンはReactコンポーネントとして実装されます。
ステップ2: Claude Codeへの指示出し
ターミナルでClaude Codeを起動し、以下のようなプロンプトを投げかけます。
プロンプト例：
Remotionを使って、以下の仕様で動画コンポーネントを作成してください。
1. 背景はダークブルーのグラデーション
2. 中央に「Hello, AI Video!」という白いテキストを表示
3. テキストはフェードインで出現し、少しずつ拡大するアニメーションをつける
4. 動画の長さは5秒、FPSは30で設定Claude Codeは、RemotionのAPI（useCurrentFrame, interpolate など）を理解しているため、適切なアニメーションロジックを含んだ .tsx ファイルを生成してくれます✨
ステップ3: プレビューとレンダリング
生成されたコードを保存したら、Remotionのプレビュー画面を立ち上げます。
npm startブラウザが開き、Reactで描画された動画をリアルタイムで確認できます。修正したい場合は、再びClaudeに「テキストの色を黄色に変えて」「出現タイミングを遅くして」と指示すれば、コードを修正してくれます。
完成したら、以下のコマンドでMP4ファイルとして書き出します。
npm run build4. 応用・注意点
非常に便利なこの手法ですが、いくつか注意点があります。
1. レンダリング時間
複雑なReactコンポーネントや大量の外部アセットを使用すると、レンダリング（書き出し）に時間がかかる場合があります。PCのスペックに依存するため、長時間の動画には向きません。
2. コードの微調整
Claude Codeは優秀ですが、アニメーションの「気持ち良さ（イージングなど）」を完璧に一発で再現するのは難しいことがあります。生成されたコードを見て、interpolate 関数のパラメータを手動で微調整できるようになると、クオリティが格段に上がります💡
5. まとめ
RemotionとClaude Codeを組み合わせることで、エンジニアは「動画編集ソフト」を学ぶことなく、コードという慣れ親しんだ武器で映像制作が可能になります。
特に、動的なデータを流し込んで大量の動画を自動生成するようなケースでは、この構成は最強のソリューションになるでしょう。ぜひ一度、npm init video から始めてみてください。未来の開発体験がそこにあります✅
この記事の自動化に使われた技術と思考法は、
すべて以下のアカデミーでインストールできます。
