データ解説動画（Tatakye スタイル）

中国語字幕駆動の解説動画を、1つの自己完結型 HTML ファイルとして構築します。ユーザーはブラウザで再生し、スクリーンレコードします。

活用シーン

記事、エッセイ、研究結果を3～6分の動画に変換
ミニマルな黒金の「論評」美学（3Blue1Brown / Veritasium / Tatakye 系譜）
小红书 / 微信视频 / Bilibili / YouTube への投稿を想定した成果物
外部アセットが一切不要 — フォント購入、ストックフッテージ、ロイヤリティフリーの懸念、サーバーも不要

コードを書く前の必須確認事項

絶対に外せない事前質問 — AskUserQuestion を使って必ず質問し、後回しにしないこと。間違えると作り直しになります。

テーマを一文で: 「記事が何についてか」ではなく、動画が擁護する主張。一文で言えなければ、まだ動画ではなく、読書リストです。
スパイン: 動画全体のアンカーとなる、画面上の単一のオブジェクトは何か？（「スパインとは」のセクション参照 — これが最も重要なデザイン上の決定であり、ほとんどの解説動画が完全に省略して間違えるところです。）
尺: 3～4分（ハイライト） vs 5～6分（標準的な Tatakye 尺） vs 8～10分（深堀り）。尺によって残せるセクション数が決まります。10セクションの記事を5分に収めるには、60～70%のセクションを削る必要があります。
ナレーションモード: 字幕のみ（テキスト駆動のペース配分） vs AIナレーション vs 自分で録音。「字幕のみ」がデフォルト — 字幕自体がビートになります。
帰属表示: 原作者のクレジット方法。「原文 · [名前]」を右上に置くのがクリーンなデフォルトです。スパインがある場合、帰属はスパインの下に置き、スパインの代わりにはしません。
ペイオフ（修辞的な質問ではありません）: 視聴者は何を具体的に持ち帰るのか？問いの言い換えはペイオフではありません。 「あなたは彼らですか？」は力強く聞こえますが、視聴者に何も持ち帰らせません。本当のペイオフは、翌日に繰り返せる短い名前付きリスト（2～4項目）です。「ペイオフ、レトリックではない」を参照してください。

これらを飛ばしてはいけません。 最初の試行はほぼ常に #1（テーマ）と #5（着地点）で失敗します。これらが確定すれば、自由に書き直せます。

スパイン — 最も重要なデザイン上の決定

優れた解説動画にはスパインがあります。それは、動画の大部分で表示され続ける永続的な画面上のオブジェクトであり、各ビートがその異なる部分を照らし出します。

Tatakye の「株式市場リターン」動画がその典型例です。スパインは式 p = E[mx] で、1:00から3:30まで右上隅に固定されています。各セクションは x、m、π_s の1つの記号をハイライトし、その記号の意味を教えます。最後に、式は3つの具体的な takeaways（x → 「どの未来を買うか」、m → 「どの世界にいるか」、π_s → 「どれだけ待つか」）に「アンロック」されます。

これが機能する理由、そしてスパインがない動画が弱く感じられる理由:

スパインは視覚的なアンカーです。視聴者が目を離して戻ってきたときに、「現在何を分解しているか」がすぐにわかります。
抽象的なフレームワークを画面上の物理的オブジェクトに変換します。アイデアに座標が与えられます。
チャプターラベルは、視聴者に構造上のどこにいるかしか伝えられません。スパインは、アイデアのどの構成要素が説明されているかを伝えます — これはより強力なシグナルです。
最後のペイオフは、文字通り「解かれたスパイン」にできます。質問で始め、スパインの各部分を構築し、答えとしてスパインを差し出して締めくくります。

良いスパインの条件

スパインの候補は以下を満たす必要があります:

1行に収まる（ずっと隅に配置できるように）
3～5の名前付きコンポーネントを持ち、それぞれが動画の1ビートに対応する
視覚的に安定している — アニメーションではなく、静的な基準フレーム
テーゼを保持する — スパインのすべての部分を理解すれば、作品全体を理解できる

一般的な形式（インパクトの強い順）:

方程式: 仕事 = 筋肉 × 知性、p = E[mx]、価値 = 希少性 × 注目度
名前付き矢印のある図: 生産者 → 製品 → ユーザー、一度に1つずつハイライトできるノード
ラベル付きの比率または比較: 過去 : 現在 : 未来
短いシーケンス: 観察 → 仮説 → 実験 → 結論

スパインとして避けるべきもの:

単一の数字（ハイライトするコンポーネントがない）
長い文（隅に置くには冗長で、目的に反する）
チャート（チャートはキーストーンビジュアルであり、中央に配置すべきで、スパインではない）

スパインは第I幕が終わる前に登場し、持続する

スパインを冒頭で視聴者に提示して二度と戻らないのは避けてください。第II幕まで待って導入するのも避けてください。構造は以下の通り:

0:00～0:30 フック: スパインなし。質問を設定する
～0:30 スパイン表示: 方程式/図が右上にフェードイン
第I幕～第III幕: スパインは残り、各幕が1つのコンポーネントを照らす
ペイオフ: スパインが溶解し、3項目の takeaways リストになる

スパイン用語のハイライト（視覚レシピ）

各スパイン用語には3つの状態が必要:

薄暗い（デフォルト）: color: var(--dim) — グレー、存在するが控えめ
点灯（現在説明中）: color: var(--gold) + text-shadow glow — 「今ここにいます」と明確に示す
完了（説明済み）: color: var(--fg) — 白、教え終わり、確定

新しいセクションが始まったら、前の .lit を .done に格下げし、新しい用語を .lit に昇格させます。一度に点灯する用語は1つだけ。視覚効果: スパインは左から右へ徐々に点灯し、最後にはすべてが白（完全に教えられた状態）になり、ペイオフに溶解する準備が整います。

物語構造 — 1つの主張、少数のビート

唯一の絶対ルール: 作品は1つの主張を擁護し、すべてのビートはそれに奉仕するために存在します。セクションが主張を前進させたり、後で前進させるビートを設定したりしない場合は、カットします。

それ以外では、構造はツールであり、テンプレートではありません。主張に合った形状を選んでください:

三幕構成（フック → パターン → ひねり → 代償） — 主張に意外な逆転がある場合に適している（例：「前にもあったが、今回は代償がある」）
問題 → メカニズム → 含意 — なぜ物事がそのように機能するかを説明するのに適している
タイムライン / 積み上げ — ポイントが蓄積にある場合に適している（「これがどこまで来たかを見てください」）
比較 — 「A vs B、そしてそれが重要な理由」に適している
質問 → 試み → 解決 — 研究結果や調査記事に適している
単一インサイトの展開 — 1つの驚くべき事実をゆっくり構築して着地させる（Tatakyeの株式市場リターン動画はこれ）

選び方: 1文の主張を声に出して言ってみてください。その議論をする自然なリズムは何ですか？それがあなたの構造です。

セクション数は構造ではなく尺に応じてスケールする:

3～4分 → 3～4のキーストーンビート
5～6分 → 5～7ビート
8～10分 → 8～12ビート

各ビートに必要なもの:

1つのキーストーンビジュアル（曲線、比較、図、パーティクルイベント）
1つのキーストーン数字または 1つのキーストーンフレーズ
次のビートに移行するトランジション（単なる「そしてセクション2」ではない）

要注意: アウトラインが「セクション1、セクション2、セクション3...」とフラットなリストになっている場合、ユーザーを読書リストに沿って進めているだけです。ビートが連鎖するように圧縮または再配置してください — それぞれが次を不可避に感じさせます。

シーン経済 — より少ないシーン、より長い進化

よくある失敗パターン: すべてのセクションを新しいシーンにすること。結果: 7つの無関係なビジュアルが連続し、それぞれ30秒続き、視聴者はむち打ち状態になり、何も覚えていません。

Tatakyeの原則: 1つのビジュアルオブジェクトが2～3分かけて進化する。株式市場リターン動画では、「確率空間グリッド」が約0:40から2:30まで — ほぼ2分間、画面に表示されています。その間、以下のように進化します:

単なる線として現れる（「すべての可能な世界」）
金色の棒が生える（x、各世界でのペイオフ）
棒に色が付く（m、各世界の重み）
式が上に現れる（期待値）
具体例の数字がオーバーレイされる（例: 0.86、+16.9%）
言葉のラベルがオーバーレイされる（「不況/好況」）

1つのビジュアルオブジェクトで6回の反復。 視聴者の目はリセットされることがありません。

経験則

目標: 5分の動画で合計3～5シーン。 それ以上はおそらく切り替えすぎです。
主要シーンの最小持続時間: 60～90秒。 1分未満の場合は、おそらく独立したシーンではなく、別のシーン内のレイヤーとして属します。
カットではなく、シーンが次のシーンに成長する（scene-grows-into-next-scene）を優先。 例: 二重曲線プロットに曲線間の塗りつぶし領域が生え、その領域から棒が立ち上がる — 3つの「セクション」のコンテンツ、シーンカットはゼロ。
シーンの変更は幕の境界で発生し、幕の中では発生しない。 幕内では、オーバーレイ、ハイライト、数字のカウントアップ、ラベルを使用 — シーンの変更はしない。

シーン変更が正当化される場合

フック → 最初のコンテンツシーン
第N幕 → 第N+1幕（視覚的メタファーが次のアイデアをどうしても伝えられない場合）
コンテンツ → ペイオフ（終わりには視覚的なリセットがふさわしい）

以上です。5分の動画では、最大で3回のシーン変更です。

ペイオフ、レトリックではない

優れた解説動画は、視聴者が持ち帰れる具体的な名前付きリスト（2～4項目） で終わります。質問ではありません。感情ではありません。リストです。

Tatakye の株式市場リターン動画は、具体的な解釈（「どの未来を買うか、どの世界にいるか、どれだけ待つか」）とともに3つのもの（x、m、π_s）を視聴者に手渡して終わります。視聴者はその夜の夕食時にこれを繰り返せます。

よくあるアンチパターン:

「あなたは彼らですか？」 — 問いの言い換え。力強く感じられる。何も教えない。視聴者は動画を閉じ、雰囲気を覚え、内容を忘れる。
「どう思いますか？」 — 修辞的な逃げ。動画は何も確約していない。
「時が教えてくれるでしょう。」 — ジャーナリズム的なごまかし。同じ問題。
慰めの一文。「私たちは以前にもここにいた。」 — フラットで、行動に移せない。

良いペイオフの感覚: スパインをアンロックするようなもの。スパインが A = B × C だったとする。ペイオフは「だから重要なのは、(1) B、(2) C、(3) それらの相互作用です。」動画は文字通り答えに分解されます。

3項目の回答画面（レシピ）

     01            02            03
      X             Y             Z
    label         label         label
   caption       caption       caption

3つの垂直カラム、等間隔
項目は1つずつ、約1秒間隔で表示（項目ごとにチャイム音）
各項目: インデックス番号（01/02/03）、単一グリフのエンブレム（漢字1文字または数学記号）、短いラベル（2～4文字）、1文のキャプション
3つすべてが表示された後、3～4秒間保持し、その後トランジションアウト
その後、1行の締めくくりの文章。これは、解決された形で言い換えられたフックにできる。「あなたは、どちらの側ですか？」は、側面に名前を付けた後に機能します。

チャプターラベルをコンテンツの標識として

弱いチャプターラベル: 第I幕、第II幕、第III幕 — 視聴者に構造上のどこにいるかを伝える。彼らは気にしない。

強いチャプターラベル: 筋肉 · 第一次外包、知性 · 第二次外包、× · 乗算、= · 代償、答え · 三つのこと — 各ラベルはスパインの用語またはコンテンツの直接的な一部。ラベルを読めば、視聴者は現在どのアイデアが分解されているかをすぐに理解できる。

ルール: チャプターラベルは、スパインがハイライトするような単語であるべきです。「第II幕」がチャプターラベルなのにスパインが「知性」と言っている場合、チャプターラベルを「知性」に変更してください。構造的な足場をチャプターラベルに重複させないでください — 構造は暗黙的であり、視聴者が必要とするのはコンテンツです。

ビジュアルシステム（Tatakye スタイル）

カラー

--bg:    #0a0a0f   /* #000000 ではない — 真っ黒は画面上で死んで見える */
--fg:    #eceae4   /* 温かみのある白、2% 青のバイアス。純粋な白は決して使わない */
--dim:   #8a8a90   /* 軸ラベルとキャプション用 */
--gold:  #d4a85a   /* 強調に使用する*唯一*の色 */
--red:   #c15b4e   /* 「ネガティブ」な統計（賃金の遅れなど）にのみ使用 */

これら5色以上は決して使わないこと。バリエーションを求めて青や緑を追加したい衝動を抑えてください。

タイポグラフィ — ここで動画は死にます

中国語か英語か、要素ごとに1つ選ぶ。 「第II幕 · THE PARALLEL · 第二幕 · 現在轮到心智」は決して使わない — 冗長で読みにくく、「AIが作ったバイリンガルスライド」の匂いがプンプンします。ラベルごとに1つの言語を選んでください。
イタリック体を最小限に。 CJKでのイタリック体は、ほとんどのブラウザで見栄えが悪くなります（偽の斜めグリフ）。強調には色（var(--gold)）を使用し、イタリック体は使わないでください。
モバイル表示の最小サイズ:
- 軸目盛り: 17px 基準（fontPx() でスケーリング）
- 軸ラベル: 17～19px
- 曲線終端ラベル: 19px
- チャプターラベル（左上）: 1.1rem
- 字幕（下部中央）: 1.15rem
- 見出し数字（中央）: 4.5rem+
- 巨大なオープニング/クロージングテキスト: 1.9rem+
表示数字はセリフ体（EB Garamond フォールバック → Noto Serif SC）。その他はすべてサンセリフ体（Inter → PingFang/Noto Sans）。

4層情報アーキテクチャ（Tatakye の特徴）

すべてのシーンには、固定位置に最大4つのテキストレイヤーがあります:

左上: チャプターラベル（小さく、文字間隔広め、薄暗い）
右上: 著者クレジット（小さく、薄暗い）
中央: 大きな数字/見出し（大きく、セリフ体）
下部中央: 字幕ナレーション（中程度、サンセリフ体）
左下イタリック（オプション）: 学術引用（「エンゲルス停滞 · Robert Allen」）

コアモチーフ（作品全体で3～5個を再利用）

セクションごとに新しいビジュアルを1つ発明しないでください — 小さなセットを選んでバリエーションをつけてください:

パーティクルフィールド（遠近法）: 120×36 グリッド、遠くの行は地平線付近、微妙な正弦波
時間軸上の上昇曲線: X の大部分でフラット、指数関数的な離陸。時間アンカーは特定の年号（2000年はすでに過去）ではなく、物語上の言葉（「現在」、「未来」）でラベル付け
エリア塗りのある下降曲線: 価格崩壊 / 価値の流出
水平タイムバー: 比例長さの比較（40年 vs 5年を1/8スケールで）
コードの雨: 短いドメイン固有の行が降る、「機械が認知作業を引き継ぐ」場合
ドット/パーティクルの粉砕: 「何かが壊れる」瞬間用

カメラの呼吸

静的なシーンに微細なパララックスを追加: camBreath = sin(t*0.14)*6, camSway = sin(t*0.09)*4。深度重み付け乗数で適用され、近くの要素は遠くの要素よりも多く動く。「フレームが死んでいる」感覚を防ぎます。

シーントランジション

シーン間は常にブラックアウトブリンクを使用 — ハードカットは決して使わない。sceneBlink(cb, {dark:0.45, hold:0.08, light:0.5}): 0.45秒でフェードアウト → シーン変更を実行 → 0.5秒でフェードイン。トランジション1回あたり合計約1秒。スライドの切り替えではなく、フィルムのカットのように感じられます。

数字のカウントアップ

すべての大きな数字は、表示時に easeOutCubic で約1.1秒かけて 0 → ターゲットまでアニメーションします。<span class="count" data-to="..."> を使用。

オーディオ — 最小限かつ意図的

環境音ループ: サイン波の奥行きのあるパッド（-24dB フロアノイズ）、周波数変調がかかった低音のハム。静的とは感じられず、存在も主張しない。
トランジション: ブラックアウト時、立ち上がりと立ち下がりが遅いスイープトーン（200Hz→80Hz、約1秒）。画面上のブリンクに一致させる。
ペイオフチャイム: 各テイクアウェイ項目が表示されるタイミングで、クリーンなサイン波チャイム（440Hz→880Hz、約0.3s）。音程が上がっていく。
重要な数字の表示: 最後の数字がカウントアップを終えた瞬間に、短いリバーブのかかったパーカッシブなアタック（ノイズバースト、約0.1s）。

Web Audio API を使用してすべてをプログラムで生成します。サンプルファイルは不要です。

画面比 — 縦向きと横向きの両方を生成

縦向き（9:16）: デフォルト。モバイルファースト。canvas.width = 720, canvas.height = 1280。
横向き（16:9）: オプションで生成可能。canvas.width = 1280, canvas.height = 720。ファイル先頭でユーザーに確認する。両方を生成する場合は無駄なので避ける — 1つのファイルで1つの画面比。

ファイルサイズとパフォーマンス

目標: 出力 HTML は 300～500 KB（圧縮前）。それ以上はおそらくオーバーヘッドが多すぎる（大きなインライン化された Base64 など）。
フレームレート: 滑らかなアニメーションには60fpsを目標とする。そのためには requestAnimationFrame を使用し、setInterval は使用しない。
メモリ: パーティクルシステムは2000パーティクルを超えないようにする（モバイルブラウザがパンクする。経験済み）。高密度はパーティクル数ではなく、パーティクルサイズで表現する。

実装ガイド（Claude Code / Cursor / Codex 用）

Must have: 単一ファイル HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
  /* ... */
</style>
</head>
<body>
<script>
  // All code, animations, audio, fonts inline
</script>
</body>
</html>

生成アプローチ

AskUserQuestion で事前質問を収集（テーマ、スパイン、尺など。上記セクションを参照）
動画構造とビートをスケッチするためのアウトラインを生成
各ビートのキーストーンビジュアルとキーストーン数字を特定
選択した画面比（720×1280 または 1280×720）でHTML テンプレートを書き出す
デフォルトで60fpsでアニメーションを実装し、requestAnimationFrame を使用
シーンマネージャを含める（各シーン: setup()、update(dt)、draw(ctx)、transitionOut(cb)を持つオブジェクト）
前述の指定に従ってブラックアウトブリンクを実装
Web Audio API を使用して環境音と効果音を生成
最終ファイルで指定されたカラーパレットとタイポグラフィルールを使用していることを確認
動画がペイオフで終わり、3項目の回答画面を表示することを確認

アニメーションのトリック

すべての数式には <canvas> + JavaScript（MathJax や KaTeX は使わない。重すぎる）を使用する。
すべての数字のカウントアップでは easeOutCubic と requestAnimationFrame を使用する。
すべてのグラデーションは ctx.createLinearGradient または ctx.createRadialGradient（Canvas 2D）を使用する。
すべてのトランジションはタイムスタンプベースのアニメーションで実装する（performance.now() または requestAnimationFrame の time 引数を使用）。
パーティクルシステムには JavaScript クラスと配列を使用する（各パーティクルは {x, y, vx, vy, life, maxLife} を持つオブジェクト）。

境界 — このスキルがカバーしないこと

動画ファイル自体のレンダリング（FFmpeg / サーバーサイドエンコードは行わない — ユーザーがブラウザでスクリーンレコードする）
自動ナレーション（AI音声合成は組み込まれていない。ユーザーは自分で録音するか、字幕に頼る）
動的データフェッチ（API呼び出しは行わない。すべてのデータはアウトラインに埋め込むか、ユーザーが提供する）
インタラクティブ性（これはビデオプレーヤーであり、アプリではない。クリック可能な要素はない）

既存の例

Tatakye の作品を研究することを強くお勧めします（Bilibili: @Tatakye）。特に:

股市回报（株式市場リターン）— 完璧なスパイン + ペイオフの構造が明確
技术的本质（テクノロジーの本質）— ミニマルなビジュアル + 強力なペイオフ
工作简史（仕事の簡潔な歴史）— シーン経済が明確：1つのビジュアルが長時間進化
内卷（過当競争）— 強力な物語構造、キャプチャ的なフックタイトル

これらは無料でアクセス可能で、本ガイドのすべての原則を示しています。

お気に入りのAIに質問する

ドキュメント