Reactで動画を作る時代。「Remotion」なら、コードだけでMP4が生成できる。AIプロンプトで動画制作まで可能に。

動画を「コード」で作るという発想

エンジニアなら、こんな場面に心当たりがあるかもしれません。

プロダクトのデモ動画を作りたいけど、Adobe Premiere Proは高いし使い方がわからない
SNS用のショート動画を量産したいけど、手作業では限界がある
データを可視化した動画を自動生成したい

そんな課題をReactのコードだけで解決してしまうのが、**Remotion（リモーション）**です。

Remotionとは

Remotionは、Reactを使ってプログラマティックに動画を作成・レンダリングできるオープンソースフレームワークです。

ChatGPTで有名なOpenAIとは関係なく、こちらは純粋なフロントエンド技術の延長線上にあるツール。Reactコンポーネントを書くように動画を作り、最終的にMP4ファイルとして書き出せます。

基本スペック

| 項目 | 内容 | |------|------| | 開発元 | Remotion（旧Jonny Burger氏が創設） | | GitHub Stars | 37,000+ | | 月間インストール | 90万回以上 | | 対応環境 | Node.js 16+ / Bun 1.0.3+ | | ライセンス | 個人・3名以下は無料 | | コミュニティ | Discord 6,000人以上 |

なぜRemotionが注目されるのか

1. Reactの知識がそのまま使える

Remotionの動画はReactコンポーネントそのものです。JSX、CSS、TypeScript、npmパッケージ——普段使っているものがすべてそのまま動画制作に使えます。

import { useCurrentFrame, AbsoluteFill } from "remotion";

const MyVideo = () => {
  const frame = useCurrentFrame();
  const opacity = Math.min(1, frame / 30);

  return (
    <AbsoluteFill style={{ backgroundColor: "#0f172a" }}>
      <h1 style={{
        color: "white",
        fontSize: 80,
        opacity,
        textAlign: "center",
        marginTop: "35%"
      }}>
        Hello, Remotion!
      </h1>
    </AbsoluteFill>
  );
};

これだけで「フェードインするタイトル動画」が作れます。useCurrentFrame()で現在のフレーム番号を取得し、それに応じてスタイルを変えるだけ。

2. データ駆動で動画を量産できる

Remotionの真の力はパラメータ化にあります。

JSONデータやAPIのレスポンスを渡して、同じテンプレートから何百本もの動画を自動生成できる。例えば：

ECサイトの商品紹介動画を全商品分自動生成
毎日のデータをグラフ化した動画を自動投稿
ユーザーごとにパーソナライズされた動画を配信

手作業では不可能な規模の動画制作が、コードで実現できます。

3. レンダリング環境が柔軟

| レンダリング方法 | 特徴 | |------------------|------| | ローカル | npx remotion renderで手元のPCでレンダリング | | サーバー | Node.jsサーバーでAPI経由のレンダリング | | AWS Lambda | サーバーレスで大規模並列レンダリング | | Cloud Run | GCP上でのレンダリング |

個人利用ならローカルで十分。本番環境ではLambdaやCloud Runで数千本の動画を並列レンダリングすることも可能です。

セットアップ方法

プロジェクト作成

npx create-video@latest

テンプレートは「Hello World」を選べばOK。TypeScript対応のプロジェクトが生成されます。

開発サーバーの起動

npm run dev

Remotion Studioが立ち上がり、ブラウザ上で動画のプレビューが可能。タイムラインをスクラブしながらリアルタイムで確認できます。

動画のレンダリング

npx remotion render src/index.ts MyComposition out/video.mp4

これだけでMP4ファイルが生成されます。

コアコンセプト

Remotionを使いこなすために押さえるべき概念は4つだけです。

1. Composition（コンポジション）

動画の「定義」。幅・高さ・FPS・長さをセットで指定します。

import { Composition } from "remotion";

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

この例では、1920x1080、30fps、5秒間（150フレーム）の動画を定義しています。

2. useCurrentFrame

現在のフレーム番号を取得するフック。アニメーションの核。

const frame = useCurrentFrame(); // 0, 1, 2, 3...

フレーム番号からopacity、position、scaleなどを計算して、CSSアニメーションのようにスムーズな動きを作れます。

3. Sequence（シーケンス）

動画内の「シーン」を時間軸で配置します。

import { Sequence } from "remotion";

const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Sequence from={0} durationInFrames={60}>
        <Title text="第1シーン" />
      </Sequence>
      <Sequence from={60} durationInFrames={60}>
        <Title text="第2シーン" />
      </Sequence>
    </AbsoluteFill>
  );
};

fromでフレーム単位の開始位置を指定。Sequence内ではuseCurrentFrame()が相対フレームを返すので、各シーンを独立して制御できます。

4. useVideoConfig

動画のメタデータ（幅、高さ、FPS、総フレーム数）を取得するフック。

const { width, height, fps, durationInFrames } = useVideoConfig();

レスポンシブなレイアウトやFPSに依存しないアニメーション計算に使います。

Remotion Prompts：AIで動画を作る

ここからが本題の後半。Remotionは2025年からAIコーディングエージェントとの連携に力を入れています。

Remotion Promptsとは

Remotion Prompts（https://www.remotion.dev/prompts）は、AIにプロンプトを与えるだけでRemotionの動画を生成できる仕組みのショーケース＆ギャラリーです。

Claude CodeやOpenAI CodexなどのAIコーディングエージェントに対して、「こういう動画を作って」と指示すると、RemotionのReactコードを自動生成してくれます。

どんな動画が作れるのか

Promptsギャラリーには、こんな作品が並んでいます：

3D地図上の旅行ルートアニメーション
ニュース記事のハイライト動画
ロケット打ち上げのタイムライン
データ可視化（棒グラフ＋折れ線グラフのアニメーション）
SVGロゴの3Dアニメーション

いずれもプロンプト（テキスト指示）だけで生成されたもの。動画編集ソフトを一切触らずに、これだけのクオリティが出せます。

Remotion Skillsの仕組み

AIエージェントがRemotionのコードを正しく書けるように、Remotion Skillsという専用のスキルセットが用意されています。

これはAIエージェントに「Remotionのベストプラクティス」を教えるためのもの。例えば：

useCurrentFrame()の正しい使い方
Compositionの設定方法
アニメーションの実装パターン
レンダリングの最適化

AIエージェントがこのスキルを参照しながらコードを生成するので、人間がRemotionの細かいAPIを覚えていなくても動画が作れるというわけです。

使い方の流れ

1. Remotionプロジェクトを作成
2. AIコーディングエージェント（Claude Codeなど）を起動
3. 「〇〇な動画を作って」とプロンプトを入力
4. AIがRemotionのコードを自動生成
5. Remotion Studioでプレビュー・調整
6. レンダリングしてMP4を書き出し

コーディングの知識がなくても、プロンプトの書き方次第で高品質な動画が作れる。これは動画制作の民主化と言えるかもしれません。

Remotionのその他の機能

Remotion Recorder

JavaScript製のビデオ録画・編集ツール。ウェブカムとスクリーンを同時に録画でき、以下の機能を備えています：

各SNSプラットフォーム向けのフォーマット自動変換
Whisper.cppによるローカル字幕自動生成
無音区間の自動削除
BGMの自動フェード
トランジション効果

技術系YouTuberのスクリーンキャスト制作に特に相性が良さそうです。

Remotion Player

Webアプリに動画プレーヤーを埋め込めるコンポーネント。ユーザーがブラウザ上で動画をプレビューしたり、パラメータを変更してリアルタイムに結果を確認できます。

料金プラン

| プラン | 対象 | 料金 | |--------|------|------| | Free | 個人・3名以下のチーム | 無料 | | Company | 4名以上のチーム | 従量課金（レンダリング数に応じて） | | Enterprise | 大規模利用 | 月額$500〜 |

個人利用や小規模チームなら完全無料。商用利用もOKです。ポートフォリオ動画やSNS投稿用の動画を作る分には、一切費用がかかりません。

向いている人・向いていない人

向いている人

| タイプ | 理由 | |--------|------| | React開発者 | 学習コストがほぼゼロ | | データを動画化したい人 | パラメータ化で自動生成できる | | 動画を大量生産したい人 | テンプレート化＋API連携で量産可能 | | Adobe製品が苦手なエンジニア | コードで完結する | | AI動画生成に興味がある人 | Remotion Promptsで手軽に試せる |

向いていない人

| タイプ | 理由 | |--------|------| | 非エンジニア | React/JSの知識が前提（ただしAIプロンプトで緩和される） | | 実写映像の編集がメイン | Premiere ProやDaVinci Resolveのほうが適切 | | すぐに1本だけ作りたい | セットアップの手間を考えるとCanvaのほうが速い |

まとめ

Remotionは「動画制作をエンジニアリングにする」フレームワークです。

Reactを書ける人なら、今すぐ動画を作り始められる。データ駆動で量産できる。そしてAIプロンプトを使えば、コードを書かなくても動画が生成できる時代がすでに来ています。

特にRemotion Promptsの登場により、「AIに指示するだけで動画ができる」という体験は、一度試すと世界が変わります。

npx create-video@latest

この1行から始めてみてください。Reactが書ける人にとって、動画制作のハードルが劇的に下がることを実感できるはずです。