david-d2c2/motion-promo-reels

コード生成モーショングラフィックによるプロモーションリール

全てコードで生成される15～30秒の動画：2Dキャンバス → フレーム → ffmpeg、音声はnumpyで合成。動画テンプレートもAfter Effectsもサードパーティの音楽も使いません。以下の3つのケースをカバーします：

• 個人またはパーソナルブランド（16:9）
• 数個の製品（9:16）
• ストアの全カタログ（9:16、数十～数百本の動画）

基本原則：作り上げないこと。 動画に表示されるすべての数字、価格、色、特徴は、Webサイト、ストアAPI、製品ページ、プロジェクトドキュメントの検証済みソースから取得します。確認できないものがあれば、保留として明記します。

このパッケージには3つの完全なテンプレートが ${CLAUDE_SKILL_DIR}/templates/ に含まれています（claude.aiのチャット内では、このファイルの隣の templates/）。ユーザーのプロジェクトに最も近いテンプレートをコピーして適応する ことで、エンジンを一から作り直す必要はありません（セクション4参照）。templates/README.md に各テンプレートで変更すべき箇所がリストされています。

画面上のコピーはすべてブランドの対象顧客の言語で書き、ユーザーへの返信もその言語で行います。固定インターフェース文字列（「from」「colors」「NOT HIM」…）は、テンプレートの textos ブロックで上書きします。エンジンを編集してはいけません。no_es ではその人の性別に合わせてください。

0. ケースの選択

ケース	テンプレート	フォーマット	長さ	ギャグの単位
個人またはパーソナルブランド	persona-16x9	1920×1080	27 秒	1つ、手書き
Webサイトまたはサービス	persona-16x9、適応	16:9 または 9:16	20～30 秒	1つ、手書き
少数の製品（≤10）	producto-9x16	1080×1920	15.5 秒	製品ごとに1つ、手書き
カタログ（数十～数百）	catalogo-9x16	1080×1920	15.5 秒	カテゴリごとに1つ、各製品のデータからテンプレートフレーズを埋め込み

ユーザーが指定しない場合、製品には9:16を使用し、その旨を1行で伝えます。

1. リサーチ（スクリプトを1行も書く前に）

情報源（優先順）：

1. プロジェクトフォルダ（存在する場合）。 CLAUDE.md、AGENTS.md、決定ログ、レポート、ソーシャルメディア計画を読みます。ここにブランドとコピーのルール（例：「サードパーティのブランド名は使用しない」「砕けた口調」「空虚な最上級表現は避ける」）と、デザイントークン、モデレーションルール、法的注意事項（AIラベリング）が記載されています。これらのルールは、いかなる創造的なアイデアよりも優先されます。
2. 公式Webサイト。 ヒーロー、サービス、統計、メソッド、スタック、資格情報。JSが多いサイトでは、ブラウザを使用して document.body.innerText をセクションごとに読み取ります。
3. オンラインストア：
   • WooCommerce: /wp-json/wc/store/v1/products?per_page=100&page=N および /products/<id>。価格はセント単位。prices.price_range で最小≠最大 → 「from」；on_sale + regular_price → 取り消し線付き価格；attributes（色、サイズ、寸法）；description（多くの場合、構造化された箇条書きを含む）；permalink。
   • Shopify: /products.json および /products/<handle>.json。
   • スラッグやURLを推測しないこと： permalink から読み取ります。
4. Web検索。 個人には便利ですが、一般的な名前は同名の別人がヒットすることがあります。その場合は、隠すのではなく、スクリプトの素材にします（セクション2参照）。
5. 写真： まずローカルプロジェクトファイル。クラウドサンドボックスはストアからダウンロードできないことがよくあります。何度も再試行しないでください。ローカルの写真を使用するか、製品をコードで描画します（ストライプ、サテンの波、単純な形状は、思ったより見栄えがします）。

データを読み取った日付を書き留めておきます。価格は古くなります。

2. コンセプト：ギャグ

ギャグとは、製品または人物の実際の特性を、動画自体が行う何かに変換したものです。 後付けのジョークではありません。すべてテンプレートに実装されているメカニズムの例（ギャグIDはコード内でスペイン語）：

メカニズム	実際の特性	動画が行うこと
invisible	透明、隠れた、控えめ	空のフレーム：「ここにケースがあります。見えませんか？当然です、透明ですから。」その後、画面がジッパーのように開く。
contador（カウンター）	大量（メートル、時間、ユニット）	「このリールは15秒続きます。このロールは50m。使い切る時間はありません。」カウンターが回る。
diagonal	バイアスカット、ストライプ、斜めデザイン	テキストが45度傾き、ストライプが画面を横切る。
brillo（輝き）	光沢またはサテン仕上げ	「このテキストはマットです。/ こちらは光沢があります。」（輝きと共に）
cortar（カット）	レース、ケーブル、結束なし	2本の糸がテキストを吊るし、切断されるがテキストはそのまま。
elevar（持ち上げる）	プラットフォーム、プッシュアップ、高さ	テキストが「クッション」の上に浮かび上がる。
secuencia（順序）	多数のサイズ、幅、バリエーション	実際のバリエーションが次々と切り替わる：「こちらはEからHまで。」
quitar（取り除く）	「Xなし」	2つのリングが描かれ、飛び去る：「なくなった。」
ritmo（リズム）	スポーツ、動き	言葉がビートに乗って現れる。
reordenar（並べ替え）	多用途、コンバーチブル	2行が位置を入れ替える：平行、交差、V字。
patron（パターン）	刺繍、プリント、レース	装飾パターンが描かれる。
calma（静けさ）	デリケートなカテゴリ（健康、術後、マタニティ…）	ギャグなし、音のヒットなし、パーカッションなし：穏やかなトーン。
homonimos（同名者、人物向け）	Googleでよくある名前	investigar("名前") が同名者を「NOT THEM」と取り消し線で表示し、その後「SOURCE FOUND」と表示。

ルール：

1. 実際の、検証可能な 特性を1つ。
2. 3行：セットアップ、ひねり、オチ（オチはイタリック体またはアクセントカラー）。
3. オチは偽りであってはなりません。 製品ページに記載されていない場合は、主張しないでください。条件付きフレーズ（コンフィグ内の si/sino）を使用すると、説明が裏付ける場合にのみオチを表示できます。
4. 動画全体を通して固定された自己言及的な要素、業界に関連するもの：タイムコードとフレームカウンターのHUD（テック）、ステッチカウンター付きステッチライン（クラフト、テキスタイル）、リールを「測定する」巻尺（ファッション、サイズ調整）。アウトロで回収します（「このリールは15.5秒です。ワンサイズです。」）。
5. 体についてジョークを言わないこと。 デリケートなカテゴリでは calma を使用します。また、抽象的な描画が体のシルエットとして読める可能性がないか確認します。
6. 空虚な最上級表現、競合他社との比較は禁止。

3. 構造

9:16 製品（15.5 秒、30 fps = 465 フレーム）

シーン	時間	内容
フック	0–3.0	ギャグ
製品	3.0–5.6/5.8	名前 + バウンス付き写真（またはプロシージャル描画、プレースホルダーカード）
範囲	~2.8 秒	実際の色数、または範囲（サイズ）、バリエーションと色（名前付き）
事実	~2.6 秒	製品ページからの3つの事実、アニメーションチェックマーク付き
価格	~1.8 秒	実際の価格、「from」またはセール、該当する場合は税の注記
アウトロ	13.2–15.5	ロゴまたはブランド、ピル型のWebサイト、配送またはCTA、そして締めのウインク

16:9 個人またはブランド（27 秒）： ターミナル → 同名者をグリッチで取り消し線 → ドロップ（ソース発見 + 見出し） → カウンター付き統計 → フェーズ別メソッド → ツールスタックのマーキー（自己言及的なアイテムで停止：「↑それが私」） → 「この動画：0 テンプレート · N 行のコード」（実際の数） → 本人の引用 → モノグラム、名前、CTAのアウトロ。

4. エンジン

<プロジェクト>/<リールフォルダ>/  
├── METODO.md        メソッド、ルール、チェックリスト（人間用）
├── CLAUDE.md        ステータスとToDo（次回セッション用）
├── config.json      （カタログ）ストア、属性、ラベル、パレット、カテゴリ → ギャグ + フレーズ
├── productos.json   ブランド + 製品ごとに1ブロック
├── motor.html       1080×1920 または 1920×1080 キャンバス；window.renderFrame(f) は DETERMINISTIC（決定論的）
├── render.js        puppeteer-core → フレームごとに1 JPEG → ffmpeg image2pipe；次に音声と多重化
├── audio.py         numpy/scipy による合成、motor.html と同じキュー表を使用
├── catalogo.js      （カタログ）API → 製品シート：ギャグ、フレーズ、事実、ブランド除去
├── extraer.js       （カタログ）ブラウザUAとポーズでカタログと写真をダウンロード；REVISAR.md
├── fonts/           ローカルwoff2 + ライセンス（fontsource： `npm pack @fontsource/<ファミリー>@<バージョン>`）
├── img/             ローカル写真
└── out/             最終動画

技術的な要点：

• 決定論： すべてのフレームは t = f/FPS から計算されます。requestAnimationFrame やシードなしの乱数（hash(n) を使用）は使用しません。
• ヘルパー：clamp、P(t,a,b)（進行度）、イージング（eOC、eIOC、eOX、eIX、バウンス付き eOB）、文字間隔とアルファ付きテキスト用の T_()、テキストが収まるまで縮小する fit()、角丸長方形用の rr()。
• シーンは、ローカル時間 u = t - T.scene を受け取る関数です。トランジションは、カットごとに ±0.16 秒の背景色ワイプです。
• render.js：page.evaluateOnNewDocument(spec => window.SPEC = spec)、window.READY（フォントと画像の読み込み完了）を待機し、次に canvas.toDataURL('image/jpeg', .93) → ffmpeg -f image2pipe -c:v mjpeg -i - -c:v libx264 -preset veryfast -crf 18 -pix_fmt yuv420p の標準入力。
  • Chrome を --allow-file-access-from-files 付きで起動します。そうしないとローカル画像がキャンバスを汚染します。
  • Chrome または Edge を標準パス、または CHROME_PATH で探します。
  • レビュー用に --stills t1,t2,… モードを保持します。
• 多重化：-af loudnorm=I=-14:TP=-1:LRA=11 -c:a aac -movflags +faststart -shortest。
• 音声：ブランドのトーンに一致する4コード進行（テック：128 BPM キック、ベース、プラック；クラフト：112 BPM ピチカートとマリンバ；エレガント：96 BPM ピアノとストリングス）。
  • ギャグごとの効果：ジッパー＝クリックの加速バースト；機械＝クリックトレイン＋ハム；はさみ＝2回のスナップ；輝き＝高音アルペジオ。
  • 共通効果：カット時のウィッシュ、カウンター時のチック、価格時のチャイム。
  • キック下の軽いサイドチェイン、tanh でリミット、その後ノーマライズ。
• Windows ではスクリプトは python を呼び出し、Linux と macOS では python3 を呼び出します。

5. 作り上げずにカタログデータを取得する（catalogo.js + config.json）

• 表示名： marcas_a_quitar（コピールールで必要な場合に除去するブランド）と palabras_tipo（「スニーカー」「ブーツ」などの一般的な種別語）を除いた製品名。コードのみが残る場合は、ブランドなしの名前を使用します。
• 事実： 説明内の titulo_datos の下にある箇条書き。構成は除きます。箇条書きがない場合は、短い説明を「.」と「:」で分割したフレーズを使用します。3つ目の事実は、素材属性からの構成とし、EVAのような略語はそのままにします。
• トリミング： フレーズを約54文字に切ります。最初にカンマで切ります。それ以外の場合は、最後の従属節（「with」「for」「that」「and」）の前で切ります。前置詞や冠詞で終わらせないでください。
• 色： 名前 → motor.html 内の16進数テーブル。2トーンカラー（「Black/White」）は分割スウォッチを取得します。不明な色は、実際の名前とともにニュートラルグレーでレンダリングします。
• 手動編集： 製品の "manual": true は、次回の抽出時に上書きされないように保護します。
• REVISAR.md（レビューリスト）：デリケートなトーン、箇条書きのないページ、写真や属性のない製品。
• 実際のカタログに対して変換をテスト するには、エクストラクタを信頼する前に、関数をストアのブラウザコンソールに貼り付けます。ダウンロードステップがテストできなかった場合は、その旨を明記します。

6. 品質管理（納品前に必須）

1. すべてのシーンのスチルをレンダリングし、PILでコンタクトシートを作成し（xstack は使用しない：多くの入力があるとffmpegがクラッシュする可能性があります）、目視確認します。 以下をチェック：
   • テキストの重なりや切り詰められたフレーズ；
   • 大きな見出しのアクセントが上の行と衝突していないか；
   • 要素が別の行に侵入していないか；
   • 白すぎる輝きで文字が消えていないか；
   • 属性がない場合の空の「—」ブロック；
   • 縦長フォーマットでの下半分の空き。
2. 9:16の安全ゾーン：上部約250px（Reels UI）または下部約320px（キャプション）以内に重要なものは何も置かない。装飾要素のみがそこに配置されます。
3. データ：今日の価格、レンジがある場合は「from」、期限切れの可能性があるセール、未確認のユニット（フラグを立てる）、確認済みURL。
4. 法的事項とモデレーション：
   • AI生成またはAI修正された人物が写っている写真 → 動画内に表示可能なラベル（EU AI法、第50条；コンフィグ内の ia.mostrar_si_foto）。公開時にも開示します。
   • 身体に着用して表示される製品：全身写真、カタログスタイル、攻撃的なトリミングなし、画面時間は短めに。
   • 適用されない返品や保証を決して約束しない。
5. 音声：ffmpeg -af ebur128 → 約−14 LUFS。ffprobe で長さと解像度を確認します。

7. 納品

• ユーザーのマシンで作業する場合、すべてをユーザーのプロジェクトのサブフォルダに書き込み、編集するファイルの改行コードを保持します。既存の CLAUDE.md ファイルやドキュメントには触れません： サブフォルダ内に独自のものを作成します。
• METODO.md：何が含まれているか、実行方法、各データの出所、適用されたブランドルール、製品やギャグの追加方法、公開前チェックリスト、既知の制限事項。
• サブフォルダの CLAUDE.md：ステータス、ToDo、譲れないルールを数行で。
• 動画を表示し、要約します：ギャグ（1行に1つ）、すべての配置場所、再生成コマンド、確認が必要なデータ。

よくある間違い（避けること）

• 製品スラッグの推測。permalink から読み取ります。
• 回転テキストのギャグが次の行に重なる：テキストが回転するときに行の位置を調整します。
• 白すぎるサテンの輝きが文字を消す：純白ではなく、明るいブランドトーンを使用します。
• カラーストップが崩れるスウォッチグラデーションが斜めのバンドを残す：代わりに、別のクリップされた輝きレイヤーを使用します。
• 価格範囲のある製品への取り消し線価格：「from」+ セールバッジを使用し、取り消し線は使用しません。
• 製品ページに単位がない（例：「cm」のない寸法）：省略するか、確認用にフラグを立てます。
• 抽象的な形状が全体として体のシルエットを示唆する：明確な図形に置き換えます。