【Remotion】Agent Skillsで動画生成が革命！Claude Codeでプロンプトから動画を作る方法
- Reactで動画をプログラマティックに作成できるオープンソースフレームワーク
- 新機能Agent SkillsでClaude Codeからプロンプトだけで動画生成が可能に
- 個人・3人以下の企業は無料で商用利用可能、月間40万インストールの実績
2026年1月20日、Remotion公式XでAgent Skillsという新機能が発表されました。
注目すべきは、Claude Codeを使ってプロンプトだけで動画を作成できるようになった点です。「npx skills add remotion-dev/skills」の1コマンドで導入でき、コーディングせずに動画生成が可能になります。
動画制作を自動化したい方や生成AIを使って効率的にコンテンツを作りたい方にとって、Remotionは有力な選択肢となるでしょう。この記事では、Remotionの基本からAgent Skillsの使い方までくわしく解説します。
＼生成AIを活用して業務プロセスを自動化／
Remotionの概要
RemotionはReactを使って動画をプログラマティックに作成するオープンソースフレームワークです。スイス・チューリッヒのRemotion AGが開発しており、「Make videos programmatically」というキャッチフレーズの通り、コードで動画を定義・生成できます。
これまでの動画制作はAfter EffectsやPremiere Proといった編集ソフトでの手作業が中心でした。しかし、Remotionは、Webエンジニアが慣れ親しんだReactコンポーネントで動画を構築できるため、パラメータ化された動画の大量生成やAPIとの連携が簡単にできるようになったのです。
Remotionの主な仕様は以下の通りです。
| 項目 | 内容 |
|---|---|
| 開発元 | Remotion AG（スイス・チューリッヒ） |
| 最新バージョン | v4.0.408（2026年1月22日時点） |
| GitHub Stars | 26.1k |
| NPMダウンロード | 月間40万インストール |
| ライセンス | 個人・3人以下企業は無料（Free License） |
| 対応出力形式 | MP4、WebM、GIF、PNG、PDF |
GitHubやSoundCloudなど大手企業でも採用されており、5,000人以上のDiscordメンバーと296人のコントリビューターが参加するコミュニティが形成されています。
なお、動画生成AIは日々進化しており、リアルタイム編集が可能な「PixVerse R1」も登場しています。くわしく知りたい方は、下記の記事もあわせてご覧ください。
RemotionにAgent Skillsが追加！
2026年1月20日、Remotion公式XでAgent Skillsの発表がありました。Claude CodeなどのAIエージェントを使って、プロンプトだけで動画を作成できる画期的な機能です。
発表されたポストは投稿後1日で600万件の表示、1.1万件のいいね、2万件のブックマークを記録し、大きな反響を呼んでいます。
Agent Skillsとは
Agent Skillsは、AIエージェントがRemotionプロジェクトを理解し、コードを自動生成するための機能です。
プロンプトで「青い背景に白いテキストでHello Worldと表示するアニメーションを作成して」と指示するだけで、対応するReactコンポーネントが生成されます。
導入は1コマンドで完了します。
$ npx skills add remotion-dev/skillsこれにより、プロジェクトにAIエージェント用のファイルが追加され、Claude Codeがプロジェクト構造を理解できるようになります。
対応AIエージェント
2026年1月22日時点では、Claude Codeとの連携が公式にサポートされています。リポジトリには.claude/ディレクトリやCLAUDE.mdが存在し、Claude Codeとの親和性が高い設計となっています。
また、.cursor/ディレクトリも用意されており、Cursorでの利用も想定されています。今後のアップデートで対応エージェントが拡大する可能性があるため、公式リポジトリの動向をチェックしておきましょう。
Remotionの仕組み
RemotionはReactコンポーネントを動画のフレームとしてレンダリングし、FFmpegで合成するアーキテクチャを採用しています。
基本アーキテクチャ
動画作成の流れは以下の通りです。
- Reactコンポーネント
- フレームごとのスクリーンショット
- FFmpeg
- 動画ファイル
Puppeteerやplaywrightでブラウザを自動操作し、各フレームをスクリーンショットとして取得します。取得した画像はRust製のFFmpegバイナリで動画に合成されます。
主要コンポーネント
| コンポーネント | 役割 |
|---|---|
| Composition | 動画の単位。幅・高さ・fps・総フレーム数を定義 |
| Sequence | タイムライン上の特定区間を定義。ネスト可能 |
| useCurrentFrame | 現在のフレーム番号を取得するHook |
| useVideoConfig | 動画設定（fps、幅、高さなど）を取得するHook |
CSSやCanvas、SVG、WebGLなどすべてのWeb技術を活用できるため、Webエンジニアの既存スキルをそのまま動画制作に応用できます。
レンダリングオプション
Remotionは複数のレンダリング環境に対応しており、用途に応じて選択できます。
- ローカルレンダリング
- npx remotion renderでローカルマシンで実行
- Remotion Lambda
- AWS Lambdaで分散レンダリング。長尺動画を並列処理
- Cloud Run
- Google Cloud Runでのレンダリング
- ブラウザレンダリング
- @remotion/web-rendererでサーバー不要のブラウザ完結型
大量の動画を短時間で生成したい場合はLambdaやCloud Runを活用し、開発時のプレビューなど軽い動作はローカルで行うといった使い分けが可能です。
Remotionの特徴
Remotionには、従来の動画編集ツールにはない独自の特徴があります。
特にコードベースの動画制作という点で、パラメータ化や自動化、バージョン管理といったソフトウェア開発のベストプラクティスを動画制作に持ち込める点が強みです。
Reactエコシステムの活用
最大の特徴は、Reactのエコシステムをそのまま動画制作に活用できる点です。
再利用可能なコンポーネント、npmパッケージ、即時プレビューなど、Webフロントエンド開発の知見が使えます。React Three Fiberを使った3D動画やLottieアニメーションの組み込みも可能です。
パラメータ化された動画生成
Remotionではpropsとして動画にデータを渡せるため、同じテンプレートから異なる内容の動画を生成できます。
たとえば、商品紹介動画の自動生成やデータ可視化動画など、1つのコードベースから大量の動画を出力する用途に最適です。GitHubにある見本動画もぜひご覧ください。
Agent Skillsによる自動生成
v4.0.408で追加されたAgent Skillsにより、AIエージェントがReactコンポーネントを自動生成できるようになりました。
コーディング経験がなくても、プロンプトで動画の内容を指示するだけでコードが生成されます。これまではプログラマ向けだったRemotionが、より幅広いユーザーのツールへと進化しています。
Remotionの安全性・制約
Remotionを利用する際は、いくつかの制約事項を把握しておく必要があります。
動作環境の要件
Remotionを実行するには、以下の環境が必要です。特にLinux環境では依存パッケージの追加インストールが必要な場合があるため、事前に確認しておきましょう。
| 項目 | 要件 |
|---|---|
| Node.js | 16以上 |
| Bun | 1.0.3以上（Bunを使用する場合） |
| Linux | libc 2.35以上。追加パッケージのインストールが必要 |
| 非対応 | Alpine Linux、nixOS |
Linuxディストリビューションでは追加の依存パッケージをインストールする必要があるため、公式ドキュメントを確認してください。
ライセンス上の制約
Remotionは派生物の販売・再ライセンスが禁止されています。Remotionのコードを改変して「動画生成サービス」として販売することはできません。
ただし、Remotionを使って作成した動画自体の販売や商用利用は問題ありません。クライアント向けの動画制作や、自社サービスでの動画生成には制限なく利用できます。
レンダリングリソース
ローカルレンダリングでは、動画の長さと解像度に応じた処理時間とメモリが必要です。4K動画や長尺コンテンツの場合、相応のマシンスペックが求められます。
大量の動画を生成する場合は、Remotion Lambdaでの分散処理を検討してください。フレームごとに並列処理されるため、ローカルよりも大幅に高速化できます。
なお、テキストや簡単な指示だけで動画を迅速に制作できるWan 2.6もおすすめです。くわしく知りたい方は、下記の記事もあわせてご覧ください。
Remotionの料金
Remotionは二層ライセンスを採用しており、個人や小規模チームは無料で使用できます。
| ライセンス | 対象 | 料金 |
|---|---|---|
| Free License | 個人、3人以下の企業、非営利組織、評価目的 | 無料 |
| Company License | 4人以上の営利企業 | $100/月〜 |
| Enterprise License | 大規模企業向け | $500/月〜 |
Free License
個人や従業員3人以下の営利組織は、商用利用を含めて無料で利用できます。非営利組織や評価目的の場合も無料です。サポートはGitHub IssuesとDiscordで対応しています。
小規模なスタートアップや個人プロジェクトでRemotionを試したい場合、ライセンス費用の心配なく本番環境でも利用できます。
Company License
4人以上の営利企業は、月額$100からのCompany Licenseが必要です。料金は「Developer Seats（開発者数 × $25/月）」と「Video renders（月間レンダリング数 × $10/1,000回）」の合計で、最低$100/月からとなります。優先サポートと$250分のMuxクレジットが付属します。
Enterprise License
月額$500からのEnterprise Licenseでは、プライベートSlack/Discordチャンネル、月次コンサルティング、カスタム条件・価格設定、コンプライアンスフォーム対応などが含まれます。
Editor Starterテンプレートも付属しており、動画エディタSaaSを構築したい企業に最適です。大規模な動画生成プロジェクトでの導入に適しています。
Remotionのライセンス
Remotionはソースコードが公開されていますが、完全なオープンソース（MITやApache 2.0）ではありません。
| 項目 | 可否 |
|---|---|
| 動画の商用利用 | ◯ |
| ソフトウェアの改変・カスタマイズ | ◯ |
| バグ修正のコントリビューション | ◯ |
| 派生物の販売・再ライセンス | ✕ |
| 4人以上企業の無料利用 | ✕ |
重要な点として、Remotionを使って作成した動画自体の商用利用は無制限に可能です。制限されるのは、Remotionのコードを改変して派生ソフトウェアを販売・ライセンスする行為です。
Remotionの使い方
Remotionは複数の方法で実行できます。ここでは、プロジェクト作成から動画出力までの基本的な流れを紹介します。
プロジェクト作成
以下のコマンドで新規プロジェクトを作成します。Node.jsがインストールされていれば、追加のセットアップは不要です。
npx create-video@latestテンプレート選択画面が表示されるので、初めての場合は「Hello World」を選択してください。
プロジェクト作成時にAgent Skillsをインストールするか尋ねられるので、Claude Codeと連携する場合は「Yes」を選択します。Next.jsやReact Routerテンプレートも用意されており、既存のWebアプリへの組み込みも簡単にできます。
開発サーバー起動
作成したプロジェクトに移動し、開発サーバーを起動します。これによりRemotion Studioがブラウザで開き、動画のプレビューを確認できます。
# 初回のみinstallが必要
npm install
npm run devブラウザでRemotion Studioが開き、リアルタイムプレビューを確認しながら開発できます。Zodスキーマによるpropsの視覚的編集や、レンダーボタンによるGUIレンダリングも可能です。
動画のレンダリング
動画ファイルとして出力するには、以下のコマンドを実行します。Composition IDと出力パスを指定することで、MP4ファイルが生成されます。
npx remotion render src/index.ts MyVideo out/video.mp4オプションで品質を調整でき、WebMやGIFなど他形式への出力もサポートされています。これらによって、SNS向けの短尺動画からWebサイト埋め込み用のコンテンツまで柔軟に対応できます。
Agent Skillsの導入
既存プロジェクトにAgent Skillsを追加するには、以下を実行します。これにより、AIエージェント用のコンテキストファイルがプロジェクトに追加されます。
npx skills add remotion-dev/skillsこれでClaude Codeからプロジェクトを操作できるようになります。追加されるファイルにはプロジェクト構造や利用可能なAPIの情報が含まれており、AIエージェントが文脈を理解した上でコードを生成できます。
Remotionの活用シーン
Remotionのコードベースの動画制作とパラメータ化機能は、さまざまな業務シーンで活用できます。
特に、大量生成や自動化、API連携が求められる環境での導入が効果的です。
パーソナライズド動画
ユーザーごとにカスタマイズされた動画を大量生成する用途に最適です。
Remotionはユーザーデータを元に個別の動画を自動生成できます。ECサイトの商品紹介動画、不動産物件の紹介動画、採用候補者へのメッセージ動画など、1本1本手作りでは対応できない大規模なコンテンツ制作に威力を発揮します。
ソーシャルメディアコンテンツ
SNS向けの動画コンテンツを効率的に制作できます。
テンプレートを用意しておけば、テキストや画像を差し替えるだけで新しい動画が完成します。音楽ビジュアライゼーション、データ可視化、ニュースまとめ動画など、定期的に更新が必要なコンテンツの自動化に適しています。
動画エディタの構築
自社サービスに動画編集機能を組み込むなどの使い方にも対応しています。
Remotion Playerを使えば、Webアプリ上でユーザーが動画をカスタマイズし、完成品をダウンロードできる仕組みを構築できます。$500/月からのEnterprise LicenseにはEditor Starterテンプレートが付属しており、動画エディタSaaSの開発をスムーズに始められます。
なお、企業向けにも利用しやすいオープンソースの検索エージェントモデルMiroThinker 1.5の導入もおすすめです。くわしく知りたい方は、下記の記事もあわせてご覧ください。
Remotionを実際に使ってみた
実際にRemotionをインストールし、Agent Skillsを含めて動作を確認してみました。
プロジェクトセットアップ
npx create-video@latestでプロジェクトを作成したところ、難しい点はなくすぐにセットアップが完了しました。開発サーバーを起動するとRemotion Studioがブラウザで開きます。セットアップはこれだけです。
Agent Skillsの検証
npx skills add remotion-dev/skillsでAgent Skillsを導入し、Claude Codeから操作を試みました。「青い背景に白いテキストでカウントダウンするアニメーションを作成して」と指示したところ、対応するReactコンポーネントが自動生成されました。
生成されたコードはそのまま動作し、カウントダウンロジックも正しく実装されていました。
複雑なアニメーションではプロンプトの調整が必要な場面もありますが、シンプルな動画はコーディング不要でテキストのみで作成可能です。また、コードで動画がそのまま編集ができるため、今までの動画編集とはまったく違う体験でした。
まとめ
Remotionは、Reactで動画をプログラマティックに作成するフレームワークとして、月間40万インストールを誇るツールです。
追加されたAgent Skillsにより、Claude Codeを使ってプロンプトだけで動画を生成できるようになりました。個人や3人以下の企業は無料で商用利用可能であり、パーソナライズド動画の大量生成やSNSコンテンツの自動化など、幅広い用途に対応しています。
まずはローカルでインストールしてプロジェクトを作成し、Agent Skillsを導入してみてください。プロンプトから動画生成し、コードで編集ができる新しいワークフローを体験できます。
最後に
いかがだったでしょうか？
動画生成をどこまで自動化し、既存システムや業務フローにどう組み込むかで成果は大きく変わります。RemotionやAgent Skillsを活かした設計・内製化・スケール戦略を整理したい企業向けのサポートをご案内いたします。
株式会社WEELは、自社・業務特化の効果が出るAIプロダクト開発が強みです！
開発実績として、
・新規事業室での「リサーチ」「分析」「事業計画検討」を70％自動化するAIエージェント
・社内お問い合わせの1次回答を自動化するRAG型のチャットボット
・過去事例や最新情報を加味して、10秒で記事のたたき台を作成できるAIプロダクト
・お客様からのメール対応の工数を80％削減したAIメール
・サーバーやAI PCを活用したオンプレでの生成AI活用
・生徒の感情や学習状況を踏まえ、勉強をアシストするAIアシスタント
などの開発実績がございます。
生成AIを活用したプロダクト開発の支援内容は、以下のページでも詳しくご覧いただけます。
➡︎株式会社WEELのサービスを詳しく見る。
まずは、「無料相談」にてご相談を承っておりますので、ご興味がある方はぜひご連絡ください。
➡︎生成AIを使った業務効率化、生成AIツールの開発について相談をしてみる。
「生成AIを社内で活用したい」「生成AIの事業をやっていきたい」という方に向けて、生成AI社内セミナー・勉強会をさせていただいております。
セミナー内容や料金については、ご相談ください。
また、サービス紹介資料もご用意しておりますので、併せてご確認ください。
