Remotionとは——Reactで映像を作る
Remotionは、ReactとTypeScriptで映像を制作するオープンソースフレームワークだ。通常のReactコンポーネントを書くように、フレーム単位でアニメーションや遷移を定義し、最終的にMP4やWebMとして書き出す。
Claude Codeとの連携は、以下のコマンドひとつで完了する。
npx skills add remotion-dev/skills
これだけで、Claude Codeに「50秒の紹介動画を作って」と指示するだけで映像が生成される環境が整う。
実践事例——どんな動画が作れるのか
Remotionスキルで実際に制作されている動画の種類を紹介する。
| 用途 | 内容 | 所要時間 |
|---|---|---|
| ブログ紹介動画 | 記事の要約を50秒の動画化 | 5〜10分 |
| EC商品動画 | CSVから1,000本の商品紹介動画を一括生成 | 数時間（自動） |
| 教育コンテンツ | アニメーション付きの解説レッスン | 15〜30分 |
| プロダクトデモ | UIの操作チュートリアル | 10〜20分 |
| SNS向け短尺動画 | リール/ショート用の15秒動画 | 3〜5分 |
EC商品動画の一括生成
最もインパクトがある活用事例のひとつが、EC商品動画の一括生成だ。CSVファイルに商品名・価格・画像URLを記述し、Claude Codeに渡すだけで、統一されたテンプレートで全商品の動画が生成される。
「products.csvを読み込んで、各商品の15秒紹介動画を作って。
テンプレート: 商品画像フェードイン → 商品名テキスト → 価格表示 → CTAボタン
BGM: 明るいコーポレート系
出力: output/ ディレクトリにMP4で保存」
Remotion公式（@Remotion）も、Claude Code向けAgent Skillsのリリースを発表している。
Remotionの公式ドキュメントでも、Claude Code連携の手順が詳しく解説されている。
Prompting videos with coding agents | Remotion | Make videos programmatically
remotion.dev
音声合成との組み合わせ
ElevenLabs等の音声合成APIと組み合わせることで、ナレーション付きの動画も自動生成できる。
1. Claude Codeでスクリプトを生成
2. ElevenLabs APIでナレーション音声を生成
3. Remotionで映像 + 音声を合成
4. MP4として書き出し
FFmpegとの連携
Claude Codeはターミナルでコマンドを実行できるため、FFmpegを直接操作することも可能だ。
- 動画のトリミング・結合
- 解像度変換（縦動画→横動画）
- 字幕ファイル（SRT）の焼き付け
- プラットフォーム別の最適化（YouTube、Instagram、TikTok）
Buttercut——既存映像の編集
撮影済みの映像を編集したい場合は、Buttercutプロジェクトが注目に値する。Claude Codeから映像の分析・粗編集を行い、Final Cut ProやPremiere Proのプロジェクトファイルとしてエクスポートできる。
動画制作ワークフロー
業務で動画制作を回す場合の推奨ワークフローをまとめる。
| ステップ | 作業内容 | ツール |
|---|---|---|
| 1 | 企画・構成を決定 | Plan Mode |
| 2 | スクリプトを生成 | Claude Code |
| 3 | 映像コンポーネントを生成 | Remotion Skills |
| 4 | ナレーションを生成（任意） | ElevenLabs API |
| 5 | プレビューで確認 | Remotion Preview |
| 6 | MP4として書き出し | Remotion Render |
| 7 | プラットフォーム別に最適化 | FFmpeg |
映像制作の民主化は、テキストの世界で起きたことと同じ構造だ。かつてはデザイナーやエンジニアしか作れなかったWebサイトが、今では誰でも作れるようになった。動画も同じ道を辿ろうとしている。
次にあなたが伝えたいメッセージを、動画にしてみないか。
始める前に知っておくべきこと
Claude Codeで動画制作を始める前に、いくつか知っておくべきポイントがある。
| 項目 | 内容 |
|---|---|
| 必要なスキル | TypeScript/React の基礎知識があれば十分 |
| 初期セットアップ | Remotionのインストール（約5分）+ Claude Code |
| 制作時間の目安 | シンプルな1分動画で2〜4時間（初回） |
| コスト | Claude APIの利用料のみ（Remotionはオープンソース） |
| 出力形式 | MP4、WebM、GIF（フレームレート・解像度は自由） |
最初に作るべきは「30秒の自己紹介動画」だ。テキストアニメーション、背景色の変化、簡単なトランジションを組み合わせるだけで、クオリティの高い動画が生成できる。ここで基本的なワークフローを掴めば、あとは応用するだけだ。動画制作の民主化は、コーディングの民主化と同じスピードで進んでいる。
参考文献
- Prompting videos with Claude Code — Remotion公式
- Buttercut: Edit Video with Claude Code — GitHub
- Claude Code Video Toolkit — Digital Samba
- How to Create Professional Videos with Claude Code — Randy Ellis
スキル蓄積の順番を意識する
スキルを並行して身につけるとき、何を先に深めるかで到達点が変わる。
基礎を土台に据え、応用で幅を広げ、実務で磨く。
この順番を守ると、遠回りに見えて結果的に最短距離になる。
流行のキーワードに飛びつく学習は、短期の満足感を得られるが、中長期の資産として残りにくい。
あなたの学びの計画は、5年後に振り返って胸を張れる構成になっているだろうか。
よくある質問（FAQ）
Q. Remotionとは何ですか？
ReactとTypeScriptで映像を制作するオープンソースフレームワークです。
Reactコンポーネントを書く要領でフレーム単位のアニメーションや遷移を定義できます。
最終的にMP4やWebMとして書き出し、通常の動画ファイルとして利用できます。
Q. セットアップに必要なスキルは？
TypeScriptとReactの基礎知識があれば十分です。
初期セットアップはRemotionのインストールとClaude Codeの準備で約5分で完了します。
コストはClaude APIの利用料のみで、Remotion自体はオープンソースです。
Q. どんな動画制作に向いていますか？
ブログ紹介動画、EC商品動画、教育コンテンツ、プロダクトデモ、SNS短尺動画などに向いています。
CSVから1,000本の商品動画を一括生成するような量産型の案件で特に効果を発揮します。
15秒から1分程度の定型的な動画で、真価が最も出やすい領域です。
Q. 既存の撮影済み映像も編集できますか？
Buttercutプロジェクトを使えば、撮影済み映像の分析や粗編集が可能です。
Final Cut ProやPremiere Proのプロジェクトファイルとしてエクスポートできます。
FFmpegとの連携で、トリミング、結合、解像度変換、字幕焼き付けも自動化できます。
