vox-explainer

コードで作るVox風解説動画

HTMLファイル1つで30〜60秒のドキュメンタリー解説動画を作り、MP4に書き出します。すべてのフレームはコードで作成します。動画生成ツールも、ストック映像も使いません。

始める前に： brand.md と MOTION.md があれば読んでください。ない場合は、まず brand-intake を実行するか、カラーコード、フォント、ロゴファイルを尋ねてください。これらがない状態で、ブランドに合っていると決して言わないでください。

ステップ1：4つのことを尋ねて、返答を待つ

1. 問い。 初めて聞く人でも、なんとなく意味がわかる「なぜ」の問い。例：「なぜ最近はどのブランドロゴも同じに見えるのでしょうか？」
2. 事実。 問いへの答えとなる名称、日付、数値を、それぞれ出典リンクとともに。ユーザーが持っていない場合は調査し、制作に入る前に出典付きの一覧を提示してください。
3. 色。 3つのカラーコードとアクセントカラーを1つ。デフォルト（私のロゴ動画のパレット）：赤 #B8312A、クリーム #F1E6D0、ペーパー #FBF7EE、ネイビー #14213D、イエローのアクセント #F2C230。デフォルトはデフォルトとして明記してください。
4. サイズ。 1920 x 1080（YouTube）、1080 x 1350（LinkedIn フィード）、1080 x 1920（ストーリーまたはリール）。

画面に表示するすべての事実に出典が付くまで、制作を始めないでください。

レビューのルール（却下された制作から学んだこと）

• 音は必須です。 音のない解説動画は未完成に感じられます。コードで楽曲を作成してください。低音のベッド、新しいショットごとのヒット、最後の一文で盛り上げる音を入れます。
• 線ではなく、カードや画像を使います。 画面を横切る棒や線が1本動くだけでは、静的に見えます。各ショットには、奥行きのある動きを加えたカード、実画像、またはオブジェクトを使います。
• ロゴはカードいっぱいに表示し、 実際のファイルを使います。大きな枠の中にロゴが小さく浮かんでいると、不自然に見えます。
• グリッドは左右対称にします。 カードのサイズと間隔を均等にします。レイアウトが偏っていると、ミスに見えます。
• ナレーションを最優先にします。 効果音にナレーションが埋もれる場合は、聞き取れるまで楽曲の音量を下げてください。声のトラック（自分の声でも、テキスト読み上げでも）は、「なぜ」をテーマにした動画を支えます。
• 冒頭の一文で、これから何がわかるかを伝えます。 動画の魅力を控えめに伝える小さなタイトルでは、見どころにたどり着く前に視聴者が離れてしまいます。問いを大きく表示し、5秒以内に最初の驚きを見せてください。
• 話す事実はすべて、台本に入れる前にファクトファイルに出典を記載します。 調査で類似性しか示されていない場合は、「〜です」ではなく「〜のように見えます」と言ってください。
• 目を見張る出来でなければ、完成ではありません。 最初の3秒で自分の親指を止められないなら、残りを作る前に冒頭を作り直してください。

ステップ2：ショットごとに1行で台本を書く

• 8〜14ショット。各ショットは1文。ショット1は問いそのものです。
• 各ショットで、直前の一文が述べたことへの答えを示します。そのショットで何を証明するのか言えない場合は、削ってください。
• 最後のショットはまとめで、5語以内にします。

台本を番号付きリストで提示し、承認を待ってください。

ステップ3：各行のショットタイプを選ぶ

ショット	用途
キネティック・ステートメント	覚えてほしい一文。破れた紙片の上に、太字のコンデンス体で短い行を3つ並べます。
ペーパーカード	複数のものを一度に見せる場合（ロゴ、製品、引用）。端が破れたカードを小さな影付きで落とし込みます。
ビフォー／アフター	時間経過による変化。同じカードを使い、日付チップを切り替えます。
ラベルコールアウト	画像内のものを1つ特定する場合。マーカーの円を描いてから、ラベルを表示します。
カウンター	数字が増えていく表現。コードで実装し、推測で数値を決めません。
グリッド	「どれも同じに見える」。同じタイルを並べ、次に1つだけパターンを崩します。

ステップ4：制作する

この制作指示を、台本とショットリストを下に添えて Claude Code に貼り付けます。

Build one self-contained HTML file called index.html. No external fonts, images or libraries unless I attached them. Nothing loaded from the internet.

Look: editorial documentary explainer. Palette strictly [RED], [CREAM], [NAVY] with a [YELLOW] accent. Torn paper cards with small drop shadows. Halftone dots, paper grain and fine film grain over the whole frame. Colour fringing at the frame EDGES ONLY, and a soft vignette. Bold condensed sans-serif type, fully formed as blocks.

Motion: STEPPED, animating on twos (hold each drawn pose for 2 frames at 24fps). Never smooth corporate easing. NO typewriter effect. No gradients on text, no glow, no bouncing.

Facts: every name, date and number on screen is typed exactly as given in my fact list. Add nothing I did not give you.

Timing: follow my shot list. Each shot holds long enough to read aloud.

Build rules: work out every frame from the time alone. Add window.seek(seconds) that draws that exact moment. The last frame can differ from the first (this is a film, not a loop).

After the build: capture one frame from the middle of every shot. Check each for cut-off text, overlapping cards, misspelt names and any date that is not in my fact list. Fix what is real and keep the first version.

ステップ5：編集者の目で確認する

書き出す前に、すべてのフレームキャプチャを確認し、次の項目をチェックします。

• すべての日付と名前が、ファクトリストと一字一句一致している。
• あるカードが別のカードのテキストを覆っていない。
• コマ送りにすべき動きが滑らかになっていない。
• 最初の3秒ですでに問いが示されている（視聴者は3秒で判断します）。

ステップ 6：エクスポート

最も簡単な方法は HyperFrames です。HeyGen が提供する無料のオープンソースツールです（npx skills add heygen-com/hyperframes を実行し、その後 npx hyperframes render を実行してください）。window.seek を順に進め、フレームを MP4 として保存するツールなら、どれでも使用できます。何かをインストールする前に、利用できるツールを確認し、インストールする前にユーザーに確認してください。

このスキルでできないこと

• 事実、日付、引用をでっち上げること。
• 実在するブランドのロゴを記憶だけで再現すること。ユーザーのファイルを使うか、ブランド名をそのまま文字で組んでください。
• トレンドの原因が1つだと断定すること。「唯一の理由」ではなく、「理由の1つ」と述べてください。