Remotion入門：Reactで「差し替えに強い動画」を作る。最小コードと動く図解で理解する

商品名や数値だけが異なる紹介動画を何本も作る。毎月同じ形式のレポート動画を更新する。こうした制作では、映像そのものより「差し替えと確認」の繰り返しが負担になりがちやで。

remotion-dev/remotion は、Reactを使って動画をプログラムで組み立てるプロジェクトやで。テンプレートをコードで管理し、入力データから内容を変える制作方法に向いてるで。この記事では、架空の商品「サンプル商品」を題材に、その考え方と試し方を説明するで。スター数や制作時間の削減率など、独立に確認できない数値は載せへんで。

Remotionが向いてる使い方

Reactを扱う開発者が、商品カード、イベント告知、定型レポートなどを動画化したいときに候補になるで。文章や色、表示する数値をデータとして渡せれば、デザインの共通部分を再使えるで。READMEでも、Reactコードを中心にした制作、データとの接続、バッチ書き出しが紹介されてるで。公式README

例えば「商品名だけ違う3本」を作る場合、まず1本のレイアウトを設計し、商品名を入力値として受け取るようにするで。ただし、長い商品名の折り返し、素材の縦横比、誤字などの確認は各動画で必要やで。テンプレートを作る初期作業もあるため、一度きりの短い編集ですべての人に有利とは限らへんで。

フレームとReactの関係

Remotionの基本は、現在のフレーム番号を使って画面の状態を決めることやで。例えば30fpsなら、30フレームが1秒にあたるで。フレームが進むにつれて文字の透明度を変えれば、フェードインを表現できるで。動画の長さや解像度などはCompositionに設定するで。基本概念・Compositionの仕様

① 入力データ
商品名・色・数値

② Reactのテンプレート
配置＋フレームごとの状態

③ 書き出した動画
内容を確認して配信

独自図解：入力データとレイアウトを分ける制作の流れ。実際の管理画面の転載やないで。

タイトル表示の動き

次のHTMLアニメーションは、この記事のために独自制作した概念説明やで。Remotionの実行画面・実際のレンダリング結果・性能デモやないで。「フレームが進むと、画面の状態が変わる」という考え方をCSSで表現してるで。開くと6秒で1回再生して止まるで。一時停止もできるし、チェックを外してから閉じて開くと、もう一度見られるで。

▶ タイトル表示の動きを再生

一時停止

独自制作の説明用イメージ

サンプル商品

開始：透明文字が現れる終了・静止

動きを減らす設定を使っている環境では静止表示になるで。以下のコード例は、フレーム番号から透明度を計算するため、この説明用CSSとは実装方法が違うで。

今回のゴールと環境

3秒のタイトル動画を作り、文字を差し替えてMP4を書き出す。

確認した範囲：2026年10月24日に公式READMEや導入資料を読み直して、以下の手順を具体化したで。この改訂でアプリのインストールから最終結果までを実機で通したわけやない。成功の目安は、手元で試すときのチェックとして使ってな。

準備

ここではWindows 11 x64とPowerShellで進めるで。スタートで「PowerShell」を検索して開いてな。Node.js公式ダウンロードで24系LTS・Windows・x64のInstaller（.msi）を選び、ダウンロードしたファイルを開いて画面に沿って入れてな。入れ終わったらPowerShellを開き直すんや。

node --version
npm.cmd --version

両方にバージョンが出たら準備OKや。以下ではWindowsのスクリプト実行ポリシーで止まりにくいnpm.cmdとnpx.cmdを使うで。インストール済みなら入れ直す必要はないで。

使い方

New-Item -ItemType Directory -Force "$env:USERPROFILE\github-practice\remotion" | Out-Null
Set-Location "$env:USERPROFILE\github-practice\remotion"

npx.cmd create-video@latest --yes --blank my-video
Set-Location my-video
npm.cmd install

練習プロジェクトができたら、エクスプローラーでmy-videoを開いてな。下にある3つのコードを、順にsrc/TitleCard.tsx、src/Root.tsx、src/index.tsとして保存するで。メモ帳なら「名前を付けて保存」の種類を「すべてのファイル」にして、末尾に.txtが付かへんようにしてな。既存の練習用Rootとindexはコード全体を置き換えるで。

npm.cmd run dev

起動ログのURLでRemotion Studioを開き、TitleCardを選んで再生してな。終了はこのPowerShellでCtrl+Cや。レンダリングはプレビューを止めてから同じmy-videoで行うで。下のprops.jsonもmy-video直下へ保存し、記事のrenderコマンドで文字を差し替えるんや。

成功の目安：プレビューで3秒のタイトルが表示され、out/title.mp4を動画プレーヤーで再生できることや。npxをPowerShellで使って実行ポリシーのエラーが出るときはnpx.cmdへ置き換えてな。

仕組みとデータの流れ

今回の動画はPC内でReactの画面をフレームごとに描き、MP4へまとめる構成や。外部LLMは必要ないで。テンプレートや描画用ブラウザーの取得には通信を使うことがあるで。構成を単純化した独自図解で、製品の画面や実行結果やないで。細かな通信や保存形式は設定で変わる。スマートフォンでは横へスクロールしてな。

トラブルシューティング

困ったこと	確認すること
コンポジションがない	Root.tsxのCompositionとindex.tsのregisterRoot、ファイル名とimportの対応を確認してな。
props.jsonが見つからない	my-video直下に置いたか、props.json.txtになってへんか確認してな。

終了と再開

StudioのサーバーはCtrl+Cで止めるで。次回はmy-videoフォルダーでnpm.cmd run devを実行するんや。動画とプロジェクトのソースは両方残してな。

公式READMEと最新の導入案内も確認してな。配布版や外部サービスの変更で、手順が変わることがあるで。

動画のコードと書き出し

以下はこの記事の説明用に作成した最小例やで。Blankプロジェクト内の該当ファイルを置き換える想定やで。この記事ではこのコードの実機レンダリングはやってへんで。インストールした版に合わせて公式APIを確認してな。

src/TitleCard.tsx：30フレームかけて文字を表示するで。

import {AbsoluteFill, useCurrentFrame} from 'remotion';

export const TitleCard = ({title}: {title: string}) => {
  const frame = useCurrentFrame();
  const opacity = Math.min(1, Math.max(0, frame / 30));
  return (
    <AbsoluteFill style={{
      backgroundColor: '#142844', color: 'white',
      justifyContent: 'center', alignItems: 'center',
      fontSize: 80, padding: 60, textAlign: 'center',
    }}>
      <div style={{opacity}}>{title}</div>
    </AbsoluteFill>
  );
};

src/Root.tsx：1280×720、30fps、90フレーム（3秒）のCompositionを登録するで。

import {Composition} from 'remotion';
import {TitleCard} from './TitleCard';

export const RemotionRoot = () => (
  <Composition
    id="TitleCard"
    component={TitleCard}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
    defaultProps={{title: 'サンプル商品'}}
  />
);

src/index.ts：エントリーポイントやで。既存の登録処理があるときは二重に登録せず、次の内容と合わせてな。

import {registerRoot} from 'remotion';
import {RemotionRoot} from './Root';

registerRoot(RemotionRoot);

StudioでTitleCardを選び、最初は透明で、30フレーム目には文字が見えるか確認してな。次に、プロジェクト直下に次のprops.jsonをUTF-8で作るで。

{"title": "新しいサンプル商品"}

同じフォルダーで次のコマンドを実行すると、入力ファイルを使ってMP4を書き出す手順になるで。Windowsでも引用符の問題を避けやすいよう、JSONをコマンド内に直接記述せず、ファイルで渡してるで。公式renderコマンドと–propsの仕様

npx remotion render src/index.ts TitleCard out/title.mp4 --props=props.json

出力後は動画を再生し、3秒の長さ、フェード、文字の欠け、日本語フォントの表示を確認してな。外部画像やフォントを加えるときは、その素材の権利と実行環境からのアクセス可否も確認してな。

作業のビフォーアフター

定型の商品紹介動画を作る場合の作業比較（想定例）
作業	個別に編集する方法	テンプレートを使う方法
商品名の変更	各編集データの文字を変更	入力JSONのtitleを変更
共通レイアウトの修正	各動画の編集内容をそろえる	共通コンポーネントを修正して再出力
完成後の確認	各動画を視聴して点検	各動画を視聴して点検。長文や欠損データも確認

これは作業設計の比較であり、実測した時間短縮や品質向上を示すものやないで。差し替えの仕組みはParameterized videosに整理されてるで。量産する前に、短い名前・長い名前・空の値などで試し、テンプレートが崩れない範囲を決めると運用しやすくなるで。

ライセンスと運用上の注意

Remotionは独自ライセンスやで。MITやApache-2.0と同じ条件だと考えんといてな。確認時点のLICENSEでは、個人、従業員3人以下の営利組織、非営利組織、商用利用前の評価などにFree Licenseの条件が示され、それ以外にはCompany Licenseが必要とされてるで。派生したRemotion自体の販売・再ライセンスなどには制限もあるで。さらに5.0での変更予告があるため、採用する版と用途についてLICENSE原文と最新の利用条件・料金を確認してな。

また、書き出しには計算資源と時間が必要やで。データの差し替えができても、すべての動画が即座に完成するわけやないで。まず1本を作り、実際の環境で表示と出力を確認したうえで、自動化する範囲を広げるのが始めやすいで。

公式資料

GitHubリポジトリ・README：プロジェクト全体の概要
インストール手順：導入と実行環境
The core idea・useCurrentFrame：フレームと画面の関係
Composition：動画の設定
Parameterized videos・render CLI：データ入力と書き出し
ライセンス原文：利用条件

確認日：2026年10月23日。公式GitHub・README・ドキュメント・LICENSEに基づく紹介やで。図解、説明用HTMLアニメーション、コード例は本記事用に独自制作したで。公式の画像・動画やREADMEの長文転載は使ってへんで。コードの実行結果や性能を検証したレビューやないで。