Remotionとは？使い方・料金とClaude Codeで動画を作る方法

【早見表】Remotionとは？料金・必要な環境・作り方まとめ

Remotionとは、Reactのコンポーネントとして書いた映像を、MP4などの動画ファイルに書き出せるフレームワークです。動画編集ソフトのタイムラインで素材を並べる代わりに、コードで文字・図形・画像・動画・音声の動きを指定します。

ここでは、Remotionの基本情報を早見表で紹介します。

※2026年10月時点・Remotion公式サイト、公式ドキュメント、npmより

Remotionは、ローカルで作って書き出すだけなら個人は費用がかかりません。会社で使う場合は、従業員などの人数で無料かどうかが決まるため、料金とライセンスの章で条件を確認してください。

Remotionとは？Reactのコードで動画を作る仕組み

Remotionの仕組みは、Webページを作るReactの考え方を動画に当てはめたものです。Webページと同じ書き方で映像を作れるため、Web制作の知識やコンポーネントをそのまま動画に使えます。

ここでは、Remotionで動画ができるまでの仕組みを3つに分けて解説します。

フレーム番号から1枚ずつ映像を作る

Remotionは、フレーム番号を受け取って、その瞬間の1枚の映像を返す仕組みです。公式ドキュメントは、動画を「時間とともに変わる画像の関数」と説明しています。

たとえば、30fpsの動画で文字を1秒かけてフェードインさせる場合は、0〜30フレームの間に透明度を0から1へ変える式を書きます。Remotionには、文字・画像・動画・音声・図形を置くための部品（コンポーネント）が用意されています。

ただし、フレーム番号と関係なく動くCSSアニメーションなどは、書き出しのときに崩れることがあります。動きはすべてフレーム番号から計算するのが基本です。

コンポジションで尺・サイズ・fpsを決める

コンポジションとは、Remotionで作る1本の動画の設計図です。Reactのコンポーネントに、動画として必要な情報を組み合わせて登録します。

コンポジションで決める項目は、以下のとおりです。

• ID（動画の名前）
• 幅と高さ（例：横長1920×1080、縦長1080×1920）
• fps（1秒あたりのフレーム数）
• durationInFrames（フレーム数で表した尺）

同じコンポーネントを横長と縦長の2つのコンポジションに登録すると、1つの映像から2種類のサイズの動画を作れます。

Remotion Studioでプレビューし、MP4に書き出す

Remotion Studioは、作った動画をブラウザでプレビューし、書き出しまでできる画面です。コマンド1つで起動し、ポート3000（使用中なら別の番号）で開きます。

コードを保存するとプレビューに反映されるため、確認と修正をくり返しながら作れます。書き出しは、Studioの「Render」ボタンか、ターミナルの「npx remotion render」コマンドで実行します。

なお、Studioでのプレビューは、会社向けプランで数える「レンダリング」の回数に含まれません。

Remotionでできること｜作れる動画と使われ方

Remotionでできることは、1本ずつの映像制作から、データを差し替えた動画の量産、動画を作るアプリの開発まで広がります。映像がコードで書かれているため、テキストや数値を入れ替えるだけで別の動画を作れるからです。

ここでは、Remotionの主な使い方を表で紹介します。

※2026年10月時点・Remotion公式ドキュメントより

個人のクリエイターが使う場合は、モーショングラフィックスと、同じ型の動画を差し替えて作る量産から試すと、Remotionの強みを実感しやすくなります。

あわせて読みたい
AIクリエイターとは？仕事内容と、未経験からなるための学び方

Remotionの料金とライセンス｜無料で使える条件と商用利用

Remotionの料金は、使う人や会社の規模で決まります。Remotionは独自のライセンスで公開されており、個人と小さな会社は無料、一定以上の規模の会社は有料という2段階の仕組みです。

ここでは、無料で使える条件、会社向けのプラン、受託制作での人数の数え方、ライセンス以外の費用を順に解説します。

個人と3人以下の会社は商用でも無料

Remotionは、個人・3人以下の会社・非営利団体なら、商用でも無料で使えます。公式のライセンス文書で、Free Licenseの対象として定められているためです。

Free Licenseの対象は、以下のとおりです。

• 個人（個人的な利用・商用利用のどちらも可）
• 3人以下の会社やチーム（法人化した1人会社も含む）
• 非営利団体
• 商用で使う前に、Remotionが合うかを試している段階

Free LicenseとCompany Licenseで、使える機能に違いはありません。Free Licenseの場合は、申し込みやremotion.proへの登録も不要です。ただし、Remotionのコードを改変して、Remotionそのものを製品として販売することは禁止されています。

4人以上の会社はCompany Licenseが必要

従業員などの人数が4人以上の会社は、RemotionのCompany Licenseが必要です。人数は会社全体で数え、Remotionを使わない人も含まれます。

Company Licenseの種類と料金を、対象と料金で比較します。

※2026年10月時点・Remotion公式「License FAQ」「remotion.pro/license」より。CreatorsとAutomatorsの両方を契約する場合は、合計で月100ドルが最低額

たとえば、20人の会社で1人だけがRemotionで動画を作る場合は、Creatorsを1人分（月25ドル）契約すればよいと公式FAQに書かれています。自分の使い方がどちらに当たるか迷う場合は、公式の問い合わせ窓口で確認してください。

フリーランス・制作会社が動画制作を受ける場合の数え方

Remotionで受託制作をする場合、人数を数える範囲は、取引先がRemotionのプロジェクトを持つかどうかで変わります。公式の利用規約で、Remotionのコードを共同で持つ・動かす当事者の人数を合算すると定められているためです。

受託制作でのライセンスの考え方を、ケース別にまとめます。

※2026年10月時点・Remotion公式「License FAQ」「Terms and Conditions」より

個人のクリエイターが動画ファイルだけを納品する形なら、Free Licenseで受託できます。コードごと納品する案件は、取引先の規模によってCompany Licenseが必要になるため、契約の前に確認しましょう。

ライセンス以外にかかる費用

Remotionをローカルで使う場合、ライセンス以外に必要な費用は、AIエージェントの利用料が中心です。公式ドキュメントも、Claude CodeやCodexなどのコーディングエージェントの多くは有料の契約が必要と案内しています。

Remotionの周辺でかかる可能性がある費用は、以下のとおりです。

• Claude CodeなどのAIエージェントの利用料
• AWS Lambdaなどでクラウドレンダリングする場合のクラウドの利用料
• Remotion公式ストアの有料テンプレート・部品（任意）

クラウドの料金は使った量で変わるため、まずはローカルでの書き出しだけで試すと、費用を抑えて始められます。

Remotionの使い方｜始め方から書き出しまで【4STEP】

Remotionの使い方は、環境の確認、プロジェクトの作成、プレビュー、書き出しの4STEPです。公式の手順では、ターミナルでコマンドを3〜4行実行すると、プレビューまで進めます。

ここでは、Remotionを初めて使う方向けに、4つのSTEPを順に解説します。

※コマンドは2026年10月時点・Remotion公式ドキュメント「Installation」より

【STEP1】Node.jsと動作環境を確認する

Remotionを使う前に、Node.js 16以上（またはBun 1.0.3以上）を用意します。Remotionは、Node.jsの上で動くReactのプロジェクトとして作られるためです。

パソコンの環境で注意したい条件は、以下のとおりです。

• macOSは15（Sequoia）以降が必要
• Linuxはlibc 2.35以上と、追加のパッケージが必要
• Alpine LinuxとNixOSは非対応

macOSが古い場合は、Remotionをインストールする前にOSを更新しておくと、作業の途中で止まらずに済みます。

【STEP2】プロジェクトを作る

Remotionのプロジェクトは、ターミナルで作成用のコマンドを実行して作ります。対話形式で、パッケージマネージャー・テンプレート・Agent Skillsを入れるかを選べます。

公式が案内する、空のテンプレートで始めるコマンドは以下のとおりです。

1. 「npx create-video@latest --yes --blank my-video」（my-videoフォルダにプロジェクトを作る）
2. 「cd my-video」（作ったフォルダに移動する）
3. 「npx remotion skills add」（AI向けのAgent Skillsを入れる）

初めての場合は、公式が勧める「Hello World」テンプレートを選ぶと、動く見本のコードから始められます。

【STEP3】Remotion Studioでプレビューする

プロジェクトができたら、「npm run dev」でRemotion Studioを起動します。ブラウザにプレビュー画面が開き、登録したコンポジションの一覧とタイムラインが表示されます。

コードを編集して保存すると、プレビューにすぐ反映されます。たとえば、表示する文字や色を書き換えて保存し、動きを確かめながら調整できます。

ただし、Next.jsやReact Router 7のテンプレートでは、Studioの起動コマンドが「npm run remotion」に変わります。

【STEP4】MP4に書き出す

動画が完成したら、Remotion StudioかコマンドでMP4などに書き出します。Studioでは「Render」ボタンを押し、設定を選んで「Render video」で確定します。

ターミナルで書き出す場合は、「npx remotion render」にコンポジションのIDを付けて実行します。IDを省略すると一覧から選べ、出力先を指定しない場合は「out」フォルダに保存されます。

連番画像・音声だけ・GIF・静止画での書き出しにも対応しているため、SNSのサムネイル用の静止画を同じプロジェクトから作ることも可能です。

RemotionとClaude Codeで動画を作る方法

RemotionとClaude Codeを組み合わせると、日本語で作りたい動画を伝えるだけで、Remotionのコードを書いてもらえます。Remotionの公式が、AIエージェント向けのAgent SkillsとClaude Code用のプラグインを用意しているためです。

ここでは、Claude CodeでRemotionを使う準備と、依頼・修正のコツを紹介します。

Agent Skillsかプラグインを入れる

Claude CodeでRemotionを使う場合は、公式のAgent Skillsかプラグインを入れるのが近道です。Agent Skillsは、Remotionのプロジェクトでの推奨の書き方（ベストプラクティス）をAIに伝える手引きです。

Claude CodeでRemotionを使う準備の方法を、コマンドと特徴で比較します。

※2026年10月時点・Remotion公式ドキュメント「Agent Skills」「Claude Code plugin」より

プラグインを入れた後は、Claude Codeを再起動し、動画を作りたいフォルダで「/remotion:remotion-create」に続けて作りたい動画を書くと、プロジェクトの作成から始まります。

最初の依頼に入れる項目を決める

Claude Codeへの最初の依頼には、動画の用途・サイズ・尺・見せたい内容をまとめて書きます。Remotionのコンポジションは尺・サイズ・fpsを数字で決めるため、数字が入った依頼ほど1回目の仕上がりが狙いに近づきます。

最初の依頼に入れたい項目は、以下のとおりです。

• 用途と見る人（例：新サービスの告知、社内向けの説明）
• サイズと尺（例：縦長1080×1920で15秒）
• 場面ごとの文字と順番
• 色・フォント・雰囲気の指定
• 使う画像や音声のファイルの場所

たとえば「縦長1080×1920・15秒・30fpsで、3つの特徴を1つずつ文字のアニメーションで見せる告知動画」のように書くと、AIが場面の割り振りを決めやすくなります。

修正は具体的な数字で伝える

Remotionの動画を修正するときは、「どの場面の、何を、どれだけ変えるか」を数字で伝えます。Remotionの動きはフレーム番号で計算されているため、秒数や位置を数字で指定すると、AIが該当するコードを特定しやすいためです。

たとえば「もっと速く」より「2つ目の文字は3秒目から0.5秒でフェードイン」と伝えると、修正のやり直しが減ります。変えたくない部分（色やフォントなど）も一緒に書くと、意図しない変更を防げます。

ただし、AIが書いたコードでも、書き出した動画は自分の目で最後まで確認してください。プレビューでは問題がなくても、書き出しで表示が崩れる場合があります。

あわせて読みたい
Claude Codeで動画編集する方法｜HyperFrames・Remotionで動画を作る手順

RemotionとHyperFramesの違い｜選び方の目安

RemotionとHyperFramesの違いは、動画を何で書くかです。RemotionはReactのコンポーネントで、HyperFramesはHTMLで動画を書きます。

ここでは、2つのツールの違いを表で比べ、向いている場面を紹介します。

※2026年10月時点・Remotion公式ドキュメント、HyperFrames公式GitHub・公式ガイド「HyperFrames vs Remotion」より

どちらもヘッドレスChromeで映像を1フレームずつ撮影し、FFmpegで動画にする点は共通しています。違いは書き方とライセンスにあると考えて選ぶと、迷いにくくなります。

Remotionが向いている場面

Remotionは、Reactでの開発に慣れている方や、Reactで作った部品を動画にも使いたい方に向いています。Webサービスで使っているコンポーネントやグラフのライブラリを、そのまま動画の中で使えるためです。

たとえば、動画を作るWebアプリを開発する場合は、Remotion PlayerとRemotion Lambdaを組み合わせた公式のテンプレートから始められます。HyperFrames側の公式ガイドも、Remotionはテンプレートやチュートリアルが多いと説明しています。

ただし、4人以上の会社で使う場合はCompany Licenseの費用がかかる点を、ツールを選ぶ段階で確認しておきましょう。

HyperFramesが向いている場面

HyperFramesは、HTMLやWebサイトの素材から動画を作りたい方や、AIエージェントに動画を書かせたい方に向いています。ビルドが不要で、HTMLのファイルをそのまま動画にできるためです。

たとえば、既存のWebページのデザインやCSSのアニメーションを動画にしたい場合は、Reactに書き直す手間がかかりません。ライセンスがApache 2.0のため、会社の人数に関係なく無料で使えます。

ただし、HyperFramesはNode.js 22以上とFFmpegが必要です。クラウドでの書き出しは、Remotion Lambdaのほうが成熟していると、HyperFrames側の公式ガイドでも説明されています。

あわせて読みたい
HyperFramesとは？使い方とClaude Codeで動画を作る手順

Remotionでつまずきやすい点と対処法

Remotionでつまずきやすいのは、書き出したときの表示の崩れと、パソコンの環境の条件です。Remotionは複数のブラウザのタブで並行して書き出すため、プレビューでは見えなかった問題が書き出しで出ることがあります。

ここでは、Remotionの公式ドキュメントにある主なつまずきと対処法を表で紹介します。

※2026年10月時点・Remotion公式ドキュメント「Flickering」「Debugging timeouts」「Installation」「npx remotion render」より

エラーが出たときは、表示されたメッセージをそのままClaude Codeに渡すと、原因の候補と修正案を出してもらえます。Remotionの公式ドキュメントはAIが読みやすいMarkdownでも公開されているため、Agent Skillsの「/remotion-docs」で最新の情報を参照させる方法も有効です。

一方、動画の構成や見せ方の判断、AIへの指示の出し方は、ツールのドキュメントだけでは身につきにくい部分です。Claude Codeを使った動画制作を体系的に学びたい方は、講座を使う方法もあります。

グループのデジット(DEGIT)の「ClaudeCode動画制作コース」は、Claude Codeを基盤にHyperFrames・ffmpegで動画を作る内容で、2ヶ月プランは178,000円〜、メンターとのオンライン面談は原則月2回です（2026年10月時点・デジット公式サイトより。税込・税抜の表記なし）。デジットのカリキュラムが扱うのはRemotionではなくHyperFramesのため、Remotionに絞って学びたい方は公式ドキュメントとAgent Skillsを中心に進めてください。

まとめ｜Remotionは短い動画をClaude Codeに頼むところから始めよう

Remotionの使い方と料金のポイントは、以下のとおりです。

• Remotionは、Reactのコードで動画を作り、Remotion StudioでプレビューしてMP4に書き出すフレームワーク
• 個人・3人以下の会社・非営利団体は商用でも無料で、4人以上の会社はCompany License（月25ドル／1人〜）が必要
• 始め方は、Node.jsの用意 →「npx create-video@latest」→「npm run dev」→ 書き出しの4STEP
• Claude Codeは、公式のAgent Skillsかプラグインを入れて、尺・サイズ・場面を数字で依頼する
• HTMLで書きたい場合や、人数に関係なく無料で使いたい場合はHyperFramesも候補になる

まずは15秒ほどの短い動画を1本、Claude Codeに頼んで作り、プレビューと書き出しまでの流れを体験してみてください。