Remotion - Reactで動画を作る時代が来た、コードベースの映像制作ツール

はじめに

正直なところ、動画制作ってずっとデザイナーやビデオグラファーの領域だと思っていたんですよ。

After EffectsとかPremiere Pro使える人がいないと、ちょっとしたプロモーション動画すら作れない。エンジニアとしては歯がゆい思いをしてきました。

でもRemotionというフレームワークを知ってから、その認識が完全に変わりました。「Reactが書ければ動画も作れる」という話。これ、意外と革命的なんですよね。

RemotionはGitHubで24,900スター以上を獲得している、Reactを使ってプログラマブルに動画を作成できるフレームワーク。292人のコントリビューターによって活発に開発が続いており、月間40万インストールを超える人気プロジェクトです。

Remotionとは

Remotionは、Reactコンポーネントを使って実際のMP4動画を作成できるフレームワークです。2025年12月時点でバージョン4.0.383がリリースされています。

基本的な考え方はシンプルで、「動画は時間経過による画像の関数」というコンセプト。フレーム番号に応じてReactコンポーネントをレンダリングし、それを動画として書き出す仕組みです。

Web技術（CSS、Canvas、SVG、WebGL）をそのまま使えるので、フロントエンドエンジニアにとっては学習コストがかなり低い。既存のReactの知識がそのまま活かせます。

公式サイト: https://remotion.dev GitHub: https://github.com/remotion-dev/remotion

特徴・メリット

1. Web技術がそのまま使える

これ、個人的には一番大きなメリットだと思います。

CSSアニメーション、Canvas描画、SVG、さらにはWebGLまで。Webで使える技術がすべて動画制作に使えるんですよ。

// CSSでスタイリングしたコンポーネントがそのまま動画になる
const Title = () => {
  const frame = useCurrentFrame();
  const opacity = Math.min(1, frame / 30);

  return (
    <h1 style={{
      fontSize: 100,
      fontFamily: 'Helvetica',
      opacity,
    }}>
      Hello World
    </h1>
  );
};

After Effectsを覚えるより、普段使っているReactで作れる方がQOL高いですよね。

2. プログラミングの力をフル活用

変数、関数、API呼び出し、アルゴリズム。コードで表現できることはすべて動画に落とし込めます。

データに基づいた動的な動画生成ができるので、例えばこんなことが可能です。

APIからデータを取得して、その内容で動画を自動生成
ユーザーごとにパーソナライズされた動画を大量生成
数学的なアルゴリズムでジェネラティブアートを動画化

時短になるという観点でも、同じパターンの動画を量産するときに威力を発揮します。

3. Reactエコシステムの恩恵

再利用可能なコンポーネント、Fast Refresh、TypeScriptサポート。Reactの良いところがそのまま使えます。

35以上のテンプレートが用意されていて、ゼロから作らなくてもすぐに始められるのも嬉しいポイント。

4. 柔軟なレンダリング環境

ローカルでのレンダリングはもちろん、サーバーサイドやサーバーレス環境でのレンダリングにも対応しています。AWS LambdaやGoogle Cloud Functionsでの大量生成も可能です。

インストール方法

Node.js環境があれば、コマンド一発で始められます。

npx create-video@latest

これだけでプロジェクトのセットアップが完了。Remotion Studioというエディタ付きの開発環境が立ち上がります。

既存のプロジェクトに追加する場合は、以下のようにインストールします。

npm install remotion @remotion/cli @remotion/player

基本的な使い方

ビデオの基本構造

Remotionでは、ビデオは4つのプロパティで定義されます。

width: 横幅（ピクセル）
height: 縦幅（ピクセル）
durationInFrames: 総フレーム数
fps: フレームレート（1秒あたりのフレーム数）

// src/Root.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}
    />
  );
};

この例だと、1920x1080の解像度で、30fpsで5秒間（150フレーム）の動画になります。

フレームを使ったアニメーション

useCurrentFrame()フックで現在のフレーム番号を取得し、それに応じてレンダリング内容を変化させます。

import { useCurrentFrame, useVideoConfig, AbsoluteFill } from 'remotion';

export const MyVideo = () => {
  const frame = useCurrentFrame();
  const { fps, durationInFrames } = useVideoConfig();

  // フレームに応じた透明度（最初の1秒でフェードイン）
  const opacity = Math.min(1, frame / fps);

  // フレームに応じた位置（右から左に移動）
  const translateX = 500 - frame * 5;

  return (
    <AbsoluteFill style={{ backgroundColor: '#1a1a2e' }}>
      <h1 style={{
        color: 'white',
        fontSize: 80,
        textAlign: 'center',
        marginTop: 400,
        opacity,
        transform: `translateX(${translateX}px)`,
      }}>
        Remotionで作った動画
      </h1>
    </AbsoluteFill>
  );
};

30代になって思うのは、こういう「数値の変化で表現する」というアプローチが意外と直感的だということ。ビデオ編集ソフトのタイムラインより、コードで書いた方がわかりやすい場面も多いです。

補間関数でスムーズなアニメーション

interpolate()関数を使うと、イージングを効かせたスムーズなアニメーションが作れます。

import { useCurrentFrame, interpolate, spring } from 'remotion';

export const AnimatedComponent = () => {
  const frame = useCurrentFrame();

  // 線形補間
  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: 'clamp',
  });

  // スプリングアニメーション
  const scale = spring({
    frame,
    fps: 30,
    config: {
      damping: 10,
      stiffness: 100,
    },
  });

  return (
    <div style={{
      opacity,
      transform: `scale(${scale})`,
    }}>
      コンテンツ
    </div>
  );
};

動画のレンダリング

開発が終わったら、実際のMP4ファイルとして書き出します。

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

コマンドラインで完結するので、CI/CDパイプラインに組み込むことも可能です。

実践的なユースケース

1. SNS向けショート動画の量産

テンプレートを作っておけば、テキストや画像を差し替えるだけで新しい動画が作れます。マーケティングチームからの依頼に対応するのが格段に楽になります。

type Props = {
  title: string;
  subtitle: string;
  backgroundColor: string;
};

export const SocialVideo: React.FC<Props> = ({ title, subtitle, backgroundColor }) => {
  // プロップスに基づいて動画を生成
  // ...
};