remotion react プログラマブル動画 チュートリアル javascript

ReactとRemotionでプログラマブル動画を作る方法

Read in English →

ReactとRemotionでプログラマブル動画を作る方法

「プログラマブル動画」という考え方をご存じでしょうか。タイムライン上でクリップを並べるのではなく、コードで動画の内容を記述し、そのコードをレンダラーが映像に変換するアプローチです。ReactとRemotionを使えば、JavaScriptを書き慣れた開発者なら誰でもこの仕組みをすぐに実践できます。

本記事では、環境構築から最初のアニメーション完成まで、ステップバイステップで解説します。

Remotionとは何か

Remotionは、Reactコンポーネントを使って動画を構築するオープンソースライブラリです。各フレームはReactの1回のレンダリングに相当し、アニメーションはキーフレーム曲線ではなくuseCurrentFrame()フックで制御します。

動画をコードで表現することで、次のようなことが可能になります。

  • JSONデータをループして500本の個別動画を一括生成する
  • 色やテキストをパラメータとして渡してABテストする
  • 動画の変更をGitで差分管理する

前提条件

  • Node.js 18以降
  • Reactの基礎知識（フック・コンポーネント）
  • ターミナルの基本操作

ステップ1 — プロジェクトを作成する

公式CLIを使って新規プロジェクトを立ち上げます。

npx create-video@latest my-first-video
cd my-first-video
npm install

テンプレート選択では Hello World を選んでください。生成されるプロジェクト構造は次のとおりです。

  • remotion.config.ts — プロジェクト設定
  • src/index.ts — コンポジション登録のエントリーポイント
  • src/Root.tsx — コンポジションを登録する場所
  • src/HelloWorld/ — サンプルコンポジション

ステップ2 — コアフックを理解する

useCurrentFrame()

現在のフレーム番号（0始まりの整数）を返します。

import { useCurrentFrame } from "remotion";

export const MyScene: React.FC = () => {
  const frame = useCurrentFrame();
  return <div style={{ opacity: frame / 30 }}>こんにちは</div>;
};

フレーム0では透明、フレーム30で完全に表示される1秒間のフェードインです（30fps時）。

useVideoConfig()

コンポジションのwidth・height・fps・durationInFramesを返します。

import { useCurrentFrame, useVideoConfig } from "remotion";

export const CenteredText: React.FC = () => {
  const { width, height } = useVideoConfig();
  const frame = useCurrentFrame();
  return (
    <div
      style={{
        width,
        height,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        background: "#0f0f0f",
        color: "#fff",
        fontFamily: '"Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif',
        fontSize: 72,
      }}
    >
      フレーム {frame}
    </div>
  );
};

ステップ3 — コンポジションを登録する

src/Root.tsxで<Composition>コンポーネントを使ってコンポーネントを登録します。

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

export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="CenteredText"
      component={CenteredText}
      durationInFrames={90}
      fps={30}
      width={1920}
      height={1080}
    />
  );
};

durationInFrames={90}は30fpsで3秒の動画になります。

ステップ4 — ブラウザでプレビューする

npm run dev

http://localhost:3000を開くとRemotionStudioが立ち上がります。タイムラインのプレイヘッドをドラッグすると、各フレームのReactレンダリング結果をリアルタイムで確認できます。

ステップ5 — interpolateとspringでアニメーションを加える

Remotionには滑らかなモーションを作るための2つのユーティリティが用意されています。

interpolate — 入力値の範囲を出力値の範囲にマッピングします。

import { interpolate, useCurrentFrame } from "remotion";

const frame = useCurrentFrame();
const translateY = interpolate(frame, [0, 30], [80, 0], {
  extrapolateRight: "clamp",
});

spring — 物理ベースのイージングをシミュレートします。

import { spring, useCurrentFrame, useVideoConfig } from "remotion";

const frame = useCurrentFrame();
const { fps } = useVideoConfig();

const scale = spring({
  fps,
  frame,
  config: { damping: 10 },
});

この2つを組み合わせることで、キーフレームを一切使わずに洗練されたアニメーションが作れます。

ステップ6 — <Sequence>で複数シーンを重ねる

<Sequence>コンポーネントを使うと、子コンポーネントの開始フレームをずらすことができます。

import { Sequence } from "remotion";
import { Title } from "./Title";
import { Subtitle } from "./Subtitle";

export const Scene: React.FC = () => (
  <>
    <Sequence from={0} durationInFrames={60}>
      <Title />
    </Sequence>
    <Sequence from={30} durationInFrames={60}>
      <Subtitle />
    </Sequence>
  </>
);

Subtitleはフレーム30から始まり、スタッガードな登場アニメーションになります。

ステップ7 — 動画をレンダリングする

プレビューで納得がいったらMP4にレンダリングします。

npx remotion render CenteredText out/video.mp4

大量の動画を並列生成する場合は、Remotionが公式サポートするAWS Lambdaレンダリングが有効です。

テンプレートを活用して制作スピードを上げる

アニメーションをゼロから書くのは学習には最適ですが、本番の納期には向きません。基礎を理解したら、既製のRemotionテンプレートを活用するのが現実的です。

RenderCompは1,400本以上のプロダクション品質Remotionテンプレートを提供しています。ローワーサード、キネティックテキスト、データチャート、SNS用オープナーなど、各テンプレートはReactのソースコードとして提供されるため、ブランドに合わせた自由なカスタマイズが可能です。クライアント向けの動画制作パイプラインを構築したい場合や、コンテンツを量産したい場合に特に有効です。

よくある質問（FAQ）

Q: Remotionは商用利用に費用がかかりますか？ A: 個人・オープンソース利用は無料です。商用利用には企業ライセンスが必要です。最新の価格はRemotion公式サイトで確認してください。

Q: TypeScriptで使えますか？ A: はい。公式の scaffold はTypeScript前提です。型安全性によりアニメーションのバグをコンパイル時に検出できます。

Q: ffmpegとRemotionの違いは何ですか？ A: ffmpegは動画の変換・トリミング・トランスコードに使うツールです。Remotionは動画を「作る」ツールです。内部的にはRemotionがReactコンポーネントをフレームに変換し、最後にffmpegへ渡してMP4を生成します。

Q: SNS向けの適切なフレームレートは？ A: ほとんどのプラットフォームで30fpsが標準です。YouTubeとLinkedInは60fpsにも対応しています。<Composition>のfpsプロパティで指定します。

Q: 動画に音声を含められますか？ A: はい。Remotionの<Audio>コンポーネントを使います。音量・トリミング・オフセットをフレーム単位でコントロールできます。

Q: データセットから複数の動画を一括生成するには？ A: コンポジションにdefaultPropsを渡し、レンダリング時に--propsまたはinputPropsで上書きします。JSONの配列をループしながら各行に対して1本の動画をレンダリングできます。

Q: 4K解像度でのレンダリングは可能ですか？ A: 可能です。width={3840} height={2160}を指定するだけです。レンダリング時間は増加するため、大量バッチ処理にはAWS Lambdaを推奨します。

Q: フルレンダリングせずにアニメーションを確認できますか？ A: Remotion Studio（localhost:3000のブラウザプレビュー）がフレーム単位でリアルタイムにレンダリングを確認できる主要な開発ツールです。コンポーネントを編集するとすぐに反映されます。

まとめ

本記事で紹介したRemotionの基本的なワークフロー「インストール → Reactコンポーネントを書く → コンポジションを登録 → Studioでプレビュー → MP4にレンダリング」を一通り体験できました。

重要な考え方は「すべてのフレームはフレーム番号の関数」です。この発想を身につければ、Reactで思い描いたあらゆるアニメーションを動画として表現できます。

次のステップとして、@remotion/playerを使ったWebアプリへの動画プレイヤー埋め込みや、@remotion/lambdaを使ったクラウドレンダリングの大規模化を探ってみてください。

すぐに使える

1,400以上のRemotionテンプレートを一括入手

買い切り永続ライセンス。TypeScript製。今日から動画制作スピードが変わります。

RenderCompを試す →