コードで作る3D動画（動画とショート）は何をしますか？

すべてのフレームは時間の純粋関数であり、HTML/CSS/three.js で記述されます。同じページがライブエディタ（即座に再生、何も保存されない）であり、レンダリングソース（Chromiumがフレームごとにキャプチャ、ffmpegが結合）でもあります。ユーザーはディレクターであり、あなたが作業を行います。ユーザーがライブバージョンを視聴するまでは、何もレンダリングされません。

ワークフローは7つのステップで構成されています。順番に実行し、ステップ5をスキップしないでください。

#	ステップ	作成するもの
1	セットアップ	`template/` からプロジェクトフォルダをコピー、サーバーを起動
2	スクリプト	`script.md`、次にショット計画：1文＝1ショット
3	音声	`voiceover.mp3` + ワードタイミング、または音声が後でくる場合は推定タイミング
4	スタイル	ルックを数値で `STYLE.md` に記述し、3Dワールドに組み込む
5	修正	ライブエディタレビュー、ノートを適用、繰り返しのミスを `references/lessons.md` に追加
6	レンダリング	チャンクレンダリング、音声と結合
7	アップロード	タイトルオプション、説明、チャプター、サムネイルプロンプト

1. セットアップ

ツールは ~/.youtube-video-editor/venv にあります（Playwright Chromium、imageio-ffmpeg、pillow、faster-whisper）。存在しない場合は、~/.claude/skills/youtube-video-editor/scripts/setup.sh を実行してください。常に ~/.youtube-video-editor/venv/bin/python -I として呼び出します。ユーザーのMacにはシステムのffmpegやnodeはありません。
template/ を、ユーザーが確認できるフォルダ内の <project>/ にコピーします（通常は ~/Downloads で作業します）。 16:9 動画 → index.html + scenes.js。縦型ショート → short.html + scenes-short.js（ステージ 1080×1920）。
サーバーを起動：python3 -m http.server 8766 --bind 127.0.0.1 をプロジェクトフォルダから実行（nohup … & で起動）、その後ブラウザペインで http://localhost:8766/index.html を開きます。file:// ページはそこでは死んだスナップショットとして表示され、また preview_start と launch.json ではこのMacでサーバーが立ち上がらなかったため、Bashから起動してください。

2. スクリプト

スクリプトが動画を決定します。ユーザーのスタイルで記述：短い話し言葉の文、平易な言葉、教科書調は避けてください。視聴者は非技術的な初心者（Low Code Studio）です。1分あたり約150ワード；ショートは60～110ワード。
次にアニメーションの前にショットを計画：1文＝1シーン、各シーンについてカメラが見ているものを1行で記述します。計画を変更するのは自由ですが、アニメーションを変更するのはそうではありません。
別の動画に触発された場合？構造と教訓は保持し、すべての例、ビジュアル、セリフを変更します。決して彼らの映像、文言、サムネイル、キャラクターを再利用しないでください。

3. 音声

ユーザーは自分の声を録音し（ブランドの一部です）、後で顔写真を追加します。そのため、最初のパスには音声がありません：各シーンの長さは、その vo のワード数から推定されます（WPS/PAD は engine.js 内）。
voiceover.mp3 が存在する場合：16kHzモノラルwavに変換し、 ~/.claude/skills/youtube-video-editor/scripts/transcribe.py を実行してワードタイムを取得し、各シーンの dur をその最初のワードと次のシーンの最初のワードの間のギャップに設定し、data-in 値をキーワードに調整します。シーン内のタイミングはシーンの長さに自動的に追従するため（作成ペース→実際のペース）、ほとんどのシーンは dur のみ必要です。レンダリング時には --audio voiceover.mp3 を渡します。
このi3 Macでは、マシンがビジーなときに whisper small が遅くなることがあります。base、beam_size=1、ワードタイムスタンプなしは約5倍高速で、参照の読み取りに十分です。最終的な同期には small + ワードタイムスタンプのみ使用します。

4. スタイル：形容詞ではなく数値

「シネマティック」は意味がありません。すべてのシーンが異なる推測をすることになります。プロジェクト内に STYLE.md を書き、チェック可能なルールを記述し、それらを一度だけワールドに組み込みます。references/style-rules.md（ハウス3Dルック：カメラアングル、レンズ、照明値、パレット、モーション、キャプション）から始めてください。ユーザーが参考画像を提供した場合、それを読み取り、あなたが見たものを同じ数値に変換します。他のクリエイターの動画のコピーではなく、彼ら自身の参考資料です。

2Dモーショングラフィックスは、3Dよりもはるかに少ないトークンで済み、壊れにくいです。スペース、スケール、または旅が重要なショット（フック、「ワールド」ショット）には3Dを使用し、プロンプト、リスト、比較、チャプターカードには2Dカードを使用します。適切な割合は、おおよそ3～4シーンに1つの3Dショットです。ショートは数ショットしかないため、全体を3Dにすることもできます。

5. 修正：ライブエディタ（決してスキップしない）

ユーザーのためにエディタを開き、そこで停止します。ユーザーはこれを明示的に要求しました：完全なレンダリングの前にライブエディタでレビューすること。サイドパネルには各シーンの音声が表示され、長さを変更（±0.5秒）したりノートを記述したりできます。レビューノートをコピーはすべてをクリップボードにコピーし、ユーザーがあなたに貼り付けられるようにします。
引き渡す前に、自分の作業を確認：render.py --sheet sheet.jpg で各シーンの1フレームを取得します。それを確認し（縦長のシートを3つに分割して読みやすくする）、問題を修正し、繰り返します。典型的な初回の欠陥は references/lessons.md にあります。構築する前にそのファイルを読んでください。
同じノートが複数のシーンに現れた場合、動画を修正し、references/lessons.md に行を追加して、次の動画が解決された状態で開始されるようにします。これがこのスキルの要点です。

6. レンダリング

ユーザーがライブバージョンを承認した後にのみ実行します。render.py --chunks out/chunks --chunk-len 60 を実行し、次に render.py --join out/chunks final.mp4 [--audio voiceover.mp3] を実行します。ショートの場合は --size 1080x1920 と short.html?render URLを追加します。1つのシーンが間違っていた場合→その chunk_NNN.mp4 を削除して再実行します。そのチャンクだけが再レンダリングされます。
i3での速度（実測）：1080pの全画面3Dシーンで1フレームあたり約1秒（ヘッドレスWebGLはソフトウェアで動作するため）。 30fpsの10分間の動画は18,000フレームなので、3～5時間を計画し、開始前にユーザーに伝えてください。ユーザーが問題なければ --fps 24 を使用し、nohup でバックグラウンド実行し、 Macをスリープさせないようにし（request_keep_awake）、最大2つのチャンクプロセスを同時に実行します（--start/--end で範囲を分割して別々のフォルダに）。
ヘッドレスChromiumはWebGLのために --use-angle=swiftshader --enable-unsafe-swiftshader を必要とします（既にrender.pyにあります）。
再構築せずにカット：シーンは配列なので、並べ替えや削除は編集リストで行います。オープニングが遅い場合は、最も強いショットをインデックス0に移動します。

7. アップロード

スクリプトを知っているので、5つのタイトルオプション（1つを推奨）、説明、シーンの開始時刻からのチャプター、タグを記述します。 ~/.claude/skills/youtube-video-editor/references/youtube-metadata.md に従ってください。サムネイルは画像モデルが役立つ唯一の場所です：強力な静止画をレンダリングし（render.py --stills）、プロンプトを書き、ユーザーが生成または合成できるようにします。サムネイルの主張はすべて動画に対して真実でなければなりません。

シーン形式（engine.js）

SCENES.push({
  id: 'belt', chapter: '2 · スクリプト', title: 'ベルトの上の箱',   // エディタに表示
  vo: `あなたの箱がベルトに乗ります。`,                                   // 音声行；音声が存在するまでの長さを設定
  dur: 4,                                                         // オプションの固定長（秒）
  cls: 'z',                                                       // オプション：plain | grad | paper | z | z1（スケールアップ）
  html: `<div class="three abs" style="inset:0"></div>
         <div class="h1" data-in="0.4" data-a="pop">こんにちは</div>`,
  tick: (t, root) => K.draw3d(root.querySelector('.three'), 1920, 1080, t, 'belt'),
});

宣言的：data-in / data-out（秒）、data-a（up down left right pop fade drop zoom）、data-d、 data-type（タイプライター）、data-count="0,2400000"、data-w="0,80"（幅％）、data-draw（SVGストローク）。
tick(t) はカスタム処理用です。t のみに依存する必要があります：Date.now() や Math.random()（代わりに E.rnd(i) を使用）、 CSSアニメーションやトランジションは使用しないでください。そうしないと、レンダリングがプレビューと一致しません。
キット：K.chat() Claudeスタイルのプロンプトボックス、K.track() ステップトラッカー、K.chapter() 全幅チャプターカード、 K.wave() + K.waveTick()、K.draw3d(holder, w, h, t, mode) 1つの3Dビュー用、K.snap(canvas, t, mode) で 1つのシーンに複数のカメラビューを表示（1つの共有WebGLレンダラーを使用；シーンごとにレンダラーを作成しないでください）。
3Dワールドは kit.js の K.world() です：一度構築し、update(t, mode) でオブジェクトを移動しカメラを配置します。新しいフィルムの場合は、そこでオブジェクトとカメラモードを置き換えます；パターンは維持します。examples/workflow-video/ はこのスキルで作成された完全な10分間の動画（45シーン）です。新しいシーンを書く前に、パターンを読んでください。

2つのルック：トイジオラマとストーリーワールド

kit.js の K.world() はシンプルなフラットシェーディングのジオラマです（構築が速く、解説や背景に適しています）。
template/worlds.js は、ユーザーがジオラマを「あまりリアルではない」と呼んだ後で好んだ、よりリッチなストーリールックです：滑らかなトイのようなキャラクター（アニメーション可能な頭、腕、脚、walk() を持つ person()）、グラデーションスカイドーム、ACESフィルム調トーンマッピング、 1つの低い暖かい太陽と暖かい実用的なライト、ランプ用の加算グロースプライト、スチームとビーム、キャンバステクスチャのウィンドウ、奥行き用のフォグ。 3つの完成した6秒ワールドが含まれています（夜明けのチャイスタンド、夜間配送ライダー、灯台守）；examples/story-samples/ はそれらをページに配置する方法を示しています。 worlds.js を kit.js の後にロードし、K.drawStory(holder, w, h, t, name) で描画します。
コード3Dはフォトリアルにはできません。ユーザーが「超リアル」を要求した場合、率直にそう伝え、選択肢を提供します： AI動画（クレジットがかかり、動画はもはや「すべてコード」とは言えません）またはストーリールック。その後、1つのルックでフィルム全体を構築する前に、2～3の短いサンプルクリップを選択させます。
すべてのストーリーショットには、ショット内で始まりと終わりを持つ何かをするキャラクター（歩いて入り、止まり、手を振る；ランタンを持ち上げる）、ネームタグ、1つの移動光源を与えます。それが「ストーリー」と読まれるものです。

ショートのチェックリスト

1080×1920、20～45秒、1つのアイデア。フックを2秒以内に表示し音声で伝え、動きから開始。2～5語のキャプションをダークなピル上に配置（明るい3D空にそのままテキストを置くと読めない）、セーフエリア内：上部220px、下部420pxには重要なものを配置しない。ワイドショットは縦では小さくなるため、よりタイトなカメラモード（belt、follow、hero）を使用します。ペイオフで終了し、フォローを促す1行を追加。アウトロはカットします。

バンドルファイル

template/: index.html, short.html, engine.js, kit.js, worlds.js, style.css, render.py, スターターシーン, lib/three.min.js
examples/story-samples/: 3つのキャラクターサンプルクリップページ
examples/workflow-video/: 完全な「Claude Codeを動画に使う方法」ビルド（scenes-1/2/3.js + index.html）; テンプレートファイルの隣にコピーして実行します（0:21の壁のサムネイルはバンドルされていません）
references/style-rules.md: 数値での3Dハウスルック
references/lessons.md: すでに支払われたミス（構築前に読み、レビュー後に追加）

コードで作る3D動画（動画とショート）