FireAmun/remotion-dev-video-kit

デイリービデオ：アイデア → リサーチ → 承認 → 作成 → プレビュー → レンダリング → Buffer

最初に .claude/CLAUDE.md を読むこと。これが唯一の情報源です（ブランド、動画のルール、ナレーション、セーフゾーン）。 このスキルはステップバイステップの実行手順です。承認が必要な2つのハードストップは、企画提案（ステップ2）とプレビュー（ステップ5）です。 これらは絶対にスキップしないでください。

以下のパスでは <date> = 今日（YYYY-MM-DD、アジア/リヤド）を使用します。エピソードフォルダ：public/episodes/<date>/。

見た目とスタイル：毎回のエピソードで同一

すべてのエピソードは最初のエピソードと同じに見える必要があります。シリーズはその見た目で認識されるからです。つまり：

• 同じ構成要素のみを使用。 既存のセット、リグ済みのキャラクター、ポーズ、モーション、小道具、アイテムを使用します。デイリー実行では src/theme.ts、フォント、色、キャラクターアート、チャプターバー、キャプションスタイル、効果音を変更しないでください。新しいビジュアル（新しいセット、ポーズ、小道具、アイテム）はクリエイターが依頼する別のタスクです。依頼があった場合は、同じ黒と金のスタイルで作成し、このスキルのリストに追加します。
• 同じ構造。 1080×1920、30 fps、60 秒以下。上部に「EP NN」ラベル + 7チャプターバー、下部に単語ごとのキャプション（明るい発話中単語、薄いこれからの単語、1行に1つの金色のキーワード）。1文＝1シーン。キャラクターは各文を演じます。小道具/アイテムは発話単語に合わせて配置されます。1.5～3秒ごとにビジュアルチェンジ。シーンチェンジごとに「ウッ」という効果音。
• 同じ展開。 最初の2秒でフック → 早期の「フォロー」プロンプト（フォローボタンシーン）→ コンテンツチャプター → エンドカード（yoursite.com と正確なクロージングライン）→ 「明日: <次のトピック>」ティーザー。
• 同じ声。 Qwen3-TTS、assets/voice/reference_energy.wav 使用、同じシード、エネルギッシュな句読点。
• 同じ公開方法。 リヤド時間19:00、Instagramリール（フィードにも共有）+ TikTok + LinkedIn、Instagram と TikTok ではAI生成ラベルをON（声はAIクローンです。ラベル表示は誠実であり、アカウントを保護します）。
• エピソード番号は topics-log.json からカウントアップします（次 = 最後 + 1）。

1. リサーチ

1. topics-log.json を読む：トピックを繰り返さないこと。前回のエピソードで「次の」トピックを約束していた場合は、それを優先する。
2. Web検索：2～4の信頼できる情報源（公式ドキュメント、GitHub README、論文、ベンダーのサイト）。すべての数値、価格、バージョン、主張を検証する。すぐに変わるものには「<日付>現在」と付記する。事実、ベンチマーク、コードを捏造しないこと。
3. ポジショニング：実際の開発者が役立つヒントを提供する形。誇大広告や「AIが作ったものを見て」ではない。ツール系のトピックは開発者向けのヒントとして構成する。

2. 企画提案 - 承認のためのSTOP

チャットでクリエイターに以下の項目を簡潔に示す：

• フック（最初の2秒）：具体的な利害、数字、主張。挨拶は不要。
• シーンテーブル、1行につき1文（5～8チャプター、約12～16シーン、合計30～60秒、約2.5～3.5語/秒）： # | チャプター | 文 | セット | キャラクターの行動 | どの単語にアイテムが配置されるか チャプター：HOOK、WHAT、WHY IT MATTERS、HOW、CATCH、TRY IT、NEXT。フックの直後に早期フォロープロンプト。 最後の文は常に正確に次のとおり：「Visit my website yoursite.com and hit the follow button for more.」
• 事実と情報源（URL）、およびクリエイターが確認すべき事項（彼の声で述べられる意見、ツール名など）。
• キャプション：Instagram/TikTok用（フック行、利害行、CTA、ハッシュタグ）と、よりプロフェッショナルなLinkedIn用キャプション（ハッシュタグ3つ）。

「go」/承認または編集を待つ。大幅な編集の場合は、適用後に再表示する。

3. 音声（GPUジョブ。その間、GPUで他の処理は行わない）

public/episodes/<date>/narration.txt を作成：TTSセグメントごとに1段落（段落間に空行）。話される通りに書く： your site spelled as spoken (e.g. "my site dot com")、N P X create video、Qwen three T-T-S、pip install Qwen T-T-S、曖昧な数字は単語で。フック行では ! を使用（モデルは句読点をエネルギーとして読む）。

.venv-qwen\Scripts\python scripts\tts_qwen.py public\episodes\<date>\narration.txt
.venv-qwen\Scripts\python scripts\timestamps.py public\episodes\<date>\narration.wav --hint "<5-10個のテクノロジー用語>"

• 音声 = Qwen3-TTS 1.7B zero-shot、参照 assets/voice/reference_energy.wav（+ .txt トランスクリプト）。有料の音声サービスは決して使用しない。
• スクリプト全体をWhisperにプロンプトとして渡さない（ループする）。ごく少数の用語のみ --hint で指定する。
• ナレーションの長さを確認する（60秒以下、末尾1.5秒の余白を含む）。narration.json のテキストをざっと見て聞き間違いがないか確認する。
• tts_qwen.py は自動的に音声のレベルを調整する（scripts/audio_level.py：コンプレッサー → -16 LUFS → -1 dBFS ピーク）。src/components/Sfx.tsx の効果音はそのレベルに対して調整済み（音声より約12 dB低い）。効果音のレベルを上げないこと。別の方法でナレーションを作成した場合は、最初に scripts/audio_level.py を実行する。

4. エピソードを作成（データのみ - デイリー実行では新しいコンポーネントコードは不要）

public/episodes/<date>/plan.json を作成し、次に：

.venv-qwen\Scripts\python scripts\build_episode.py public\episodes\<date>
npm run lint

plan.json の形式（完全な例は public/episodes/example/plan.json を参照）：

{
  "episode": 2, "date": "<date>", "title": "...", "keywords": ["単語", "..."], "tailMs": 1500,
  "sources": [{ "title": "...", "url": "https://..." }],
  "scenes": [{
    "chapter": "HOOK",
    "display": "キャプションに表示される通りの文（書記形式：yoursite.com、npx create-video）。",
    "set": "stage", "setVariant": "", "zoom": 1.05,
    "actor": { "x": 540, "scale": 0.9, "facing": "right", "enterFrom": "right",
               "beats": [{ "atMs": 0, "pose": "talk" }, { "atWord": "build", "pose": "pointUp", "motion": "talk" }] },
    "items": [{ "kind": "label", "text": "...", "atWord": "camera!", "untilWord": "...", "x": 540, "y": 420 }]
  }]
}

• すべてのシーンの display を連結したものは、話されたナレーションと一字一句同じでなければならない（書記形式は異なる場合あり。例：「Qwen three T-T-S」に対して「Qwen3-TTS」）。ナレーションの段落を開始するシーンは、TTSから正確にタイミングが取られる。それ以外のシーンは、最初の発話単語から始まる。
• タイミングキー：atWord / crossAtWord / untilWord（大文字小文字と句読点を無視して一致）、繰り返し単語には occurrence、微調整には offsetMs、または単純に atMs。
• ポーズ（src/rig/poses.ts）：idle、talk、explain、shrug、wave、point、pointUp、pointViewer、celebrate、think、search、laptop、holdUp、thumbsUp、headScratch。モーション： talk（ジェスチャーが音声に従う）、wave、shake、celebrate、search、type、still。手持ち小道具： magnifier、phone、trophy；"laptop": true でラップトップを持つ。facing: "left" でキャラクターを反転させる（左のものを指す）。
• セット（src/sets/Sets.tsx）：stage、coderoom、desk（机は脚を隠す。右にモニター）、sky（setVariant "sunrise" または "timelapse"）、chalkboard（左にボード）、library、blueprint（紺色の背景に金色の技術図面。HOW / 「仕組み」のシーンに使用）、plain。すべてのシーンに漂う金色の埃がある（"particles": false でオフ）。
• アイテム（src/scene/Items.tsx）：icon（camera/timeline、crossAtWord）、label（金/薄色）、code（飛来するチップ、fromX/fromY）、window（ターミナルまたは "style": "chalk"、行の種類は command/code/output）、counter、stamp、steps、waveform、calendar（from→to）、banner、confetti、book、follow、end（url + cta、アールデコ調の枠）、kinetic（大きな単語が1つずつ勢いよく入る。highlight 単語は金色。size、stagger フレーム。フック行に最適）、splitflap（空港ボード風の統計表示、最大10文字、オプションで label。フックの数字に最適）。
• カードは自動的にフロストガラス（グラスモーフィズム）になる。スタイルキットのプレビュー：StyleTest コンポジション。
• アイテムには実際のコンテンツ（実際のコード、実際のターミナル出力、実際の数字）を入れ、埋め草は絶対に入れない。

苦労して得たレイアウトルール（1080×1920）：

• トップバー（EPラベル + チャプター）は y 215 あたりで終了。アイテムの上部は約 230 より下に保つ（シーンズームがアイテムを押し上げることを忘れずに）。
• 床 y 1440。キャプション y 1490。横マージンは60ピクセル確保。
• アクタースケール 0.9 → 頭頂部 y ≈ 570。0.8 → ≈ 670。0.7 → ≈ 760。大きなアイテム（window、waveform、end card）はアクタースケールを 0.58～0.8 にするか、アクターを横（x≈790、facing left）に配置する。
• ラベルはデフォルトサイズで1文字あたり約38ピクセル。短くするか、画面からはみ出さないようにする。
• アイテムでキャラクターの顔を絶対に隠さない。ラベルはウィンドウの横または下に配置する。

5. プレビュー - 承認のためのSTOP

1. スタジオ：npx remotion studio → http://localhost:3000/Episode（すでに起動している可能性あり）。
2. シーンごとに1枚のスチルをレンダリングし（スケール0.4）、まず自分で確認：重なり、画面外のテキスト、顔の隠れ、アイテムのタイミング。問題があれば修正し、再ビルドし、再確認する。
3. クリエイターにスタジオのリンクを見せる（および、発音など自分で確認できないことがあれば伝える）。承認またはスクリーンショットによるフィードバックを待つ。指摘された箇所を正確に修正する。

6. レンダリング

npx remotion render Episode out/<date>/video.mp4 --codec=h264 --crf=18

（src/Root.tsx の Episode コンポジションのデフォルトプロップ episodeFile を新しいフォルダに設定するか、--props='{"episodeFile":"episodes/<date>/episode.json","episode":null}' を渡す。） 確認：60秒以下、1080×1920、30 fps、音声あり、声がすべての効果音より明らかに大きい（声 ≈ -16 LUFS）。out/<date>/caption.txt（IG/TikTok用）と out/<date>/caption-linkedin.txt を作成する。

7. Bufferの下書き（クリエイターが動画を添付）

BufferのAPIは公開URLからの動画のみを受け付けるため、アジア/リヤド時間19:00に合わせてタイミング設定された下書きを作成する。クリエイターが各下書きをBufferで開き、out/<date>/video.mp4 を添付して、「スケジュール」を押す。

• 組織 <あなたのBuffer組織ID>（Buffer MCPの get_account で取得。無料プランでは10件の予約投稿が可能）。
• チャンネル：Instagram <id>、TikTok <id>、LinkedIn <id>（list_channels で取得）。
• create_post を mode: "customScheduled"、dueAt: "<date>T19:00:00+03:00"、saveToDraft: true、schedulingType: "automatic" で実行。
  • Instagram：metadata.instagram = { type: "reel", shouldShareToFeed: true, isAiGenerated: true }。
  • TikTok：metadata.tiktok = { title: "<短いフック>", isAiGenerated: true }（声はAIクローンであるため、必ず開示する）。
  • LinkedIn：プロフェッショナルなキャプション。メタデータは不要。
• 19:00がすでに過ぎている場合は、推測せずにクリエイターに時間を尋ねる。彼の許可なく投稿やスケジュール設定を絶対に行わない。

8. ラップアップ

• topics-log.json にエピソードを追加する（日付、エピソード、タイトル、トピック、「次回」の約束、情報源）。
• クリエイターに伝える：動画のパス、3つのBuffer下書き（動画を添付する必要があること）、および次回のエピソードで約束したトピック。