Remotion：React で動画をプログラムから生成する

Wed, 27 May 2026 14:39:22 +0800

remotion-dev/remotion は、React で動画をプログラムから作成するためのフレームワークです。動画制作を従来のタイムラインツールから切り出し、コンポーネント、状態、データ、API、CSS、Canvas、SVG、WebGL、アルゴリズムで制御できるフロントエンドエンジニアリングの問題に変えます。

プロジェクト URL：remotion-dev/remotion

この種のツールは、現在の AI コーディングワークフローととても相性が良いです。agent が Web ページ、グラフ、データビューを生成できるなら、その延長で動画スクリプト、アニメーションコンポーネント、レンダリング可能な短編動画も生成できます。

Remotion は何を解決するのか

従来の動画ツールは手作業の編集に強い一方で、スケール、パラメータ化、自動化は得意ではありません。

たとえば次のようなタスクです。

ユーザーごとにパーソナライズされた年間振り返り動画を生成する
データベースに基づいて製品デモ動画を自動生成する
グラフ、コード片、解説字幕を組み合わせて技術系の短編動画にする
マーケティング素材、SNS 向け短編動画、講座クリップを一括生成する
CI/CD やバックエンドサービスでオンデマンドに動画をレンダリングする

従来の編集ソフトを使う場合、これらのタスクを完全に自動化するのは難しくなります。Remotion の考え方は、動画を React アプリとして書くことです。各フレームは、ある時点におけるコンポーネントとデータの結果になります。

なぜ React なのか

Remotion README に書かれている理由は明快です。React は Web 技術とコンポーネント化の能力を再利用できます。

これにより、次のものを使えます。

CSS でレイアウトとアニメーションを作る
SVG でベクターグラフィックを作る
Canvas と WebGL で複雑な描画を行う
JavaScript / TypeScript で変数、関数、API 呼び出し、数学、アルゴリズムを扱う
React コンポーネントで再利用、合成、高速な反復を行う

つまり、フロントエンド開発者はまったく未知の動画 DSL を一から学び直す必要がありません。既存の UI、グラフ、デザインシステム、データロジックの多くを、動画生成の場面へ移せます。

クイックスタート

Node.js がすでにインストールされている場合、README に示されている入口コマンドは次のとおりです。

`1`	`npx create-video@latest`

プロジェクトを作成した後は、通常 React コンポーネントで画面を記述し、Remotion にフレーム単位で動画をレンダリングさせます。

より詳しいドキュメントはこちらです。

ドキュメント：remotion.dev/docs
API Reference：remotion.dev/api

どのような場面に向いているか

Remotion は「動画コンテンツがデータまたはコードで駆動される」場面に最も向いています。

パーソナライズ動画

たとえば年間振り返り、ユーザー実績、注文サマリー、学習レポートなどです。ユーザーごとにデータは異なりますが、視覚構造は同じです。React コンポーネントとデータ駆動を組み合わせるほうが、手作業の編集より自然です。

技術デモ動画

動画の中にコード、グラフ、製品画面、手順アニメーション、説明テキストが含まれる場合、Remotion はそれらの要素を繰り返しレンダリングできるテンプレートとして整理するのに向いています。

データ動画とグラフアニメーション

データ可視化はもともとフロントエンドの得意分野です。Remotion を使うと、グラフを Web ページ上に表示するだけでなく、タイムラインに沿って動画へ組み込めます。

AI 生成動画ワークフロー

AI agent はまずスクリプトと素材構造を生成し、次に Remotion コンポーネントを生成し、最後に動画をレンダリングできます。これはモデルに最終動画を直接生成させるより制御しやすい方法です。中間成果物がコードなので、確認、修正、バージョン管理、再利用ができます。

AI コーディングツールにとっての意味

Remotion は Codex、Claude Code、Cursor、Gemini CLI のような AI コーディングツールにとって特に面白い存在です。

理由は、動画生成が開発タスクへ分解されるからです。

React コンポーネントを生成する。
スタイルとレイアウトを調整する。
データを接続する。
画面をプレビューする。
フィードバックに基づいて修正する。
レンダリングして出力する。

この流れは agent に非常に向いています。各ステップにファイル、コード、プレビュー、明確なフィードバックがあります。「動画ファイルを直接生成する」場合と比べて、コード化された動画はレビューと反復がしやすくなります。

さらにブラウザーのサイドバー、スクリーンショット確認、自動レンダリング、コメントによるフィードバックと組み合わせれば、Remotion は AI ワークフローにおける動画成果物レイヤーになり得ます。

使う前にライセンスを確認する

Remotion README は、Remotion には特殊なライセンスがあり、一部の会社利用シナリオでは company license が必要になると明記しています。

そのため、単なる MIT の小さなツールとして扱うべきではありません。個人プロジェクト、オープンソースプロジェクト、商用プロジェクト、企業内ツールでは、ライセンス要件が異なる可能性があります。会社の本番用途で正式に使う前に、LICENSE ページと公式のライセンス説明を確認する必要があります。

これは特に、Remotion を自動コンテンツ生成、マーケティング素材生成、企業内の動画パイプラインへ組み込む場合に重要です。

私の見方

Remotion の価値は「React で動画を作る」ことだけではありません。動画を、プログラム可能で、再利用可能で、自動化可能な成果物に変えることです。

一般的なフロントエンドチームにとっては、データ駆動の動画テンプレートに向いています。AI ツールにとっては、安定した出力先に近い存在です。モデルはブラックボックスの動画を一度に生成する必要がなく、読みやすく、変更でき、レンダリング可能な React コードを生成できます。

コンテンツを一括生成したい、パーソナライズしたい、データに基づいて更新したい、あるいは agent に視覚的な細部を何度も調整させたいなら、Remotion はツールボックスに入れる価値があります。これは従来の編集ソフトの代替品ではなく、動画制作をソフトウェアエンジニアリングの流れへ接続する方法です。

Remotion on KnightLiブログ