製品フィーチャービデオスキル

実際に動作する製品のデモ/フィーチャービデオを計画・構築します。実際の画面を Playwright でキャプチャし、実際の TTS でナレーションを吹き込み、実際の（オープンソースでライセンスがクリーンな）BGM をスコアリングし、Remotion でアセンブルします。これは合成モーショングラフィックスの製品トレーラーとは異なる分野です。映像はすでに存在しており、計画に合わせて描き直すことはできないため、計画を映像に合わせる必要があります。

合成モーショングラフィックストレーラーとの主な違い

多くの Remotion ビデオワークフローは、すべてのピクセルを制御でき、何でも再タイミングできることを前提としています。ビデオ全体がモックアップ、生成された背景、考案された UI など、ゼロから構築されるからです。しかし、ここではその前提は通用しません。実際の画面録画は独自のクロックで動作し、実際のクリックはストーリーボードが望むタイミングではなく、特定のフレームで発生します。また、一部の瞬間（ネイティブ OS ウィンドウ、ブラウザ自体のツールバー、0.5秒で完了するインタラクションなど）は、計画に合わせて撮り直すことができません。このスキルは、この制約を最初から考慮して構築されています。モーションデザインのクラフト（イージング、トランジション、モーション密度）は依然として重要であり、フェーズ8で扱いますが、パイプラインの真の基盤は、映像駆動型ビデオに特に必要なもの、すなわちキャプチャ不可能な瞬間のためのプロトタイプフォールバック監査、実際の映像に対するズームやクリック強調のための安定性検証済みターゲティング、そして計画ではなく実際のアセット継続時間によって駆動されるタイミングです。

中核原則：実際の映像を最優先、次にプロトタイプ、最後にイラスト

各シーンでは、以下の順序で優先します。

実際の映像 — 実際に動作するアプリの実際の Playwright 録画。
レビュー済みの HTML プロトタイプ — 実際の映像では構造上表示できないもの（フェーズ2参照）を、同じ方法でキャプチャしたもの。
正直で明確に示されたプレースホルダー — 上記のいずれもまだ達成できない場合のみ、かつ実際の映像のように見せかけない場合に限る。

オプション1を、オプション3を実際の映像のように見せかけて偽装してはいけません。視聴者は、それが実際のものであるからこそデモビデオを信頼します。捏造されたように見える瞬間が1つあるだけで、すべての本物の瞬間に対する信頼が損なわれます。

フェーズ0：ブリーフィング

他の何よりも先に、一緒に一度、以下を確認します。

プロダクトとリポジトリ — 名前、一行説明、実行中のアプリまたはリポジトリのURL/ローカルパス。
ターゲットオーディエンスとトーン — 誰が視聴し、どのような印象を与えるべきか（感銘/安心/興奮）。
尺 — 30秒のティーザー、60〜90秒のウォークスルー、または2〜3分のフルツアー。実際の映像はすぐに長くなります。範囲について正直になりましょう。
必ず伝えなければならない瞬間 — 視聴者が覚えるべきことが一つだけあるとすれば、それは何か？これがクライマックス/ヒーロービートになります。
ログイン/テストアカウント — アプリのキャプチャにアカウントが必要か？使い捨てのデモアカウントを作成できるか、または既に存在するか？
公開コンテキスト — ランディングページ、YouTube、ソーシャルフィード（自動再生ミュートは、キャプションや画面テキストの決定に大きく影響します）。

プロダクトがブラウザ拡張機能の場合、Manifest V3 が関係しているかどうかも尋ねてください（Playwright の起動戦略が変わります — フェーズ6参照）。

フェーズ1：偵察 — 実際のデザインシステムを抽出し、発明しない

美的な決定の前に、実際のプロダクトを読み込みます。

アプリ自体の CSS/テーマファイルから、実際のカラートークン、フォントスタック、およびスペーシングスケールを取得します。それらをそのまま使用します。アクセントカラーがたまたま「ありきたりな AI SaaS」の決まり文句（インディゴ/パープルとニアブラックの組み合わせは、実際のプロダクトパレットでも非常に一般的です。発明されたデフォルトではなく、実際のプロダクトのパレットである場合にのみ危険信号となります）に似ていたとしてもです。真実味は目新しさに勝ります。
プロダクトの実際の UI コピー、用語、情報アーキテクチャに注意してください。ビデオのキャプションとナレーションは、マーケティングの言い換えではなく、アプリ自身の言葉を使用する必要があります。
アプリを一度、ユーザーとしてエンドツーエンドで実行します。以下を特定します。最良の「ヒーロー」インタラクションは何か？ライブでデモするのが本当に難しいのは何か（フェーズ2参照）？

抽出したトークン（色、フォント）を tokens.ts/tokens.css に保存し、ビデオプロジェクト全体が一箇所からインポートします。すべてのシーン（実際のシーンでもコードで構築されたシーンでも）が、同じプロダクトに属していることが視覚的に明らかである必要があります。

フェーズ2：プロトタイプフォールバック監査（ストーリーボードの前にこれを行う）

計画されたフィーチャーリストを確認し、Playwright が構造的にキャプチャできないものを特定します。

OSレベルのブラウザクロム — 拡張機能のツールバーアイコン、chrome://extensions、右クリックコンテキストメニュー、ネイティブファイルピッカー、ネイティブ OS ダイアログ。Playwright の recordVideo はページコンテンツのみをキャプチャし、ブラウザ自身の UI はキャプチャしません。
ネイティブデスクトップシェル（Tauri、パッケージ化された Electron、Qt など）— これらは Playwright がアタッチできる Web ページではありません。
信頼性をもって紹介するには速すぎる、または小さすぎるインタラクション — 実際の映像で0.5秒未満で完了するトグル切り替えは、クロップズームやクリック強調リングの対象として不適切です。どちらも着地するために安定したマルチフレームウィンドウが必要です（フェーズ8の ZoomCue/ClickRing パターンとその安定性ルールを参照）。

特定された各瞬間について、以下を決定します。回避策を用いた実際の映像（例：実際のクリックではなく API 呼び出しで状態をシードする、フェーズ6参照）、レビュー済みの HTML プロトタイプ（フェーズ7）、または正直にラベル付けされたイラスト（最後の手段であり、コードコメントでその旨を明記する）。

この監査をストーリーボードの前に行うことで、ストーリーボードが実際のキャプチャステップで提供できないタイミングとカバレッジにコミットすることを防ぎます。これは TabNemo 自身の v1〜v3 で最大の手戻りの原因でした。

フェーズ3：ストーリーボードとシーンプラン

ナラティブアーク

映像が実際のものであっても合成のものであっても、同じ構造が機能します。

幕	目的	実行時間の割合
フック	コールドオープン — 問題、または印象的な瞬間。プロダクト名が表示される前	5〜8%
開示	ブランド/プロダクト名が登場	8〜10%
ショーケース	3〜5つの実際のフィーチャー、各1ビート	45〜55%
クライマックス	フェーズ0で特定されたヒーロー瞬間 — 最も視覚的な注意を払う	8〜12%
クローズ	ロゴ、タグライン、CTA	8〜10%

シーンごとの仕様

すべてのシーンについて、事前に決定し、書き留めます。

ソース: 実際のクリップ / プロトタイプキャプチャ / コードで構築されたBロール（フェーズ2の監査による）。
ナレーション: 正確なテキスト、または null。ナレーションの長さは実際の制約です。TTS オーディオの継続時間がシーンの最小長になります（フェーズ4参照）。
実際の映像は独自のクロックで動作します — シーンの durationInFrames は max(実際のクリップの長さ, ナレーションの長さ) であり、実際にレンダリングされたアセットからプローブされ、計画から推定されることはありません。ナレーションがクリップより長い場合、ループしたりラインを途中で切ったりするのではなく、クリップの最後のフレームを保持します。
カメラ計画: パンチイン/ズームまたはクリック強調（実際の座標を含む）— 実際の静止画から決定され、推測ではありません（フェーズ8）。

レビューチェックポイント

1つのクリップを録画したり、1つのオーディオノートを生成したりする前に、シーンリストとナレーションテキストを表示します。利用可能な映像に関する誤った仮定に基づいて構築された計画は、TTS と Playwright スクリプトが存在すると解消するのにコストがかかります。

フェーズ4：ナレーション — スクリプトと生成

1つではなく、2つのドキュメントを作成します。

レビュー用スクリプト — シーンごとに1ブロック、計画されたタイムコードを含む。人間がナレーション全体の流れを読み、生成前にペーシングを承認できるようにします。
TTS 入力スクリプト — 同じ行を、シーンごとに1ファイルに分割し、ペーシングは句読点のみ（またはエンジンがサポートしている場合は SSML <break>/<emphasis> タグ）で伝えます。各シーンが独自のオフセットで配置可能な独自のオーディオクリップになります。

生成ツール

ttsmp3.com — 無料、サインアップ不要、Amazon Polly ベース。公開 API はないため、生成はブラウザ UI を通じて1クリップずつ行います。すべてのクリップを生成するために1回の集中セッションを計画し、出力ファイルにはシーン名を付けます（scene-03.mp3 であって、tts_export_1.mp3 ではありません）。
無人実行（CI、ブラウザを介さないエージェント）が必要なパイプラインの場合、代わりに実際にスクリプト可能なオープンソース/ローカルオプションを優先します。Piper（完全オフライン、MIT ライセンス、高速、適切な音声）または edge-tts（Microsoft Edge の読み上げ音声をラップ、無料、キー不要、スクリプト可能ですが、外部サービスが利用可能であることに依存します）。Gemini TTS や ElevenLabs は、API コストが許容できる場合の強力な非オープン代替案です。どのエンジンでも、個別の呼び出しで音声の一貫性が保証されない場合は、すべてのセグメントを1つのリクエストで生成し、間にポーズマーカーを挿入してから、検出された無音部分で分割します。この1つのトリックで、エンジンに関係なく「行ごとに異なる声」の問題を修正できます。

生成後 — オーディオが情報源

生成されたすべてのファイルの実際の長さをプローブします（推定値を信頼しないでください）。実際の長さをシーンプランのタイミングに反映させます。この1つのステップで、TabNemo のビルドにおけるすべてのタイミングバグを防ぐことができました。ナレーションは視聴者の耳がシーンを測定する基準であるため、計画ではなく、ナレーションが時計を設定します。

フェーズ5：BGM — ライセンスの地雷を踏まずにキャッチーなものを入手する

フラットなパッドとドローンのループは、エレベーターホールド音楽として認識され、「キャッチーな」ベッドとしては認識されません。その違いはほとんどの場合、ハーモニックパッドだけでなく、繰り返されるメロディックなフックです。3つの現実的なオプションを、「最も安全なライセンス」から「最も確実にキャッチー」な順に示します。

オプションA — プロシージャルシンセシス（ライセンスリスクゼロ、フラットにならないようにするには実際の努力が必要）

プレーンな Node/Python で、短くシームレスにループ可能なステレオ WAV を生成します。モデルも依存関係もライセンスの問題も一切ありません。なぜなら、すべてのサンプルをあなたが書いたからです。実際に機能した具体的なレシピは以下の通りです。

単純なオシレーター（サイン/トライアングル）を使用した、アタック/リリースエンベロープが遅い短い（8〜16小節）コードループ — これだけでは「エレベーターミュージック」の罠です。これはフックではありません。
実際のフック: その上に乗る、固定された繰り返しリズムパターンの、パッドより1オクターブ上のカルプラス・ストロングの撥弦メロディー — これにより、合成ループがアンビエントな壁紙ではなく、記憶に残るものになります。このレイヤーをスキップしないでください。
その下に、ナレーションの下に収まるほど静かな、前進感のためのソフトなキックとハットのパルス。
ヘッドルームを残すためにノーマライズし、ループ長は進行全体が小節境界で完了するように選択します（聞こえる継ぎ目がないように）。

これは商用出荷が完全に安全ですが、メロディックフックレイヤーが「キャッチー」と「ありきたり」を分けるものです。実際の反復作業に予算を割り当て、フルレンダリングに配線する前にユーザーからの聴取と確認を得てください（15〜20秒のループの再生成は安価ですが、別のループを試聴するためにビデオ全体を再レンダリングするのはそうではありません）。

オプションB — オープンウェイト生成音楽モデル（より「プロデュース」された感じ、ライセンスを毎回確認）

Stability AI の Stable Audio Open — オープンウェイト、テキストプロンプト、実際にメロディックコンテンツを含む本格的なアレンジメントを生成します。ライセンス条件はほとんどの生成オーディオモデルよりも寛容ですが、収益ベースの条件があります。商用利用の前に現在のライセンスを再読してください。これらの条件は変更される可能性があります。
Meta の MusicGen（audiocraft ライブラリ経由）— 品質は優れていますが、その音楽モデルの重みは通常 CC-BY-NC（非営利）ライセンスです。収益化された製品のローンチビデオで生成された出力を、個別に許可を得ずに使用しないでください。
どちらもローカルで実行可能（GPU推奨）か、ローカルコンピューティングがない場合はホスト型推論エンドポイント（Replicate、Hugging Face Spaces）を介して実行可能です。

オプションC（推奨デフォルト）— Bをアイデアに使用し、Aをアセットとして出荷

インスピレーションのみを目的として、ローカルのオープンウェイトモデルにプロンプトを送信します（「キャッチーなシンセポップフック、110bpm程度、温かみのある楽観的なテック製品の雰囲気」）。数回生成して聞き、

akmishra56/product-video-skill

product-video-skill とは？

お気に入りのAIに質問する

ドキュメント