
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の動画ツール
セットアップ手順
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以上のアプリが全て使えるコンプリートプランがおすすめです。



