【Remotion】コード不要で動画生成へ！Agent Skills × Claude Codeでプロンプトから動画が実現

2026年1月20日、Remotion公式XでAgent Skillsという新機能が発表されました。

注目すべきは、Claude Codeを使ってプロンプトだけで動画を作成できるようになった点です。「npx skills add remotion-dev/skills」の1コマンドで導入でき、コーディングせずに動画生成が可能になります。

動画制作を自動化したい方や生成AIを使って効率的にコンテンツを作りたい方にとって、Remotionは有力な選択肢となるでしょう。この記事では、Remotionの基本からAgent Skillsの使い方まで詳しく解説します。

Remotionの概要

RemotionはReactを使って動画をプログラマティックに作成するオープンソースフレームワークです。スイス・チューリッヒのRemotion AGが開発しており、「Make videos programmatically」というキャッチフレーズの通り、コードで動画を定義・生成できます。

これまでの動画制作はAfter EffectsやPremiere Proといった編集ソフトでの手作業が中心でした。しかし、Remotionは、Webエンジニアが慣れ親しんだReactコンポーネントで動画を構築できるため、パラメータ化された動画の大量生成やAPIとの連携が簡単にできるようになったのです。

Remotionの主な仕様は以下の通りです。

GitHubやSoundCloudなど大手企業でも採用されており、6,000人以上のDiscordメンバーと300人以上のコントリビューターが参加するコミュニティが形成されています。

なお、動画生成AIは日々進化しており、リアルタイム編集が可能な「PixVerse R1」も登場しています。くわしく知りたい方は、下記の記事もあわせてご覧ください。

あわせて読みたい

【PixVerse R1】初のリアルタイムワールドモデル！革命的な動画生成が可能に！ 押さえておきたいポイント 初のリアルタイムワールドモデルを掲げる動画生成AI 既存の動画生成AIとは違い、無限かつ連続的なコンテンツ生成が可能に インタラクティブな…

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での利用も想定されています。今後のアップデートで対応エージェントが拡大する可能性があるため、公式リポジトリの動向をチェックしておきましょう。

さらにClaude Codeの他にCodex、Cursorでの利用も公式ドキュメントには記載されています。Antigravityでの利用報告もありました。

Remotionの仕組み

RemotionはReactコンポーネントを動画のフレームとしてレンダリングし、FFmpegで合成するアーキテクチャを採用しています。

基本アーキテクチャ

動画作成の流れは以下の通りです。

• Reactコンポーネント
• フレームごとのスクリーンショット
• FFmpeg
• 動画ファイル

Puppeteerやplaywrightでブラウザを自動操作し、各フレームをスクリーンショットとして取得します。取得した画像はFFmpegバイナリで動画に合成されます。

主要コンポーネント

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は単一のツールではなく、用途別に使い分けられる複数のプロダクト群で構成されています。ここではそれぞれのRemotionのプロダクトについて解説をします。

プロダクト一覧は下記です。

Remotion Studio

Remotion Studioは、ブラウザ上で動画をリアルタイムプレビューしながら開発するための統合開発環境です。

npm start で起動し、タイムライン編集・Zodによるpropsの視覚的操作・GUIレンダリングが行えます。コードを保存するたびに即座に反映されるFast Refresh対応で、フレーム単位の確認作業に適しています。

本番出力ではなく、あくまで開発・確認の場として機能します。

Remotion Player

Remotion Playerは、Reactアプリケーションに動画を埋め込むためのコンポーネントです。

ブラウザの <video> タグに似たAPIで操作でき、フォーム入力やAPIデータと連動してリアルタイムに映像内容を変化させることができます。

サーバーサイドレンダリングAPIと組み合わせることで、最終的なMP4ファイルへの書き出しにも対応。インタラクティブな動画体験を構築したい場面での活用が主となります。

Remotion Lambda

Remotion Lambdaは、AWS Lambda上で分散レンダリングを実現するプロダクトです。

動画をフレーム単位で複数のLambda関数に分割して並列処理するため、80秒の動画を約15秒で書き出すなど圧倒的な速度を誇ります。最大200並列、1分あたり$0.01程度のコストで利用でき、レンダリング中のみ課金される従量制です。

Cloud Run

Cloud RunはGoogle Cloud Run上でのレンダリングに対応していますが、現在はAlphaステータスであり、公式ドキュメントには「新しいDockerイメージのビルドが毎回必要なため開発速度が遅く、現在は最低限の変更のみ行っている」と明記されています。

分散レンダリング・Webhook・Appleエモジ対応など、Lambdaが持つ多くの機能が未実装。将来的にはLambdaのコードベースに統合することも検討中とされており、現時点での本番利用は慎重な判断が求められます。

ブラウザレンダリング

ブラウザレンダリングは、Node.jsサーバーもAWS環境も不要で、ブラウザだけで動画を生成できる実験的機能です。

FFmpegの代わりにWebCodecs APIとMediabunnyで動画エンコードを行いますが、利用可能なHTML要素に制限があり、現在はexperimental alphaとして活発に開発中。

Chrome 94以上・Firefox 130以上・Safari 26以上が必要で、軽量なプロトタイプ用途や、サーバーレスのブラウザ内エディタ構築を目指す実験的プロジェクトに向いています。

Remotionの特徴

Remotionには、従来の動画編集ツールにはない独自の特徴があります。

特にコードベースの動画制作という点で、パラメータ化や自動化、バージョン管理といったソフトウェア開発のベストプラクティスを動画制作に持ち込める点が強みです。

Reactエコシステムの活用

最大の特徴は、Reactのエコシステムをそのまま動画制作に活用できる点です。

再利用可能なコンポーネント、npmパッケージ、即時プレビューなど、Webフロントエンド開発の知見が使えます。React Three Fiberを使った3D動画やLottieアニメーションの組み込みも可能です。

パラメータ化された動画生成

Remotionではpropsとして動画にデータを渡せるため、同じテンプレートから異なる内容の動画を生成できます。

たとえば、商品紹介動画の自動生成やデータ可視化動画など、1つのコードベースから大量の動画を出力する用途に最適です。GitHubにある見本動画もぜひご覧ください。

出力コーデックはH.264（デフォルト）のほか、H.265・VP8・VP9・ProRes・GIFに対応。ProResは後工程でFinal Cut ProやPremiere Proに取り込む際に便利な選択肢です。用途に応じてコーデックを選べるため、SNS向けの軽量MP4から編集工程に渡す高品質素材まで、一つのワークフローで対応できます。

Agent Skillsによる自動生成

v4.0.408で追加されたAgent Skillsにより、AIエージェントがReactコンポーネントを自動生成できるようになりました。コーディング経験がなくても、プロンプトで動画の内容を指示するだけでコードが生成されます。

以下に整理します。

これまではプログラマ向けだったRemotionが、より幅広いユーザーのツールへと進化しています。

Remotionと動画生成AIの違い

「プロンプトで動画が作れる」という点だけを見ると、RemotionとSoraやVeo、PixVerse R1は同じカテゴリに映るかもしれません。しかし両者は異なります。イメージとしては下記です。

まず動画生成AIは「推論」をします。

Wan 2.6のように動画生成AIはテキストや画像からAIが映像を生成するため、実写風・映画的な表現が得意です。ただし出力は確率的で、同じプロンプトを入力しても毎回微妙に異なる結果が返ってきます。

ブランドロゴの正確な配置やデータビジュアルのアニメーションといった「制御が必要な演出」は苦手領域です。

一方でRemotionは「定義」をします。 

ReactコードによってUIを組むのと同じ感覚で動画の構造を記述。同じコードを実行すれば、環境やタイミングを問わず100%同じ動画が再現される「決定論的な出力」が最大の特徴です。Remotionはテキストアニメーション、データ可視化、ブランド動画の量産といった用途に向いています。

両者は競合ではなく補完関係にあり、 動画生成AIで背景の実写素材を作り、その上にRemotionでロゴや字幕をコードで正確に重ねるといったワークフローが可能です。

Remotionの安全性・制約

Remotionを利用する際は、いくつかの制約事項を把握しておく必要があります。

動作環境の要件

Remotionを実行するには、以下の環境が必要です。特にLinux環境では依存パッケージの追加インストールが必要な場合があるため、事前に確認しておきましょう。

Linuxディストリビューションでは追加の依存パッケージをインストールする必要があるため、公式ドキュメントを確認してください。

Linuxディストリビューションでは、Chrome Headless Shellの動作にlibnss3・libdbus・libatk等の共有ライブラリが別途必要です。

Alpine Linuxはglibcに依存したRemotionのバイナリが動作しないため非対応、nixOSはRemotionが自前管理するChrome・FFmpegバイナリとimmutableなOS設計が競合するため非対応となっています。これらの環境での利用は現時点では公式にサポートされていません。

ライセンス上の制約

Remotionは個人・従業員3名以下の営利企業・非営利団体・評価目的であれば、商用利用を含めて無料で利用できます。これらに該当しない場合、すなわち従業員4名以上の営利企業はCompany Licenseの取得が必須です。

また、Remotionは派生物の販売・再ライセンスが禁止されています。Remotionのコードを改変して「動画生成サービス」として販売することはできません。ただし、Remotionを使って作成した動画自体の販売や商用利用は問題ありません。クライアント向けの動画制作や、自社サービスでの動画生成には制限なく利用できます。

レンダリングリソース

ローカルレンダリングでは、動画の長さと解像度に応じた処理時間とメモリが必要です。4K動画や長尺コンテンツの場合、相応のマシンスペックが求められます。

大量の動画を生成する場合は、Remotion Lambdaでの分散処理を検討してください。フレームごとに並列処理されるため、ローカルよりも大幅に高速化できます。

なお、テキストや簡単な指示だけで動画を迅速に制作できるWan 2.6もおすすめです。くわしく知りたい方は、下記の記事もあわせてご覧ください。

あわせて読みたい

動画制作は、もう“重労働”じゃない！テキストだけで物語を生む「Alibaba Wan 2.6」を徹底解説 押さえておきたいポイント Wan2.6はAlibaba発のAI動画生成モデル。テキスト・画像・音声から動画を自動生成できる 同じキャラクターを複数シーンで一貫して登場させる「…

Remotionの料金

Remotionは二層ライセンスを採用しており、個人や小規模チームは無料で使用できます。

Free License

個人や従業員3人以下の営利組織は、商用利用を含めて無料で利用できます。非営利組織や評価目的の場合も無料です。サポートはGitHub IssuesとDiscordで対応しています。

小規模なスタートアップや個人プロジェクトでRemotionを試したい場合、ライセンス費用の心配なく本番環境でも利用できます。

Company License

従業員4名以上の営利企業には、用途に応じた2つのプランが用意されています。

Remotion for Creatorsは自社・個人用の動画制作向けで$25/月/席、Remotion for Automatorsは動画生成ツールやサービスの構築向けで$0.01/レンダリング・最低$100/月です。

Enterprise License

月額$500からのEnterprise Licenseでは、プライベートSlack/Discordチャンネル、月次コンサルティング、カスタム条件・価格設定、コンプライアンスフォーム対応などが含まれます。Editor Starterテンプレートも付属しており、動画エディタSaaSを構築したい企業に最適です。大規模な動画生成プロジェクトでの導入に適しています。

月額$500からのEnterprise Licenseでは、月次コンサルティング、カスタム条件・価格設定などが含まれます。

なお、動画エディタSaaSの構築を加速するテンプレート「Editor Starter」は、単体での買い切り購入（$600） とEnterprise Licenseの特典としての取得の2通りで入手できます。どちらの場合も同じテンプレートを利用でき、フォークして自由にカスタマイズが可能です。

無料で使える条件

RemotionのFree Licenseが適用されるのは、下記表です。

これは公式ライセンスファイルに明記されており、個人開発者やスタートアップ初期フェーズであれば機能制限なく商用利用まで無償で行えます。

商用利用時の注意点

Remotionで作成した動画自体の商用利用は、Free License下でも無制限に可能です。

クライアント向け納品物や自社サービスへの組み込みは制限されません。制限されるのはあくまで「Remotionのコード自体を改変して派生ソフトウェアとして販売・再ライセンスする行為」に限られます。

Remotionのライセンス

Remotionはソースコードが公開されていますが、完全なオープンソース（MITやApache 2.0）ではありません。

重要な点として、Remotionを使って作成した動画自体の商用利用は無制限に可能です。制限されるのは、Remotionのコードを改変して派生ソフトウェアを販売・ライセンスする行為です。

ライセンスの詳細はこちらで確認できます。

Remotionの使い方

Remotionは複数の方法で実行できます。ここでは、プロジェクト作成から動画出力までの基本的な流れを紹介します。

プロジェクト作成

以下のコマンドで新規プロジェクトを作成します。Node.jsがインストールされていれば、追加のセットアップは不要です。

npx create-video@latest

テンプレート選択画面が表示されるので、初めての場合は「Hello World」を選択してください。

Claude CodeなどのAIエージェントと連携して動画を作る場合は「Blank」を選択しましょう。Blankは空のキャンバスのみのテンプレートで、余分なサンプルコードがないためAIがコードを生成しやすい構成になっています。

プロジェクト作成時に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など他形式への出力もサポートされています。

なお、コーデックは–codecフラグで指定でき、H.264・H.265・VP8・VP9・ProRes・GIFに対応しています。品質は–crf（値が低いほど高品質）、ファイルサイズ優先なら–video-bitrateで調整。出力ファイルの拡張子によってデフォルトコーデックが自動決定されるため、.mov を指定すればProRes、.webm を指定すればVP8が自動で選ばれます。

これらによって、SNS向けの短尺動画からWebサイト埋め込み用のコンテンツまで柔軟に対応可能です。

Agent Skillsの導入

既存プロジェクトにAgent Skillsを追加するには、以下を実行します。これにより、AIエージェント用のコンテキストファイルがプロジェクトに追加されます。

npx skills add remotion-dev/skills

これでClaude Codeからプロジェクトを操作できるようになります。追加されるファイルにはプロジェクト構造や利用可能なAPIの情報が含まれており、AIエージェントが文脈を理解した上でコードを生成できます。

Claude Codeで動画を作る方法

Claude Codeを使ってRemotionの動画を作るにはコマンドを入力していけばOKです。

まずはプロジェクトの作成です。

npx create-video@latest

続いてテンプレートの選択です。テンプレートはBlankでOK。

下記の画面になったらプロジェクトに移動し、開発サーバーを起動します。

cd my-video

npm install

npm run dev

ブラウザでRemotion Studioが開いたら、別ターミナルを開いて Claude Codeを起動します。

cd my-video

claude

あとはプロンプトで指示するだけです。

実際に動画を作っている様子が下記です。

非常に簡単に動画を生成することができました。

なお、動画編集をAIで効率化できるClaude Code×Remotionについて、詳しく知りたい方は以下の記事も併せてご覧ください。

WEEL

【Claude Code×Remotion】動画編集をAIで効率化！実際に使ってみた所感を本音レビュー | WEEL Claude Codeを使えば、コードベースで動画編集が可能です。本記事では、Claude CodeとRemotionを組み合わせて動画編集を自動化する仕組みや具体的な手順を分かりやすく解説…

Remotionの活用シーン

Remotionのコードベースの動画制作とパラメータ化機能は、さまざまな業務シーンで活用できます。

特に、大量生成や自動化、API連携が求められる環境での導入が効果的です。

パーソナライズド動画

ユーザーごとにカスタマイズされた動画を大量生成する用途に最適です。

Remotionはユーザーデータを元に個別の動画を自動生成できます。ECサイトの商品紹介動画、不動産物件の紹介動画、採用候補者へのメッセージ動画など、1本1本手作りでは対応できない大規模なコンテンツ制作に威力を発揮します。

ソーシャルメディアコンテンツ

SNS向けの動画コンテンツを効率的に制作できます。

テンプレートを用意しておけば、テキストや画像を差し替えるだけで新しい動画が完成します。音楽ビジュアライゼーション、データ可視化、ニュースまとめ動画など、定期的に更新が必要なコンテンツの自動化に適しています。

動画エディタの構築

自社サービスに動画編集機能を組み込むなどの使い方にも対応しています。

Remotion Playerを使えば、Webアプリ上でユーザーが動画をカスタマイズし、完成品をダウンロードできる仕組みを構築できます。$500/月からのEnterprise LicenseにはEditor Starterテンプレートが付属しており、動画エディタSaaSの開発をスムーズに始められます。

なお、企業向けにも利用しやすいオープンソースの検索エージェントモデルMiroThinker 1.5の導入もおすすめです。くわしく知りたい方は、下記の記事もあわせてご覧ください。

あわせて読みたい

AIエージェントの民主化が始まる！MiroThinker 1.5が切り開くすべての企業のための次世代AI時代を解説 押さえておきたいポイント 30Bパラメータで1兆クラスのモデルに匹敵する性能を、推論コスト20分の1で実現。 証拠に基づいた推論とハルシネーション防止により、ビジネス…

Remotionの活用事例

ここではRemotionの活用事例について、調査し、いくつか紹介をしていきます。事例を元にご自身の創作に活用ください。

今回解説する事例において、弊社がX（旧Twitter）で発見した参考となるツイートを紹介させていただいております。取り下げなどのご連絡は、contact@weel.co.jp からご連絡ください。

Youtube動画解析から動画作成

下記の投稿では、YouTubeの内容を解析したものを元に動画を作成されています。こちらの内容にあるように、Remotionを使った動画生成は再現性のあるものを作ることが可能です。

Antigravityを使った動画生成

こちらの内容では、AntigravityとRemotionを活用して動画を作成されています。

Remotion以外のAIも使うことで、これまで煩雑だった動画制作がかなり簡素化できそうですね。

下記の投稿もAntigravityとRemotionを使って動画制作をされていますね。

Claude CodeとRemotionの活用

こちらは海外の事例ですが、Claude CodeとRemotionを使って、バズらせる動画の作り方について解説をされています。

かなり具体的に解説されているので、参考になるかと思います。

ちなみにこちらはClaude Codeとの組み合わせではないと思いますが、ポン出しでこのクオリティの動画を作ることができたそうです。

Remotionに向いている人・向いていない人

Remotionに向いている人は、ReactやJavaScript/TypeScriptの経験があるWebエンジニアです。

普段フロントエンド開発で使うコンポーネント設計の感覚がそのまま動画制作に転用できるため、学習コストが低く抑えられます。

加えて、テキストアニメーション・データ可視化・技術解説動画など、同一テンプレートから大量パターンを量産したい用途、あるいはAPIやデータと連動した動画を自動生成したい場面でも強みを発揮します。

反対に向いていない人は、撮影した実写映像のカット編集・Vlog・インタビュー動画といった用途を想定している方です。そうした作業はPremiere ProやDaVinci Resolveの領域。さらに、公式ドキュメントは英語のみで、日本語の情報はまだ限られているため、英語ドキュメントへの抵抗がある方には問題解決のコストがかかる点も把握しておく必要があります。

Remotionを実際に使ってみた

実際にRemotionをインストールし、Agent Skillsを含めて動作を確認してみました。

プロジェクトセットアップ

npx create-video@latestでプロジェクトを作成したところ、難しい点はなくすぐにセットアップが完了しました。開発サーバーを起動するとRemotion Studioがブラウザで開きます。セットアップはこれだけです。

Agent Skillsの検証

npx skills add remotion-dev/skillsでAgent Skillsを導入し、Claude Codeから操作を試みました。「青い背景に白いテキストでカウントダウンするアニメーションを作成して」と指示したところ、対応するReactコンポーネントが自動生成されました。

生成されたコードはそのまま動作し、カウントダウンロジックも正しく実装されていました。

複雑なアニメーションではプロンプトの調整が必要な場面もありますが、シンプルな動画はコーディング不要でテキストのみで作成可能です。また、コードで動画がそのまま編集ができるため、今までの動画編集とはまったく違う体験でした。

よくある質問

ここではRemotionに関するよくある質問に回答していきます。

Remotionを活用していこう！

Remotionは、Reactベースで動画をプログラマティックに生成できるフレームワークとして、注目のツールです。さらにAgent Skillsの追加により、Claude Codeを活用してプロンプトだけで動画生成が可能になり、開発ハードルが大きく下がりました。

Remotion自体、個人や小規模チームであれば無料で商用利用もできるため、パーソナライズド動画の大量生成やSNSコンテンツの自動化を検討している方にとっては重宝するツールになるのではないでしょうか。

まずはRemotionをローカル環境にインストールし、プロジェクトを作成したうえでAgent Skillsを導入し、実際にプロンプトから動画生成を試してみることをおすすめします。

最後に

いかがだったでしょうか？

動画生成をどこまで自動化し、既存システムや業務フローにどう組み込むかで成果は大きく変わります。RemotionやAgent Skillsを活かした設計・内製化・スケール戦略を整理したい企業向けのサポートをご案内いたします。

生成AIを社内で活用していきたい方へ

「生成AIを社内で活用したい」「生成AIの事業をやっていきたい」という方に向けて、生成AI社内セミナー・勉強会をさせていただいております。

セミナー内容や料金については、ご相談ください。

また、サービス紹介資料もご用意しておりますので、併せてご確認ください。

無料で相談する

資料をダウンロードする