【Vibe Coding】Claude Code × Remotionで動画生成！AIにコードを書かせる完全ガイド

1. 「Vibe Coding」とは？ - 動画制作のパラダイムシフト

こんにちは、AIアーキテクトのOKIHIROです。あなたは動画を作る際、Premiere ProやDaVinci Resolveといった複雑なGUIツールと格闘していませんか？もしあなたがコードを書けるエンジニアなら、その苦労は過去のものになるかもしれません。

今回紹介するのは、Claude CodeとRemotionを組み合わせた「Vibe Coding」と呼ばれる手法です。これは、人間が細かく指示を出すのではなく、AI（Claude）に「こんな感じ（Vibe）で」と伝え、AIがローカル環境のファイルを直接操作してコードを書き、動画をレンダリングするという、全く新しいワークフローです。

本記事のゴールは、ターミナル操作だけで、画像を分析させ、アニメーション付きの動画を自動生成する環境を構築することです🚀

2. 必要な技術スタックと準備

この手法を実現するために、以下の2つの主要ツールを使用します。

• Claude Code: Anthropic公式のCLIツール。ターミナルからClaude 3.7 Sonnetなどのモデルを利用し、ローカルファイルの読み書きやコマンド実行が可能です。
• Remotion: Reactを使って動画をプログラム的に作成するためのライブラリ。Web技術（HTML/CSS/JS）で映像を作れます。

環境構築の手順

前提として、Node.js（バージョン18以上推奨）がインストールされている必要があります。まずはRemotionのプロジェクトを作成しましょう。

npx create-video@latest

テンプレートには「Hello World」などを選択してください。次に、Claude Codeをインストールし、認証を行います。

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

これで、ターミナルから claude コマンドを打つだけで、優秀なAIエンジニアがあなたのプロジェクトに参加してくれる準備が整いました✅

3. 実装：AIに動画を作らせるワークフロー

では、実際に動画を作っていきましょう。ここでのポイントは、AIに「プロジェクトの文脈」を正しく理解させることです。

Step 1: CLAUDE.md の作成（最重要）

Claude Codeを起動（claudeコマンド）すると、初回に初期化が行われますが、より精度を高めるためにプロジェクトルートに CLAUDE.md というファイルを作成することを強く推奨します。

これはAIへの「引き継ぎ書」のようなものです。ここに「Remotionプロジェクトであること」「コンポーネントの設計ルール」「ファイル構造」などを記述しておくと、AIのコーディング精度が劇的に向上します。Remotion公式やコミュニティで共有されているベストプラクティスを記載しておくと良いでしょう。

Step 2: 画像からデータ可視化動画を生成

例えば、経済指標のグラフ画像があるとします。これを元にアニメーション動画を作りたい場合、手順は驚くほどシンプルです。

1. 対象の画像をプロジェクトフォルダに保存する。
2. Claude Codeで以下のプロンプトを実行する。
   「この画像を解析して、Remotionで同様のデータ可視化アニメーションコンポーネントを作成してください。」

Claudeは画像を視覚的に理解し、Reactコンポーネント（.tsx）を作成、データを配列として定義し、さらに Root.tsx に登録するところまで自動で行ってくれます。私たちは npm run start でプレビューを確認するだけです💡

Step 3: 地図アニメーションと修正プロセス

地図上に移動経路を描画するようなタスクも可能です。ここでのコツは、SVGマップやGeoJSONデータを活用することです。

もし生成された動画で「都市の位置がズレている」などの問題（ハルシネーション）が発生した場合、AIに修正を依頼します。この時、AI自身に「なぜ間違えたのか」を分析させたり、別の検証用AI（ChatGPTなど）と対話させるようなアプローチも有効です。

例えば、「SVGの座標系と実際の緯度経度の変換が正しくないようです。GeoJSONを使用して正確な座標で描画し直してください」と指示すれば、コードを修正してくれます。

4. 応用・注意点

この手法は強力ですが、いくつか注意点があります。

• APIコスト: Claude Codeはトークンを消費します。特に画像を多用する場合や、長時間の対話を行う場合は、API利用料（ドル建て）に注意が必要です。
• 精度: 複雑な3D表現（React Three Fiberなど）も可能ですが、AIが一発で完璧なコードを書くとは限りません。「生成→プレビュー→フィードバック」のサイクルを回すことが重要です。
• オーバーレイ活用: 全編をコードで作るだけでなく、既存の動画の上に「スマホの通知ポップアップ」のようなアニメーションを重ねる（Overlay）使い方も実用的です。

5. まとめ

「動画編集はマウスで行うもの」という常識は、生成AIとVibe Codingによって覆されつつあります。コードで動画を管理できるということは、バージョン管理が可能になり、大量生成や自動化も容易になることを意味します。

エンジニアである私たちにとって、これは最強の武器になります。ぜひあなたの開発環境にもClaude CodeとRemotionを導入し、未来のクリエイティブワークフローを体験してみてください。未来を創るのは、コードと、それを操るあなたの情熱です。