make-a-video

動画を作る — 初心者から完成したMP4までのスキル

2つのフェーズ、順番に進む8つのゲートで構成されています。各ゲートでは、次のゲートで使用する具体的な成果物を作成します。ゲートを飛ばさないでください。

このスキルを使う場合 — 引き継ぐ場合

このスキルを使う場合：

• ユーザーがHyperFrames初心者で、アイデア、台本、または概要から始める場合
• フレームワークのリファレンスではなく、最初から最後までの手順を求めている場合
• まだフォーマットを決めていない場合

引き継ぐ場合：

• ユーザーがURLを貼り、そのサイトから動画を作りたい場合 → /website-to-hyperframes を呼び出します
• ユーザーが顔出し映像とシーンのオーバーレイを組み合わせた9:16の縦型動画を明確に希望している場合 → ここでゲート1〜4を実行し、ゲート5から /short-form-edit を呼び出します
• ユーザーが動画ではなくフレームワークのルールを尋ねている場合 → /hyperframes を呼び出します

2つのフェーズ

• フェーズ1 — ヒアリング（ゲート1〜4）： コードに取りかかる前に、意図、フォーマット、台本、音声、スタイル、素材、テンポなど、必要な情報をすべて集めるための会話を1回行います。内容を BRIEF.md にまとめ、明示的な承認を待ちます。
• フェーズ2 — ビルド（ゲート5〜8）： スキャフォールド作成 → ストーリーボード → コンポジション → lint → Studioでプレビュー → 仮レンダリング → 映像を目視で確認 → MP4プレビュー → 最終レンダリング。

---

ゲート1 · 意図とフォーマット

AskUserQuestion を使い、一度に1つずつ質問します。可能な場合は選択式にします。

1. この動画は何に使いますか？（プロモーション · SNS広告 · ローンチ予告 · 製品デモ · チュートリアル · 解説動画 · イントロ／アウトロカード · その他）
2. 対象視聴者は誰ですか？（自由回答）
3. 目標の長さはどれくらいですか？（短尺10〜20秒 · プロモーション20〜45秒 · 解説動画45〜90秒 · レッスン1.5〜3分 · カスタム）
4. アスペクト比は？（16:9 1920×1080 · 9:16 1080×1920 · 1:1 1080×1080）
5. フレームレートは？（デフォルトは30 · UIを鮮明にするなら60 · 映画風なら24）
6. 配信先／納品時の制約はありますか？（ファイルサイズ · 納期 · 再生場所）

ゲート条件： 6項目すべてを確認します。回答が9:16で顔出し映像ありの場合は、ゲート5で /short-form-edit に引き継ぐ計画を立てます。

質問の全リスト：Read: references/interview-questions.md

---

ゲート2 · 台本と音声

1. 台本の用意方法は？（貼り付け · 概要から作成する · 自分で録音する · テキストからTTS · ナレーションなし）
2. TTSの場合：音声の好みを確認します。npx hyperframes tts --help の選択肢を提示します。話す速度も確認します。
3. 顔出し映像の場合：録画ファイルの場所 · 全画面か隅に配置するか · 文字起こしが必要か？（npx hyperframes transcribe <file> --model small.en --json）
4. 字幕は必要ですか？（なし · ハイプ調 · コーポレート調 · 1語ずつ表示するカラオケ風 · 最小限）

ゲート条件： 台本（または下書き）、音声の計画、字幕の計画を確認します。

---

ゲート3 · スタイルの確認

ユーザーに質問する前に、既存の素材を確認します。 <workspace-root>/assets/ と、プロジェクトにある assets/ フォルダーを確認してください。すでにある素材については尋ねないでください。

次に、段階的に質問します。すべてに回答する必要はありません。

1. スタイルガイドまたはブランド資料はありますか？（貼り付け／パス · なし）
2. カラーパレットはありますか？（16進数コード · なし — MOTION_PHILOSOPHY のデフォルトを使用）
3. フォントは？（Google Fontsの名前 · ファイルパス · なし — Inter + JetBrains Mono のデフォルトを使用）
4. ロゴファイルはありますか？（パス · なし — 代わりにテキストのワードマークを使用）
5. 雰囲気の参考にする動画はありますか？（URL／パス · なし）
6. その他の素材はありますか？（スクリーンショット · 製品写真 · Bロール · 音楽 — パスを列挙）
7. MOTION_PHILOSOPHY の美学（黒いキャンバス · クローム調の文字 · パースペクティブグリッド · 素早いトランジション）にしますか、それとも別の雰囲気にしますか？
8. テンポは？（速い1〜2秒 · 標準2〜3秒 · ゆったり3〜5秒）
9. 音楽は？（なし · アンビエントパッド0.15 · BGM0.4 · 全面的な音楽0.8 — 音楽ファイルがある場合はパスも確認）
10. アウトロ／行動喚起のテキストは？

ユーザーにブランドを押し付けてはいけません。 スタイルの提供をユーザーが明示的に断った場合に限り、MOTION_PHILOSOPHY のデフォルトを使用します。

スタイル確認の全手順と MOTION_PHILOSOPHY のデフォルト：Read: references/style-intake.md

---

ゲート 4 · ブリーフの作成（制作前の必須ゲート）

1. ワークスペースのルートに MOTION_PHILOSOPHY.md があれば読みます。存在する場合は必須です。見つからない場合は、references/style-intake.md のデフォルト設定に従って進め、ブリーフに不在であることを記載します。
2. プロジェクトの保存場所が明らかでない場合は、どこに置くか尋ねます。
   • video-projects/ が存在する場合 → video-projects/<slug>/ を使用します
   • それ以外の場合 → ユーザーに尋ねます
3. <project-folder>/BRIEF.md を作成します。
   • スラッグ · 目的 · 対象者 · 寸法 · fps · 長さ
   • スクリプト（全文またはアウトライン）
   • 音声の選択 · キャプションの計画 · 顔出しカメラの計画
   • スタイルプロファイル：カラーパレット（hex）、フォント、ロゴのパス、参考動画
   • ペース配分
   • パス付きのアセット一覧
   • アウトロ／CTA のテキスト
4. ブリーフを提示します。明示的な承認を待ちます。「はい、作成してください」と明確に承認されるまで、ゲート 5 に進んではいけません。

---

ゲート 5 · スキャフォールドとストーリーボード

最初に引き継ぎ要否を確認

ブリーフで、顔出しカメラとシーンオーバーレイを含む 9:16 縦型のトーキングヘッド動画が指定されている場合は、今すぐ /short-form-edit を呼び出し、ブリーフを引き継ぎます。トランスクリプトを中心としたワークフローで、フック、カット、キャプション、映像素材、サウンドを扱います。

それ以外の場合は続行します。

スキャフォールド

1. mkdir <project-folder>
2. 同じ形式の兄弟プロジェクトがある場合は、その hyperframes.json と meta.json をテンプレートとしてコピーすることを提案します。それ以外の場合は、フォルダー内で npx hyperframes init を実行します。
3. meta.json をユーザーのスラッグ、寸法、fps で編集します。
4. 提供されたアセットを <project-folder>/assets/ にコピーします。
5. ゲート 3 の内容を基に <project-folder>/assets/style-profile.md を作成します。カラーパレット、フォント、ロゴの唯一の信頼できる情報源とします。

ストーリーボード

references/storyboard-template.md のテンプレートを使用して <project-folder>/STORYBOARD.md を生成します。すべてのビートに次を含めます。

Beat N — TITLE (start–end, duration) — Concept in one sentence
Visual elements: [each element, size, animation, timing]
Motion language: [kind of motion]
Eases used: [3–4 distinct GSAP eases]
Exit: [transition into next beat]
Audio: [VO line / SFX / music layer]

ファイルの先頭に、シーン · 開始時刻 · 長さ · コンポジションファイルを含むタイミング表を配置します。

三幕構成を提案します。

• 第 1 幕（フック）≒ 全体の 20%
• 第 2 幕（本文）≒ 全体の 55%
• 第 3 幕（結末と、4～6 秒のホールドを含むアウトロ）≒ 全体の 25%

（MOTION_PHILOSOPHY §0 Law 9、§1。）

ユーザーの意図をカタログブロックに対応付けます。 Read: references/catalog-intent-map.md

ゲート： ストーリーボードとタイミング表を提示します。ユーザーが承認するまで調整します。

---

ゲート 6 · コンポジションの構築

フレームワークのルールを確認するため、/hyperframes を呼び出します。このスキルはスキャフォールドと規律を担い、/hyperframes がルールを適用します。

すべてのサブコンポジションにスキャフォールドを適用

<div data-composition-id="scene-name" data-start="..." data-duration="...">
  <style>[data-composition-id="scene-name"] { /* scoped */ }</style>
  
  <script>
    (function(){
      const SLOT_DURATION = ...;
      const tl = gsap.timeline({ paused: true });
      // ... tweens ...
      tl.to({}, { duration: SLOT_DURATION }, 0);   // anchor — MOTION_PHILOSOPHY Law 11
      window.__timelines["scene-name"] = tl;
    })();
  </script>
</div>

定型コード一式と、キャプションのパターン、アンビエント背景のパターンについては、Read: references/composition-scaffold.md を参照します。

構築ルール

• コンポジション全体の長さにわたって、data-track-index="0" にアンビエント背景を配置します。
• キネティックタイポグラフィのオープナー： 単語ごとに 0.06～0.10 秒ずらします。
• index.html では、キャプションをルートコンポジションの兄弟要素として、body レベルに配置します。それぞれに data-track-index ≥ 20 を設定します。シーンのタイムライン内には決して配置しません（MOTION_PHILOSOPHY §3.13）。
• カタログブロックは npx hyperframes add <name> でインストールします。直後に、ブロックの CSS を [data-composition-id="..."] にスコープします。カタログブロックには html, body { ... } のルールが含まれており、サブコンポジションとして読み込むと親ドキュメントに漏れ出します。
• 縦型＋顔出しカメラ： ネイティブの 1920×1080 の顔映像を translate と scale を使った transform でラップし、画面下半分または全画面モードにします。/short-form-edit を使わずにここまで進んだ場合は、引き継ぎを強く検討してください。
• ユーザーから提供されたものだけを適用します。 ユーザーのカラーパレット、フォント、ロゴを使用します。それ以外は追加しません。MOTION_PHILOSOPHY のデフォルト設定を選んだ場合は、references/style-intake.md からカラーパレットとフォントの組み合わせを取得します。

決定性

Math.random()、Date.now()、レンダリング時の fetch() は使いません。シード付き PRNG または調和正弦ハッシュを使用します（MOTION_PHILOSOPHY §3.10）。

ゲート 7 · Lint → Studio プレビュー（プレビューゲート 1 — 必須）

1. npx hyperframes lint — すべてのエラーを修正し、警告をトリアージします。
2. バックグラウンドで npx hyperframes preview を実行します。
3. http://localhost:3002 に「Studio running」と表示されるまで待ちます。
4. ユーザーに URL と個別のコンポジション URL（http://localhost:3002/?comp=<id>）を渡します。プロジェクトに WebGL シェーダーブロックがある場合は、個別の URL を先に案内してください。ソフトウェア WebGL フォールバックでは、マスターコンポジションが停止することがあります。
5. 続行する前に、ユーザーから「問題ありません。ドラフトをレンダリングしてください」という明示的な返答を待ちます。返答がないことは承認ではありません。

ホットリロードが有効になっているため、編集内容はリアルタイムで反映されます。

---

ゲート 8 · ドラフトのレンダリング → 視覚的な確認 → MP4 プレビュー → 最終版

ドラフトのレンダリング

npx hyperframes render --quality draft --output renders/<slug>-draft.mp4

視覚的な確認（納品前に必須）

Lint に合格しても、デザインが機能しているとは限りません。フレームを抽出して、実際に確認してください。

1. mkdir -p renders/frames
2. ビートのすべてのヒーローモーメントと、すべてのトランジションについて：

   ffmpeg -y -ss <t> -i renders/<slug>-draft.mp4 -frames:v 1 -q:v 2 renders/frames/t<t>.png
   

3. すべての PNG で Read ツールを呼び出してください。Read ツールは画像をコンテキストに読み込みます。ファイル名を一覧表示するだけではいけません。
4. フレームごとに、顔が切れていないこと、シーンに適したフェイスモードであること、テキストが読みやすくパレットに沿っていること、はみ出しがないこと、トランジションが意図した単語で切り替わること、空白のフレームがないことを確認します。
5. 問題があれば、修正 → 再レンダリング → 再確認します。壊れたドラフトを納品してはいけません。

MP4 プレビュー（プレビューゲート 2 — 必須）

npx serve renders -p 8080 -n

Python の http.server は使用しないでください。HTTP Range リクエストに対応していないため、シークが機能しません。

ユーザーに http://localhost:8080/<slug>-draft.mp4 を渡します。再生と音声の同期について、明示的な承認が得られるまで待ちます。

最終レンダリング

npx hyperframes render --quality standard --output renders/<slug>-final.mp4

出力パスを報告します。完了です。

完全な事前確認および納品前チェックリスト：Read: references/build-checklist.md

---

絶対に守ること（重要 — 緩和しない）

• プレビューゲート 1（Studio）またはプレビューゲート 2（レンダリング済み MP4）を省略してはいけません。 ビルドごとに必ず 2 つのゲートを設けます。
• フレームを抽出し、Read ツールで確認するまでは、レンダリングが完了したと主張してはいけません。
• 専用のプロジェクトフォルダー以外でビルドしてはいけません。 ワークスペースのルートに index.html を置いてはいけません。
• ワークスペースを調査する前に、ユーザーにアセットを求めてはいけません。
• すべてのサブコンポジションのタイムラインの末尾にある tl.to({}, { duration: SLOT_DURATION }, 0) アンカートゥイーンを省略してはいけません。MOTION_PHILOSOPHY の法則 11。
• レンダリングロジック内で Math.random() / Date.now() を使用してはいけません。シード付きハッシュのみを使用します。
• <video> タグに class="clip" を追加してはいけません。機能しなくなります。
• ユーザーにブランドを押し付けてはいけません。まず尋ね、明示的に断られた場合に限り、MOTION_PHILOSOPHY のデフォルトを使用します。

---

参考資料

• references/interview-questions.md — ゲート別の質問集
• references/style-intake.md — スタイルのヒアリングと MOTION_PHILOSOPHY のデフォルト
• references/catalog-intent-map.md — 「ユーザーが X と言ったら → Y をインストール」
• references/storyboard-template.md — ビートごとのテンプレートと記入例
• references/composition-scaffold.md — スコープ付きスタイルと IIFE GSAP のボイラープレート
• references/build-checklist.md — 事前確認と納品前のゲート

外部（ワークスペースレベル）：

• MOTION_PHILOSOPHY.md — このスキルが存在を前提としている唯一の外部参考資料です。美的基準を示します。このファイルがない場合は、references/style-intake.md にあるフォールバックを使用します。

関連スキル

• /hyperframes — フレームワークのルール。ゲート 6 で使用
• /hyperframes-cli — init · lint · preview · render · transcribe · tts
• /hyperframes-registry — カタログブロックのインストール
• /gsap — GSAP アニメーションのリファレンス
• /short-form-edit — 9:16 のトーキングヘッド形式では、ゲート 5 で引き継ぎ
• /website-to-hyperframes — 開始時の入力が URL の場合、ゲート 1 で引き継ぎ