Claude Code + Remotion で動画を自動生成｜設定手順とコード例
プログラマーが動画制作に費やす時間は膨大だ。スライド作り、テキストアニメーション、製品デモビデオ——これらを After Effects や Canva で手作業するのは非効率に感じていた人も多いだろう。2026年初頭、Claude Code と Remotion の組み合わせが注目を集めている。コードを書けば動画が生成され、バージョン管理もできる新しいワークフローだ。
目次 (11)
Remotion とは — React で動画を作るオープンソースフレームワーク
Remotion は React コンポーネントを使って動画を生成できるオープンソースフレームワークだ。通常の動画編集ツールがタイムライン UI を操作するのに対し、Remotion はコードで動画ロジックを記述する。
import { AbsoluteFill, interpolate, useCurrentFrame } from 'remotion';
export const MyScene = () => {
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 30], [0, 1], {
extrapolateLeft: 'clamp',
extrapolateRight: 'clamp',
});
return (
<AbsoluteFill style={{ backgroundColor: '#1e3a8a' }}>
<h1 style={{ color: 'white', opacity }}>Hello Remotion</h1>
</AbsoluteFill>
);
};
useCurrentFrame() がフレーム番号を返し、interpolate() で値を補間する。After Effects のキーフレームをコードで表現するイメージだ。週間 npm インストール数は 11 万 7,000 件を超えており、個人実験でなく本番採用が広まっている。
動画が「ビルドアーティファクト」として扱われるため、リリースサイクルと動画更新を連動させられる点が従来ツールにない最大の特徴だ。
Claude Code + Remotion で何が変わるか
2026年1月、Remotion チームが Claude Code 向けの「Agent Skills」を公式リリースした（参照: Remotion Claude Code Skill）。このスキルにより Claude は Remotion の API、アニメーションパターン、ベストプラクティスを事前に学習した状態で動作する。
ユーザーは日本語や英語で「30秒の製品デモを作って。ロゴイントロ、機能説明3枚、CTA アウトロ」と指示するだけでよい。Claude が要件を解釈し、<Sequence> や spring() を使った本番品質のコードを生成する。
従来の動画制作フローは「デザイナーへ依頼 → 修正ラウンド → 書き出し → 再修正」だった。Claude + Remotion では次のように変わる。
- テキストでプロンプトを書く
- Claude がコードを自動生成する
npx remotion renderで動画を書き出す- 変更点は git commit で管理する
この反復サイクルが数分で完結するため、マーケティングや教育コンテンツの制作スピードが劇的に上がる（参照: Claude + Remotion Unlocks UNLIMITED Cheap Video Generation）。
セットアップ手順｜インストールから起動まで
前提条件として Node.js 16 以上が必要だ。以下の手順で環境を構築する。
- Remotion プロジェクトを新規作成する：
npx create-video@latest
-
対話プロンプトで以下の項目を選択する：
- プロジェクト名：任意（例:
my-first-video） - テンプレート：
blank - TypeScript：
Yes - Agent Skills：
Yes（ここが重要）
- プロジェクト名：任意（例:
-
プロジェクトディレクトリに移動し、スキルをインストールする：
cd my-first-video
npx skills add remotion-dev/skills
ここで「Claude Code」を選択し、プロジェクトスコープでインストールを完了させる。
- Remotion Studio を起動する：
npm start
ブラウザで http://localhost:3000 が開き、リアルタイムプレビュー画面が表示される。この状態で Claude Code にプロンプトを渡す準備が整う。
プロンプトの書き方と基本操作
Remotion Studio を開いた状態で Claude Code に指示を出す。効果的なプロンプトのパターンをいくつか示す。
シンプルなテキストアニメーション：
「5秒のビデオを作成してください。『Welcome to 2026』というテキストがフェードイン、2秒保持し、左へスライドアウト。背景は濃い青（#1e3a8a）、テキストは白。」
Claude はフレーム計算、interpolate() の範囲指定、CSS スタイルまで含めた完全なコンポーネントを返す。
製品デモへの応用：
「製品 URL を渡します：[URL]。ブランドカラーを取得し、スクリーンショット3枚を差し込んで、30秒の製品デモ動画を生成してください。」
URL を渡すと Claude がブランド情報を解析し、ビジュアルに反映する。
プロンプトのコツは「具体性」だ。「かっこいい感じで」では Claude は解釈に迷う。「背景は #1e3a8a、フォントは Inter Bold 48px、フェードインは 30 フレーム」のように数値と仕様を明示するほど出力品質が安定する。
実用的なユースケース 5 選
-
教育解説動画：トピックを変えるだけで脚本・アニメーション・ナレーション構成を自動生成できる。ある教育プラットフォームでは 200 本の数学解説動画を自動生成した事例がある。
-
SaaS 製品デモ：リリースごとにコードを更新するだけでデモ動画が再生成される仕組みを構築できる。12 本の製品デモを 6 週間で量産した事例も報告されている。
-
レビュー・証言動画：Google ビジネスプロフィールリンクから実際の評価テキストを取得し、星アニメーション付き動画に変換できる。
-
SNS 向け短尺コンテンツ：縦型・横型・正方形の 3 フォーマットを同一コンポーネントから並行生成できる。マーケティングエージェンシーが 1 日 50 本以上のソーシャルメディア動画を生成した事例が存在する。
-
データ可視化動画：CSV を渡すと棒グラフや KPI ダッシュボードがアニメーション付きで動画化される。数値が変わるたびに動画を自動更新する仕組みも作りやすい。
動画のレンダリング方法
Studio から書き出す
- Remotion Studio でコンポジションを選択する
- 右上の「Render」ボタンをクリックする
- フォーマット（MP4 推奨）を選択して実行する
コマンドラインで書き出す
# 基本的なレンダリング
npx remotion render src/index.ts MyComposition out/video.mp4
# 高品質レンダリング（CRF を下げると高品質・大容量）
npx remotion render src/index.ts MyComposition out/video.mp4 --crf=15
# 4K 解像度で書き出す
npx remotion render src/index.ts MyComposition out/video.mp4 --scale=2
CI/CD に組み込めば、コードが変わるたびに動画を自動書き出しできる。GitHub Actions と組み合わせてリリース時に自動生成するパイプラインを構築しているチームも多い（参照: Claude Code Marketing Video Playbook）。
コスト比較｜After Effects や他のツールとの違い
従来の動画制作ツールと Remotion + Claude の費用感を比較する。
| 項目 | After Effects | Remotion + Claude |
|---|---|---|
| ライセンス費用 | $34.49/月（年 $414） | 個人無料 / 企業 $1,200/年 |
| 学習コスト | 40〜80時間 | Node.js 基礎知識のみ |
| 動画の更新 | タイムラインを手動修正 | コードを修正して再レンダリング |
| バージョン管理 | 独自形式で困難 | git で完全管理 |
| 自動化 | 限定的 | CI/CD と完全統合 |
小規模チームが年間 75,000 ドル以上のコスト削減を達成したケースも報告されており、特にコンテンツ量が多いプロジェクトほど効果は大きい（参照: Claude Code Video with Remotion Guide）。
ライセンスと商用利用の注意点
Remotion は個人・オープンソースプロジェクトには無料で使える。ただし、4名以上のチームや商用製品への組み込みには企業ライセンス（$1,200/年）が必要だ。フリーランスや個人の副業用途は無料の範囲に含まれる場合が多いが、最新条件は必ず公式ライセンスページで確認すること。
Claude 側はサブスクリプション（Claude Pro など）があれば動作する。従量課金の API は不要だ。
まとめ
Claude Code + Remotion は動画制作をコードの世界に引き込む組み合わせだ。セットアップは npx create-video@latest と npx skills add remotion-dev/skills の 2 コマンドで完了し、あとはテキストで指示するだけで動画コードが生成される。バージョン管理・自動化・コスト効率のいずれの観点でも従来ツールを上回る。動画制作をコードの一部として扱いたいエンジニアやコンテンツチームには、すぐに試せる選択肢だ。
