ad-creative-video

広告クリエイティブ動画

モーショングラフィックスの広告テンプレートを1つ作成し、データテーブルからバリエーションを大量生成します。フック、オファー、CTA、商品を変えて、パフォーマンスマーケターが複数の掲載枠やアスペクト比で数十パターンをA/Bテストできるようにします。重要なのは、テンプレートを完全にデータ駆動型にし、メッセージを一致させることです。これにより、40種類のバリエーションでもブランドイメージを維持し、テスト対象の変数だけを変更できます。

使用する場面

• 最初の1.5〜3秒でスクロールを止める必要がある、パフォーマンス重視またはUGCスタイルの動画広告。
• バリエーションの一括生成：1つのテンプレートを多数の行に適用してレンダリング（見出し／オファー／CTA／商品の差し替え）し、A/Bテストを実施します。
• Meta Feed、Reels/Stories、TikTok、YouTube向けに、同じ広告を複数のアスペクト比で書き出します。

セールや割引のカウントダウン告知、または体験談やレビューを軸にした広告には使用しないでください。これらは別の構成です。一括でバリエーションを作り、すべてをテストするという切り口を維持してください。

バリエーションをテストする価値のあるものにする2つのルール

1. バリエーションごとに1つの変数だけを分離します。 変更点が厳密に1つだけでなければ、テストから何かを学ぶことはできません。レイアウト、モーション、色、タイミングは固定し、テスト対象のフィールド（フック、オファー、CTAのいずれか）だけを差し替えます。2つの要素を変更すると、どちらが勝因だったのか判別できません。
2. フックとCTAのメッセージを一致させます。 最初の3秒で示す約束は、ボタンを押した先で実現する約束と一致していなければなりません。「1日2時間の無駄をなくす」というフックなら、最後は一般的な「今すぐ購入」ではなく、「2時間を節約 — 無料で試す」で締めくくります。データテーブルの各行で、フックとCTAを一組にします。

広告の構成（15〜30秒）

ビート	役割	目安
フック（0〜3秒）	スクロールを止め、問題を提示するか、パターンを崩します	0〜3秒
コンテキスト	視聴者に問題を実感させ、問題意識を高めます	3〜8秒
解決策	商品を解決策として示し、明確なメリットを1つ伝えます	8〜18秒
根拠	具体的な数値、デモ、または成果を1つ示します	18〜25秒
CTA（最後の3秒）	フックとメッセージが一致した、単一のアクションを促します	≥2秒間表示

2秒を過ぎる前に、フックの感情的な引き金を提示してください。判断は約1.7秒で形成され、スクロール速度は上がり続けています。まずフックをテストしてください。CPAを動かす効果は、ほかのどの要素よりも大きいものです。

フックの分類（最も多く変えるフィールド）

フックの種類	テンプレート	効果を発揮する場面
問題先行型	「Xにどれだけお金がかかっているか、…まで気づきませんでした」	困りごとは感じているものの、言語化されていない場合
パターン割り込み型	「これは物議を醸すかもしれませんが…」	フィードが混み合い、カテゴリ内の表現が画一的な場合
好奇心ギャップ型	「…というたった1つのことについて、誰も話しません」	知識があり、懐疑的なオーディエンス
直接的なメリット型	「7日間でXを半分に減らす」	明確で定量化できる成果
直接呼びかけ型	「毎朝Xをしているなら、やめてください」	対象を明確に絞り込める場合

5〜10個のフック文を列にまとめ、一括レンダリングで同じ本文に対する広告を1つずつ生成します。これが最も明確なフックテストです。

データ駆動型テンプレート（すべてをプロパティにする）

マーケターがA/Bテストする可能性のある値はハードコードしないでください。コンポジションは単一の variant オブジェクトを読み込み、レンダラーがコンポーネントを編集することはありません。すべてのアニメーション値を useCurrentFrame() の純粋関数にして、各フレームが決定論的にレンダリングされるようにします（CSS トランジションやライブラリのタイマーは使わないでください。レンダリングとの同期がずれます）。

import {useCurrentFrame, interpolate, AbsoluteFill, useVideoConfig} from "remotion";

type Variant = {hook: string; benefit: string; proof: string; cta: string; bg: string; accent: string};

export const AdTemplate: React.FC<{v: Variant}> = ({v}) => {
  const frame = useCurrentFrame(); const {fps} = useVideoConfig();
  const hookIn = interpolate(frame, [0, 8], [40, 0], {extrapolateRight: "clamp"});
  const ctaIn  = interpolate(frame, [fps * 22, fps * 23], [0, 1], {extrapolateLeft: "clamp", extrapolateRight: "clamp"});
  return (
    <AbsoluteFill style={{background: v.bg, fontFamily: "Inter, sans-serif"}}>
      <h1 style={{transform: `translateY(${hookIn}px)`, opacity: interpolate(frame,[0,8],[0,1])}}>{v.hook}</h1>
      {frame > fps * 8  && <p>{v.benefit}</p>}
      {frame > fps * 18 && <strong>{v.proof}</strong>}
      <button style={{opacity: ctaIn, background: v.accent}}>{v.cta}</button>
    </AbsoluteFill>
  );
};

完全なテンプレート、検証機能付きのCSV→propsパーサー、ブランドを固定するテーマオブジェクトについては、references/batch-ad-pipeline.md を参照してください。

1つのテンプレート × CSV = N個のバリエーション

この方法の利点は、広告を一度作るだけで、あとはCSVで組み合わせを生成できることです。各行が、メッセージの一致した完成形のバリエーションになります。各行につき1回レンダリングします。

# variants.csv: id,hook,benefit,proof,cta,bg,accent  → one MP4 per row
node csv-to-props.js variants.csv ./props        # writes props/<id>.json per row
for f in props/*.json; do
  id=$(basename "$f" .json)
  npx remotion render AdTemplate "out/${id}.mp4" --props="$f"
done

明確なテストマトリクスを作るには、すべての列を固定し、1つだけ変えます。5つのフック × 1つの本文 = 5本の広告（フックテスト）、次に勝ったフック × 3つのCTA（CTAテスト）を試します。references/batch-ad-pipeline.md には、変数リストをCSVに展開するマトリクス生成機能があり、組み合わせテストでも一度に変える変数を1つに保てます。

マルチアスペクト書き出し

各掲載面には、それぞれに適したネイティブアスペクトが必要です。すべてにきれいにリフレーミングできるよう、中央のセーフゾーンを基準に構成してください。レターボックスを追加したり、再センタリングしたりしないでください。

アスペクト	掲載面	解像度	クリアランスが必要なセーフゾーン
9:16	Reels、Stories、TikTok In-Feed	1080×1920	上部約14％、下部約20～35％（UI／キャプション）、左右約6％
4:5	Meta Feed（フィードで最も広い表示領域）	1080×1350	中央90％。CTAは下部10％を避ける
1:1	Feed、幅広いリーチ	1080×1080	中央の正方形は、どのクロップでも残る
16:9	YouTube、インストリーム	1920×1080	中央90％

フックのテキスト、製品、CTAは中央の1:1正方形内に配置し、どのクロップでも残るようにしてください。小道具からアスペクトを指定し、バリエーションごとにレンダリングします。

for ar in 9x16 4x5 1x1; do
  npx remotion render AdTemplate "out/${id}-${ar}.mp4" --props="props/${id}.json" \
    --props-merge="{\"aspect\":\"${ar}\"}"
done

9:16の下部3分の1には重要なコンテンツを配置しないでください。ここにはプラットフォームのキャプション、CTAボタン、ユーザー名が重なります。正確なピクセル単位のセーフゾーンと、プラットフォームごとの長さ／フォーマットの制限については、references/platform-specs.mdを参照してください。

出力チェックリスト

• バリエーションごとに変数は1つだけにし、テスト全体でレイアウト／モーション／タイミングを同一にします。
• フックは2秒以内にトリガーを伝え、すべての行でフックとCTAのメッセージを一致させます。
• アニメーションする値はすべてuseCurrentFrame()の純粋関数にします。CSS／ライブラリのタイマーは使用しません。
• データセットはプロパティとして渡します。テスト可能な値をハードコードせず、1つのテンプレートでCSV全体をレンダリングします。
• 各バリエーションを9:16＋4:5＋1:1（必要に応じて16:9も）で書き出し、重要なコンテンツを中央の正方形内に配置します。
• 単一のテーマオブジェクトを使い、すべてのバリエーションでブランドを統一します。

納品と検証（レンダリングした静止画 → MP4）

同梱ヘルパー（scripts/）：scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.pngで静止画をタイル状に並べ、scripts/probe-mp4.sh out.mp4 [WxH] [fps]でエンコードを検証します。scripts/README.mdを参照してください。

出力仕様：

• <Composition>として登録されたRemotion広告テンプレート（zodのschemaとdefaultPropsを含む）。アニメーションする値はすべてフレーム駆動にします（CSSトランジション／ライブラリのタイマー／Date.now()／Math.random()は使用しません）。
• 納品物＝バリエーションごと、アスペクトごとにレンダリングしたout/*.mp4（新しい行を追加したときにマーケターが再レンダリングできるよう、プロジェクトとCSVも含めます）。

検証の流れ — 静止画をレンダリング → 確認 → エンコード。 まず軽量なPNGを用意し、問題がないことを確認してから、フルエンコードは一度だけ行います。defaultPropsだけでなく、同梱するプロパティ（実際の行）でレンダリングしてください。

# Frame-exact stills across the hook→CTA arc, with a real variant's props
npx remotion still AdTemplate out/f-hook.png --frame=12  --props=props/v1.json   # hook readable < 2s
npx remotion still AdTemplate out/f-mid.png  --frame=300 --props=props/v1.json   # benefit/proof
npx remotion still AdTemplate out/f-cta.png  --frame=689 --props=props/v1.json   # CTA, message-matched
# inspect each: fidelity (hook / offer / proof / CTA text exact, brand bg+accent right)
#   AND artifacts (text overflow, off-canvas, CTA inside the 9:16 bottom third, missing font, wrong row binding)

マルチアスペクト／バッチ — マトリクスを一括レンダリングする前に、各アスペクトで1つのバリエーションを検証します。 レイアウトの不具合は行×アスペクトのすべてに繰り返されるため、1回の検証で検出してください。

for ar in 9x16 4x5 1x1; do                                  # one representative variant, every target aspect
  npx remotion still AdTemplate "out/v1-${ar}.png" --frame=300 \
    --props=props/v1.json --props-merge="{\"aspect\":\"${ar}\"}"
done
# stills clean in all aspects? → then batch-render every row × aspect:
for f in props/*.json; do id=$(basename "$f" .json); for ar in 9x16 4x5 1x1; do
  npx remotion render AdTemplate "out/${id}-${ar}.mp4" --props="$f" --props-merge="{\"aspect\":\"${ar}\"}"
done; done
npx remotion render AdTemplate out/demo.gif --codec=gif --props=props/v1.json   # README demo

完了前に確認すること：

1. npx remotion stillでフック／中間／CTAの静止画を正常にレンダリングできること。エラーやフォント／アセットの欠落がないこと。
2. フック／オファー／証拠／CTAのテキストが正確で、ブランドカラーが正しいこと。9:16の下部3分の1や中央のセーフゾーン外に何も配置されていないこと。
3. フレーム駆動のみであること。CSS／ライブラリのタイマー、Date.now()、Math.random()を使用していないこと。
4. 同梱する行のプロパティが正しくレンダリングされること（defaultPropsだけではないこと）。バリエーションごとに変数を1つだけ変更すること。
5. バッチ処理の前に、9:16＋4:5＋1:1で1つのバリエーションを検証すること。MP4が再生できること。（任意）README用のGIFを作成すること。

参考ファイル

• references/batch-ad-pipeline.md — 実行可能なRemotion広告テンプレート一式、検証機能付きのCSV→型付きプロパティのパーサー、1変数のテストマトリクス生成ツール、ブランド統一用のテーマオブジェクト、バッチ＋マルチアスペクトのレンダリングスクリプト一式。
• references/platform-specs.md — Meta Feed／Reels／Stories、TikTok In-Feed、YouTubeの、2025／2026年時点の正確なピクセル単位のセーフゾーン、長さ、アスペクト比、フォーマット制限に加え、フック→CTAのメッセージ一致確認シート。