Remotionは、Reactコンポーネントとして動画を記述し、MP4などの本物の動画ファイルとして書き出せるフレームワーク。タイムラインをマウスでドラッグするのではなく、「フレーム番号 → 何を描くか」をJSXで定義するという発想で動画制作を一変させた。
同じテンプレートに 外部データ（API・JSON・CSV）を流し込んで 動画を量産できるのが最大の強み。月140万DL・GitHubスター44,000・採用企業はGitHub / SoundCloud / Wistia / Musixmatchなど。2026年1月にAnthropic公式の Claude Code連携（Agent Skill）がリリースされ、「自然言語 → 動画コード生成」のワークフローが一気に主流化した。
| サービス名 | Remotion |
|---|---|
| 開発 | Remotion GmbH（Jonny Burger 創業） |
| カテゴリ | プログラマティック動画フレームワーク（OSS） |
| URL | remotion.dev |
| 使用技術 | React + TypeScript + FFmpeg + Chromium |
| 出力フォーマット | MP4（H.264/H.265）, WebM(VP8/VP9), ProRes, GIF, PNG連番, 静止画(PNG/JPEG/PDF) |
| 動作環境 | ローカル（Mac/Win/Linux）, Node.js, AWS Lambda, VPS |
| 採用企業 | GitHub, SoundCloud, Wistia, Musixmatch, ほか |
動画ファイル＝Gitで管理されるコードの出力。テキスト変更・色変更・データ差し替えは git diff として可視化され、レビュー・履歴管理・CI/CD自動化と完全に統合できる。「動画版のWebpack」と評される所以。
同じ <Composition> に inputProps でJSONを流すだけで、名前・データ・画像・音声を差し替えた数千本の動画を生成できる。Lambdaで並列レンダリングすれば1動画あたり数円〜数十円で済む。
HTML/CSS/SVG/Canvas/WebGL/Three.js/Tailwind/Framer Motion 全部使える。フロントエンド資産がそのまま動画資産になる。AIで生成したコードがそのまま動画になる。
2026年1月に公開されたAgent Skillにより、「30秒のオープニングを作って」と書くだけでClaudeがフレーム計算（30秒×60fps=1800f）とinterpolate付きReactコンポーネントを生成。Remotion Studioで即プレビュー → 微調整 → 書き出しまで30〜45分。
| Composition | 動画の単位。id / durationInFrames / fps / width / height を指定する。1ファイルに複数定義できる。 |
|---|---|
| useCurrentFrame() | 現在のフレーム番号を返すフック。これがRemotionの心臓部。フレーム番号 → 表示内容を毎フレーム計算する。 |
| interpolate() | 「20〜60フレームで0→1に補間」のようなアニメーション計算ヘルパ。interpolate(frame, [20, 60], [0, 1]) でほぼ全部書ける。 |
| spring() | バネ物理運動の補間。UIアニメーションっぽい滑らかさを出すときに。 |
| Sequence | 「30〜90フレームの間だけこの要素を表示」のように、子要素のタイムライン上の出現範囲を制御する。 |
| AbsoluteFill | 画面いっぱいに敷くレイアウト用div。ほぼ全シーンで使う。 |
| Audio / Video / Img | 動画内に音・動画・画像を貼るための専用要素。タイムラインに同期してくれる。 |
| useVideoConfig() | 動画設定（fps・解像度・尺）を取り出すフック。 |
最小コード例（フェードインするタイトル）:
Node.js 18以降を入れておく（既にあれば飛ばしてOK）。
ターミナルで以下を叩くだけ。テンプレ選択画面が出るので最初はHello World推奨。
ブラウザで動画プレビュー＋スクラブ＋ホットリロードできる開発環境。
ブラウザで http://localhost:3000 が開く。コードを編集すると即時反映。
FFmpeg内蔵なので追加インストール不要。MP4が出力される。
Next.js / Vite / Create React App / React Router にも組み込める。
npx remotion render でローカルマシンが頑張る。無料・即座・GPU使える。RTX 4060 Tiクラスがあれば1080p 60秒の動画でも数分で吐ける。日々の制作と検証はこれでOK。
動画を 分割して数百のLambda関数で並列レンダリングするサーバーレス方式。1本数円〜数十円で済むのが衝撃。デフォルトで1リージョン1000並列。最大2時間のFHD動画まで対応。
inputProps を変えるだけで何種類でも生成可能Remotion Studioをサーバーにデプロイして、HTTP経由でレンダリング指示を出す方式。Lambdaを避けたい・社内ネットワーク完結にしたいときに使う。
inputProps 違いで 何千本でも生成、というワークフローが定石。
同じ枠デザインに テキスト・画像・名前を差し替えて大量生成。TikTok / Reels / YouTube Shortsの「テンプレ系チャンネル」運用に最適。
株価・スポーツ統計・売上データなどを 毎日自動で動画化。Sportsデータ → ハイライト動画化はすでにRemotion採用事例多数。
Musixmatchが本番採用。歌詞タイミングJSONから カラオケ字幕付き動画を完全自動生成。
ユーザーごとに名前・アイコン・購入履歴を埋め込んだ 1人1本の動画。年末まとめ動画・採用通知・サンクスメールに同梱。SaaSのリテンション施策で急増中。
GitHubリリースノートから 毎週自動で「今週のアップデート動画」を生成・配信。CI/CDに組み込める。
文字起こしAI（Whisperなど）の出力JSONをRemotionに食わせて、SNSでバズりやすい 動的キャプション動画を一発生成。
Anthropic公式のAgent Skillとして「Remotion Skill」が登場。Claude Codeに自然言語で指示するだけで、フレーム計算・interpolate・Sequence分割を含む完全なReactコンポーネントが生成される。
2026年1月20日にRemotion公式アカウントが投稿したデモ動画はX上で6M views超え。「動画制作はgit commit になった」とまで言われている。
「30秒のYouTubeオープニング作って。背景は黒、ロゴが下からフェードインしてキラッと光る。BGMはあとで差し込む」のように書くだけ。
imports / コンポーネント構造 / フレームタイミング（30秒×60fps＝1800f）/ アニメーション補間まで一括出力。
「もう少し速く」「色を緑に」と言うだけでClaudeが差分を当てる。3〜5回の調整で完成するケースが多い。
npx remotion render で1080p MP4。コンセプトから完成まで 30〜45分が目安。
従来のAI動画生成（Sora / Veo / Hailuoなど）は「ピクセルを生成する」のでハルシネーションが避けられなかった。Remotion + Claude Codeは 「コードを生成する」アプローチなので、出力は決定的・編集可能・差分管理可能。「人間が直したいときは普通のReactコードを書き換えればいい」という制御性は、量産現場では決定的なアドバンテージ。
| 項目 | Remotion | After Effects |
|---|---|---|
| UI | コードエディタ + Studio | タイムライン GUI |
| 学習コスト | React経験者なら即日 | 専門研修レベル |
| 動画の量産 | ◎ inputPropsで無限 | △ スクリプトで頑張る |
| Git / レビュー | ◎ 完全対応 | × バイナリ |
| API化 | ◎ Lambdaで容易 | △ 重量級 |
| 表現力（手付け） | ○ Web技術全般 | ◎ 業界標準 |
| 料金 | 個人〜3人会社まで無料 | サブスク必須 |
| 得意分野 | 量産・データドリブン・AI連携 | シネマティック・VFX・手付けモーション |
| 区分 | 料金 | 使える条件 |
|---|---|---|
| 個人 / フリーランス | 無料 | 商用利用OK。動画売っても良い。 |
| 3人以下の会社 | 無料 | 商用利用OK。shobobo はここに該当。 |
| 4人以上の営利企業 | 1シート $25/月〜（Company License） | 開発者シート単位で課金。閲覧者はカウントなし。 |
| Remotion Lambda（AWS） | AWS従量課金のみ | Remotion本体への追加課金なし。1動画あたり数円〜数十円目安。 |
株式会社shobobo（社員3名以下）は完全に無料利用枠の中。商用YouTubeチャンネルの量産にも、メディア掲載動画の生成にも追加コストなしで使える。Lambdaを使う場合のみAWS料金がかかる。
「タイトル＋画像＋ナレーション字幕」型の動画は、Remotionで1テンプレ作れば台本JSONを差し替えるだけで毎日量産できる。台本生成（kaji/gera/shime）→ Remotion → MP4 のパイプライン化が現実的。
Hailuo / Seedanceで作ったAI動画素材を Remotionに流し込んで字幕・テロップ・キャラクター帯を自動合成。手動編集ゼロでパッケージング完了。
すでに毎日HTMLで吐いているAI News Daily（51日分蓄積）を、同じJSONからRemotionで30秒動画化すればYouTube Shorts/TikTok向けに自動配信できる。コンテンツの2次利用が完全自動化。
議事録HTMLから 「今週の意思決定3行まとめ」動画を自動生成して社内配信。リモート組織のキャッチアップを動画でこなす実験ができる。
1. npx create-video@latest でくるいどり用のテンプレを1本試作する
2. Claude Code Agent Skill（Remotion）を入れて、自然言語で動画生成できる体制を作る
3. 既存の台本制作スキル（daihon/tougou）の出力 → Remotion入力 のJSON契約を決める
4. 量産フェーズに入ったらLambdaにデプロイして並列レンダリング化