website-to-hyperframes

ウェブサイトから HyperFrames へ

ウェブサイトをキャプチャして、プロフェッショナルな動画を作成します。

ユーザーは次のように依頼します。

• 「https://... をキャプチャして、25秒の商品ローンチ動画を作ってください」
• 「このウェブサイトを、Instagram向けの15秒のソーシャル広告にしてください」
• 「https://... から30秒の商品紹介動画を作成してください」

ワークフローは7つのステップで構成されています。各ステップで成果物を作成し、それが次のステップへの進行条件になります。デフォルトでは共同作業として進めます。💬 のマークが付いた確認ポイントでは作業を止めて、ユーザーに確認します。ユーザーが自律モード（「お任せします」「驚かせてください」など）を希望した場合は、💬 のユーザー設定に関する確認ポイントを省略します。設定の引き継ぎについては step-2-brief.md を参照してください。

自律モードは「すべての確認ポイントを省略する」ことではありません。 自動モードの対象は、ユーザー設定に関する質問（TTS プロバイダー、音声、色の強調、ビート数、音楽の有無、字幕の有無など、エージェントがユーザーに代わって決める項目）です。品質検証の確認ポイントは対象外です。自動モードでも、以下は省略できません。

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

「自動モードでは行動を優先するので、Xを省略してもよい」と考えているなら、Xが設定に関する質問ではなく検証の確認ポイントである場合、その考え方は誤りです。行動を優先するとは、_何を作るか_を決める際に適用するものであり、_検証するかどうか_を決める際に適用するものではありません。

---

ステップ0：ブランドをキャプチャして把握する

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

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

確認ポイント： サイトの概要を出力します。アセット、色、フォントの一覧より先に、製品が何をするのか、誰を対象としているのか、ブランドの語り口を中心にまとめます。

---

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

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

DESIGN.md を作成します。色、タイポグラフィ、コンポーネントのスタイル、レイアウトの原則をまとめた、ブランドのチートシートです。正確な計算値には design-styles.json を使用します。

時短オプション： テンポの速い動画（1ビートごとにビルボードを切り替える形式）では、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：ナレーション、タイミング、字幕 💬

参照： references/step-4-vo.md

ステップ 2 でナレーションなしと判断された場合は、バックグラウンドミュージックについて尋ねてから、ステップ 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

リントと検証を行い、動画の長さに合わせてスナップショットを撮影し（計算式：max(beats × 3, ceil(duration_seconds / 2))）、それぞれを確認します。納品前に問題を修正してください。localhost の Studio プロジェクト URL を納品し、ユーザーから明示的な依頼があった場合にのみ MP4 にレンダリングします。

誇りを持って納品できるものを作りましょう。 引き渡す前に、自問してください。自分の名前を添えてソーシャルメディアに投稿しますか？そうでなければ、問題を修正してください。

完了条件： npx hyperframes lint と npx hyperframes validate がエラーなしで成功し、最終回答に有効な Studio プロジェクト URL が含まれていること。

---

クイックリファレンス

動画の種類

動画の種類ごとの一般的な制約です。目安として使い、固定の公式として扱わないでください。ビート数は目標範囲ではなく、コンテンツとナレーションに基づいて決めます。

種類	一般的な長さ	長さを決める要素	ナレーション
ソーシャル広告（IG/TikTok）	10–15s	プラットフォームの制限	任意
製品デモ	30–60s	スクリプトの長さ	全編ナレーション
機能発表	15–30s	機能の複雑さ	全編ナレーション
ブランドリール	20–45s	音楽トラック	任意、音楽を重視
ローンチティーザー	10–20s	フックの勢い	最小限

ビート数をこの表に含めていないのは意図的です。「ソーシャル広告＝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 スキルに含まれています）