website-to-hyperframes

ウェブサイトをHyperFramesに

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

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

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

ワークフローは7つのステップで構成されています。各ステップで成果物を作成し、次のステップに進むための条件とします。

---

ステップ1：キャプチャして把握する

参照： references/step-1-capture.md

キャプチャを実行し、抽出されたデータを読み、書き出して忘れる方法で作業用の要約を作成します。

条件： サイトの要約（名前、主な色、フォント、主要なアセット、雰囲気を表す一文）を表示します。

---

ステップ2：DESIGN.mdを作成する

参照： references/step-2-design.md

キャプチャしたウェブサイトの簡潔なブランドリファレンスを作成します。6つのセクション、約90行です。これはカンニングペーパーであり、クリエイティブプランではありません。クリエイティブプランはステップ4で作成します。

条件： プロジェクトディレクトリにDESIGN.mdが存在します。

---

ステップ3：スクリプトを作成する

参照： references/step-3-script.md

ナレーションスクリプトを作成します。これはストーリーの骨格です。シーンの長さは推測ではなく、ナレーションを基に決めます。

条件： プロジェクトディレクトリにSCRIPT.mdが存在します。

---

ステップ4：ストーリーボードを作成する

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

各ビートのクリエイティブディレクション（ムード、カメラ、アニメーション、トランジション、アセット、奥行きのレイヤー、効果音）を作成します。これはクリエイティブの指針となる重要な資料であり、各コンポジションの構築時にエンジニアが従うドキュメントです。

条件： ビートごとの指示とアセット監査テーブルを含むSTORYBOARD.mdが存在します。

---

ステップ5：音声を生成してタイミングを割り当てる

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

TTS音声を生成し、単語単位のタイムスタンプを付けるために文字起こしを行い、タイムスタンプをビートに割り当てます。実際の長さを反映するようにSTORYBOARD.mdを更新します。

条件： narration.wav（または.mp3）とtranscript.jsonが存在し、STORYBOARD.mdのビートのタイミングが更新されています。

---

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

参照： hyperframesスキル（読み込みます。すべてのルールが重要です） 参照： references/step-6-build.md

ストーリーボードに従って各コンポジションを構築します。各コンポジションの作成後、レイアウト、アセットの配置、アニメーションの品質をセルフレビューします。

条件： すべてのコンポジションでセルフレビューが完了しています。要素の重なりやアセットの配置ミスがなく、動きのない静止画像もありません。

---

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

参照： references/step-7-validate.md

Lint、検証、スナップショットの作成、プレビューを行います。まず、ローカルホストのStudioプロジェクトURL （http://localhost:<port>/#project/<project-name>）をユーザーに渡します。MP4へのレンダリングは、明示的に依頼された場合にのみ行います。index.htmlをプロジェクトの 受け渡し用リンクとして扱わないでください。これはソースコードの参照用にすぎません。

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

---

クイックリファレンス

動画の種類

種類	長さ	ビート数	ナレーション
ソーシャル広告（IG/TikTok）	10-15s	3-4	任意のフック文
商品デモ	30-60s	5-8	全編ナレーション
機能のお知らせ	15-30s	3-5	全編ナレーション
ブランドリール	20-45s	4-6	任意、音楽重視
ローンチティーザー	10-20s	2-4	最小限、ハイエナジー

フォーマット

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

参考ファイル

ファイル	読むタイミング
step-1-capture.md	ステップ 1 — キャプチャしたデータの読み取り
step-2-design.md	ステップ 2 — DESIGN.md の作成
step-3-script.md	ステップ 3 — ナレーションスクリプトの作成
step-4-storyboard.md	ステップ 4 — 各ビートの演出方針
step-5-vo.md	ステップ 5 — TTS、文字起こし、タイミング
step-6-build.md	ステップ 6 — セルフレビューを行いながらコンポジションを構築
step-7-validate.md	ステップ 7 — リント、検証、スナップショット、プレビュー
techniques.md	ステップ 4・6 — 11 種類のビジュアル技法とコードパターン（SVG 描画、Canvas 2D、3D、タイポグラフィ、Lottie、動画、タイピング、可変フォント、MotionPath、トランジション、音声連動）