商品広告動画（コード生成）

商品広告動画、コードで作る

動画編集ソフト不要の、15～20秒の商品広告を生成するパイプライン。すべてのフレーム、サウンド、ナレーションがスクリプトで生成されるため、全体を再現可能かつテキストベースで編集できます。

プロジェクトの事実 ─► 概要 + ストーリーボード ─► ビジュアル ─────────────► Remotionレンダリング ─► MP4
                                       ├ 2D: React (Remotion)       ▲
                                       └ 3D: Blender (ヘッドレス) ─► JPGフレーム
                                       サウンド: scripts/score.py ─► WAV ┘
                                       ナレーション: scripts/kokoro_tts.py ─┘

動作例 (GhostCommits、実ファイル): examples/ghostcommits/

ステップ1 — 製品を理解し、概要を書く

README、ランディングページ、コードを読む。抽出するもの: 一行のピッチ、3～4の具体的な証明ポイント（形容詞より数字: 「1ファイル」、「ログイン不要」）、CSSからブランドカラー、ロゴのSVG、URL。主張してはいけないことを書き留める（例：「テストネットのみ」、「匿名ではない」、ユーザー数なし）。画面上のすべてのテキストとナレーションは、このリストと照合されます。ブランドがすでに定義していない場合にのみ、ユーザーにパレット/スタイルを選んでもらいます。

ステップ2 — ストーリーボード（構築前に.mdファイルに書く）

18秒 @ 30fps = 540フレーム。各約2.5秒（75フレーム、= 96BPMで1小節、カットがビートに合う）の5～6ショット。各ショット: フレーム、カメラ/モーション、画面上のテキスト、サウンド。3～4秒のエンドカード（名前、タグライン、URL）で終わる。テンプレート: references/storyboard.md

ステップ3a — 2Dスタイル（Remotion）

キネティックタイポグラフィ + フラットシェイプ、「Spotify Wrapped」のようなエネルギー。references/remotion-2d.mdを参照。npx create-video@latest --yes --blank --no-tailwind video でプロジェクトを作成し、広告ごとに1コンポーネント、useCurrentFrame() + interpolate とイージングのみで制御。CSSトランジションは不使用。

ステップ3b — 3Dスタイル（Blender、ヘッドレス）

黒い背景の中で光沢のあるヒーローオブジェクト、マクロのクローズアップ、表面を横切る光の筋、ハードカット、左下に大きな統計値と小さなキャプション。references/blender-3d.mdを参照。1つのPythonスクリプトでシーンを構築し、すべてのショットのキーフレームを設定し、フレームをレンダリング: blender -b --factory-startup -P scene.py -- anim ../public/frames。Remotionでフレーム上にテキストを重ねる（examples/ghostcommits/GhostAdV2.tsx）。フルアニメーションの前に、まず2～3枚の静止画をレンダリングして確認する。

ステップ4 — サウンド（scripts/score.py）

JSONのキューシートを書く: アニメーションコードのフレーム番号をキーにした、視覚的イベントごとのエントリ（カット → cut_hit、オブジェクトが飛び込む → whoosh、着地 → click/lock、光の筋 → glint、エンドカード → impact、ビルドアップ → riser）。その後 python scripts/score.py cues.json を実行。すべてをシンセサイズし（サンプルもライセンスも不要）、break_frame でドロップし end_frame で解決する96BPMのBGMを追加し、秒ごとのラウドネスを表示して聴かずにチェックできる。詳細とゲインガイド: references/sound.md

ステップ5 — ナレーション（オプション）

短い行、≤6語、ショットごとに1つ、画面上のテキストに合わせる。最良の無料オプション: python scripts/kokoro_tts.py lines.txt vo/（ホスト型Kokoro、3つの声を比較）。ファイルをキューシートの voiceover リストに追加。開始時刻はそのショットのテキストが表示される時刻。score.py が無音をトリミングし、ナレーション中は音楽をダッキングする。各行の長さを測定し、次の行が始まる前に終了することを確認する。オプションと教訓: references/voiceover.md

ステップ6 — レンダリングと納品

コンポジション内で <Html5Audio src={staticFile("audio/soundtrack.wav")} /> を使用し、npx remotion render <CompositionId> out/ad.mp4 を実行。MP4をユーザーに送る。音声は聞こえないことを明確に伝える: レベルとタイミングは数値的にチェックされており、耳では確認していない。

重要なルール

• 正直なコピー: 製品が裏付けられない主張はしない。注意事項（ベータ版、テストネット）は画面上に表示する。
• 特定のブランドの広告（ロゴ、音楽、キャラクター）を再現しない — スタイルのみを借用する。
• テキストは1080pで48px以上、表示時間は1.2秒以上、左下または中央、ヒーローの顔の上には決して置かない。
• フルレンダリングの前に静止画をレンダリングし、すべてのショットから1フレームチェックする。
• 生成されたフレーム/音声はgit管理外に置く（.gitignore）。スクリプトとストーリーボードだけをコミットする。