website-to-video

まず、このスキルを最新の状態に保ってください。確認は求めず、サイレントで実行してください： npx hyperframes skills update website-to-video。すべて最新の場合はすぐに何もせず終了します。最新でない場合は、このスキルと、依存しているコアドメインスキルを更新してから使用できる状態にします。

media-use：音声／画像／ロゴの入手元を探す前に、/media-use を呼び出して、HeyGen カタログから BGM／SFX／画像を、公式ソースからブランドロゴを取得してください。既存のアセットを登録するには、まず --adopt を実行します。詳しくは /media-use スキルを参照してください。

figma source：URL が figma.com のリンク（公開中のプロダクトサイトではない）の場合は、まず /figma を実行してください。必要に応じて、アセットのエクスポート、ブランドトークンの取得、コンポーネント／ストーリーボードの再構築を行ってから、その出力をもとにこのワークフローを構築します。Figma を直接、未加工の MCP ツールで操作しないでください。SVG のサニタイズ、.media/manifest.jsonl への来歴記録、ブランドトークンの var() バインディングが省略されるため、後からブランドを変更しても、すべてを再インポートしない限り反映できません。

ウェブサイトから HyperFrames へ

ウェブサイトをキャプチャし、プロ品質の動画を作成します。

Step 0 の前に、ルートを確認してください。 このスキルでは、一般的なサイトの「紹介／サイトをもとにした」動画を作成します。ユーザーの目的が実際にはプロダクトのマーケティング／ローンチ／プロモーション（この URL が対象の場合も、「自社サイトのプロモーション」の場合も）なら → /product-launch-video。サイトのないトピック解説なら → /faceless-explainer。GitHub PRなら → /pr-to-video。既存の動画ファイルの再編集／色変更／並べ替えは対象外です。「動画を作って」という曖昧な依頼からここに振り分けられた場合や、ローンチ動画か一般サイトの動画か判断できない場合は、まず /hyperframes を読んでください（完全な振り分け表と「HyperFrames でできないこと」の節を参照）。

ユーザーの依頼例：

• 「このウェブサイトを、Instagram 向けの 15 秒のソーシャルクリップにしてください」
• 「https://... から、30 秒のサイトツアー／紹介動画を作ってください」
• 「ホームページをキャプチャして、そのビジュアルを使った動画を作ってください」

このワークフローは 7 つのステップで構成されています。各ステップで成果物を作成し、それを次のステップに進む条件とします。デフォルトではユーザーと共同で進めます。💬 の付いたゲートでは作業を止め、ユーザーに確認します（シグナル、適用方法、ゲートの分類については ../hyperframes-core/references/brief-contract.md が正式な定義です）。ユーザーが自律モード（「任せます」「おまかせで」）を指定した場合は、💬 のユーザー設定に関するゲートを省略します。このワークフローへの適用方法については step-2-brief.md を参照してください。

自律モードは「すべてのゲートを省略する」という意味ではありません（brief contract § 1）。自律モードで対象となるのは、ユーザーの代わりにエージェントが判断する、ユーザーの好みに関する質問です（TTS プロバイダー、音声、色の強調、ビート数、音楽を付けるかどうか、字幕を付けるかどうかなど）。品質検証のゲートは対象外です。 自動モードでも、以下は省略できません。

• アセット監査（Step 3）— コンタクトシートを確認し、各アセットについて USE／SKIP の理由を示す
• ビートごとの HTML 読み取り（Step 5）— 各ビートについて、構造化された根拠ブロックを作成する
• DoD チェックリスト（Step 6）— アニメーションマップ、警告ごとの WCAG 検証、音声／モーションの再生確認を含む
• 誠実な開示セクション（Step 6）— 最終的な要約に「確認していないこと」を必ず記載する

「自動モードでは行動を優先するため、X を省略しよう」と考えている場合、X が好みに関する質問ではなく検証ゲートなら、その考え方は誤りです。行動優先の原則は、何を作るかの判断に適用されるものであり、検証するかどうかの判断には適用されません。

---

ステップ 0：ブランドを把握して理解する

読む： references/step-0-capture.md

サイトを取得してから、抽出したデータを読み、ブランドと製品を理解します。つまり、何をするものか、誰を対象としているか、どんなトーンで語るか、どんな雰囲気を持つかを把握します。取得したアセットは後で使うブランドツールキットであり、動画を構成する素材ではありません。

ブリーフの前にサインイン状況を表示する — npx hyperframes auth status を実行し、出力をそのまま伝えてください（言い換えたり書き換えたりしないでください）。 音声／BGMにHeyGenとローカルエンジンのどちらを使うか、またサインインしていない場合はサインイン方法が示されます。サインインしていない場合は、ブリーフやその他の質問をする前に必ず停止し、ユーザーがサインインするか、「go」／「offline」と答えてローカルエンジンを使って続行するかを選ぶまで待ってください。 これは単なる補足ではなく、実際の選択事項として扱います。選択肢をブリーフの質問に含めないでください。また、リポジトリごとの .env にキーを書き込まないでください。（自律モードでは、状況を記録し、オフラインで続行してください。）正式なガイダンスについては、../media-use → Preflightを参照してください。

ゲート： サイトの概要が出力されていること — アセット／色／フォントの一覧より先に、戦略を優先して（製品が何をするか、誰を対象としているか、ブランドのトーン）説明されていること。サインイン状況が表示されていること（サインイン済み、またはオフラインで続行）。

---

ステップ 1：ブランドアイデンティティ

読む： references/step-1-design.md

ビジュアルアイデンティティをまとめたブランド用チートシートとして、DESIGN.mdを作成します。色、タイポグラフィ、コンポーネントのスタイル、レイアウトの原則を記載します。正確な算出値には design-styles.json を使用してください。

時短オプション： ペースの速い動画（ビートごとのビルボード表示）の場合、DESIGN.mdは色とフォント、やるべきこと／避けるべきことをまとめた50行程度の要約でかまいません。300行の文書にする必要はありません。ステップ5のサブエージェントへのプロンプトにブランドの値を直接貼り付けるため、DESIGN.mdの詳細さが重要になるのは複雑な構成の場合だけです。

ゲート： DESIGN.md が存在し（長さは問いません）、少なくともカラーパレット、フォントの選択、やるべきこと／避けるべきことが記載されていること。

---

ステップ 2：戦略とメッセージ

読む： references/step-2-brief.md、references/capabilities.md（目次を確認し、必要な場合に限り詳細セクションを参照）

ビジュアルやアセットについて話す前に、動画で伝えるべきことについてユーザーと認識を合わせます。ユーザーのプロンプトを確認してください。動画の種類とスタイルは、すでに伝えられている可能性があります。不足していることだけを尋ねます。この動画で伝えるべき最重要事項、ナラティブアーク、対象視聴者です。

ゲート： 動画の種類、長さ、形式、そして何より重要なメッセージとナラティブアークが確定していること。これらが決まっていないと、ステップ3でコンセプトを起点としたストーリーボードを作成できません。

---

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

読む： references/step-3-storyboard.md

コンセプトを起点としてストーリーボードを作成します。メッセージ → ナラティブアーク → アークに沿ったビート → 各ビートで使う手法 → 最後にブランドのアクセントを加える、という順序で進めます。次に、それに合わせてナレーションのスクリプトを作成します。ビートごとの要約を添えて、両方をユーザーに提示します。ユーザーの承認を得るまで調整を重ねます。

ゲート： STORYBOARD.md と SCRIPT.md が存在し、ユーザーがプランを承認していること。

---

ステップ 4：VO、タイミング＋字幕 💬

読む： references/step-4-vo.md

ステップ2でナレーションなしと決まっている場合は、BGMについて尋ねてからステップ5に進みます。それ以外の場合は、使用するTTSプロバイダー（HeyGen TTS、ElevenLabs、Kokoro）をユーザーに尋ね、音声を生成して文字起こしし、タイムスタンプをビートに対応付けます。その後、字幕について尋ねます。

ゲート： （a）ナレーションなしが指定され、ストーリーボードに手動のビートタイミングが設定されている、または（b）narration.wav と transcript.json が存在し、実際の長さに合わせてビートのタイミングが更新されていること。

ステップ 5：コンポジションを構築する

読むもの： hyperframes スキル（読み込んでください。すべてのルールが重要です） 読むもの： references/step-5-build.md

ストーリーボード（ステップ 3）で選んだアーキテクチャとテンポに従って、index.html とコンポジションを構築します。サブエージェントは各ビートについて hyperframes lint と hyperframes snapshot を実行してから報告します。

ゲート： すべての compositions/beat-N.html を、メインエージェントが DESIGN.md と STORYBOARD.md に照らして最初から最後まで読み終えていること。ビートごとのチェックリストは step-5-build.md にあります。

---

ステップ 6：検証して納品する

読むもの： references/step-6-validate.md

Lint と検証を行い、動画の長さに合わせた枚数のスナップショットを撮影します（計算式：max(beats × 3, ceil(duration_seconds / 2))）。それぞれを確認し、納品前に問題を修正します。localhost の Studio プロジェクト URL を納品します。ユーザーから明示的に依頼された場合に限り、MP4 にレンダリングします。その Studio URL を提示するのは引き渡し時のみにしてください。最終版の安定したプレビューであり、ビルド中に撮影するスナップショットはヘッドレスなので、ビルドの途中でプレビューを表示しないでください。

誇れるものを納品しましょう。 引き渡す前に、自分の名前を載せてこれをソーシャルメディアに投稿したいと思うか、自問してください。そう思わない場合は、問題を修正してください。

ゲート： npx hyperframes check がエラーゼロで成功し、最終回答にアクティブな Studio プロジェクト URL が含まれていること。

---

クイックリファレンス

動画の種類

動画の種類ごとの一般的な制約です。定型ルールではなく、出発点として使用してください。ビート数は目標範囲ではなく、コンテンツとナレーションに基づいて決めてください。

種類	一般的な長さ	長さを決める要因	ナレーション
ソーシャルクリップ（IG/TikTok）	10–15s	プラットフォームの制限	任意
サイトのウォークスルー	30–60s	スクリプトの長さ	全編ナレーション
コンテンツのお知らせ	15–30s	コンテンツの複雑さ	全編ナレーション
ブランドリール	20–45s	音楽トラック	任意、音楽を中心に構成

製品を「売り込む」製品デモ、機能のお知らせ、ローンチティーザーは /product-launch-video に該当します（冒頭のルーティングに関する注記を参照してください）。

この表にビート数がないのは意図的です。「ソーシャル広告なら 3～4 ビート」のように決めるのではなく、ストーリーボードに基づいて決めてください。複雑な製品のソーシャル広告には、タイミングをよく練った 5 ビートが必要かもしれません。強いビジュアルの主題が 1 つあるブランドリールなら、3 ビートで十分かもしれません。

フォーマット

• 横向き： 1920x1080（デフォルト）
• 縦向き： 1080x1920（Instagram Stories、TikTok）
• 正方形： 1080x1080（Instagram フィード）

参考ファイル

ファイル	参照するタイミング
step-0-capture.md	ステップ 0 — 情報を収集し、ブランドと製品を理解して、戦略を優先したサイトの概要を作成します
step-1-design.md	ステップ 1 — DESIGN.md のブランド用チートシートを作成します（5 セクション、250〜350 行。看板スタイルのソーシャル広告向けに、50 行の簡易版もあります）
step-2-brief.md	ステップ 2 — ユーザーとメッセージ、物語の展開、対象読者についてすり合わせます
capabilities.md	ステップ 2 と 5 — HyperFrames でできることの全項目（24 セクション）。ブリーフィングでは目次を確認し、制作中に必要なセクションを詳しく確認します
step-3-storyboard.md	ステップ 3 — ユーザーのレビューを挟みながら、ストーリーボードとスクリプトをまとめて作成します
step-4-vo.md	ステップ 4 — TTS プロバイダーの選択、音声の生成、タイミングの調整
step-5-build.md	ステップ 5 — index.html とコンポジションを作成します
step-6-validate.md	ステップ 6 — 動画の長さに応じてリント、検証、スナップショットを実施し、プレビューします
techniques.md	ステップ 3 と 5 — 基本的なアニメーション技法 13 種とコードパターン（そのままコピーせず、応用してください）
html-in-canvas-patterns.md	ステップ 5 — HTML-in-Canvas 効果の完全なコードパターン（hyperframes スキルに含まれています）