Remotionは、Reactを使ってプログラムで動画を作成できるオープンソースフレームワークです。Webアプリを作る感覚でMP4動画を生成でき、テキストや画像、アニメーションをコードで制御できます。
CSS、Canvas、SVG、WebGLなど標準的なWeb技術がそのまま使えるため、React開発者なら学習コストを抑えて動画制作を始められます。変数やAPIからデータを取得してパラメータを動的に変更できるので、同じテンプレートから大量の動画を量産するのに向いています。
34k+
GitHub Stars
400k
月間インストール
35+
テンプレート
700+
ドキュメントページ
Remotionの主な機能
動画制作からレンダリング、アプリへの組み込みまで、一通りの機能が揃っています。
⚛️ Reactコンポーネントで動画制作
動画の1シーンをReactコンポーネントとして定義。再利用性が高く、状態管理もReactの仕組みがそのまま使えます。
🎬 Remotion Studio
ブラウザ上で動画をプレビュー・編集できるエディタ。パラメータの変更やレンダリングもGUIで操作可能です。
📺 Remotion Player
動画プレイヤーコンポーネントを自分のアプリに埋め込み可能。動画編集UIを自作したい場合に便利です。
☁️ Remotion Lambda
AWS Lambda上でサーバーレスレンダリング。大量の動画を並列処理で高速に生成できます。
🎨 Web技術をフル活用
CSS、Canvas、SVG、WebGL、Three.jsなど。Webで表現できることはすべて動画にできます。
📝 豊富なテンプレート
Hello World、Next.js連携、字幕生成、音楽ビジュアライザーなど35種類以上のスターターテンプレートを用意。
活用例
📊 データビジュアライゼーション
APIからデータを取得して動的なグラフ動画を生成
🎵 音楽ビジュアライザー
波形やスペクトラム表示
📱 SNS動画の量産
TikTok/YouTube Shorts向け縦動画
💬 字幕付き動画
Whisperと連携した自動キャプション
Remotionの始め方
Node.js 16以上があれば、1コマンドでプロジェクトを作成できます。
Studioの「Render」ボタンを押すか、CLIでMP4ファイルを出力します。
Remotionの料金は3人以下なら無料
個人や小規模チームは無料で商用利用可能。4人以上のチームや動画自動生成サービスを構築する場合は有料ライセンスが必要です。
| プラン | 料金 | 対象 |
|---|---|---|
| Free License 個人向け | 無料 | 3人以下のチーム、商用利用OK |
| Company License (Creators) | $25/席/月 | 4人以上のチームで動画制作 |
| Company License (Automators) | $0.01/render （最低$100/月） |
動画生成ツール・SaaSを構築 |
| Enterprise | $500/月〜 | 専用サポート、カスタム条件 |
💡 どれを選ぶべき？
個人開発や3人以下のチームなら無料ライセンスで十分です。チームが大きくなったり、ユーザーが動画を生成するサービスを作る場合はCompany Licenseが必要になります。
Remotionの動作環境
一般的なJavaScript開発環境があれば動作します。
必須要件
対応出力形式
レンダリング環境
こんな人におすすめ
Reactに慣れた開発者で、動画制作を始めたい方や、プログラマブルに動画を量産したい方に向いています。Adobe Premiereのような動画編集ソフトを学ぶより、コードで動画を作る方が性に合う人には最適です。
⚠️ 知っておきたい注意点
動画編集ソフトのようなプリセットエフェクトは少なめです。アニメーションは基本的に自分でコードを書く必要があります。また、Reactの基礎知識がないと学習コストが高くなる可能性があります。
グーグル