RemotionでInstagram ReelsとTikTok動画を自動生成する——1日100本のバッチレンダリング実践ガイド
RemotionでInstagram ReelsとTikTok動画を自動生成する——1日100本のバッチレンダリング実践ガイド
ショートフォーム動画が、現在のデジタルマーケティングにおいて最も強力なオーガニック配信チャネルになって久しい。Instagram Reelsは静止画投稿よりもリーチが大きく、TikTokのアルゴリズムは品質だけでなく投稿量も評価する。つまり、関連性の高いコンテンツを多く継続して発信したチームが、より多くのインプレッションを獲得できる構造になっている。
とはいえ、マーケティングチームの現場では、「制作のボトルネック」が慢性的な課題だ。一本一本の動画をタイムラインで編集し、テキストを打ち込み、書き出す作業は時間を食う。50種類の商品ショーケース動画が必要なら、50回の編集作業が発生する。
Remotion——ReactコンポーネントとしてビデオをコードXで記述するフレームワーク——は、このボトルネックをアーキテクチャの次元から解決する。動画を「関数」として扱い、入力データ（商品名、価格、画像URL、CTAテキスト）を与えれば出力が決まる構造にすることで、データが変わるだけで別の動画が生成できる。本記事では、縦型9:16フォーマットの設定から、フック重視の視覚設計、アニメーションキャプション、トレンドのモーションスタイル、そして@remotion/lambdaを用いた1日100本規模のバッチレンダリングまでを体系的に解説する。
なぜRemotionが縦型動画制作に向いているのか
従来の動画編集ソフトでは、すべてのエクスポートが手作業になる。テンプレートを使っても、商品カタログから50本のReelsを作るには50回のドラッグ・テキスト入力・書き出しが必要だ。Remotionはその方程式を変える。
Remotionで縦型動画制作に特に有効なのは次の4点だ。
カタログ駆動の制作 — スプレッドシートやJSONデータの行数だけ動画を自動生成できる。商品が100種類あれば100本の動画が一晩で揃う。
ブランドの一貫性 — すべての動画が同一のモーションタイミングとタイポグラフィを使用するため、人的ミスによるブランドのばらつきが起きない。
A/Bバリアントの即時生成 — カラー変数やCTAテキストを変えて再レンダリングするだけで、複数バリアントを秒単位で用意できる。
パブリッシング APIとの直結 — レンダリングされたMP4ファイルをBuffer、Later、またはMeta/TikTok APIと連携させて、配信まで自動化できる。
9:16コンポジションのセットアップ
Instagram ReelsとTikTokはどちらも1080×1920の縦型フォーマットを使用し、フレームレートは30fpsが標準だ。<Composition>の定義が最初の重要なステップになる。
// src/Root.tsx
import { Composition } from "remotion";
import { ReelTemplate } from "./ReelTemplate";
export const RemotionRoot: React.FC = () => {
return (
<>
<Composition
id="InstagramReel"
component={ReelTemplate}
width={1080}
height={1920}
fps={30}
durationInFrames={450} // 15秒
defaultProps={{
productName: "サンプル商品",
productImage: "https://example.com/product.jpg",
price: "¥4,980",
ctaText: "今すぐ購入",
accentColor: "#FF5733",
}}
/>
</>
);
};
TikTokとInstagramでコンポジション設定は同一だが、セーフゾーンの設計が異なる。TikTokのアクションバー（いいね・コメント・シェアボタン）は画面右側約15%と下部200pxを占有する。InstagramのUIは下部約300px。両プラットフォームを安全にカバーするには、重要なテキストと主被写体を中央の900×1500pxエリアに収め、CTAを1650pxより上に配置することを推奨する。
尺の設計指針：
- 7〜15秒：商品紹介・プロモーション告知に最適
- 15〜30秒：チュートリアル・ビフォーアフター・機能解説
durationInFramesは常に「fps × 秒数」で計算する（例：30fps×10秒 = 300フレーム）
フック重視の視覚設計——最初の3秒が勝負
両プラットフォームの主要ランキングシグナルは視聴継続率だ。最初の3秒（90フレーム）でユーザーが離脱すると、そのコンテンツはほぼ配信されなくなる。Remotionのコンポジション設計では、フレーム0〜90を「フックゾーン」として特別に設計することが重要だ。
パターン1：アテンション・インタラプト フィードの他の投稿と明らかに異なる、鮮やかな単色背景＋中央に大きなテキストで開始する。スクロールの流れを一瞬止める効果がある。
const hookOpacity = interpolate(frame, [0, 5], [0, 1], {
extrapolateLeft: "clamp",
extrapolateRight: "clamp",
});
<AbsoluteFill style={{ backgroundColor: accentColor, opacity: hookOpacity }}>
<div style={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
fontSize: 120,
fontWeight: 900,
color: "#FFFFFF",
fontFamily: '"Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif',
textAlign: "center",
lineHeight: 1.1,
}}>
{hookText}
</div>
</AbsoluteFill>
パターン2：ポップイン・タイトル スプリングアニメーションでフレーム12までにタイトルが最大サイズに達する手法。スケール感があり、目を引く。
import { spring, useCurrentFrame, useVideoConfig } from "remotion";
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const scale = spring({
frame,
fps,
config: { damping: 14, stiffness: 200, mass: 0.8 },
from: 0,
to: 1,
});
パターン3：数値カウンターフック 実績数値や価格を0から急速にカウントアップして表示する。大きな数値の動きはスクロールを止める力が非常に強い。
アニメーションキャプションとテキストポップイン
音声なしで視聴するユーザーが大半を占めるショートフォーム動画において、キャプション表示は必須だ。Remotionではキャプションはファーストクラスのコンポーネントとして扱われる。
単語単位のキャプションシステム
interface CaptionProps {
words: Array<{ text: string; startFrame: number; endFrame: number }>;
}
const AnimatedCaption: React.FC<CaptionProps> = ({ words }) => {
const frame = useCurrentFrame();
return (
<div style={{
position: "absolute",
bottom: 400,
left: 60,
right: 60,
textAlign: "center",
}}>
{words.map((word, i) => {
const isActive = frame >= word.startFrame && frame <= word.endFrame;
const scale = isActive
? spring({ frame: frame - word.startFrame, fps: 30,
config: { damping: 12, stiffness: 300 }, from: 0.8, to: 1 })
: 1;
return (
<span
key={i}
style={{
display: "inline-block",
fontSize: 68,
fontWeight: 800,
color: isActive ? "#FFFF00" : "#FFFFFF",
textShadow: "0 4px 12px rgba(0,0,0,0.6)",
margin: "0 8px",
transform: `scale(${scale})`,
fontFamily: '"Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif',
}}
>
{word.text}
</span>
);
})}
</div>
);
};
キャプションタイミングの自動生成
バッチ生成では、手動でタイミングを設定することは現実的でない。テキストを単語に分割し、フレーム数を均等配分するユーティリティ関数を用意する。
function buildCaptionWords(
text: string,
startFrame: number,
endFrame: number
): Array<{ text: string; startFrame: number; endFrame: number }> {
const words = text.split(/\s+/);
const framesPerWord = Math.floor((endFrame - startFrame) / words.length);
return words.map((word, i) => ({
text: word,
startFrame: startFrame + i * framesPerWord,
endFrame: startFrame + (i + 1) * framesPerWord - 1,
}));
}
ナレーション音声がある場合は、Remotion 4.x以降で使用可能な@remotion/captionsパッケージを活用すると、SRT/VTTファイルから音声タイムスタンプに同期したキャプションを自動生成できる。
トレンドビジュアルスタイルをReactで再現する
ショートフォームプラットフォームのビジュアルトレンドは変化が速いが、いくつかのスタイルは普遍的な訴求力を持っており、自動化テンプレートとして安定して使える。
スタイル1：グラデーションテキストのワイプ表示
const wipe = interpolate(frame, [20, 60], [0, 100], {
extrapolateLeft: "clamp",
extrapolateRight: "clamp",
});
<div style={{
background: "linear-gradient(135deg, #FF6B6B, #4ECDC4, #45B7D1)",
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
clipPath: `inset(0 ${100 - wipe}% 0 0)`,
fontSize: 96,
fontWeight: 900,
fontFamily: '"Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif',
}}>
{headlineText}
</div>
スタイル2：スタッガードカードスタック
3〜5枚の商品メリットカードが8フレームずつずれて順番に飛び込んでくるアニメーション。動きにリズムが生まれ、視聴継続率が向上する。
const cards = benefits.map((benefit, i) => {
const delay = i * 8;
const y = interpolate(frame - delay, [0, 20], [200, 0], {
extrapolateLeft: "clamp",
extrapolateRight: "clamp",
easing: Easing.out(Easing.cubic),
});
const opacity = interpolate(frame - delay, [0, 15], [0, 1], {
extrapolateLeft: "clamp",
extrapolateRight: "clamp",
});
return { ...benefit, y, opacity };
});
スタイル3：キネティック商品ズームリビール
商品画像を120%から100%にゆっくりスケールダウンしながら、テキストラベルをフェードインさせる。過度な動きがなく洗練された印象を与える。
const scale = interpolate(frame, [0, 60], [1.2, 1.0], {
extrapolateLeft: "clamp",
extrapolateRight: "clamp",
easing: Easing.out(Easing.quad),
});
@remotion/lambdaによるバッチレンダリング
ローカルでテンプレートが完成したら、@remotion/lambdaを使って大規模なバッチレンダリングに移行する。AWS Lambda上で各動画を並列レンダリングするため、15秒のReels1本あたり20〜35秒の実時間で完成する。
セットアップ
npm i @remotion/lambda
npx remotion lambda policies validate
npx remotion lambda sites create --site-name=reel-factory
データソースからバッチレンダリングをトリガーする
import { renderMediaOnLambda } from "@remotion/lambda/client";
interface ProductRow {
productName: string;
price: string;
imageUrl: string;
ctaText: string;
}
async function renderBatch(products: ProductRow[]) {
const renders = await Promise.all(
products.map((product) =>
renderMediaOnLambda({
region: "ap-northeast-1",
functionName: "remotion-render-4-0-0-mem2048mb-disk2048mb-240sec",
serveUrl: process.env.REMOTION_SERVE_URL!,
composition: "InstagramReel",
inputProps: {
productName: product.productName,
price: product.price,
productImage: product.imageUrl,
ctaText: product.ctaText,
},
codec: "h264",
outName: `reel-${Date.now()}-${product.productName}.mp4`,
})
)
);
return renders.map((r) => r.renderId);
}
スループットの実績値： Lambdaのデフォルト同時実行上限は1,000（AWSアカウント・リージョン単位）。50件を並行処理すれば、100本のバッチが2〜4分で完了する。
マーケティングチームの実用ワークフロー
エンジニアなしで日常運用できるエンドツーエンドのワークフロー例を示す。
ステップ1：コンテンツスプレッドシートを単一のソースとして管理
Google SheetまたはAirtableにproductName、price、imageUrl、ctaText、publishDate、platformなどの列を設ける。
ステップ2：自動フェッチとレンダリングトリガー
GitHub Actions、n8n、またはcronジョブで定期実行するNode.jsスクリプトが新規行を読み取り、renderMediaOnLambdaを呼び出し、出力S3 URLをシートに書き戻す。
ステップ3：レビューキュー S3 URLを一覧表示し、承認/却下ボタンを備えた軽量な社内ツールで、担当者が動画を確認する。
ステップ4：スケジュール配信 承認済みの動画を、Meta Graph APIまたはTikTok for Developers APIを呼び出す配信ツールにキューイングし、予定時刻に自動投稿する。
このパイプラインにより、「商品データがある」から「TikTokに動画が公開される」までの工程から、コンテンツ戦略と最終レビュー以外のすべての手作業が排除される。
RenderComp：すぐに使えるReelsテンプレートライブラリ
縦型動画テンプレートをゼロから作り、セーフゾーンを調整し、スプリングカーブを磨き、様々な文字量に対応するキャプションシステムを整備するには、数日間の試行錯誤が必要だ。
RenderCompは、Instagram ReelsとTikTok向けに設計された本番品質のRemotionテンプレートライブラリだ。1080×1920の縦型コンポジション、フック重視のオープニングシーケンス、@remotion/captions対応のキャプションコンポーネント、Lambda対応の書き出しスクリプトまでをすぐ使える状態で提供する。
テンプレートはすべてTypeScript完全型付き、プロップスの設計ドキュメント付き、サンプルの一括レンダリングスクリプト付き。データを流し込み、ブランドカラーを設定すれば、当日から本番レンダリングが始められる。詳細は rendercomp.com へ。
FAQ
Q: Instagram ReelsとTikTokでは技術的な仕様が異なりますか？ A: どちらもH.264エンコードのMP4（1080×1920、AACオーディオ）を受け付けます。主な実用的な違いはセーフゾーンです。TikTokのアクションボタンは画面右側と下部に配置され、InstagramのUIは主に下部にあります。重要なコンテンツは中央の900×1500pxエリアに収めることで両プラットフォームに対応できます。
Q: Remotionで生成したReelsにナレーション音声を追加できますか？
A: 可能です。<Audio>コンポーネントはsrcプロップでMP3・AAC・WAVファイルを受け付けます。startFromとendAtでトリミングも可能で、レンダリング時に映像と自動でミックスされます。
Q: 商品画像が正方形（1:1）の場合、縦型フレームにどう配置しますか？
A: <Img>コンポーネントにobjectFit: "cover"とobjectPosition: "center"を指定して中央クロップします。または、同じ画像をぼかして全画面背景に使い、その前面に正方形画像をコンテナに収める「ダブルレイヤー」構成も効果的です。
Q: AWSのLambdaコストはどれくらいかかりますか？ A: 15秒の1080×1920 Reelsで、3,008 MB Lambdaを30秒使用した場合、1本あたり約5〜12円程度です。1日100本で500〜1,200円のLambdaコストに加え、S3ストレージとデータ転送費用がかかります。
Q: ブランドカラーとフォントを全動画で統一するには？
A: src/brand.tsなどのTypeScriptファイルにブランドトークン（カラーコード、フォントスタック）を定義し、コンポジションにインポートします。動画ごとに変わるデータ（商品名・画像・価格）のみをinputPropsで渡し、ブランド情報は一切可変プロップスにしないことが鉄則です。
Q: TikTokのBGMに合わせてカット編集を同期させることはできますか？
A: できます。曲のBPMを解析してビートのタイムスタンプをフレーム数に変換し、<Series>コンポーネントの各<Series.Sequence>を1ビート分の長さに設定することで音楽に同期したカット構成を実現できます。タイムラインエディタより設定に手間がかかりますが、完全に再現可能でバッチレンダリングにも対応します。
Q: テンプレート1本で複数の商品バリアントを生成する最良の方法は？
A: renderMediaOnLambdaをPromise.allでラップして全商品を並行レンダリングするのが最速です。各呼び出しに異なるinputPropsを渡すだけでよく、テンプレートのコードは一切変更する必要がありません。商品数が100〜1,000の規模であれば、一晩のバッチジョブとして十分現実的です。