Product Motion Ad (Remotion + ElevenLabs)
最終成果物: MP4 1920×1080 30fps、30～45秒、強力なフック、ターゲット言語で人間らしく聞こえるVO、
プロフェッショナルなSFX、参考動画のような素早いトランジション、そしてフロー = 実際の製品フロー。SendUserFile でユーザーに送信します。
テスト済みテンプレートは template/ フォルダ（このスキルのフォルダ）にあります。実際のプロジェクトの13シーン完全サンプルは
references/example-scenes-threads-automation.tsx.txt と references/example-promo-threads-automation.tsx.txt にあります。
スクリプト作成前に references/script-and-storyboard.md を、オーディオ生成前に references/elevenlabs.md をお読みください。
絶対に守るべき原則
- 最初の8秒で製品を明確に: 製品名 + 「誰に対して何をするのか」。
- シーンの順序 = 製品利用フローの順序（登録/ログイン -> セットアップ -> コアプロセス -> 結果 -> 高度な機能 -> 成果の証明 -> CTA）。順番を変えないでください。
- VO1文 = 1シーン = 1つの優位性 + その視覚的証拠（動くUI: フォーム入力、ボタンクリック、結果カード表示、数字上昇）。テキストだけで終わらせないでください。
- 製品ソースからの事実、創作ではなく：コード/ランディング/オンボーディング/「使い方」ページを読んでください。数値例（ビュー数、スコア）はイラストとして許可しますが、それがイラストであることをユーザーに伝えてください。
- 参考動画のような速いテンポ: トランジションは10フレーム（
T = 10）、シーン内アニメーションはspeed1.5～3で高速化。遅いVOに合わせてシーンを引き伸ばさないでください — VOを修正してください。 - 人間らしいVO: 一発撮り、会話調、速いテンポ、各行に感情タグをつけない。文ごとに分割しないでください（それが不自然さの原因です）。
- ユーザーのパフォーマンスルールに従う：最初と最後だけを計測し、理由なく繰り返しレンダリングしないでください。
ワークフロー
1. 素材収集（可能な限り並列で）
- 製品: リポジトリ内のランディングテキスト、オンボーディング、使い方/機能ページ、UI上の機能名を検索（GrepでUI文字列）。リポジトリ外の場合は説明/URLを依頼。以下のフロー優位性テーブルを作成：
ステップ | ユーザーアクション | 優位性 | 視覚的証拠（表示するUI） - ブランド: CSS（
globals.css、Tailwindテーマ、ランディングCSS）から色とフォント、public/からロゴを抽出。template/src/theme.tsを設定（C、GRADIENT、フォント、BRAND）。 - 参考スタイル（動画がある場合）: Remotion内蔵のffmpegでフレーム抽出し、コンタクトシートを確認：
npx remotion ffmpeg -v error -i "<video>" -r 3 -s 340x192 <dir>/f%03d.png（fps=/tileフィルタはRemotionのffmpegでは使用不可；代わりに-rとscripts/contact-sheet.cjsを使用）。 メモ: 背景（ぼかしブロブ/ドットグリッド）、テキストの現れ方、ハードカット、3D UI、カーソルクリック、グロー、リズム。
2. スクリプトとストーリーボード
references/script-and-storyboard.md に従う：好奇心ギャップを使った3ビートのフック、1シーンあたり1行10ワード以内、
会話調、最初の文は「えっと」のようなつなぎ言葉で始める（0秒目にキーワードを誤って発声させないため）、短いCTA。
ブリーフが曖昧な場合のみ、スクリプトと簡単なシーン順序をユーザーに提示；それ以外は直接作業を進める。
3. Remotionプロジェクト
template/をユーザーのリポジトリ内の新しいフォルダ（例：promo-video/）にコピーし、npm installを実行。- 別のNext.js/TSリポジトリ内にある場合：そのフォルダをルートの
tsconfig.jsonのexcludeに追加し、ESLintのglobalIgnoresにも追加。フォルダには既に.gitignore（node_modules、out）が含まれています。 - ロゴを
promo-video/public/にコピーし、BRAND.logoを設定。 - 製品ごとのシーンを
src/scenes.tsxに記述（サンプルパターンを使用：useFrame()、useRise/rise、glass/white、StepTag、Words、typed+Caret、Cursor、BlurFilter）。汎用シーンmakeFeatureはプロトタイプ用にのみ使用。 src/Promo.tsxのDEFSを設定：シーン順序、cue（VO文の先頭フレーズ）、beats（フック）、speed、トランジション、dark、sfx。
4. ElevenLabsオーディオ（references/elevenlabs.md を参照）
- VOは一発撮り ->
public/vo/full.mp3；Scribeによる単語単位のトランスクリプト ->public/vo/words.json。トランスクリプトを確認（誤った単語は？欠落した行は？）。 - SFXパック10ファイル ->
public/sfx/*.mp3。 - タイムラインは自動：シーンは、その
cueフレーズが発声される6フレーム前に開始；SFXはシーンのデザイン時間に配置（speedで除算）。
5. レンダリングと検証
npm run typecheckの後にnpm run renderを実行（ポート3456を使用 — ポート3000はNext開発サーバーがよく使用しており、レンダリングが「not a valid Remotion project」で失敗します）。- 2分以上かかる場合はレンダリングをバックグラウンドで実行。
- ビジュアル確認：
node <skill>/scripts/contact-sheet.cjs out/promo.mp4 <scratchpad>/chkを実行し、シートを読む。特定の秒数を指定する場合は秒数のリストを渡す。（-rサンプルのffmpegは最初の空フレームを誤って表示することが多いため、疑わしい場合は特定の秒数を確認。） - 確認項目：テキストが持続的にぼやけていないか、切れたり折り返されていないか、ステップラベルがパネルに隠れていないか、キーアニメーションがシーン切り替え前に完了しているか、画面上のテキストがVOの単語と一致しているか。
SendUserFileで送信（renderを表示）、所要時間、サイズ、未検証の項目（例：オーディオレベルは直接聞いていない）を報告。
既発生のトラップ（回避方法）
| 問題 | 原因 | 解決策 |
|---|---|---|
| テキストのフックがぼやけ続ける | 前のフェーズのぼかし値（out1）が1のまま | ぼかしをフェーズごとに計算：入退場のみ |
| 動画が遅くなる | シーンが遅いVOに合わせて引き伸ばされる | VOを速く、スクリプトを短く；speed はそのまま |
| VOが不自然 | 文ごとのクリップ + 各行に [excited] タグ + 書き言葉 | 一発撮り、会話調、繰り返しタグなし |
| 最初の単語を誤って発声（「アカウント」→「カウント」） | v3は最初の単語でよく間違える | 「えっと」「じゃあ」で始め、Scribeトランスクリプトを確認 |
| レンダリング失敗「getStaticCompositions undefined」 | ポート3000がNext開発サーバーで使用中 | --port=3456 |
fps=/tile エラー | Remotionのffmpegが制限されている | -r + contact-sheet.cjs（sharp） |
| 文章が2行に折り返され、アバターが切れる | flexアイテムが縮む | flexWrap: "nowrap"、フォントを小さく |
| パネルがステップラベルを隠す | カメラの translateY が大きすぎる | カメラ移動を制限、scale(0.92) |
| チップ/カードが重なる | 極座標の位置が近い | コンタクトシートを確認、角度/半径を調整 |
useId() を url(#id) で使うと壊れる | id に : が含まれる | useFilterId() を使用（サニタイズ） |
| MCP ElevenLabsがログイン後に読み込まれない | 新しいツールは新しいセッションで出現 | ツールが利用可能なら直接使用；なければ claude -p をヘッドレスで（リファレンス参照） |
| MCP失敗「Protected resource ... does not match」 | ホストリージョンが一致しない | claude mcp add -s user --transport http elevenlabs https://api.us.elevenlabs.io/v1/mcp |