Remotion × Vercel：動画生成APIをサーバーレスでデプロイする方法

Remotionの真価は「ローカルで動画をレンダリングする」ことではなく、「APIとして外部からリクエストを受けて動画を生成する」ことにある。Vercelにデプロイした動画生成APIに対してPOSTリクエストを送るだけで、カスタマイズされた動画が返ってくる——この体験は動画制作の常識を塗り替える。

アーキテクチャの概要
セットアップ手順
実際の使用例：動的な証明書・レポート動画
コスト感
まとめ
あわせて読みたい

アーキテクチャの概要

クライアント → Vercel Edge Functions → Remotion Lambda (AWS) → 動画ファイル → S3
                    ↑                         ↑
               認証・バリデーション         レンダリング並列処理

Vercelは「リクエストの受け口」として使い、実際のレンダリングはRemotionのLambda機能（AWSのLambda）で行う。VercelだけでRemotionのレンダリングを実行しようとするとタイムアウトするため、この2段構成が必要になる。

セットアップ手順

Step 1：Remotionプロジェクトの準備

npm create video@latest
cd my-video
npm install @remotion/lambda

Step 2：Remotion Lambda のデプロイ

# AWS認証情報を設定後
npx remotion lambda functions deploy
npx remotion lambda sites create --site-name=my-video-site

Step 3：Vercel API Routeの作成

// app/api/render/route.ts
import { renderMediaOnLambda, getRenderProgress } from '@remotion/lambda/client';
import { NextRequest, NextResponse } from 'next/server';

export async function POST(req: NextRequest) {
  const body = await req.json();
  const { data } = body;

  const { renderId, bucketName } = await renderMediaOnLambda({
    region: 'ap-northeast-1',
    functionName: process.env.REMOTION_LAMBDA_FUNCTION_NAME!,
    serveUrl: process.env.REMOTION_SERVE_URL!,
    composition: 'MyVideo',
    inputProps: data,
    codec: 'h264',
    imageFormat: 'jpeg',
  });

  return NextResponse.json({ renderId, bucketName });
}

実際の使用例：動的な証明書・レポート動画

実務でこのAPIを使っているケースの1つが「参加証明書動画」の自動生成だ。セミナーや研修の参加者データ（名前・日時・内容）をCSVでアップロードすると、全員分の証明書動画が自動生成されてダウンロードURLが返ってくる。

ReactとRemotionの知識があれば2〜3日で構築できるシステムだ。AfterEffectsでテンプレートを作り、Remotionに移植する手順を踏むと、デザインクオリティを維持しながらAPIとして提供できる。

コスト感

Vercel：無料プランで月100GB転送まで対応
Remotion Lambda：レンダリング時間で課金（1分の動画×100本 = 約$2〜3程度）
S3：ストレージ料金（東京リージョン：$0.025/GB/月）

月数十本の動画生成なら月額数ドル〜数十ドルで運用できる。

まとめ

Remotion × Vercelの構成は「動画をサービスとして提供する」インフラだ。動画制作のスキルとReactのスキルを持ち合わせているクリエイターにとって、これは新しい収益源になりうる。定期的な動画生成が必要な企業向けに「動画生成SaaS」として提供するビジネスモデルは、日本ではまだほとんど競合がいない。