vox-explainer

目の前にあるものの解説（ゲートウェイワークフロー）

HyperFrames のコンポジション契約（クリップ、data-* のタイミング、 #root スキーマ）に準拠して制作します。上流の HyperFrames スキルを npx skills add heygen-com/hyperframes でインストールするか、 npx hyperframes init でひな形を作成し、まず生成されたプロジェクトのドキュメントを読んでください。

視聴者が毎日目にしているのに、これまで注目したことのないものについて、 60〜90 秒の解説動画を制作します。まず見覚えがあるという感覚を生み出し、 その後、因果関係に基づく歴史を示して納得感をもたらします。文字組みは Vox の Cooper Black を使った映像を基準にし、モーションは同じ フレーム単位の調整プロセスで計測します。

これは Vox に着想を得たデザインの語彙であり、提携や支持を意味するものではありません。 Vox のロゴを使用したり、Vox が成果物を制作したと示唆したりしないでください。

信頼境界と要件

• 同梱のシームスクリプトには Node.js 22 以降が必要です。プレビューサーバーを 起動する際、npx が npm レジストリから scripts/seam-gate.mjs に固定された 正確なバージョンの HyperFrames をダウンロードする場合があります。
• ユーザーが提供したファイルと URL のみを読み取ってください。ソースモードでは、 公開されている引用元や、宣言されたソースからパブリックドメインまたは オープンライセンスのアセットを取得できます。非公開のドキュメント、認証情報、 非公開 URL を別のサービスに送信しないでください。
• TTS または文字起こし API を使用する前に、必ず許可を求めてください。呼び出し前に、 プロバイダー、送信されるデータ、必要な認証情報、発生する可能性のある費用を伝えてください。
• プロジェクトのソース、ダウンロードしたアセット、音声、コンタクトシート、レンダリング結果は、 ユーザーが選択したプロジェクトディレクトリ内にのみ書き込んでください。成果物を自動的に 公開またはアップロードしないでください。
• シーム検証ツールは、ローカルプレビューサーバーと分離された Chrome プロファイルを起動します。 --url と --comp-url の入力には localhost のみ指定できます。ただし、プレビューから ユーザーのコンポジションで宣言されたリモートアセットが読み込まれる場合があります。

参照マップ

現在の段階で必要な参照だけを読んでください。

• トピックの選定：目の前にあるもののトピック
• 台本と字幕：目の前にあるものの台本
• レイアウトとアセット：Vox コラージュのレイアウト
• テキストとハイライト：Vox のテキストオーバーレイ
• コラージュのモーション：Vox コラージュのモーション
• モーションの法則とシームゲート：モーションの連続性
• トランジションのカタログとコード：速度を一致させたトランジション および速度を一致させたトランジション（GSAP）
• 複数段階の要素モーション：アニメーションの重なり
• レンダリングに安全なシームの仕組み：レンダリングに安全なシーム
• シーム台帳とスクリプトの使い方：シームゲート

パイプライン（順番に実行してください。各ゲートを通過しないと次へ進めません）

1. エントリールーター — 2つのモード、1つのゲート。 plain-sight-topics.mdを読んでください。

   • トピックモード（ユーザーがテーマを指定する、またはアイデアを求める場合）：4部構成のフィルターは、アイデア出しと候補の優先順位付けにのみ適用されます。ユーザーが選んだテーマがフィルターを通らない場合は、どの項目が通らないのか、その結果映画から何が失われるのかを伝え、条件を満たす代替案を提示します。そのうえで、ユーザーが確認したら、依頼された映画を制作します。このフィルターを理由に、選ばれたテーマを拒否することはありません。
   • ソースモード（ユーザーが資料を提供する場合 — メモ、戦略文書、レポート、論文、プレゼン資料、トランスクリプト、PDF、またはそれらを含むフォルダーなどの文書、あるいは記事、ドキュメントページ、リポジトリ、発表などのリンク）：フィルターは一切適用されません。許可されたネットワーク範囲を確認した後、提供されたファイルをすべて読み、URLをすべて取得し、主張の確認に必要な場合は公開引用元を最大1段階たどります。引用元が消失している、または一部しか読めない場合（エクスポートされたPDFではよくあります）は、出典を推測しないでください。その主張が裏付け資料になる前にオープンウェブ上で独自に検証するか、削除してください。その後、ストーリーラインの採掘を行います。人物＋日付とPDアーカイブの要件は免除されますが、仕組みのビートは必須です。視聴者とはソースの想定読者であり、「誰でもよい視聴者」ではありません。FAMILIARのビートは、彼らが日常的に目にするものに合わせます。ナレーションではソースに触れません — plain-sight-script.mdを参照してください。

   ストーリーラインの採掘（ソースモード）。 ソースは鉱石であり、アウトラインではありません — セクションごとに映画化してはいけません。次の5つを抽出します。

   • 導入の足がかり — 想定読者がすでにソースの世界で認識しているもの（習慣、毎週目にする数字、今まさに画面に表示されているもの）。
   • 緊張 — 想定読者の思い込みと矛盾する、ソース内で最も鋭い主張。
   • 転換点 — DIGの着地点。ソースに人物＋日付があればそれを、なければストーリーの軸となる決定、数字、または瞬間を使います。
   • 仕組み — 視聴者が何も手助けされずに画面上で検証できる唯一の主張。ソースが主張するだけの場合は、実演を構成します（二分割比較、2通りに再配置したドット、同じ縮尺でのビフォー／アフターなど）。
   • 裏付け資料 — ソースとオープンウェブから得られる実物の資料（チャート、スクリーンショット、提出書類、画面上に出典を明記した引用）。実物資産のルールは引き続き適用されます。

   これらを構成上の骨格に当てはめます。ソースだけでは正直に埋められないビートは、でっち上げずに削除します。複数のソースがある場合、または1つのソースに複数の候補となるストーリーラインが含まれている場合は、それぞれを採掘したうえで、骨格を1つだけ選びます。映画にはストーリーラインを1つだけ使い、それ以外はすべて裏付け資料に回します。脚本を執筆する前に、承認用のビートマップを提出してください。

2. 脚本 — plain-sight-script.mdを読んでください。 ナレーション＋ビートマップを作成します。ゲート：すべての行が削除テストに合格し、冒頭／締めくくりのルールが守られていること。特定の人物の代筆をする場合は、その人物のボイススキルをこちらより優先します。

3. デザイン工程 — vox-collage-layout.mdを読んでください。実物資産を使ってコンタクトシート（各ビートにつき1フレーム、960×540のタイル、HTML → headless-Chromeのスクリーンショット）を作成します。コンプを作る前に、シートを提出してください。ここで反復するほうが、コンプへの修正指示より10倍安く済みます。 LOOK GATE — シートを納品する前に確認してください。 Vox との関係を示唆せず、このコラージュの文法を使用してください。思い込まずに確認します。

   • パレットは計測済みの色のセットです。インク #1a1a1a、黄色 #FFE619、プロセスブルー #66CFFF、標本ブルー #58BCEC、グレー #F2F2F2 / #8d9399、背景 #fbfaf8。 明るいブルーは塗りとアクセントとして使用してください。白地の小さな テキストには #3E87A8 か、それより濃い色を使い、レンダラーのコントラスト チェックに合格させてください。
   • 見出しには Archivo Black を使用します。
   • 各フレームは、レイアウトリファレンスにある名前付きのレシピ（エビデンススタック、 ズーム分離、2パネル比較、標本グリッド、ローワーサード、新聞印刷風レイヤリング、 円形リビール）のいずれかにします。シート上で各フレームにレシピ名を付けてください。
   • 黄色い円を、繰り返し登場するビジュアルキャリアとして使います。

   落とし穴： ソース文書が独自のデザインシステムを持つ企業のもの、または プロジェクトフォルダーにブランドキャプチャ、frame.md、あるいはそのブランドを 使用した以前のビルドがすでにある場合、そこに含まれるトークンを引き継ぎたく なります。そうしてはいけません。brand-faithful はプロダクトローンチ動画向けの 別のワークフローです。ここでブランドのスキンを使うのは、ユーザーが明示的に 決めた場合に限り、デフォルトではありません。代わりに適用せず、確認してください。

4. VO — 録音または TTS を使います。TTS の入力ファイルは発音用のスクリプトです。 数字は綴りで記し（「eighteen thirty-nine」）、名前は実際の発音どおりに綴ります。 結果を文字起こしして単語単位のタイムスタンプを付けます。時間の基準は音声です。 すべてのカット、ポップ、ハイライトを単語の時刻に合わせます。VO を差し替えた場合は、 全編のタイミングを調整し直します。字幕にはスクリプト文書ではなく、実際に 読み上げられた内容を一語一句そのまま文字起こしします。 TTS の手順：まず npx hyperframes tts を実行します。同梱の音声スタックで エラーが発生する場合（古い Python、espeakng-loader の中断）は、espeak-ng を インストールし、CLI がキャッシュしたモデルファイルを使って Kokoro モデルを 直接呼び出します。TTS API は、プロバイダー、データ共有、認証情報、費用について ユーザーの承認を得た後にのみ使用します。その後、どの方法で音声を生成した場合も その音声を文字起こしします。エンジンにかかわらず、タイムスタンプが時間の基準です。

5. ビルド — HyperFrames のコンポジションは1つ、各ビートにクリップグループを1つ、 字幕レールは控えめにします（画面上の強調テキストが言葉を伝えている箇所では 音声キューを抑制します）。タイムラインを作成する前に vox-text-overlays.md と vox-collage-motion.md を読んでください。

6. QC ゲート（すべて数値で、すべて必須）

   • lint/check：エラー 0 件。
   • 静止時間のスイープ：レンダリング結果の連続するすべてのフレームペアについて MAD を 測定します。3秒を超える静止状態があれば、計画上の不備です。揺らぎを加えるのでは なく、段階的なリビールを追加してください。
   • 継ぎ目の測定：ズーム分離カットでは、入れ替え前の最後のフレームと入れ替え後の 最初のフレームをレンダリングし、両方のフレームでキャリアを検出して、中心位置が 約30px以内、サイズが約10%以内であることを確認します。目視ではなく測定して 修正してください。
   • イベント密度：各ビートで、タイムラインに作成したイベント間の最大間隔を ≤3.0s にします（モーションリファレンスでは、MAD スイープでクリープのみの静止を 検出できない理由を説明しています）。
   • 構成の整合性：レイアウトリファレンスの厳守ルールと最終キーフレームシートを 項目ごとに照合し、ログに記録します。
   • キーフレームシート：各ビートにつき1フレームをスクリーンショットし、目視で確認します。

テクニックの最低基準（スライドショー防止ゲート — ビートマップ作成時に宣言）

欠陥ゲートを通過しても、映画になるわけではありません。すべてのビートをカード、左右分割、テロップにしたビルドは、リンター、継ぎ目、無駄な時間のチェックを通過しても、スライドショーのように見えます。コラージュの表現手法は、慎重なエージェントが自発的には決して提案しないテクニックに宿ります。そのため、テクニックはビルド時に即興で考えるのではなく、ビートマップで宣言します。すべてのビートに、レイアウトのレシピとモーションリファレンスのカタログにあるモーション処理の両方を記し、作品全体の構成が次の最低基準を満たす必要があります。

• ズーム分離スワップを1回以上 — カメラが写真の中へ押し込み、被写体を切り離して、そこを通り抜けるようにカットします（モーションリファレンスに従い、数値的に位置を合わせます）。
• ペイオフのビートで、逆ズームスルーによる登場を1回以上。
• フレームいっぱいに達する、またはフレームいっぱいを通り抜けて終わるドライブパストかスケールトラバーサルを2回以上。
• 背景を取り除いた切り抜き（被写体を背景プレートから分離）が、フラットなカードにはできない動きをすること — グリッドへのドッキング、ドライブパストに乗ること、アイソスワップの起点になること。
• 新聞印刷風のレイヤリングを使った瞬間を1回以上。円形の出現（ブランドを担う要素）を使います。
• 必須：静的なカード／左右分割レイアウトは、ビート全体の3分の1以下にします。同じレイアウトレシピ、または同じモーション処理が連続するビートに使われないようにします。
• 奥行きのある写真が画面にある場合、カメラはカードの列の上を漂うのではなく、その中へ入ります。カードの上を平面的に漂う動きは、スライドショーだと感じさせます。中へ入る動きは、以下のズームイン規約に従います。

ズームイン規約。 写真の中へ押し込む動きは、画像の内部にペイオフがあると視聴者に約束します。許される続きは、次の2つだけです。

1. 背景の除去 — 被写体を背景プレートから分離し、担い手にします（アイソスワップ、ドッキング、ドライブパスト）。
2. 全画面でのホールド＋コールアウト — 注釈（ラベル、矢印、注目領域）を画像の上に描画しながら、画像を画面いっぱい、またはそれに近い大きさでホールドします。

写真の中へ押し込んだ後、無関係な構図にカットすることは禁止です。それはテクニックの衣装をまとっただけのトランジションです。どちらのペイオフもビートに合わない場合は、写真の中へ入らないでください。

規約の境界（「中へ入る」と見なされる動き）：画像の内部から始まり、画像がほぼ画面いっぱいになるまで続く持続的な押し込みです。継ぎ目の規模のズーム（シーン全体に対する約0.2秒の動き）と、10%未満のわずかなカメラ移動は別のカテゴリであり、「中へ入る」動きには該当しません。要素がカメラに向かって移動する動きは、「中へ入る」動きの反転であり、同じ規約に従います（すでに背景から切り離した担い手でなければならず、フラットなカードをレンズに向けて飛ばしてはいけません）。トラバーサルは、フレームいっぱいになったとき、同じ画像か、その動き自体が生み出したビートにのみ抜けられます。無関係な構図に抜けることはできません。

QC：ビートマップにはモーション処理の分布表を記録します。最終キーフレーム監査では、宣言した各処理が実際に画面に現れていることを確認します（継ぎ目検証器はすでにズーム分離を数値的に測定します）。最低基準を誠実に満たせない作品は、計画上の不備です。装飾を足して埋め合わせるのではなく、ビートを再計画してください。最低基準とズームイン規約が衝突した場合は、規約を優先し、そのテクニックを外します。テクニックが1つ欠けるほうが、動機のないテクニックを使うより小さな欠陥です。

構成の背骨（60秒の編集における配分）

この配分付きの構成を正式な基準とします。THE FAMILY（脚本リファレンスを参照）はFAMILIARの後半部分であり、認識を新たなビートにするのではなく、その認識の具体例を増やします。THE ARTIFACT BEATは脚本リファレンスの構成でもSTORYとMECHANISMの間に置きます。2つのリファレンスが食い違っているように見える場合は、このリストを優先します。ソースモードでは、ソースで誠実に埋められない構成上のビート（SECOND WIND、DIGに登場する人物）はカットし、その配分を振り分け直します。「捏造せずカットする」というルールは、構成を完全に保つことより優先されます。

FAMILIAR 15% → DIG（人物＋日付を明示）5% → STORY 15% → THE ARTIFACT BEAT 10% → 視聴者が画面上で確かめられるMECHANISM 20% → SECOND WIND（テクノロジーが制約を取り除く）15% → 黄色の円に示すTHESIS 10% → 冒頭を反映するCLOSE 10%.

モーションレイヤーから引き継がれる必須事項

• シームは motion-continuity.md に従ってください。切り替わりが目立つカットは、検証済みの連続性シーム内に収めてください。静止画から静止画への文字どおりのカットも、シームの確認を免除されません。
• 実際の素材のみを使用してください。PD アーカイブ（Wikimedia Commons API、LOC）を使用し、スキャンがない場合は再現素材であることを明示してください。図形でアーティファクトを再現すると、雑な印象になります。
• テキストオーバーレイのリファレンスに従い、ハイライトは常にアニメーションで表示してください。
• 要素は滑らかなイージングの上で 12fps で動かし、カメラの動きはコラージュモーションのリファレンスに従って滑らかに保ってください。