動画生成の完全自動化
🎥 今回の参考動画はこちら ▼
1. Claude Code × Remotion とは？
AIアーキテクトのOKIHIROです。今回は、クリエイティブ制作の現場を根底から覆す可能性を秘めた技術スタック、「Claude Code」と「Remotion」の組み合わせについて解説します🚀
これまで、プログラムで動画を生成するにはAdobe After Effectsのスクリプトや、高度なFFmpegの知識が必要でした。しかし、Anthropicが提供するCLIツール「Claude Code」と、Reactで動画を作成できるライブラリ「Remotion」を組み合わせることで、私たちは「自然言語で指示するだけ」で、Reactベースの高品質な動画を生成できるようになりました。
この手法は「Vibecreate」とも呼ばれ、単なるチャットボットではなく、ターミナル上で自律的にファイルを操作・実行する「AIエージェント」の実力を最大限に引き出す事例です。プログラミングの知識が浅い方でも、環境さえ整えれば、驚くほど簡単に動画自動化システムを構築できます。
2. 必要な環境構築（インストール手順）
まずは、AIエージェントが働くための土台を整えます。以下のツールをインストールしてください。
前提ツールの準備
以下の3つは必須です。これらがないとClaude Codeが動作しません。
- Node.js (LTS版推奨): RemotionはJavaScriptランタイム上で動作します。公式サイトからLTS（Long Term Support）バージョンをダウンロードしてインストールしてください。
- Git: バージョン管理ツールです。リポジトリの操作に必要になります。
- Visual Studio Code (VS Code): 開発エディタです。今回はこのエディタのターミナル機能をメインに使用します。
Claude Code のセットアップ
VS Codeの拡張機能マーケットプレイスで「Claude Code」を検索し、インストールします。その後、ターミナルを開き、Anthropicのアカウントでログイン認証を行ってください（※利用にはAnthropicのAPIアクセス権やプラン契約が必要な場合があります）。
Remotionスキルの追加（最重要）
ここが今回のハイライトです。Claude Code単体では動画を作れませんが、「スキル（プラグイン）」を追加することで機能拡張が可能です。VS Codeのターミナルで以下のコマンドを実行してください。
npx skills add remotion-dev/skills
このコマンドにより、Claude Codeは「Remotionを使って動画を作る方法」を学習し、Reactコードの生成からプレビュー環境の立ち上げまでを自律的に行えるようになります✅
3. 実践！AIエージェントで動画を作成する
環境が整ったら、実際に動画を作成してみましょう。ここからはVS Code内のClaude Codeとの対話で進みます。
プロンプトでの指示出し
Claude Codeのチャット欄を開き、以下のように具体的な指示を出します。WebサイトのURLを渡して素材として使わせるのがポイントです。
Sweatアプリ（https://sweat.com/）のプロモーション動画を作成してください。サイト内の画像やロゴを使用し、ブランドカラーに合わせてください。最後には「50% OFF」のセール情報を表示してください。
すると、Claude Codeは以下のタスクを自律的に実行し始めます。
- Remotionプロジェクトの初期化（
npm init video相当の処理） - 指定されたWebサイトの解析とアセット（画像など）の取得
- Reactコンポーネント（動画のシーン）のコーディング
- ローカルサーバーの起動
プレビューと修正（フィードバックループ）
処理が完了すると、ブラウザ上で「Remotion Studio」が立ち上がり、生成された動画をプレビューできます。ここからがAIエージェントの真骨頂です。
もし「色が違う」「動きが遅い」と感じたら、自分でコードを直す必要はありません。Claude Codeにチャットでこう伝えてください。
全体の色調をもう少しオレンジ寄りに変更して。あと、セール期間を2026年3月に修正してください。
エージェントはReactのコード（tsxファイルやCSS）を自動で書き換え、Remotion Studioのプレビューに即座に反映させます。この「会話による修正（Vibe Coding）」こそが、非エンジニアでも高度な動画を作れる理由です💡
4. 技術的な仕組みと応用
裏側では何が起きているのでしょうか？Remotionは、Reactのコンポーネントを1フレームごとの画像としてレンダリングし、それをFFmpegで結合してMP4などの動画ファイルにします。
Claude Codeが生成しているのは、実質的にはWebサイトを作るのと同様のHTML/CSS/JavaScript (React) のコードです。つまり、Web開発の知識がある方なら、生成されたコードを直接編集して、さらに細かいアニメーション調整やAPI連携（天気予報データを動画に埋め込むなど）を行うことも可能です⚙️
レンダリング（動画の書き出し）
プレビューで満足したら、Remotion Studio内の「Render」ボタンを押すか、Claude Codeに「動画ファイルとして書き出して」と指示すれば、MP4ファイルが手に入ります。
5. まとめ
Claude CodeとRemotionの組み合わせは、動画制作の敷居を劇的に下げました。重要なのは「どうコードを書くか」ではなく、「どんな動画を作りたいか」を明確に言語化する能力です。
この技術は、SNS用の大量の動画生成や、ユーザーごとに内容を変えるパーソナライズド動画など、手作業では不可能な規模のクリエイティブを実現します。ぜひ、あなたのPCでもこの未来的な開発体験を試してみてください。きっと、そのポテンシャルに驚くはずです🚀
この記事の自動化に使われた技術と思考法は、
すべて以下のアカデミーでインストールできます。
