Programmatic video

Remotion

Reactで動画をつくる — Webページ用に書くのと同じ種類のコンポーネントを、フレーム単位でMP4へ書き出す

remotion-dev/remotionTypeScript57,096 as of 2026-08-23
By Jake Luo · Published 2026年8月23日

RemotionはReactで動画をつくるためのフレームワークです。コンポーネントを書くと、それを一フレームずつMP4へレンダリングします。2026年8月時点でGitHubスターは57,096、リリースはほぼ毎週出ています。創業者にとっての価値は芸術性ではなく、コードで定義された動画はデータを差し替えて何百回でも再レンダリングできる点にあります。広告のバリエーション、定期フォーマット、パーソナライズされたクリップが必要としているのはまさにそれです。ライセンスは個人と従業員三人以下の営利企業には無償で、それを超える規模では有償の企業ライセンスが必要になります。

Remotionとは何か

Remotion(github.com/remotion-dev/remotion)は動画をReactコンポーネントとして扱います。Webページで使うのと同じJSX、CSS、画像で一枚のフレームを組み、いま何フレーム目かをフレームワークに尋ね、フレームごとに違うものを返すことでアニメーションさせます。制作中はスタジオがタイムラインとライブプレビューを提供し、プレーヤーコンポーネントは結果を自分のアプリへ埋め込み、レンダラーはコンポジションを動画ファイルに変換します。ローカルのNode、AWS Lambda、Vercel、あるいはブラウザ上で実行できます。

READMEは現在このプロジェクトを「エージェント時代の動画ツール」と位置づけ、三つの入り口を示しています。コーディングエージェントにコンポジションを書かせるエージェント的な方法、エディタ上で要素を動かす対話的な方法、そしてコンポジションをデータに接続するプログラム的な方法です。三つのどれでもReactのコードが正となり、だからこそ三つ目が成立します。

維持のペースは偽装しにくいものです。v4.0.515は2026年8月21日にリリースされ、その前週にもさらに三本出ています。背後のコミットは体裁を整えるだけの作業ではなく通常のプロダクト開発です。スタジオのツールバーに定規とガイドを追加、5.1chオーディオのダウンミックス修正、パッケージのインストールを設定タブへ移動といった具合です。最終プッシュ日ではなくコミットメッセージを読むことが、保守されているプロジェクトと放置されたプロジェクトを見分ける安上がりな方法で、このリポジトリははっきり合格します。

創業者のグロース基盤のどこに収まるか

多くの創業者が抱えているのは動画の問題ではなく、動画のバリエーションの問題です。最初の一本は一日仕事で、その時間はなんとか捻出できます。見出しも価格も言語も違う十本目こそが、静かに永遠につくられないものです。コードはまさにそこが不合理なほど得意で、この道具の居場所もそこにあります。

  • 広告とサムネイルのバリエーション ひとつのコンポジション、見出しのリスト、一行につき一レンダリング。クリエイティブの検証は日程調整の問題ではなくなり、翌週も回せるループになります。
  • 定期フォーマット 週次のアップデート動画や月次の指標まとめは、毎回まったく同じ見た目である必要があります。人間が苦手でテンプレートが得意な要件です。
  • パーソナライズとデータ駆動の動画 同じ三十秒に、顧客ごとの数字が入っているもの。動画が誰かの手作業のファイルではなくデータの関数であるときにだけ実現できます。
  • すでに生成しているものに動きを与える 画像をすでにプログラムで生成しているなら、これは同じ発想の動く版です。SatoriはJSXを静止画にレンダリングし、Remotionはそれをフレーム列にレンダリングします。

できないのは素材を発明することです。人を喋らせたりドローンショットを出現させたりするモデルはここには入っておらず、すべてのピクセルはあなたが組んだ何かから来ます。同じ結果が二度必要なときには利点で、欲しかったのが雰囲気だったときには限界です。動画が何を語るべきかについても意見を持ちません。そこは依然として難しい部分で、いまのところどんな道具も肩代わりしてくれていない部分です。

ライセンスと、それが引く線

Remotionは二段階のライセンスを持つソース公開型のプロジェクトで、GitHubのバッジ表示はNOASSERTIONです。これはライセンス名ではなく、単にファイルが標準的なライセンスのいずれでもないという注記にすぎません。代わりにリポジトリのLICENSE.mdを読んでください。条項は短く、誰が支払うべきかについて珍しいほど明快です。

Remotionが無償になる対象
  • 個人、非営利団体、非営利組織:商用動画を含めて無償。
  • 従業員三人以下の営利企業:無償。
  • 評価中でまだ商用利用していない場合:無償。
  • その規模を超える営利組織:有償の企業ライセンスが必要。
  • どの区分であっても、Remotion自体の派生物を再パッケージして販売することはできない。

基準が売上ではなく従業員数である点が重要です。これは「もしかしたら一生満たさない条件」ではなく「将来の日付」になります。四人目を採用する頃に動画が事業の柱になっているなら、それは前もって見えている予算項目です。線を越えた日ではなく、導入した日に知っておくほうがずっといい種類の情報です。

創業者に動画を届けようとして学んだこと

報告できるのは自分たちの経験だけです。AgentCeres — agentceres.com のAIグロースオフィサー — は求められれば顧客のために動画を生成できます。そして動画は、顧客から最もよく求められるもののひとつでした。驚いたことが二つあり、どちらもレンダリングではありませんでした。

ひとつ目は、設計上の制約はレンダリング時間ではなくクリップ単価だということです。生成動画は数秒で、安いほうの設定でおよそ一ドル、高品質の設定ではその数倍かかります。つまり「バリエーションをいくつか作って」は裏で走るジョブではなく実際の請求です。ふたつ目は、壊れるのは配信だということです。私たちはクリップが正しく生成され、完了し、それを依頼した本人には一度も表示されないバージョンを出してしまいました。その人が見たのは空の返信です。誰にも届かない動画は、失敗した動画と区別がつきません。修正すべき場所は生成側ではなく配信経路でした。

これがこのスペクトルの決定論的な側を選ぶ理由です。自分で定義したレンダリングは毎回ほぼ同じ費用で、毎回同じ結果を返し、配信は退屈です。繰り返される動画業務にはまさにその取引が欲しい。そもそも創業者が動画をつくるべきかどうかは別の問いで、それについてはこちらに書きました。スタートアップの宣伝に動画をつくるべきか。AgentCeresはその決断の先にある実行レイヤーです。AIスペシャリストのチームが下書きから実作業までを担い、外に出るものはすべて人間が承認します。

FAQ

Remotionを使うにはReactの知識が必要ですか?
現実的には必要です。少なくともコンポーネント、props、stateに不自由しない程度のReactは要ります。その上に乗る動画側の概念は少なく、コンポジションにはフレームレートと尺があり、いま何フレーム目かを尋ね、フレームごとに違うマークアップを返すだけです。Web開発の経験があれば午後のうちに掴めます。Reactを書いたことがない人は最初の一日を動画ではなくReactの学習に使うことになるので、タイムライン型のエディタと比べる前に知っておく価値があります。
RemotionとAI動画生成、どちらを選ぶべきですか?
この二つは問題の逆側を解いています。生成モデルは手元になかった映像を発明し、実行のたびに違う結果を返すので、一度きりの雰囲気重視の作品に向きます。Remotionは指定したとおりのものを、何度でも同一に描き出すので、テンプレート的なものすべてに向きます。バリエーション、定期フォーマット、データ駆動のクリップです。両方を使うチームはたいてい素材の生成や撮影は生成側に任せ、繰り返されるレイヤー — タイトル、字幕、レイアウト、版管理 — をコードで扱います。
動画は実際にはどこでレンダリングされるのですか?
指定した場所です。手軽なのは自分のマシンかサーバー上のNodeプロセスで、数本のレンダリングならこれで十分です。量が必要になると、プロジェクトはAWS LambdaとVercelでのレンダリング、さらにブラウザ内で実行するクライアントサイドの経路を文書化しています。トレードオフはいつもどおりで、ローカルは無料で遅くマシンを一台占有し、分散レンダリングはレンダリングごとに費用がかかる代わりに、百本のバリエーションを午後仕事ではなく並列ジョブに変えます。
Related projects
OpenCutウェブ・デスクトップ・モバイル向けの無料・オープンソース動画エディタ — CapCut の代替SatoriJSX と CSS を SVG に変換する Vercel のオープンソースライブラリ——動的な Open Graph 画像を支えるエンジンBrightBean Studioオープンソースでセルフホスト可能なソーシャルメディア管理——ひとつのダッシュボードから10以上のプラットフォームへのスケジュール設定・承認・公開ができるApp Store ScreenshotsApp Store と Google Play のマーケティング用スクリーンショットのために Next.js エディタを一から構築する、オープンソースの AI エージェントスキル —デバイスフレーム、ロケール別セット、ワンクリックでストア提出用にエクスポートできるバンドル

You built it. Now grow it.

AgentCeres is a managed AI marketing team — specialists draft the SEO, social, and outreach that fill your links, you approve what ships. 14-day free trial, from $39/month.

Start free trialMore projects