Remotion(リモーション)とは？できることや料金・生成動画の商用利用まで解説

X等で「Remotionが便利！」といった情報を見聞きし、どんなツールなのか気になっている人は多いですよね。

使い勝手や料金など、詳細を把握してから使うかを判断したい人もいるはず。

そこでこの記事では料金やできることも交え、Remotionの特徴を解説します。「Remotionを使うべきか」といった疑問にもお答えするので、ぜひ参考にしてください。

Remotionとは動画構築の自動化ツール

Remotionは、Reactコンポーネントを使って動画を自動生成できるオープンソースのフレームワークです。コードで動画の構成・アニメーション・書き出しをすべて管理できる点が、最大の特徴といえます。

ここからは次の2点を解説します。

プログラミング知識なしで利用可

Remotionは、プログラミング知識がなくても利用できます。テンプレートが豊富に用意されているため、コードを1から書かなくても動画を生成できます。

たとえば、用意されたテンプレートのテキストや色を書き換えるだけで、オリジナルの動画を作れます。コーディングに慣れていない人でも、テンプレートを土台にして始められます。

他の動画生成ツールとの違い

Remotionはデザインベースのツール（CapCutやCanvaなど）とは異なり、コードで動画の構成を管理します。プログラムで制御できるため、大量の動画を一括生成したり、データと連動した動的な動画を作ったりできます。

GUIで操作する一般的な動画編集ツールでは難しい「データ駆動型の動画生成」が、Remotionの最大の強みです。

Remotionでできること

Remotionは、単純な動画編集にとどまらず、幅広い用途に対応しています。動画生成・量産・アニメーション制作など、複数の作業をコードベースで一元管理できます。

ここからはRemotionでできることを、5にまとめて解説します。

動画の自動生成

Reactコンポーネントとして動画の構成を定義することで、レンダリングを実行するだけで動画を自動生成できます。手作業でのカット編集や書き出し操作が不要になります。

APIやデータベースと組み合わせれば、データを差し込んで動画を自動で量産できます。ECサイトの商品紹介動画や、SNS向けのレポート動画などに活用されています。

生成動画の量産

同じテンプレートに異なるデータを流し込むことで、大量の動画をまとめて書き出せます。100本・1,000本単位の動画生成も、コードの修正1回で対応できます。

たとえば、スポーツ選手の成績データを差し込んで選手ごとの紹介動画を量産するといった使い方が可能です。人手でひとつずつ作る必要がなくなります。

アニメーション・インフォグラフィック制作

Remotionでは、CSSアニメーションやJavaScriptの演算を使って、なめらかなアニメーションを作れます。グラフの推移を動的に表示するインフォグラフィック動画も、コードで制御できます。

プレゼン資料やSNS投稿用のビジュアルコンテンツとして、視覚的に訴求力の高い動画を効率よく制作できます。

動画ワークフローの拡張

Remotionは、CI/CDパイプラインやAPIと連携できます。たとえば、Webサービスのユーザーが操作した内容をもとに、サーバーサイドで自動的に動画を生成して配信するシステムを構築できます。

従来の動画編集ソフトでは難しかった「動画生成の自動化・システム化」を、開発ワークフローに組み込める点が大きな特徴です。

複数人での共同生成

Remotionのプロジェクトはコードで管理されるため、Gitを使ったバージョン管理に対応しています。複数人が同じプロジェクトを分担して作業できます。

デザイナーがコンポーネントを作り、エンジニアがデータ連携部分を担当するといった役割分担での共同作業が、スムーズに行えます。

Remotionの料金プランと無料範囲

Remotionは基本的にオープンソースで提供されていますが、利用目的によってライセンスの取得が必要になるケースがあります。

ここからは次のトピック別に、Remotionの使用費用について解説します。

無料利用の条件と使用範囲

個人が非商用目的で利用する場合、Remotionは無料で使えます。学習目的や個人のポートフォリオ制作、趣味の動画制作などが該当します。

ただし、企業での利用や収益を伴うプロジェクトへの利用は、商用ライセンスが必要です。「無料で使えるか」の判断は、利用目的と組織の種類によって変わります。

有料プランの種類と価格

公式サイトで詳細をみる

プラン名	対象	年間料金
Company License	従業員数1〜10人	$150/年
Company License	従業員数11〜50人	$250/年
Company License	従業員数51〜200人	$500/年
Enterprise License	従業員数201人以上	要問い合わせ

従業員数に応じた段階制の料金設定が採用されています。小規模なスタートアップでも年間$150（約2万2,500円）から導入できます。

商用利用時のライセンス条件

商用利用とは、次のいずれかに該当するケースを指します。

非営利団体（NPO）やオープンソースプロジェクトは無料で利用できます。判断が難しい場合は、公式サイトのライセンスページで確認するか、問い合わせフォームから確認することをおすすめします。

Remotionは使うべき？

Remotionは、動画をコードで自動化・量産したいエンジニアやクリエイターにおすすめです。

理由は、Remotionがデータ駆動型の動画生成に特化しており、GUIツールでは実現できない規模の自動化に対応しているためです。

次のような用途には特に効果的です。

一方、動画を手動で1本だけ編集したい場合や、GUIで直感的に操作したい場合は、CapCutやAdobe Premiere Proなどの方が適しています。

Remotionは「動画制作の仕組みを作るためのツール」と理解すると、向き不向きを判断しやすくなります。コードに慣れていて、動画の自動化・量産に取り組みたい人には強くおすすめできます。

Remotionの始め方

Remotionは、コマンド操作でセットアップできます。Node.jsとnpmが入っていれば、数分で開発環境を用意できます。

ここからは次の6ステップで説明します。

1.「Node.js」をインストールする

まず、Node.jsの公式サイトから最新のLTS版をダウンロードしてインストールします。Remotionは公式ドキュメントに基づきv16以降のNode.jsに対応しており、最新のLTS版を使うと安心です。

インストール後、ターミナルで次のコマンドを実行してバージョンを確認します。

node -v

バージョン番号が表示されれば、インストール完了です。

2.「npm(yarn/pnpm)」をインストールする

Node.jsをインストールすると、npmは自動的に同梱されます。別途インストールは不要です。

yarnやpnpmを使いたい場合は、次のコマンドでインストールできます。

npm install -g yarn
# または
npm install -g pnpm

どのパッケージマネージャーを使っても、Remotionの動作に違いはありません。

3.プロジェクトを作成する

次のコマンドを実行すると、Remotionのプロジェクト作成ウィザードが起動します。

npx create-video@latest

プロジェクト名の入力を求められます。任意の名前を入力してください。

4.テンプレートを選ぶ

プロジェクト作成時に、利用目的に合ったテンプレートを選べます。主なテンプレートは次のとおりです。

初めて使う場合は「Hello World」を選ぶと、基本的な構成を確認しながら学習できます。

5.ディレクトリを移動する

プロジェクトが作成されたら、次のコマンドでそのフォルダに移動します。

cd プロジェクト名

続けて、依存パッケージをインストールします。

npm install

インストールが完了するまで、数十秒〜数分かかります。

6.サーバーを起動する

次のコマンドを実行すると、ローカルの開発サーバーが起動します。

npm start

ブラウザが自動で開き、プレビュー画面でアニメーションを確認できます。コードを編集するとリアルタイムで反映されます。

Remotionの使い方：動画の生成手順

開発サーバーが起動したら、動画の中身を作っていきます。コンポジションの登録・アニメーション作成・書き出しの3ステップが基本の流れです。

1.コンポジションを登録する

コンポジションとは、動画の「設計図」にあたる設定です。src/Root.tsx（またはsrc/index.tsx）に次の形式で登録します。

import { Composition } from "remotion";
import { MyVideo } from "./MyVideo";

export const RemotionRoot = () => {
  return (
    <Composition
      id="MyVideo"
      component={MyVideo}
      durationInFrames={150}
      fps={30}
      width={1920}
      height={1080}
    />
  );
};

durationInFramesとfpsの組み合わせで動画の長さが決まります。150フレーム ÷ 30fps = 5秒の動画になります。

2.アニメーションを作成する

useCurrentFrame()とinterpolate()を組み合わせることで、アニメーションを作れます。

import { useCurrentFrame, interpolate } from "remotion";

export const MyVideo = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1]);

  return (
    <div style={{ opacity, fontSize: 80, color: "white" }}>
      Hello Remotion!
    </div>
  );
};

上記のコードは、0〜30フレームにかけてテキストがフェードインするアニメーションです。interpolate()の第2・第3引数で入力値と出力値の範囲を指定します。

3.動画を書き出す(レンダリング)

アニメーションが完成したら、次のコマンドで動画ファイルとして書き出します。

npx remotion render

書き出し形式はデフォルトでMP4です。オプションで形式やコーデックを変更できます。

npx remotion render --codec=h264 --output=out/video.mp4

書き出し先はoutフォルダに生成されます。クラウドレンダリングにはRemotionが提供するLambdaサービスも利用できます。

Remotionは他ツールとの併用で利便性が増す

Remotionは単体でも強力ですが、他のAIツールと組み合わせることで開発効率がさらに上がります。

ここからは次の2つの組み合わせを紹介します。

Antigravityとの併用

Antigravityは、Remotionと連携して動画のデザインやアセット管理を効率化できるツールです。デザイン工程とコード工程を橋渡しする役割を担います。

ノーコードに近い操作でRemotionのコンポーネントを生成できるため、デザイナーとエンジニアが協力するプロジェクトで特に効果的です。

Antigravityの特徴を詳しく知りたい人は、次の記事を参考にしてください。

Claude Codeとの併用

Claude Codeは、Anthropicが提供するAIコーディングエージェントです。ターミナル上でAIに指示を出しながらコードを自動生成できます。

Remotionと組み合わせると、「フェードインするテキストアニメーションを作って」と指示するだけで、コンポーネントのコードを自動生成して動画に組み込むことができます。コーディングに不慣れな人でも、Claude Codeを通じてRemotionの動画制作を始めやすくなります。

Claude Codeの特徴を詳しく知りたい人は、次の記事を参考にしてください。

まとめ

Remotionは、Reactベースで動画をコードから生成できるフレームワークです。データと連動した動画の自動生成・量産・アニメーション制作に対応しており、エンジニアやクリエイターの動画制作を効率化します。

個人の非商用利用は無料で、商用利用には年間$150から利用できる有料ライセンスが必要です。

始め方は、Node.jsのインストールからnpx create-video@latestによるプロジェクト作成まで、一連の手順を踏むことで環境を整えられます。Claude CodeやAntigravityと組み合わせると、コーディングの負荷をさらに下げながら動画制作を進められます。

「動画制作をコードで自動化したい」「データから大量の動画を生成したい」という課題をお持ちの方は、ぜひRemotionの導入を検討してみてください。