HTML → 動画：複数バリエーション、最適選択、最終合成
ClaudeはHTML/CSSでのデザインに最も優れています。そのため、動画は次のように作成します：アニメーションをHTMLで書き、動画にレンダリングし、結果を目で見て（フレーム）、バリエーションを比較し、改善します。
要件
node+playwright（Chromium付き）、ffmpeg。確認：bash scripts/check-env.sh。
クイックスタート
cp references/template-scenes.html work/<名前>/v1.html # シーンエンジン用テンプレート
node scripts/render.mjs work/<名前>/v1.html --preset vertical-preview --duration 20 --out work/<名前>/v1.mp4
references/engine.js— シーンエンジン：背景、ハイライト付き字幕（*単語*）、進行状況、トランジション、イージング（E.pop、E.type、E.set）。references/parts.js— パーツ：マスコットP.bot、アイコンP.icon、macOSウィンドウP.win、チャットバブル。references/design-notes.md— 動画を「生き生き」させる要素（ストーリー、フック、リズム、字幕）。バリエーション作成前に読んでください。- 完成動画の例：
examples/（claude-ad— 16:9;chatgpt-ad— 9:16、25秒;duolingo-ad— 9:16、40秒、60fps、ストーリーとデモ付き;claude-self-ad— 9:16、39秒、60fps、メタ視点を持つClaude自身の広告）。 - ファイルサイズ：40秒/60fpsの動画で約10MB。より小さな制限が必要な場合は
--fps 30またはffmpeg -i in.mp4 -crf 24 out.mp4で再エンコード。
品質の主要原則
-
見せる、語らない。 動画内の主張はすべて、証明となるシーンであり、単なるテキストではありません。
主張 表示内容 「コードを書く」 プロンプトが入力され、コードが行ごとに表示される 「わかりやすく説明する」 実際のエラー（ she drink）、ハイライトとルール「+s」、フクロウの説明「実践的に学ぶ」 指が単語をタップ、フレーズが組み立てられ、緑色の「正解！」パネルが表示 「連続346日」 カウンターが1→346に、火の付いた状態で進み、カレンダーが波状に埋まり、通知、紙吹雪の祝福 「ゲーム」 リーグテーブルでヒーローの行が1位に上がり、+XPが表示 -
状況を説明する。 各シーンには2層のテキスト：上部の小さな見出しラベル（
<div class="kick">：「レッスン」、「リーグ」）と下部の字幕にハイライトされたキーワード（cap: '*間違い*をわかりやすく解説'）。一言のスローガンよりも完全なフレーズの方が良い。 -
滑らかさ。 最終版は60fpsでレンダリング。すべてが連続的に動く：バネのような出現（
E.spring、E.pop）、カメラのゆっくりとしたズームイン（cam: [1, 1.05]）、マスコットの揺れ、まばたき（P.blink）、さざ波を伴う指のタッチ（P.touch）、カウンター（E.count）、circle/wipe/leftトランジション。静止フレームを約0.5秒以上残さない。 -
ストーリー： フック（痛点/ユーモア）→ デモンストレーション → 「最高の機能」 → クライマックス（報酬/結果） → 行動喚起。広告は30〜45秒。
-
3つのバリエーションは3つの異なるアイデア、単なる3つの色違いではない（例：「連続記録カウンター」「ライブレッスン」「マスコットとの対話」）。その後、最終版はすべてのバリエーションの最良のシーンから構成されます。
プロセス
1. ブリーフィング
次の項目を確認する（または妥当なデフォルト値を選択）：テーマ/テキスト、ターゲットオーディエンス、長さ（広告20〜30秒、ストーリーは最大60秒）、 フォーマット（デフォルトはReels/Shorts/TikTok向け縦型1080×1920; 1920×1080と1080×1080はリクエストに応じて）、fps（30）、スタイル、色/フォント。 短い絵コンテを作成：フック → 問題 → 解決策 → デモ → 行動喚起。ブランド広告では公式ロゴを使用せず、独自のマスコットを描くこと。
2. 3つ以上の異なるバリエーション
作業用フォルダ work/<名前>/ を作成し、その中に v1.html、v2.html、v3.html（さらに多くても可）を作成。
バリエーションは細部ではなくコンセプトで異なること。例：(a) マスコットとのストーリー、(b) カードを使用したプロダクトデモ、(c) 大きなタイポグラフィを使った高速カット。異なる構成、パレット、リズム。
各ファイルは自己完結型のHTML（外部読み込みなし、フォントはシステムフォントまたは埋め込み）。
アニメーションルールは references/animation-contract.md を参照；スターターテンプレートは references/template.html。
3. 各バリエーションのレンダリング
バリエーションはプレビュー解像度（高速）、最終版はフル解像度：
node scripts/render.mjs work/<名前>/v1.html --out work/<名前>/v1.mp4 --preset vertical-preview --duration 21
node scripts/render.mjs work/<名前>/final.html --out work/<名前>/final.mp4 --preset vertical --fps 60 --duration 40 [--audio music.mp3]
レンダリングは決定論的で並列（コア数に応じて）：時間は各フレームに手動で設定され、カクつきやスキップはありません。
--from 5 --to 9 で一部のみレンダリング。動画なしで1フレーム：node scripts/frame.mjs v1.html 3.5,7 work/<名前>/frames --width 540 --height 960。
4. 分析 — 必ず確認すること
bash scripts/contact-sheet.sh work/<名前>/v1.mp4 work/<名前>/v1-sheet.png 12
*-sheet.png と個別フレームをReadで開く（画像は視覚的に読み取られます）。
references/rubric.md（8つの評価基準、各5点の合計）に従って評価：読みやすさ、階層、リズム、滑らかさ、バランス、統一感、ブリーフ適合性。
各バリエーションについて記録：基準ごとのスコア、最も優れている点、最も弱い点。
コードではなく、フレームで見えるものだけを評価してください。不明な点があれば、フレームをより密に、または必要な瞬間に生成：bash scripts/contact-sheet.sh <mp4> <png> 12 <start_s> <end_s>。
5. リーダーの選択と合成
- 合計スコアが最も高いバリエーションを選択。
- 「借用」リストを作成：他のバリエーションからの具体的な優れた解決策（例：「v2のタイポグラフィ」、「v3の出現アニメーション」、「v1のパレット」）。
- リーダーをベースに
final.htmlを作成し、これらの修正を適用。リーダーの弱点を修正。
6. 反復と最終版の確認
final.mp4 をレンダリングし、再度コンタクトシートを作成、リーダーと比較。最終版がルーブリックでリーダーを上回らなければ、修正して繰り返し（最大3回）。その後、ユーザーに結果を表示：final.mp4 へのパス、各バリエーションの簡易評価表、どこから何を借用したかのリスト。
7. サウンド（オプション）
ffmpeg -i final.mp4 -i music.mp3 -shortest -c:v copy -c:a aac final-audio.mp4
ルール
- ブランドの公式マスコットやロゴをコピーしない：独自のキャラクターを描き、ブランド名はテキストのみ。
- ステップ4をスキップしない：決定は仮定ではなく、見たフレームに基づいて行われます。
- すべての成果物は
work/（.gitignoreに含める）に保存し、リポジトリにはスキルと例のみコミット。 - Chromium/ffmpegが利用できない場合は、その旨を直接伝え、結果を偽装しない。