website-to-hyperframes について
Web サイトのキャプチャから完成動画を作るクリエイティブ向けスキルです。製品紹介、SNS 広告、ブランド動画などに使え、文書と素材を段階ごとの確認点として脚本、絵コンテ、ナレーション、合成、検証を進めます。
主な機能
- 01サイト内容とブランド要素の取得
- 02DESIGN.md とナレーション原稿の作成
- 03ビート別絵コンテと素材監査表の作成
- 04音声生成とタイミングの割り当て
- 05コンポジションの構築と自己レビュー
- 06Lint・検証・プレビュー
活用シーン
- 01Web サイトから製品発表動画を制作
- 02Instagram や TikTok 向け広告を作成
- 03製品デモや機能告知動画を制作
- 04ブランド動画やローンチ予告を制作
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/website-to-hyperframesを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/step-1-capture.mdstep-2-design.mdstep-3-script.mdstep-4-storyboard.mdstep-5-vo.mdstep-6-build.mdstep-7-validate.mdtechniques.md詳細
Website を 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：SCRIPT を作成
参照: references/step-3-script.md
ナレーションの台本を作成します。ストーリーの骨格となるものです。シーンの長さは推測ではなく、ナレーションに基づいて決めます。
条件: プロジェクトディレクトリに SCRIPT.md が存在します。
ステップ4：STORYBOARD を作成
参照: references/step-4-storyboard.md
各ビートのクリエイティブディレクション（ムード、カメラ、アニメーション、トランジション、アセット、奥行きレイヤー、SFX）を作成します。これはクリエイティブの指針となるもので、エンジニアが各コンポジションを構築する際に従うドキュメントです。
条件: ビートごとの指示とアセット監査テーブルを含む STORYBOARD.md が存在します。
ステップ5：VO を生成してタイミングを割り当てる
TTS 音声を生成し、文字起こしして単語単位のタイムスタンプを取得し、タイムスタンプを各ビートに割り当てます。実際の長さを反映するように STORYBOARD.md を更新します。
条件: narration.wav（または .mp3）と transcript.json が存在します。STORYBOARD.md のビートのタイミングが更新されています。
ステップ6：コンポジションを構築
参照: /hyperframes スキル（実行してください。すべてのルールが重要です）
参照: references/step-6-build.md
ストーリーボードに従って各コンポジションを構築します。各コンポジションの完成後に、レイアウト、アセットの配置、アニメーションの品質を自己レビューします。
条件: すべてのコンポジションが自己レビュー済みです。要素の重なりやアセットの配置ミスがなく、静止画像はすべて動きを伴っています。
ステップ7：検証して納品
参照: references/step-7-validate.md
Lint、検証、プレビューを行います。複数セッションにわたる継続作業のために HANDOFF.md を作成します。
条件: npx hyperframes lint と npx hyperframes validate がエラーなしで成功します。
クイックリファレンス
動画の種類
| 種類 | 長さ | ビート数 | ナレーション |
|---|---|---|---|
| ソーシャル広告（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 Stories、TikTok）
- 正方形：1080x1080（Instagram フィード）
参考ファイル
| ファイル | 読むタイミング |
|---|---|
| step-1-capture.md | Step 1 — キャプチャしたデータの読み取り |
| step-2-design.md | Step 2 — DESIGN.md の作成 |
| step-3-script.md | Step 3 — ナレーションスクリプトの作成 |
| step-4-storyboard.md | Step 4 — ビートごとのクリエイティブディレクション |
| step-5-vo.md | Step 5 — TTS、文字起こし、タイミング |
| step-6-build.md | Step 6 — 自己レビューを行いながらコンポジションを構築 |
| step-7-validate.md | Step 7 — lint、検証、プレビュー、引き継ぎ |
| techniques.md | Steps 4 & 6 — コードパターンを使った10種類のビジュアルテクニック（SVG描画、Canvas 2D、3D、タイポグラフィ、Lottie、動画、タイピング、可変フォント、MotionPath、トランジション） |