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

RemotionとVercelで動画生成APIをデプロイ

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

アーキテクチャの概要

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

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

あなたの「作りたい」を叶えるAdobeの動画ツール

初心者からプロまで。目的に合わせて最適な制作方法が見つかります

1まずは無料で始めるなら Adobe Express

豊富なテンプレートとAI機能で、誰でも簡単に見栄えの良い動画が作れます。SNS投稿やショート動画の作成に最適。ブラウザやスマホアプリですぐに始められます。

2プロ品質を求めるなら テンプレート活用

「こんな動画が作りたい」というイメージに合うテンプレートを選ぶだけ。テキストや映像を差し替えるだけで、プロが作ったような動画が驚くほど手軽に完成します。

3本格的な編集に挑戦するなら Creative Cloud

テンプレートのカスタマイズや、ゼロからオリジナリティを追求するならプロ用ツールが最適。2つの代表的なアプリで、表現の幅は無限大に広がります。

  • Premiere Pro: カット編集、テロップ、色調整など、動画編集の全てをこなす万能ツール。
  • After Effects: VFXやモーショングラフィックスなど、映像をリッチに彩る特殊効果ツール。

これらを含む20以上のアプリが全て使えるコンプリートプランがおすすめです。

あなたの「作りたい」を叶えるAdobeの動画ツール

1無料で手軽に始める

豊富なテンプレートとAI機能で、SNS投稿やショート動画の作成に最適です。

Adobe Expressを試す

2プロ品質の本格編集へ

Premiere ProやAfter Effectsで、テンプレート活用から本格的な映像制作まで挑戦できます。

3か月半額で始める

セットアップ手順

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」として提供するビジネスモデルは、日本ではまだほとんど競合がいない。

あなたの「作りたい」を叶えるAdobeの動画ツール

初心者からプロまで。目的に合わせて最適な制作方法が見つかります

1まずは無料で始めるなら Adobe Express

豊富なテンプレートとAI機能で、誰でも簡単に見栄えの良い動画が作れます。SNS投稿やショート動画の作成に最適。ブラウザやスマホアプリですぐに始められます。

2プロ品質を求めるなら テンプレート活用

「こんな動画が作りたい」というイメージに合うテンプレートを選ぶだけ。テキストや映像を差し替えるだけで、プロが作ったような動画が驚くほど手軽に完成します。

3本格的な編集に挑戦するなら Creative Cloud

テンプレートのカスタマイズや、ゼロからオリジナリティを追求するならプロ用ツールが最適。2つの代表的なアプリで、表現の幅は無限大に広がります。

  • Premiere Pro: カット編集、テロップ、色調整など、動画編集の全てをこなす万能ツール。
  • After Effects: VFXやモーショングラフィックスなど、映像をリッチに彩る特殊効果ツール。

これらを含む20以上のアプリが全て使えるコンプリートプランがおすすめです。

あなたの「作りたい」を叶えるAdobeの動画ツール

1無料で手軽に始める

豊富なテンプレートとAI機能で、SNS投稿やショート動画の作成に最適です。

Adobe Expressを試す

2プロ品質の本格編集へ

Premiere ProやAfter Effectsで、テンプレート活用から本格的な映像制作まで挑戦できます。

3か月半額で始める
タイトルとURLをコピーしました