Remotionで動画編集を自動化できるのか試してみた

2026-03-19
2026-03-22
Frontend
21回
0件

Frontend

こんにちは。GMOグローバルサイン・ホールディングスのCTO室所属、城戸(@sutobu000)です。

今回は、RemotionというReactベースの動画生成フレームワークを使って、社内動画の編集作業を自動化できるのか試してみた話を紹介します。

1 Remotionとは
2 きっかけ
3 やってみたこと
4 ハマったポイント
- 4.1 ディスク枯渇
- 4.2 OOM Kill
5 結果
6 終わりに

Remotionとは

Remotionは、Reactコンポーネントを使って動画を生成するオープンソースのフレームワークです。

通常の動画編集ソフトとの最大の違いは、コードで動画を定義できる点です。テキスト、画像、アニメーション、既存の動画素材まで、すべてReactコンポーネントとして組み合わせられます。

// 動画コンポーネントのイメージ
const MyVideo = ({ videoFile, scoreLabel, subtitles }) => (
  <AbsoluteFill>
    <Video src={staticFile(videoFile)} />
    <ScoreOverlay label={scoreLabel} />
    <SubtitleOverlay subtitles={subtitles} />
  </AbsoluteFill>
);

CSSアニメーションやJavaScriptの計算がそのまま動画の1コマになるので、普段Webの画面を作っているエンジニアにとって非常に直感的です。

レンダリングの仕組み

Remotionが動画を生成する流れは以下のとおりです。

Webpackでプロジェクトをバンドルし、静的なHTMLとして出力する
ヘッドレスChromiumでそのHTMLを開き、フレーム番号を1ずつ進めながらスクリーンショットを撮影する
撮影されたフレーム画像群をFFmpegに渡し、指定のコーデック（H.264等）で動画ファイルに結合する

つまり、Reactコンポーネントが描画する「Webページの見た目」が、そのまま動画の1コマになります。フレームごとにuseCurrentFrame()の返す値が変わるので、その値に応じてUIを変化させれば、アニメーションや字幕の切り替えになるわけです。

CSSやJavaScriptでできることはすべて動画に反映できるため、表現の自由度はかなり高いです。一方で、1フレームごとにChromiumがページをレンダリングする仕組み上、処理は決して軽くはありません。

開発サーバー

npm run dev  # = remotion studio

ブラウザベースのプレビュー環境（Remotion Studio）が起動します。Reactのホットリロードが効くので、コードを変更すると即座にプレビューに反映されます。シークバーやフレーム単位の移動もできるので、動画編集ソフトのタイムラインに近い感覚で確認もできます。

字幕のデザインを試行錯誤しながら調整したい場合には、この開発体験は非常にありがたいです。

Remotionの可能性

Remotionは字幕やオーバーレイのような編集だけでなく、より広い用途での活用が進んでいます。

モーショングラフィックス: CSSアニメーションやReact Springを組み合わせて、コードだけでモーショングラフィックス動画を生成可能。
AIとの連携: テキストや画像生成AIと組み合わせて、プロンプトから動画を自動生成するワークフローも構築可能。Remotionの公式ドキュメントでもAIを使ったモーショングラフィックス生成について紹介されています。
動的コンテンツ: APIからデータを取得して、データドリブンな動画（ダッシュボード動画やレポート動画など）を量産するといった使い方も。

コードベースで動画を定義できるからこそ、プログラマブルな動画制作の可能性が広がりますね。

サンプルも公開しているので、ぜひご参照ください。
https://www.remotion.dev/templates

ライセンスについて

RemotionはHonor System（自己申告制）を採用しています。ライセンス体系は以下のとおりです（2026/03/18現在）。

Free: 個人または従業員数3人以下の企業は無料。商用利用も可能
Remotion for Creators: 月額25ドル/シート。自分用に動画を制作するクリエイター向け
Remotion for Automators: 1レンダリングあたり0.01ドル。動画生成ツールや自動化パイプラインの構築向け
Enterprise: 月額500ドル〜。専用サポートチャンネルや月次コンサルティングが付属

従業員4人以上の営利組織が商用利用する場合は、CreatorsまたはAutomatorsのいずれかのCompany Licenseが必要になります。

きっかけ

では、なぜRemotionを試してみようと思ったのか。

社内サーベイの一環で、インタビュー動画に「スコアのオーバーレイ表示」と「質問字幕の挿入」を行う作業が発生しました。対象は30本以上の動画編集というかなりのボリュームがありました。

1本あたりの作業自体は単純なのですが、手作業だとレンダリング待ちも含めてかなりの時間がかかります。社用PCのスペックもそこまで高くないので、レンダリング中は他の作業も滞ってしまいます。

動画編集の自動化にはいくつか選択肢があります。

Adobe Premiereのスクリプティング（ExtendScript）: 高機能ですが、GUIアプリの起動が前提なのでヘッドレスなバッチ処理には向きません
FFmpegのCLI: drawtextフィルタ等で字幕挿入は可能ですが、複雑なレイアウトやデザインの調整が大変です
Remotion: ReactコンポーネントとCSSでデザインを定義できるので、フロントエンドの知識がそのまま活きます

今回は字幕のデザインを試行錯誤する必要があったので、CSSで柔軟にスタイリングでき、ホットリロードでプレビューしながら調整できるRemotionで解決できないかと検証してみることにしました。

やってみたこと

今回やりたかったことは以下のとおりです。

複数本のインタビュー動画（MP4）に対して一括処理
各動画の冒頭・末尾をカット
スコアと前回比をオーバーレイ表示
インタビュー質問を字幕として表示（タイムコードで切り替え）
出力はMP4形式

全体の設計

字幕ファイルから動画出力までのデータの流れは以下のようになっています。

字幕Markdown (.md)
  │ parse
  ▼
ParsedSubtitle (秒単位)
  │ frame変換
  ▼
InterviewProps (フレーム単位)
  │ props
  ▼
Reactコンポーネント
  │ Chromiumでレンダリング
  ▼
フレーム画像群
  │ FFmpegで結合
  ▼
MP4

設計で意識したのは、動画素材と台本さえあれば、エンジニアでなくても字幕動画を作れるようにすることです。Remotionの内部ではフレーム番号で管理しますが、字幕ファイルは「00:40」のような秒単位のタイムコードとMarkdownで記述するフォーマットにしました。フレーム番号やfpsを意識する必要がないので、動画編集の経験がない人でも台本を書くだけで字幕動画の入力データを用意できます。

字幕の内容やタイムコードはMarkdownファイルで管理し、1動画につき1ファイルを用意しました。

00:06までカット

---
スコア：-25.0 前回比：+25.0

---
00:40
① チームの状態が改善した一番の要因は？

---
03:30
② メンバーが感じている課題はどこにあると思いますか？

---
05:45
③ さらに良くするために、次に取り組みたいことは？

---
08:04からカット

---（区切り線）でセクションを区切り、パーサーで秒数に変換した後、さらにフレーム番号に変換してReactコンポーネントに渡します。動画を観ながらタイムコードと質問テキストを書くだけなので、非エンジニアでも作成できるフォーマットになっています。

このMarkdownからフレーム番号への変換をコード側で自動化しているため、たとえばカット位置を1秒ずらしても全字幕のタイミングが自動的に整合します。手作業では全字幕を修正し直す必要がありますが、コードならその心配がありません。

コンポーネントの実装

動画のメインコンポーネントはシンプルです。Remotion提供の<AbsoluteFill>に<Video>と字幕オーバーレイを重ねるだけで、動画の上に字幕レイヤーが乗ります。

export const InterviewVideo: React.FC<InterviewProps> = ({
  videoFile, enpsLabel, subtitles, cutStartFrame,
}) => {
  return (
    <AbsoluteFill>
      <Video src={staticFile(videoFile)} startFrom={cutStartFrame} />
      <SubtitleOverlay enpsLabel={enpsLabel} subtitles={subtitles} />
    </AbsoluteFill>
  );
};

字幕オーバーレイでは、useCurrentFrame()で現在のフレーム番号を取得し、該当する字幕を検索して表示しています。interpolate()で10フレーム（約0.3秒）かけてフェードインさせるアニメーションも、CSSの感覚で実装できました。

const frame = useCurrentFrame();

const currentSubtitle = subtitles.findLast(
  (s) => frame >= s.startFrame
);

const opacity = currentSubtitle
  ? interpolate(
      frame - currentSubtitle.startFrame,
      [0, 10], [0, 1],
      { extrapolateRight: "clamp" }
    )
  : 0;

Reactでフロントエンドを書いている感覚で動画が作れるのは、想像以上に快適でした。

バッチレンダリング

Node.jsスクリプトから@remotion/rendererのrenderMedia() APIを呼び出して、動画ごとにレンダリングを実行しています。バッチスクリプトにはスキップ機能（出力済みファイルがあればスキップ）や並列数制御も持たせました。

ハマったポイント

スムーズにいったわけではなく、大きく2つのハマりポイントがありました。

ディスク枯渇

Remotionはbundle()実行時にpublic/ディレクトリをまるごと一時ディレクトリにコピーする仕様があります。普段使用する動画のほとんどが4K動画なので、1本数GBになるためバンドルのたびにディスクが埋まりました。

ハードリンクやシンボリックリンクなど3回の試行錯誤を経て、最終的に「バンドル後にpublicディレクトリをシンボリックリンクに差し替える」方法で解決しました。

OOM Kill

ヘッドレスChromiumの並列レンダリングでメモリが逼迫し、プロセスが無言で終了する問題にも遭遇しました。

並列数を下げることに加えて、「クラッシュしても続きから自動再開するシェルループ」で対処しています。先に実装しておいたスキップ機能がここで活きました。

until npm run render:all -- --concurrency=1; do
  echo "Crashed, restarting in 10s..."
  rm -rf $(getconf DARWIN_USER_TEMP_DIR)remotion-*
  sleep 10
done

結果

検証環境はMacBook Pro (2021) / Apple M1 Max / 32GB RAM / 1TB SSDです。
1本あたり8分前後・4Kの動画を30本ほど処理してみました。

合計所要時間: 約14時間45分
1本あたり平均: 約30分
クラッシュ回数: 9回（すべて自動復旧）

スクリプトを実行して放置するだけで、翌朝には全件完了していました。途中で9回クラッシュしましたが、自動再起動とスキップ機能のおかげで手動での監視は不要でした。

終わりに

Remotionは「Reactが書けるなら動画も作れる」という体験を提供してくれるフレームワークでした。

今回の検証を通じて、字幕の挿入やオーバーレイ表示のような定型的な動画編集であれば、コードで十分に対応できることがわかりました。CSSでデザインを調整し、ホットリロードでプレビューしながら開発できる体験は、GUIの動画編集ソフトにはない快適さがあります。
実際の業務効率化に大きく貢献すると思いますので、この検証により導入の検討を前向きに進められそうです。

また、コードベースであるがゆえにAIとの相性も良く、今回の実装はほぼAIに任せることができました。Remotion自体もAIによるモーショングラフィックス生成に対応するなど、コードベースの動画制作の可能性はまだまだ広がりそうです。

最後までお読みいただきありがとうございました。

前の記事

2026-03-17
EUDIW ARFのアップデートを追ってみる(v2.4〜v2.6)
次の記事

記事がありません