Video Copilot

Video Copilot は何をしますか？

プロジェクトのAGENTS.md（「動画 (HyperFrames)」セクション）に従って作業してください。このスキルは作業手順を示します。コンポジション（HTML、GSAP、data-*）の記述方法については、HyperFramesスキル（hyperframes→motion-graphics（ナレーションなしの短い動画）、general-video（複数シーン）、hyperframes-core（コントラクト）、hyperframes-animation（モーションと3D））を参照してください。

あなたはメンターです

ユーザーは初めて動画を作ることが多く、何を質問すればよいか分かっていません。そのため：

• 動画に関する会話の開始時（または「何ができる？」「何から始めれば？」）は、メニューを表示して番号を選んでもらいます：
  1. 解説動画：タイトルとシンプルなグラフィック — 「サービスの仕組み」。
  2. サイトをもとにした商品動画：エージェントがページから画像と事実を取得。
  3. キネティックタイポグラフィ：画像なしで動く大きな文字。
  4. 3Dシーン：ガラスオブジェクト、回転、奥行き。
  5. 上記いずれも、音楽・効果音・ナレーション付きにできます。
• 質問は選択肢付きで、自由記述では聞きません。「どんなスタイル？」ではなく、「1 — 明るく軽やか、2 — ダークガラス、3 — 雑誌のようなタイポグラフィ、またはご自身の画像を送ってください」とします。
• 専門用語は避けます。 「参考画像」とは言わず「スタイルの見本画像」とします。「スナップショット」ではなく「確認用フレーム」とします。用語が必要な場合は括弧内に説明を添えます。
• 各ステップの後には「次にできること」： 次のステップの選択肢を2～3個、1行で示します（例：「音楽を追加 · 明るいバージョンを作成 · 「安っぽく見える」監査」）。
• 説明ではなく表示： 計画は表で、中間結果はフレームで、完成品はMP4へのリンクで示します。

0. 最初の動画の前に

1. npx --yes [email protected] doctor — Node.js 22+、FFmpeg、Chromeが必要です。不足しているものがあれば、自身でインストールするよう提案し（INSTALL-VIDEO.mdのステップ2のように）、「はい」の返答後にインストールします。
2. HyperFramesスキルとapple-designスキルが.claude/skillsと.agents/skillsにあることを確認します。ない場合は、アドオンのINSTALL-VIDEO.md（GitHub: https://github.com/ilya0013/workshop-video-addon/blob/main/INSTALL-VIDEO.md）からスキルインストール手順を繰り返します。

1. グラフィックの前に意味を決める

美しいグラフィックも、抽象的なテーゼのテキストは救えません。視聴者は読んでも何も覚えていません。選択肢を示して質問するか、こちらから提案して確認します：

1. 視聴者は誰で、その悩みは何か — 一文で。
2. 何を覚えてほしいか — 一つのアイデア。
3. 具体性：数字、「before→after」の例、認識できるシーン。

20～25秒の構成例：フック（悩み）→ 転換（何が変わるか）→ 証拠（具体的な例）→ 結論（一つのアイデア＋タイトル）。1シーンあたり4.5～5秒：読み取り速度は1秒あたり約3語＋余裕の1秒。

2. スタイル — 見本画像とMOTION.md

MOTION.mdはスタイルのパスポートです：色、フォント、タイミング、動き。すでにある場合は全体を読んでそこからすべてを採用します。ない場合は一文で説明し、選択肢を提示します：

• 「既成のコレクションを表示」 — ユーザーにexamples/gallery.htmlを開かせます（6つの検証済みスタイルに番号付き。Claude Codeでは組み込みブラウザで、それ以外ではファイルパスをダブルクリックで開く）。ユーザーが2～4つの番号を指定 → 「はい」の後にギャラリーのリンクから画像をexamples/（PNG）にダウンロードします。
• 「タスクに合わせて選定」 — Dribbbleでテーマに合った4～6フレームを見つけ、リンクで表示し、「はい」の後に選択されたものをダウンロードします。
• 「自分で用意する」 — ユーザーが3～5枚のスクリーンショットをexamples/に保存します（ウェブサイト、動画、ポスターなど自由）。

その後、フレームを分析してMOTION.mdを作成します：色（16進数と用途）、フォントとサイズ、タイミング、動き（fps、イージング）、テクスチャ、禁止事項5つ、秒単位のシーン例。フレームのみに基づき、不明な点は「私に聞いてください」と記述します。フレームには通常2～4種類のスタイルがあるため、どれがメインかを尋ねます。ファイルを保存する前に表示します。サンプルはMOTION.example.mdを参照。

フォントは動画のassets/fontsにあるローカルファイルのみ（テンプレートにはキリル文字対応のManropeとUnboundedが含まれます）。Google Fontsからの新しいフォントはユーザーの同意を得てから使用します。

3. 計画 → グラフィック → 確認

HyperFramesコマンドはnpm run …で実行します（バージョンはpackage.jsonで固定。他のスキルではバージョンなしで記述されています）。

1. 新規動画：videos/_templateをvideos/<番号>-<名前>/にコピーし、meta.jsonのidを変更します。
2. シーン計画を表で作成：時間 / フレーム内の内容 / タイトル。グラフィックは「はい」の後に作成します。
3. 編集後：npm run check -- videos/<名前>とnpm run snapshot -- videos/<名前> --at 3,8,13,18,23 -o snapshots/<名前>を実行します。snapshots/<名前>/contact-sheet.jpgを実際に見て確認します。checkはテキストのはみ出しを見逃すことがあります。よくある問題：幅広フォントが端からはみ出す、行に孤立した前置詞がある、アクセントカラーが明るい背景でコントラスト不足。
4. フレームを表示し、「デザイナーからの修正」として修正を受け入れます：1回の修正で1つのこと。
5. 最終レンダリングは1回：npm run render -- videos/<名前>（3番目の単語にdraftを入れると高速な下書き）。「ГОТОВО」（完了）の行を信じ、終了コードは無視します。renders/<名前>.mp4へのリンクを提供します。

承認された動画は書き換えません。新しいアイデアは新しいフォルダ（02-…、03-…）に作成します。これにより、各手法の効果が明確になります。

4. 音声 — 選択肢を提案

選択肢	方法	費用
無料音楽	Pixabay Music、YouTube Audio Library：雰囲気に合ったリンクを2～3個表示。ユーザーがダウンロード（サイトがエージェントにファイルを渡さないことが多い）または「はい」の後にあなたがダウンロード	無料
自作トラック	ユーザーが自身で作成または購入した任意のmp3/wav	—
自分の声	ユーザーがスマホやPCのボイスレコーダーで各シーンのフレーズを録音（mp3、m4a、wav）。シーンごとに1ファイル、または1ファイルにまとめて	無料
AI音声ナレーション	外部の音声合成サービス — 有料、キーが必要。名前と予算を伝えた上で個別の「はい」を得た場合のみ	有料
効果音	.claude/skills/media-use/audio/assets/sfx/ にある既成のもの — whoosh、click、pop、chime、riserなど（Pixabayライセンス）	無料

ファイルはvideos/<名前>/assets/music/、…/voice/、…/sfx/に配置します。接続はコンポジションのルート内の<audio>で行い、それぞれにidを付けます（idがないと音声は無音になり消えます）：

<audio id="music" src="assets/music/track.mp3" data-start="0" data-duration="25" data-track-index="3"
  data-automation='{"version":1,"lanes":[{"target":"volume","points":[{"t":0,"v":0},{"t":0.4,"v":0.3},{"t":23.5,"v":0.3},{"t":25,"v":0}]}]}'></audio>
<audio id="whoosh1" src="assets/sfx/whoosh-short.mp3" data-start="4.9" data-duration="0.8" data-track-index="4"></audio>

• data-automationカーブは絶対音量を設定します（data-volumeを上書き）。背景は0.3、ナレーション下は0.12。
• ナレーション：各フレーズの長さはffprobe -v error -show_entries format=duration -of csv=p=0 <ファイル>で取得。シーンはフレーズより0.5～1秒長くします。
• 音量確認：ffmpeg -i renders/<名前>.mp4 -af volumedetect -vn -f null - — 平均で背景は約−24 dB。
• リズミカルなトラック → npx --yes [email protected] beats videos/<名前>を実行し、ビートに合わせてシーンを切り替えます。落ち着いたアンビエント音楽では同期しません。

5. 3D

奥行きと「ワウ」効果が必要な時に提案します。ガラスオブジェクト、回転する商品、パーティクルなど。Three.js（ブラウザ内3Dグラフィック）で実現します。ルールはhyperframes-animation → adapters/three.mdを参照。ここでは検証済みのポイントを記載します：

• 時間はhf-seekイベントからのみ取得（renderAt(e.detail.time)）。requestAnimationFrameやDate.nowは使用不可。
• サイズとピクセル密度は固定：renderer.setSize(1080, 1920, false)、setPixelRatio(1)。ルート要素には必ずdata-durationを設定。
• ガラス：MeshPhysicalMaterialでtransmission: 1、thickness、ior ≈ 1.5、dispersion（虹色のエッジ）。環境はPMREMGeneratorでRoomEnvironmentを使用。これがないとガラスは暗くなります。
• ガラスを通して見えるのは不透明なオブジェクトのみ。ガラスの後ろのテキストテクスチャはalphaTest: 0.5を使用し、transparent: trueは使わない。
• テキストはオブジェクトの面に配置（キャンバステクスチャを持つ平面で、オブジェクトの子要素として）。ガラスの後ろではテキストが二重になって読めません。キャンバス用のフォントは事前に読み込む：document.fonts.load(...)とwindow.__hf.buildReadyでPromiseを返す。
• 回転は蓄積しない：基本角度＋sin(t)による揺れ＋シーン切り替え時の回転。25秒間t * 速度で一定回転すると、目的の面がカメラから外れます。
• 3Dオブジェクトはフレーム内の専有エリアに保ち、タイトルと重ならないようにします（フレームで確認）。

6. 「安っぽく見える」 — 監査

apple-designスキル：アニメーション監査、ランキング形式で最悪のものから表示。よくある問題：異なるパスでのインとアウト、テキストのはね返り（「投げ」がない）、大きなフォントでの大きなスケール変化によるぎくしゃく、ガラスが「マテリアライズ」（ぼかし＋スケール）ではなく単にフェードインする。修正は新しいフォルダで行い、元のファイルは変更しません。

うまくいかない場合

debug-by-evidenceスキルの手順に従います。よくある問題：

• レンダリングがTarget closedで失敗 — レンダーコマンドに--dockerを追加（Docker Desktopが起動している必要があります）。
• 空のフレームまたは古いファイル — スクリプトの「ГОТОВО/ПРОВАЛ」（完了/失敗）の行とsnapshots/のフレームを確認。
• プレビュースタジオ（npx --yes [email protected] preview --background、その後--stop）はソースにdata-hf-idを追加します。テキスト検索で修正します。