product-launch-video

プラグインのインストール： HyperFrames プラグイン内でこのスキルを使用する場合は、セットアップまたは最新状態の確認コマンドを実行する前に、プラグイン実行ルールに従ってください。スタンドアロンでインストールしている場合は、以下の更新手順に従ってください。

まず、このスキルを最新の状態に保ちます — 実行前にユーザーに確認してください： npx hyperframes skills update product-launch-video。すべて最新の場合はすぐに何もせず終了し、そうでない場合は、このスキルと依存するコアドメインスキルを更新してから利用します。

media-use：音声／画像／ロゴを取得する前に、/media-use を呼び出して、HeyGen カタログから BGM／画像、Openverse から効果音、公式ソースからブランドロゴを解決してください。既存アセットを登録するには、最初に --adopt を実行します。/media-use スキルを参照してください。ホストアプリに独自の音楽または効果音ツールがある場合は、音楽と効果音にはそれらを使用してください。

figma のソース：ソースが figma.com の URL の場合は、最初に /figma を実行してください。必要に応じて、アセットのエクスポート、ブランドトークン、コンポーネント／ストーリーボードの再構築を行い、その出力を基にこのワークフローを進めます。Figma を直接、生の MCP ツールで操作しないでください。SVG のサニタイズ、.media/manifest.jsonl の来歴情報、ブランドトークンの var() バインディングが省略されるため、その後ブランドを変更しても、すべてを再インポートしない限り反映されません。

HyperFrames での製品ローンチ

このスキルを使って製品を撮影し、そのブランドを理解し、ローンチ動画を計画して、HyperFrames でフレームごとに制作します。

最初の窓口は /hyperframes です。 あなたはオーケストレーターです。各ステップを実行し、ゲートを確認してから次のステップに進んでください。このスキルは、製品のマーケティング、ローンチ、宣伝、発表を目的とする依頼に使用します。「サイト用のプロモーション」のように、目的が宣伝である依頼も含まれます。サイトのツアー／紹介の依頼もここで扱います。BRIEF.md にそのまま見せる意図を記載し、撮影した画面を動画で紹介するアセットとして使用します。それ以外の目的、「動画を作って」というだけの依頼、または意図が不明な場合は、まず /hyperframes を読んでください。意図のレイヤーがすべてのルートを決定し、BRIEF.md のない状態で新規制作の依頼がここに来た場合も、いずれにせよ意図のレイヤーを通ることになります（セットアップの最初のルール）。

あなたはオーケストレーターです。videos/<project>/ で作業します。各ステップを順番に実行し、ゲートを通過してから次へ進んでください。ユーザーの確認が必要なステップは、ステップ 0、ステップ 3、ステップ 6 です。ステップ 0 の前に ../hyperframes/references/brief-contract.md を読んでください。ゲートの種類と、BRIEF.md の flow／storyboard からステップ 3／4／6 のゲートを決めるモードをどのように導出するかが定義されています。ステップ 5 以外は、すべて自分で実行してください。ステップ 5 ではフレームごとにサブエージェントを 1 つずつ起動します。デザインやモーションのルールをここに記載しないでください。それらはフレームワーカーのサブエージェント、このスキルのローカルな ../hyperframes-animation/rules/ と ../hyperframes-animation/blueprints/、および hyperframes-creative にあります。

ワークフロー：ステップ 0 セットアップ -> hyperframes.json、ステップ 1 撮影 -> capture/、ステップ 2 デザインシステム -> frame.md、ステップ 3 ストーリーボード／スクリプト -> STORYBOARD.md と SCRIPT.md、ステップ 3.1 音声 -> audio_meta.json、ステップ 4 ビジュアルデザイン -> 内容を充実させた STORYBOARD.md、ステップ 5 フレーム -> compositions/frames/NN-*.html と index.html、ステップ 6 最終レンダリング -> renders/video.mp4。

---

ステップ 0：セットアップ

目標：確認済みのブリーフを持って開始し、HyperFrames プロジェクトを作成して、ブリーフを確実に保存します。

ブリーフを確認するのは意図レイヤーであり、ここで質問することによってではありません。 開始時のルールは次の順です。（1） BRIEF.md が存在する → 読み込み、質問はしません。ブリーフは確定済みであり、その flow／storyboard からモードを判定します（ブリーフ契約 § 1）。（2） BRIEF.md はないが、プロジェクトが存在する（hyperframes.json／STORYBOARD.md がディスク上にある）→ ストーリーボードのフロントマターと記録済みの設定から再開します。作成途中のプロジェクトについて、改めて質問してはいけません。（3） どちらもない — ここに直接届いた新規作成リクエスト → /hyperframes を読み込み、その意図レイヤーを実行します（references/intent-interview.md）。レシピと記憶済みのデフォルト設定を確認し、このルートの質問（../hyperframes/references/routes/product-launch-video.md）を行い、確定したブリーフを返します。編集リクエストではこれらすべてを省略し、編集に進みます。

hyperframes.json が存在しない場合にのみ初期化します。<project> には、ブランド名またはドメイン名をケバブケースで指定します（例：acme-promo）。ワークスペース名やタイムスタンプは使用しないでください。

npx hyperframes init "videos/<project>" --non-interactive --example=blank --skill=product-launch-video — init はインストール済みスキルと GitHub 上の最新バージョンを照合し、古いものがあればグローバルセットを更新します。

初期化後、<PROJECT_ROOT> を videos/<project> とし、それ以降の相対パスを使うすべてのコマンドは、このディレクトリを作業ディレクトリとして実行します。以下のコマンドでは、. は <PROJECT_ROOT> を意味します。呼び出し元のディレクトリに .media、capture、出力ファイルを作成してはいけません。

初期化の直後に BRIEF.md を作成します（先に作成してはいけません。init は空でないディレクトリを拒否します）。意図レイヤーで確定したブリーフを、../hyperframes/references/brief-format.md の形式に沿って記述します。<MEDIA_DIR> は、インストール済みの /media-use スキルディレクトリとして解決します。その後、設定に基づく各回答を node <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes . で記録します（対象項目については brief-format.md に記載されています）。意図レイヤーでレシピを採用した場合は、node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes . --name <name> を実行します。これは frame.md をプロジェクトにコピーし、ステップ 3 で下書きするスケルトンを返すため、ステップ 2 は省略されます。レシピで回答は補えますが、承認は補えません。レビューゲートは引き続き実行します。

セットアップを終えて先に進む前に、サインイン状況を表示します — npx hyperframes auth status を実行し、その出力を一字一句そのまま伝えます。音声／BGM に HeyGen とローカルエンジンのどちらを使うかが報告され、サインアウト中の場合はサインイン方法も表示されます。終了コードの仕様に注意してください。auth status は未サインインの場合（および保存された認証情報が拒否された場合）に終了コード 1 を返します。このゼロ以外の終了コードは通常のサインアウト状態であり、コマンドの失敗ではありません。エラーとして扱ったり、再試行したり、ワークフローが中断する形で &&／set -e と連結したりしないでください。次のいずれかの分岐を適用します。

• 協調型： ユーザーがサインインするか、offline／go を明示的に選択するまで待ちます。
• 自律型： 状況を伝え、利用可能なローカルエンジンを使って続行します。

オフラインプロバイダーが存在しない場合、必要な機能を黙って省略してはいけません。阻害要因を明示します。この判断を別の質問にまとめたり、リポジトリごとの .env にキーを書き込んだりしないでください。認証の管理とオフライン時の代替手段については、/media-use の references/setup-providers.md § Providers を参照してください。

ゲート： hyperframes.json と BRIEF.md が存在し、設定に基づく回答が記録され（ブリーフ契約 § 2）、サインイン状況が表示されています（サインイン済み、またはオフラインで続行）。

ステップ 1：素材を収集する

目標：動画に使用するソース素材、ブランドの特徴、利用可能なアセットを収集します。

入力を分類し、適切な方法を選びます。URLが明示されている場合は、キャプチャしてサイトをナレーションとアセットに使用します。スクリプト／ブリーフが貼り付けられている場合は、そのまま user_script.txt に保存します。VO_MODE（逐語または再構成）は BRIEF.md に記載されています。スクリプトが届いた時点で意図レイヤーが確認します（何らかの理由でブリーフに記載がない場合に限り、ここで一度だけ確認します）。次にキャプチャ対象を決めます。テキスト内にURLがある場合はそれを使用します。ブランド名だけの場合は WebSearch を使い、URLを一行で確認してからクロールします。URL／サイトがない場合（またはブリーフでスクレイピングを禁止している場合）は、キャプチャなしの方法を使用します。

次のコマンドでキャプチャを実行します：npx hyperframes capture "<URL>" -o ./capture --json。呼び出し元がより短い期限を指定していない限り、デフォルトの ナビゲーション後の処理時間を維持します。短い期限が指定されている場合は、後続作業に十分な時間を残す正の値を --capture-budget <milliseconds> に渡します。--timeout が制御するのはページ ナビゲーションのみです。オプションの画像キャプション生成を意図的に無効にする場合に限り、--skip-vision を使用します。

コマンドの結果と出力ディレクトリを直ちに確認します。終了コードがゼロ以外、JSON の ok: false、または capture/BLOCKED.md がある場合は、キャプチャ方法を中止します。記録された理由を報告し、不完全なスクリーンショット、DOM、トークン、アセットは使用しません。URLのキャプチャに失敗した後、架空のキャプチャなしの代替方法を作り出してはいけません。元のブリーフにソース素材が含まれている場合、または失敗後にユーザーが提供済みのスクリーンショットやブリーフへの切り替えを明示的に指示した場合に限り、キャプチャなしの方法を続行します。

アセットカタログが空であることと「テキストコンテンツが非常に少ない」といった警告が同時に出ても、ページが使用可能である証拠にはなりません。サイト紹介や、現状をそのまま見せるブリーフの場合は、信頼できるキャプチャ済みの構造または提供されたスクリーンショットが必要です。どちらもない場合は中止します。キャプチャが使用できないからといって、ページを捏造したり作り直したりしてはいけません。

サイト紹介や、現状をそのまま見せるブリーフの場合、キャプチャしたページを視覚的な唯一の参照元とします。ウェブサイト全体を HTML で再構築せず、実際のスクリーンショットを使用します。ショットに内部の動きが必要な場合は、スクリーンショットをベースにし、実際にキャプチャしたアセットを測定済みの位置に重ねるか、動くコンポーネントだけを再構築します。スクロールショットでは、capture/screenshots/full-page.png 上をビューポートが動くようにアニメーション化します。これはドキュメント全体の 1x プレートで、幅 1920 のビューポートが下へ移動する際にピクセル単位で正確です。ページが長すぎて一度にキャプチャできなかった場合、このファイルはありません。その場合は、同じディレクトリにあるスクロール位置ごとの、重なり合うショットを使用します。1:1 を超える拡大には、プレートに 1x を超える余裕がないため、その領域を独自に 2x でキャプチャする必要があります。ページ全体を再現できるのは、ユーザーがスタイライズした解釈を明示的に求めた場合に限られます。キャプチャが使用できないことだけを理由に、再現が許可されるわけではありません。

GEMINI_API_KEY、GOOGLE_API_KEY、または OpenRouter キーが存在する場合、キャプチャ時にアセットのキャプションが自動生成され、capture/extracted/asset-descriptions.md に保存されます。これはレビューの必須条件ではありません。ビジョンキーがない場合は、DOM のコンテキストを利用して続行します。

キャプチャなしの方法：capture/extracted/tokens.json、capture/extracted/visible-text.txt、capture/extracted/asset-descriptions.md、および capture/assets/ を手作業で作成します。tokens.json は { "title": "", "description": "", "colors": [], "fonts": [] } とし、可能な場合はブリーフをもとに title／description を入力します。visible-text.txt にはブリーフまたはスクリプトの全文を記載します。ユーザーからアセットに関するメモが提供されていない場合は、アセットがキャプチャされていないことを asset-descriptions.md に記載します。

ゲート： キャプチャ JSON の ok: true が報告されていること。capture/BLOCKED.md が存在しないこと。 capture/extracted/tokens.json、capture/extracted/visible-text.txt、 capture/extracted/asset-descriptions.md、および capture/assets/ が存在すること。さらに、ブランドを 一文で明確に説明できること。主要なアセット一覧として asset-descriptions.md を扱います。実際にキャプチャした後でこれが見つからない場合は中止し、キャプチャ未完了と報告します。オプション工程の品質低下に関する警告は、この構造上のゲートを満たしている場合に限り許容されます。

---

ステップ 2：デザインシステム

目標：出荷済みフレームプリセットを 1 つ選び、スクリプトでこの動画の frame.md とキャプションスキンに変換します。

BRIEF.md に style_preset が指定されている場合（インテントレイヤーのショーケースを見てユーザーが選んだもの）は、それを使用します。ブリーフに指定がない場合に限り、判断はあなたに委ねられます。次に、選ぶプリセットを 1 つ決めます。../hyperframes-creative/references/design-spec.md を読み、ブランドとブリーフに最も合う見た目のプリセットを選んでから、次を実行します。

node <SKILL_DIR>/scripts/build-frame.mjs --preset <name> --hyperframes .

あとはスクリプトが決定論的に処理します。プリセットの FRAME.md を frame.md にコピーし、capture/extracted/tokens.json のブランドトークンに合わせてリミックスします（ブランドカラーを役割に応じてプリセットのカラーキーに割り当てます。キー、構造、コンポーネントは維持し、プリセットのディスプレイフォントと本文フォントをブランドのものに置き換えます）。さらに、プリセットのキャプションスキンを .hyperframes/caption-skin.html にコピーし、自己検証を行います（マッピングに不備があると終了コード 1 で終了します）。終了コード 0 で終了したら、仕様を手作業で編集せずに次のステップへ進みます。

tokens.json にブランドカラーやフォントがない場合（例：キャプチャがない場合）、スクリプトはプリセット独自のパレットを維持します。これはそのまま出荷できる完全なデザインです。ブリーフに記載されたブランドカラーやフォントがキャプチャで見つからなかった場合は、実行前に capture/extracted/tokens.json に追加します（または、ユーザーの design.md を使って入力します）。マッピングにどうしても調整が必要な場合に限り、その後 frame.md を手作業で修正します。

ゲート： build-frame.mjs が終了コード 0 で終了し、名前の付いたプリセットから frame.md が生成されていること。また、プリセットに付属する場合は、キャプションスキンのソースとして .hyperframes/caption-skin.html が存在すること。選択したプリセットがプリファレンスとして記録されていること（--key style_preset --workflow <this workflow>、ブリーフの契約 § 2）。

---

ステップ 3：ストーリーボードとスクリプト

目標：ブリーフとキャプチャした素材を、承認済みのフレームごとのストーリー計画にまとめます。

../hyperframes-creative/references/story-spine.md（フックの表現、証拠より先に価値を伝えること、提案としてのストーリーボード、出典を追跡できるビジュアル）、references/story-design.md、../hyperframes-animation/blueprints-index.md、../hyperframes/references/storyboard-format.md、../hyperframes/references/script-format.md を読みます。これらを使って STORYBOARD.md を作成し、ナレーションが必要な場合は SCRIPT.md も作成します。フロントマターの duration: はブリーフの length をもとに設定します。これはおおよその目安です。編集後、実際の尺が目安に対してどこに収まったかが報告されます。

ストーリーの設計図、フック、説得のロジック、ビート、VO_MODE、アセットの選定には story-design.md を使います。参考ガイドとして、../hyperframes-animation/blueprints-index.md の役割→設計図の一覧を参照します。各ビートに合うものがあれば、候補となる設計図 ID を記します。どのビートが存在するかは、あくまでストーリーの真実に基づいて決めます。ビートを設計図に無理に当てはめたり、定評のある形式があるという理由だけでビートを作り出したりしてはいけません。各ビジュアルフレームの asset_candidates は、正規の一覧である capture/extracted/asset-descriptions.md から選びます。capture/assets/ の生データを閲覧してはいけません。この一覧がない、または使用できない場合を除き、アセットの選択をユーザーに依頼しないでください。ストーリーボードとスクリプトのリファレンスに記載された必須フィールドを正確に使用します。

下書きの作成後、レビューサイクルの計画パスを実施します。../hyperframes/references/review-loop.md § 1 に従い、計画を提案として提示し、承認するか変更するか、そしてまずスケッチを作成するか（推奨）、省略するかの 2 点を尋ねます。フィードバックはチャットの返信で届きます。承認されるまで繰り返します。これはチェックポイントゲートです（ブリーフの契約 § 1）。自律モードでは質問する必要はありません。同じ概要を事前通知として投稿し、そのまま進めます。スケッチはビルドに統合され、最終プレビューと 1 つの質問はステップ 6 で提示されます。

ゲート： STORYBOARD.md が存在し、すべてのビジュアルフレームに asset_candidates があり、ナレーションが必要な場合は SCRIPT.md が存在し、ユーザーがフレームごとの計画を承認していること（自律モードの場合は、概要を事前通知として投稿済みであること）。

---

Step 3.1: 音声

目的：承認済みのスクリプトから、ナレーション、単語ごとのタイミング、音楽、音声メタデータを生成します。

Step 3 の承認後に音声処理を開始します。バックグラウンドで実行し、その後 Step 4 に進みます。

実行する前に、ユーザーの依頼に基づいてナレーションのプロバイダーと音声を選択してください。 Step 0 で選択したプロバイダーを --provider <provider> で渡すか、HF_TTS_PROVIDER を設定します。依頼で音声、性別、トーンが指定されている場合は、それに合った音声 ID を選び、--voice <id> で渡してください。そうでない場合、パイプラインのデフォルトは HeyGen の Marcia（女性）、Kokoro の am_michael です。そのため、「男性の声」のような依頼は、フラグを渡さないと反映されません。音声 ID はプロバイダーごとに異なるため、Step 0 のサインイン状況で選択されたプロバイダーに合わせて確認してください。HeyGen（サインイン済み）の場合は node <MEDIA_DIR>/audio/scripts/heygen-tts.mjs --list（または GET /v3/voices?engine=starfish）を使用します。Kokoro（オフライン）の場合は <MEDIA_DIR>/audio/references/tts.md の音声一覧を参照します（男性は am_／bm_、女性は af_／bf_ の接頭辞）。ユーザーが希望を示していない場合は、パイプラインのデフォルトより先に、記憶された音声（ブリーフの契約 § 2）を使用し、使用した音声を伝えてください。どちらにも指定がない場合に限り、--voice を省略します。この実行でユーザーが音声を明示的に選んだ場合は、その選択を記録してください（prefs.mjs record --key voice）。

node <SKILL_DIR>/scripts/audio.mjs --script ./SCRIPT.md --storyboard ./STORYBOARD.md --hyperframes . --out ./audio_meta.json --provider <provider> --voice <voice-id> &

音声スクリプトは、ナレーション、単語ごとのタイミング、HeyGen の音楽ライブラリからの BGM の検索、タイミングメタデータを処理します。BGM のムードはストーリーボードの music: フィールドで指定します。music: none にすると BGM がオフになります。 音楽の生成ではなく取得に HeyGen Audio API を使用し、TTS と同じ ~/.heygen 認証情報を使用します。プロバイダーの詳細は ../media-use/audio/references/tts.md を参照してください。ホストアプリ独自のツールで音楽または効果音を作成する場合は、ファイルを assets/ に置き、"source": "host" を付けて audio_meta.json ファイルに記載してください。音楽は bgm として { "path": "assets/…", "source": "host" } を記載し、ストーリーボードでは music: none にします。効果音は sfx エントリとして { "frame": <n>, "file": "assets/…", "offset_s": 0, "duration_s": <its length>, "source": "host" } を記載します。音声処理のたびにこれらの項目は保持され、ホスト音声があるフレームには検索したキューは追加されません。

ナレーションがなく、SCRIPT.md もない場合は、音声生成をスキップします。ストーリーボードで音楽のムードが指定されていれば、BGM は引き続き再生できます。

完全な無音を示す正式なマーカー： STORYBOARD.md の先頭にある YAML ブロックで music: none を指定し、SCRIPT.md がなく、さらに sfx: キューもホスト音声もないこと。この組み合わせは、プロジェクトが無音であることを示します。ナレーション、BGM、SFX はありません。audio.mjs はこれを認識して何も生成しません（古い audio_meta.json があれば削除します。audio_meta.json が存在しない場合、assemble は無音として扱います）。そのため、Step 3.1 はそのままスキップできます。ナレーションがなくても、sfx: キューまたはホスト音声があれば、動画は無音ではありません。audio.mjs は fetch-sfx が入力する audio_meta.json ファイルを書き込みます。ユーザーが無音または音楽なしの動画を求めた場合は、この方法を使用してください。ほかの表記を独自に作らないでください。

ゲート： 音声ジョブが開始されているか、プロジェクトが無音（music: none、SCRIPT.md なし、sfx: キューもホスト音声もなし）として設定されていること。

---

Step 4: フレームのビジュアルデザイン

目的：ストーリーボードの各フレームに、ビジュアルの方向性、レイアウトの意図、モーションの選択を追加します。 まずストーリーボードシートをスケッチします（共同作業モードのみ）。 プランが承認されたら、すぐにスケッチ工程を実行します — ../hyperframes/references/review-loop.md § 2（静止画にはタイミングを使わないため、Step 3.1 を待つ必要はありません）。各フレームの構図を自分で決め、予定開始位置に各フレームを index.html に配置し、すべての静止画を1回の実行でスナップショットしてボード boards/storyboard.html を作成します（../hyperframes-creative/references/storyboard-recipe.md）。各フレームを built にし、すべてのフレームが built になったら、レイアウトについての質問を1つだけ行って一時停止します。ボードの確認が取れるまで、指定されたフレームだけを修正します。仮素材：キャプチャした素材の代わりに、ラベル付きの無地ブロックを使います — 実ファイルは Step 5 のワーカーによって追加されます。その後に限り、以下のビジュアルデザインを確認済みのレイアウトに適用します。自律モードの場合、またはユーザーが Step 3 でスケッチを省略することを選んだ場合は、この工程を省略します — Step 5 でフレームは outline から直接 animated になります。

STORYBOARD.md をその場で編集します。別のストーリーボードを作成してはいけません。色、書体、レイアウトの雰囲気、スタイルの基準には frame.md を使います。

references/visual-design.md、../hyperframes-animation/blueprints-index.md、references/motion-language.md、../hyperframes-animation/rules-index.md を読みます。手法（時間指定のショットシーケンス、インラインの Layout 語彙、必須の ## Video direction ブロック）には visual-design.md を使います。各フレームのショット形状を選ぶには ../hyperframes-animation/blueprints-index.md を使います。モーションには motion-language.md（モーション語彙とモーションの原則）および ../hyperframes-animation/rules-index.md（有効なルール名）を使い、モーション名を独自に作ってはいけません。

名前の付いたルックをデザインする前に、必ず最新のカタログを検索します。 ブリーフで指定されたルック、エフェクト、処理、トランジション（「CRT scanlines」「glitch」「film grain」「shimmer sweep」「confetti burst」など）ごとに、npx hyperframes catalog --query "<the look, in plain English>" --json を実行し、STORYBOARD.md にそのルックを書く前に上位の検索結果を読みます。検索に必要なのはインストールされているものだけではありません。プロジェクト、事前の add、アカウントは不要です。どのディレクトリからでも、ホストされているレジストリ全体（約400個のブロックとコンポーネント）を対象に検索できます。すでに目的を果たすブロックがあれば、そのフレームの focal にします — ここで名前を指定します。Step 5 ではディスパッチ前に一度だけ事前インストールし、そのワーカーが再構築する代わりにカスタマイズします。検索しても適合するものが見つからない場合に限り、ルックを手作業で作成します。

各ビジュアルフレームについて、visual-design.md の手法に従い、時間指定のショットシーケンスを STORYBOARD.md に記述します。フレームのブループリントを選ぶ（または構成する）際は、この製品のコンテンツを当てはめ、各 Scene の表示タイミングをナレーションに合わせて調整します。冒頭に情報を詰め込んでその後静止させるのではなく、フレームの全尺を通じて展開させます。各 Scene 内にレイアウトとモーションを記述します（語彙は visual-design.md と motion-language.md を参照）。動画全体に適用する ## Video direction ブロックを1つ追加します。

要素がフレーム境界を越えて見た目上継続する場合は、STORYBOARD.md で両方のワーカーに同じ数値の引き継ぎ情報を指定します。終了側のフレームに handoff_out: を、開始側のフレームに対応する handoff_in: を追加します。要素の名前、カット時点の正確な x/y 位置、スケール、不透明度、モーションの方向と速度を指定します。値が変わらない場合も、すべてのフィールドを記述します。一定値は省略ではなく opacity: 1 です。意図的にすっきりとカットする場合に限り、ブロック全体を省略します。目的はシンプルです。並行作業をするワーカーが、同じ境界部分に対して異なるバージョンを作らないようにします。

ストーリー、スクリプト、アセットの選択、asset_candidates、transition_in、キャプチャしたソース素材を変更してはいけません。このステップでは、スケッチ工程のポーズを除き、HTML を記述しないでください。

ビジュアルデザインが確定したら、名前付きアセットをステージングします。

node <SKILL_DIR>/scripts/stage-assets.mjs --storyboard ./STORYBOARD.md --hyperframes . ゲート： すべてのビジュアルフレームに、ナレーションに合わせて情報が段階的に明かされるタイムコード付きのショットシーケンスがある（冒頭に情報を詰め込まないこと）。## Video direction が存在し、assets/ に名前が指定されたアセットが含まれていること。共同作業の場合：スケッチシートの確認が済んでいること。

---

ステップ 5：フレームを作成する

目標：ストーリーボードの各フレームを HTML コンポジションとして作成し、再生可能な動画に組み立てます。

音声の生成を開始した場合は、ステップ 3.1 の音声が完成するまで待ちます。その後、再生時間を同期し、効果音を取得します。無音の場合は、どちらも省略してください。

node <SKILL_DIR>/scripts/audio.mjs sync-durations --audio-meta ./audio_meta.json --storyboard ./STORYBOARD.md

node <SKILL_DIR>/scripts/audio.mjs fetch-sfx --storyboard ./STORYBOARD.md --hyperframes .

再生時間の同期は機械的に行います。実際のナレーションの長さを優先し、無音フレームは推定値を維持します。同期済みの再生時間を手動で編集してはいけません。

組み立てる前に、最終カットに音楽が合っているか確認します。ライブラリの楽曲は希望する雰囲気に合っていても、短いローンチ動画の冒頭が静かな盛り上がりから始まり、最初の数秒の勢いを損なうことがあります。冒頭と、その後の 5 秒ごとの区間を比較します。後半に、より力強く音楽的に自然な始まりがある場合は、そこからトリミングし、短いフェードインと長めのフェードアウトを設定します。フレームやナレーションのタイミングが変わった場合は、新しい最終尺に合わせてこの確認をやり直し、音楽が早く終わったり、末尾に無音が残ったりしないようにします。

ディスパッチの前に、STORYBOARD.md に記載されたレジストリブロックを一度だけすべて事前インストールし、並列ワーカーがレジストリで競合しないようにします。

for b in <each registry block named in the storyboard>; do npx hyperframes add "$b"; done

ディスパッチの前に、../hyperframes/references/subagent-dispatch.md を読みます。フレームごとのパケットとワーカーの役割ペイロードを作成します。

node <SKILL_DIR>/scripts/frame-packets.mjs --project "$PROJECT_DIR" --storyboard "$PROJECT_DIR/STORYBOARD.md"

ビルダーは、.hyperframes/frame-packets/ の下にフレームごとの範囲を限定したパケット（該当フレームのストーリーボードブロック全体＋ブループリント本文＋引用されたすべてのルールレシピをインライン化したもの）と、_role.md（../hyperframes/references/frame-worker-core.md ＋ このスキルの sub-agents/frame-worker.md をそのまま連結した、完全なワーカー役割定義）を書き出します。フレームごとにサブエージェントを 1 つ割り当て、可能なら並列で、そうでなければ複数回に分けてワーカーを実行します。各ワーカーが担当するフレームは 1 つだけです。プロンプトには _role.md とそのフレームのパケットを含めます。両方を全文貼り付けるか、ワーカーが最初に読み込む 2 つのファイルパスを渡します（どちらも同じ扱いです。いずれの場合も、ワーカーはこの 2 つのドキュメントだけを起点とします）。さらに、PROJECT_DIR、frame_id、そのフレームにディスク上で確認済みのスケッチがあるかどうか（確認済みのスケッチがある場合、ワーカーは描き直さず、そのレイアウトを仕上げます。frame-worker core § When a confirmed sketch exists を参照）、キャンバスサイズ、字幕の有効状態と、字幕が有効な場合は字幕を避ける帯域を含むディスパッチコンテキストも渡します。

ワーカーが読むのは自分のパケットと frame.md だけです。STORYBOARD.md やスキル文書は開きません（上流工程で選択された内容はパケットにインライン化されています）。各ワーカーが書き込めるのは compositions/frames/NN-*.html だけです。ワーカーは STORYBOARD.md を編集してはいけません。

全画面を覆う背景は、#root ではなく class="clip" のレイヤーに配置します。 フレームの地面（色面／グラデーション／グリッド）は、再生時間全体を覆う独立した背景クリップにします。#root／data-composition-id 要素に設定した background はフレームの表示時間に制限され、安定した背景としては使えません。そのため、暗いコンテンツが黒いホスト側の body に重なり、見えなくなることがあります。動画のベースとなる背景は、アセンブラーが frame.md の canvas 色をインデックスの #root に塗ることで設定します。（ルール全文と自己チェックについては、../hyperframes/references/frame-worker-core.md を参照してください。）

各ワーカーからの応答を受け取るたびに、オーケストレーターはそのフレームの状態を STORYBOARD.md で animated にします。

音声タイミングが確定したら、字幕をバックグラウンドで生成し、インデックスを組み立てます。

node <SKILL_DIR>/scripts/captions.mjs build --storyboard ./STORYBOARD.md --audio-meta ./audio_meta.json --hyperframes . --out ./caption_groups.json &

node <SKILL_DIR>/scripts/assemble-index.mjs --storyboard ./STORYBOARD.md --hyperframes . captions.mjs は、プロジェクトの .hyperframes/caption-skin.html（ステップ 2 でコピー）をキャプションのデザインとして使用し、frame.md からブランドトークンを読み込んで適用します。スキンがない場合は、組み込みのデフォルトのピル型デザインをレンダリングします。captions: skipped (<reason>) は有効です。明示的にスキップされた場合は、キャプションなしで続行します。

ゲート： すべてのフレームに animated と記されていること（共同作業の場合：ステップ 4 でスケッチシートを確認済みであること）、index.html が存在すること、キャプションが作成済みか明示的にスキップされていること。

---

ステップ 6：最終仕上げ

目標：組み立てた動画を検証し、ユーザーの承認を得て、最終的な MP4 をレンダリングします。

トランジションを挿入し、チェックを実行して、レビューのために一時停止してからレンダリングします。

node <SKILL_DIR>/scripts/transitions.mjs inject --storyboard ./STORYBOARD.md --hyperframes .

node <SKILL_DIR>/scripts/transitions.mjs verify --storyboard ./STORYBOARD.md --index ./index.html

ボイスのトラックの下で BGM が流れる場合は、組み立てとトランジションの挿入後、チェックの前に BGM をカーブ処理してください。 アセンブラーの data-volume（ボイスの下ではデフォルトで 0.12）は、ベッド全体に適用される固定ゲインであり、必要な周波数帯域のカーブ処理ではありません。カーブ処理後もこの値は維持されるため、両方が適用されます。/hyperframes-audio → Voiceover carve を参照してください。

アセンブラーは、オーディオグループのないナレーションのクリップを個別に出力します。カーブ処理の前に、index.html 内の各ナレーション用 <audio id="el-<frame_id>-voice"> に data-audio-group="voiceover" を追加してください。同じナレーショングループに含める他のボイスクリップも対象です。BGM と SFX はそのグループに含めないでください。複数のボイスクリップはボイスグループに対してカーブ処理する必要があります。これにより、分析を再実行しても後続のクリップがカバーされます。その後、コンポジションプロジェクトから実行します。

node <HYPERFRAMES_AUDIO_SKILL_DIR>/scripts/carve.mjs --comp ./index.html

<HYPERFRAMES_AUDIO_SKILL_DIR> は、インストール済みの hyperframes-audio スキルのディレクトリです。このスクリプトの実行には、PATH 上に ffmpeg があり、コンポジションプロジェクトに @hyperframes/core がインストールされている必要があります（npm i -D @hyperframes/core、または Bun プロジェクトでは bun add -D @hyperframes/core）。スクリプトは BGM と重なっているボイスのトラックを検出します。検出時に明示的な指定が必要な場合は、--bed el-bgm を使い、--voice <voice-element-id> を繰り返し指定してください。BGM に data-fx-carve、data-fx-chain、data-automation が設定されていることを確認してください。複数のナレーションクリップが BGM と重なる場合、data-fx-carve.sources には個別のクリップ ID ではなく、voiceover グループを指定する必要があります。ボイスの下で BGM が流れない場合に限り、この手順を省略します。再アセンブルすると index.html が置き換わるため、ナレーショングループを復元し、カーブ処理を再実行してください。

npx hyperframes lint

npx hyperframes check

npx hyperframes snapshot --at <frame-midpoints-and-each-cut-minus-0.1s-and-plus-0.2s>

snapshot は、キャプチャしたフレームを 1 枚のコンタクトシート（.hyperframes/artifacts/snapshots/<id>/contact-sheet.jpg。コマンドにパスが表示されます）にまとめます。レイアウトの不具合がないか、各中間フレームを確認し、すべてのカットの前後の画像を比較してください。連続して表示される要素は、指定された位置、スケール、不透明度、方向を維持する必要があります。目に見える飛びがあれば、レンダリング前に修正してください。

コマンドが失敗した場合は、stderr を提示して停止してください。復旧コマンドを次々に実行してはいけません。自分で修正してください。最も低コストで安全な方法は compositions/frames/NN-*.html を編集し、失敗したチェックを再実行することです。

チェックに合格したら、ユーザーのレビューのために一時停止します。レビュー手順の最後の確認（../hyperframes/references/review-loop.md § 4）に従い、最終的な Studio プレビューを見せて、「今レンダリングしますか、それとも変更しますか？」と 1 つだけ質問してください。（自律モードの場合も、同じ質問を 1 つだけ行います。ユーザーからプレビューを求められていなくても、プレビューを開いてください。）その後、コンタクトシートとフレーム ID を添えて MP4 を納品し、修正の対象を特定のフレームに絞れるようにします。

プレビュー：npx hyperframes preview --background

レンダリングは、ユーザーの承認後にのみ実行してください（自律モードでは、レンダリングするか変更するかを尋ねた後）。

npx hyperframes render --skill=product-launch-video --quality high --output renders/video.mp4

ユーザーから依頼がない限り、レンダリング後に lint、check、snapshot を再実行しないでください。

ゲート： レンダリング前に lint と check が合格し、スナップショットを確認済みであること。レビュー時にユーザーが承認していること（自律モードでは、チェックに合格し、コンタクトシートを添えて納品すること）。renders/video.mp4 が存在すること。最終返信には MP4 のパスと最終的な長さを記載してください。

---

クイックリファレンス

形式： 横長 1920x1080、縦長 1080x1920、正方形 1080x1080 — 出力先に基づいて決定します（brief contract § 2）。ストーリーボードのフロントマターで、形式を一度だけ設定してください。 バックグラウンドスクリプト： ワークフローに含まれるスクリプトは、scripts/ 配下の以下のみです。build-frame はフレームプリセットを frame.md に取り込み、ブランドに合わせてリミックスします（キャプションのスキンも含みます）。audio は TTS、文字起こし、BGM、SFX、尺の同期を行います。captions はキャプションを処理します。transitions はトランジションの挿入と検証を行います。stage-assets はフレーム名が付いたアセットを assets/ にコピーします。assemble-index はインデックスを組み立てます。それ以外はすべて hyperframes CLI で処理します。

再利用可能で製品に依存しないショットの形状は ../hyperframes-animation/blueprints/ にあり、../hyperframes-animation/blueprints-index.md にインデックス化されています。

読む資料	用途
[../hyperframes/references/brief-contract.md](../hyperframes/references/brief-contract.md)	ゲートの種類、BRIEF.md からのモード導出、フィールドの意味。
[../hyperframes-creative/references/story-spine.md](../hyperframes-creative/references/story-spine.md)	ステップ 3：ストーリーの基本方針 — フックの表現、証拠より先に価値を示すこと、提案の構成、出典を追跡可能なビジュアル。
[../hyperframes-creative/frame-presets/](../hyperframes-creative/frame-presets/)	ステップ 2：フレームプリセットを選択して適用します。
[../hyperframes-creative/references/design-spec.md](../hyperframes-creative/references/design-spec.md)	ステップ 2：ブランドトークンを正しく適用します。
[references/story-design.md](references/story-design.md)	ステップ 3：製品ローンチのストーリーを計画します。
[../hyperframes-animation/blueprints-index.md](../hyperframes-animation/blueprints-index.md)	ステップ 3：役割→ブループリントの一覧。ステップ 4：ショットの形を選択します。
[../hyperframes/references/storyboard-format.md](../hyperframes/references/storyboard-format.md)	ステップ 3：STORYBOARD.md を作成します。
[../hyperframes/references/script-format.md](../hyperframes/references/script-format.md)	ステップ 3：SCRIPT.md を作成します。
[../media-use/audio/references/tts.md](../media-use/audio/references/tts.md)	ステップ 3.1：TTS プロバイダーと音声を選択、または理解します。
[references/visual-design.md](references/visual-design.md)	ステップ 4：フレームのショットシーケンスを記述します（＋レイアウトの語彙）。
[references/motion-language.md](references/motion-language.md)	ステップ 4：モーションの語彙と基本方針。
[references/cut-catalog.md](references/cut-catalog.md)	ステップ 4～5：カットカタログ（ワーカーがフレーム内の継ぎ目を構築します）。
[../hyperframes-animation/rules-index.md](../hyperframes-animation/rules-index.md) + [../hyperframes-animation/rules/](../hyperframes-animation/rules/)	ステップ 5：引用したモーションに対応するローカルルールのレシピ本文。
[../hyperframes/references/frame-worker-core.md](../hyperframes/references/frame-worker-core.md)	ステップ 5：共有ワーカーの契約（パケットビルダーがデルタに先立って追加します）。
[sub-agents/frame-worker.md](sub-agents/frame-worker.md)	ステップ 5：ワークフローのフレームワーカーデルタ。
[../hyperframes/references/subagent-dispatch.md](../hyperframes/references/subagent-dispatch.md)	ステップ 5：サブエージェントを安全にディスパッチします。