Remotion × Claude Code
完全開発ガイド
Reactで動画を作る「Remotion」と、最新のAIエージェント「Claude Code」。この2つを組み合わせることで、自然言語のプロンプトだけで高度な動画生成が可能になります。3Dロゴ制作から自動字幕生成まで、未来の動画開発フローを技術的に紐解きます🚀
🎥 今回の参考動画はこちら ▼
1. Remotion × Claude Code とは？
私がAIアーキテクトとして常に注目しているのは、「開発プロセスの自動化」です。今回のテーマは、Reactを使ってプログラムで動画を生成するライブラリRemotionと、Anthropicの強力なCLIツールClaude Codeの連携です。
通常、Remotionを使用するにはReactの詳細なコーディング知識が必要ですが、Claude Codeに「Remotionの知識（Agent Skills）」を与えることで、自然言語の指示（プロンプト）だけで複雑な動画コンポーネントを実装できるようになります💡
2. 必要な準備と環境構築
まずはベースとなる環境を整えましょう。このワークフローの核となるのは、Remotion Agent Skillsという、AIにRemotionのベストプラクティスを教えるためのドキュメントセットです。
以下の手順でプロジェクトをセットアップします。
Remotionプロジェクトの作成
ターミナルで以下のコマンドを実行し、Remotionの雛形を作成します。
npm init video my-videoAgent Skillsの導入
次に、Claude Codeが参照するためのスキルセット（知識）をプロジェクトに追加します。これにより、AIが「Remotion的に正しいコード」を書けるようになります。
npx skills add remotion-dev/skillsこれで準備は完了です。あとはターミナルから claude コマンドを起動し、対話形式で開発を進めていきます。
3. 実践：プロンプトによる動画実装
動画内で紹介されている3つの具体的な実装例を通して、このワークフローの威力を見ていきましょう。
Scene 1: スクリーンショットと動画の合成
SNSの投稿画像の上に、実際の動画をオーバーレイさせる演出です。Figmaなどでデザインを作る代わりに、以下のように指示します。
プロンプト例：
「Remotionのベストプラクティスに従い、新しいコンポジションを作成してください。この画像（パス）と同じサイズのコンポジションにし、その上に動画ファイルをオーバーレイしてください」
ここで重要なのは、Visual Controlの活用です。AIが一発で完璧な配置をするとは限りません。「画像のY座標を調整するためのVisual Controlを追加して」と指示することで、Remotionのプレビュー画面にスライダーが出現し、手動で微調整が可能になります✅
Scene 2: React Three Fiberによる3Dロゴ
次に、2DのSVGロゴを3D化し、グリッチエフェクトを加える高度な実装です。React Three Fiberを使用します。
ここで技術的な落とし穴があります。通常のエフェクトライブラリ（react-postprocessingなど）はランダム性を含むことが多く、そのままレンダリングするとフレームごとに結果が変わり、チラつき（Flickering）の原因になります⚠️
解決策：
AIに対して「処理を決定的（deterministic）にしてください」と指示します。これにより、ランダム関数ではなく useCurrentFrame() に依存した計算が行われるようになり、レンダリング結果が安定します。
Scene 3: 自動編集と字幕生成（Whisper.cpp）
最も驚くべきは、ローカルLLM環境の構築まで自動化できる点です。iPhoneで撮影した複数の動画クリップを渡し、「無音部分をカットして結合し、字幕を焼き付けて」と指示します。
Claude Codeは自律的に以下のタスクをこなします。
- Whisper.cpp（音声認識モデル）のソースコードをClone
- ローカルでコンパイルしてビルド
- 動画ごとの文字起こしを実行しJSON化
- Remotion上に字幕コンポーネントとして配置
人間が行うと数時間かかる環境構築と実装が、数行のプロンプトで完結するのは圧巻ですね🚀
4. 応用・注意点
プロフェッショナルな制作フローとして、Remotionで作った素材をAfter Effectsで仕上げたい場合もあるでしょう。
その際は、「透明背景の動画（Alpha Channel付き）としてエクスポートして」と指示します。RemotionはQuickTime (ProRes 4444) 形式での透明動画出力に対応しており、これをAfter Effectsに読み込めば、実写映像との合成もスムーズに行えます。
ライセンスについて：
Remotionは個人や3人以下の小規模チームでは無料ですが、それ以上の規模の企業利用にはライセンス契約が必要です。価格は月額$100（約15,000円〜）程度からとなっています。
5. まとめ
RemotionとClaude Codeの組み合わせは、単なる「動画生成AI」とは一線を画します。ブラックボックスな生成ではなく、「編集可能なコード」として出力されるため、エンジニアが細部までコントロールできる点が最大の強みです。
プロンプトで大枠を作り、Visual Controlやコードで微調整する。このハイブリッドな開発スタイルこそが、これからのクリエイティブの主流になっていくでしょう。ぜひ、あなたのプロジェクトでも試してみてください。
この記事の自動化に使われた技術と思考法は、
すべて以下のアカデミーでインストールできます。
