Remotion でマーケティング動画を自動化する
Remotion でマーケティング動画を自動化する — SNS向け量産ワークフロー完全解説
SNS動画のニーズは増える一方だが、制作リソースはそのペースについていけていない。
Sprout Socialの2026年調査によると、91%の企業がすでに動画をマーケティングツールとして使っており、消費者の66%が「短尺動画が最も魅力的なコンテンツ形式だ」と回答している。ショート動画への広告出稿額は2026年に1兆ドル規模に達する見通しだ。
一方で、担当者の現実はどうか。商品紹介動画を1本仕上げるために、デザイナーへの依頼、素材の準備、確認と修正、書き出しという工程を毎回繰り返している。10本なら乗り切れるかもしれないが、100本、500本となった時点で手作業ワークフローは破綻する。
この記事では、Remotion を使ったマーケティング動画の自動化について、実際のユースケースとワークフローを中心に解説する。Remotion の基礎知識がある方も、これから検討する方も、実務に直結する内容になっているはずだ。
Remotion とは何か、なぜマーケティングと相性がいいのか
Remotion は React ベースのプログラマティック動画フレームワークだ。「動画をコードで書く」と聞くと技術的な話に聞こえるが、マーケターの観点から言い換えると「動画テンプレートにデータを流し込んで自動で書き出せる仕組み」だ。
通常の動画制作ソフトではテキストや画像を手動で差し替えるが、Remotion では商品名・価格・画像URLといった変数を外部データ（スプレッドシートやJSONなど）から自動で読み込んで、一括レンダリングできる。
主な特徴を整理すると：
- コンポーネント再利用: 一度作ったテンプレートを何十・何百本の動画に使い回せる
- データドリブン: 変数はすべて外部から注入できるため、内容変更にコードの修正が不要
- 並列レンダリング:
@remotion/lambdaを使えば AWS Lambda で並列処理が可能。100本の動画でも数分で完成する - 出力形式の柔軟性: MP4（H.264）、WebM、GIF、ProRes など複数形式に対応
ユースケース1：スプレッドシートから商品紹介動画を量産する
EC事業者や小売業のマーケティング担当者にとって、最も即効性が高いのがこのユースケースだ。
仕組みはシンプルで、Google スプレッドシートに 商品名 / 価格 / 画像URL / キャッチコピー / ブランドカラー などの列を用意する。Node.js スクリプトがそのシートを読み込み、各行を Remotion のコンポーネントに Props として渡しながら renderMedia() を呼び出す。各行が1本の動画になる。
データ行（スプレッドシート）
↓
Props オブジェクトに変換
↓
Remotion テンプレートへ注入
↓
MP4 ファイルとして書き出し
このワークフローで何が変わるか。200商品のリールを用意したいとき、これまでは外部クリエイターへの依頼や手作業の繰り返しが必要だった。Remotion を使えば、スプレッドシートを更新してスクリプトを実行するだけで200本が書き出される。
季節セールの対応も劇的に変わる。「夏セール」を「冬のクリアランス」に変更する場合、データを1行直すだけで全商品の動画が更新される。
ユースケース2：見込み客向けパーソナライズ動画を大量生成する
「相手の会社名や課題を動画に入れると反応率が上がる」という知見は以前からあるが、実装コストが高くて断念したチームは多い。
Remotion では、パーソナライズも単なる変数注入に過ぎない。CRM から見込み客リストを取得し、各レコードを Props に変換してレンダリングすれば、1,000社向けに個別の動画を1日で作れる。動画の中に企業名・業種・担当者名を入れることも、静止画を業界別に切り替えることも、Props で制御できる。
B2B のアウトバウンドマーケティングでこのアプローチを取ると、反応率の向上が期待できる理由は明確だ。受け取った相手は「自分に向けて作られた動画」として受け取り、テンプレートメールとは異なる注意を払う。
ユースケース3：クリエイティブの A/B テストをプログラムで回す
動画クリエイティブの A/B テストを「やるべきだとは分かっているが実践していない」と答えるマーケターは多い。理由は単純で、バリアントを増やすたびに制作コストが比例して増えるからだ。
Remotion では、A/B バリアントもデータとして定義できる。
[
{ "ctaColor": "#E74C3C", "headline": "今すぐ試す", "openWith": "text" },
{ "ctaColor": "#2980B9", "headline": "今すぐ試す", "openWith": "text" },
{ "ctaColor": "#E74C3C", "headline": "無料で始める", "openWith": "image" },
{ "ctaColor": "#2980B9", "headline": "無料で始める", "openWith": "image" }
]
このようなバリアント配列をスクリプトに渡せば、4本のバリアント動画が一括で書き出される。後は広告プラットフォームの最適化アルゴリズムに任せるだけだ。
「どのバリアントをテストするか直感で選ぶ」から「全組み合わせを網羅してアルゴリズムに発見させる」への転換は、マーケティングの改善速度を大きく変える。
実際のパイプライン：データ → コンポーネント → レンダリング → 公開
自動化の全体フローを整理すると次の4ステップになる。
ステップ1：データソースの準備 変数が入るのはどこでも構わない。Google スプレッドシート、Airtable、PostgreSQL、CMS の API レスポンス、あるいはリポジトリ内の JSON ファイルでもよい。重要なのは、Remotion に渡す Props の形に正規化できることだ。
ステップ2：Remotion コンポーネント（テンプレート） Props を受け取り、各フレームで正しい表示を返す React コンポーネント。アニメーションのタイミング、タイポグラフィ、レイアウト、カラーリングといったデザインロジックはここに集約される。同じ Props を渡せば必ず同じ動画が生成されるという決定性がポイントだ。
ステップ3：レンダリング
Node.js スクリプト（または CI/CD パイプラインのステップ）がデータを読み込み、renderMedia() または renderMediaOnLambda() を呼び出す。ローカルレンダリングは開発・確認用、本番の量産は Lambda で並列処理するのが一般的な構成だ。
ステップ4：公開・配信 完成した動画ファイルを S3 バケットに格納し、SNS スケジューリングツールの API を通じて投稿予約する。Buffer や Later などの主要ツールは動画ファイルのアップロードと投稿予約を API で操作できる。Slack Webhook で「レンダリング完了・レビュー待ち」を通知する仕組みを加えれば、承認フローも自動化できる。
SNS プラットフォームへの対応：アスペクト比の自動切り替え
Instagram リール（9:16）、Instagram フィード（1:1）、YouTube Shorts（9:16）、Twitter/X の横型動画（16:9）——プラットフォームによって要求されるアスペクト比は異なる。
Remotion テンプレートをアスペクト比をパラメータとして受け取るよう設計しておけば、1回のレンダリング実行で複数サイズを一括書き出しできる。同じコンテンツを4サイズで書き出すスクリプトのコアは次のようになる：
const aspectRatios = [
{ id: "reels", width: 1080, height: 1920 },
{ id: "feed", width: 1080, height: 1080 },
{ id: "yt", width: 1920, height: 1080 },
];
for (const ratio of aspectRatios) {
for (const product of products) {
await renderMedia({ props: { ...product, ...ratio }, outputLocation: `out/${product.id}-${ratio.id}.mp4` });
}
}
このアプローチにより、1商品あたり3サイズ × 200商品 = 600ファイルをスクリプト1本で処理できる。
どんなチームがこのアプローチを取っているか
特定の企業名を挙げるのは適切でないが、どういったチームがこのアプローチを採用しているかは類型化できる。
- EC・通販: 新着商品の紹介リールを週次で自動生成。商品データが追加されれば動画も自動生成される
- SaaS マーケティング: リリースノートから製品アップデート動画を自動生成し、アップデートのたびに SNS へ投稿
- 不動産・住宅: 物件データから物件紹介動画を自動生成し、新規掲載から数分以内に YouTube へアップロード
- デジタル広告代理店: 1キャンペーンあたり数百本のバリアントを納品。手作業制作では不可能なボリューム
- データジャーナリズム・メディア: データが更新されるたびに「データストーリー動画」を自動生成して SNS に投稿
いずれのケースも、テンプレートを1回だけ丁寧に作ることで、その後の制作コストがほぼゼロになっている。
導入に必要なもの
Remotion を使ったマーケティング動画パイプラインを構築するために必要なものは2つだ。
1. Remotion の実装知識 React コンポーネントと Props の理解が前提になる。Remotion のコアとなる考え方——「フレーム番号を受け取り、そのフレームの表示状態を返すコンポーネント」——は、React 経験者なら1〜2日で理解できる。Lambda を使った並列レンダリングには AWS の IAM ポリシー設定が必要だが、公式ドキュメントに詳細な手順がある。
2. 制作クオリティの高いテンプレート ここが多くのチームで詰まるポイントだ。Remotion テンプレートをゼロから制作するには、デザインセンス・アニメーション設計・React の実装力が同時に必要になる。コンポーネント構造、タイミング曲線、フォント処理、レスポンシブレイアウトすべてを正しく設計しないと、量産した動画がプロフェッショナルな品質にならない。
RenderComp は、このギャップを埋めるためのサービスだ。マーケティング向けユースケース——SNSアナウンス、商品紹介、データビジュアライゼーションなど——に特化した制作済み Remotion テンプレートを提供している。ブランドデータを Props として渡すだけですぐにレンダリングを開始できる。
よくある質問
Q: Remotion を使うのに React の知識は必須ですか？ はい。Remotion は React フレームワークです。JSX・Props・コンポーネントの基礎知識は前提になります。TypeScript が書けると型安全な Props 定義ができますが、JavaScript でも動作します。
Q: レンダリング速度はどのくらいですか？
ローカル環境では 1080p・30秒の動画を1〜3分程度でレンダリングできます（マシンスペックによる）。@remotion/lambda を使った並列処理では、Lambda 関数が動画のセグメントを同時にレンダリングするため、100本の動画でも10本とほぼ同じ時間で完成することがあります。
Q: 商用利用にはライセンスが必要ですか？ Remotion のソースコードは公開されていますが、4名以上の企業での商用利用には有料ライセンスが必要です。最新のライセンス条件は Remotion 公式サイトで確認してください。
Q: MP4 以外の形式でも書き出せますか？ はい。H.264（MP4）、H.265、VP8/VP9（WebM）、GIF、ProRes に対応しています。メールマーケティングには GIF、Web 埋め込みで透過が必要な場合は WebM が適しています。
Q: AI 生成の画像やテキストをテンプレートに使えますか？ 使えます。Props には任意のデータを渡せるため、画像生成 AI や言語モデルの出力をレンダリング前に Props として組み込むことが可能です。「プロンプトを入力して動画が出てくる」パイプラインもこの延長線上で実現できます。
Q: フォントやブランドアセットはどう扱いますか？ フォントは外部 CDN から読み込まず、ローカルにバンドルしてください。オフライン環境でも一貫したレンダリング品質を保つためです。ロゴや SVG アイコンは React コンポーネントとして import するか、相対パスで参照する静的アセットとして管理するのが標準的なやり方です。
Q: バッチレンダリング中に1本が失敗した場合はどうなりますか？
renderMediaOnLambda() は各レンダリングジョブに renderId を返します。getRenderProgress() でステータスを監視し、失敗した renderId をリトライキューに積む処理をスクリプトに組み込んでおくと安全です。
RenderComp でテンプレートから始める
Remotion の知識は手元にある、あとはプロ品質のテンプレートが必要——そういったチームには、RenderComp の SNS 動画テンプレート が出発点になる。
1本1本を手作業で仕上げるのをやめて、パイプラインを1回だけ構築する。それだけで、制作のスループットが桁違いに変わる。