ホワイトボード説明動画
ナレーターが話すのに合わせて描かれるホワイトボード。見終わった人は頭の中に全体像が浮かびます。
スタイルを成立させるために不可欠な要素：
- すべての図は、音声がその部分を話すその瞬間に描かれます。準備完了の状態で表示されるものはありません。
- ボードはひとつだけ：カメラは移動しますが、説明済みの内容はその場に残り続けます。
- 最後の引きのショットでボード全体が見え、それが動画の要約になります。これは、描き始める前に全体のマップを計画しておかないと機能しません。
- 実際のアプリや実物がある場合は、描かれたウィンドウの中にスクリーンキャプチャを入れることで、描画の主張を証明します。
SD はこのスキルのフォルダを指します。コマンド例：node "$SD/scripts/..."。
始める前に
node "$SD/scripts/config.mjs"。キーがない場合は、ユーザーにいずれかひとつを選んでもらい、値をチャットに表示せずに保存してください。- OpenRouter（openrouter.ai/keys）：音声と文字起こしが可能。設定：
node "$SD/scripts/config.mjs" OPENROUTER_API_KEY=... - ElevenLabs（elevenlabs.io/app/settings/api-keys）：設定：
node "$SD/scripts/config.mjs" ELEVENLABS_API_KEY=...
- OpenRouter（openrouter.ai/keys）：音声と文字起こしが可能。設定：
- Node 20+ と ffmpeg が必要です。不足している場合は、ユーザーのOSに合わせたインストール方法を説明してください。
- 構築を始める前に、以下を明確にしておきます：テーマ、対象者、尺、言語、そして動画で何を明確に伝えるか。依頼が明確になったら、質問せずに進めてください。
制作の手順
| # | ステップ | 出力 |
|---|---|---|
| 1 | node "$SD/scripts/new-project.mjs" <フォルダ名> | Remotionプロジェクト |
| 2 | 短い区切りごとに台本を作成。各区切りはひとつの話題に絞り、番号は付けない | script/script.md |
| 3 | 動画が1分以上の場合：3つのサンプル（narrate.mjs <フォルダ名> --samples "最初のフレーズ"）を生成し、ユーザーに選んでもらう。script/voice.json に保存。短いテストではデフォルトを使用 | 音声 |
| 4 | node "$SD/scripts/narrate.mjs" <フォルダ名> | public/audio/、src/data/narration.json |
| 5 | 各区切りを src/sections.ts で連結 | タイムライン |
| 6 | ワールドマップ：各区切りにひとつの領域を割り当て、動画のパートごとにグループ化 | 定数 R_* |
| 7 | 一度にひとつの領域：描画、単語へのアンカー設定、スチルでの確認 | src/scenes/*.tsx |
| 8 | カメラワークとクロージング | src/Video.tsx |
| 9 | npx remotion studio src/index.ts でユーザーが確認できるように（ユーザーがレビューを希望する場合） | OK |
| 10 | 一部レンダリング→確認、全体レンダリング→確認、ラウドネス調整 | out/video.mp4 |
シーン src/scenes/Example.tsx は単なるテンプレートです：削除して、テーマに合わせたボードを描き直してください。動画ごとに独自の描画を持ちます。
ステップ6の前に references/method.md を読んでください。動画にスクリーンキャプチャが含まれる場合は、references/screens.md も読んでください。
台本
**s01**
区切りの話すテキスト。ひとつの段落のみ。
- 読み上げるためのフレーズであり、文字テキストではありません。簡潔な句読点を使用：ダッシュや三点リーダーは不自然な沈黙を生みます。
- 読み方が重要な数字は漢数字または英単語で表記します。
- 各区切りは必ず描画可能な内容にしてください。描けない場合は書き直します。
- 動画を長く使えるようにするため、日付は入れないでください。すべての数字には出典が必要です。
確認：あなたは動画を見ないので、フレームを読みなさい
npx remotion still src/index.ts Whiteboard /tmp/f.png --frame=N --scale=0.5
node "$SD/scripts/render.mjs" <フォルダ名> --frames=0-299
node "$SD/scripts/qa.mjs" sheet <フォルダ名>/out/video.mp4 24 # コマ送り：繰り返し部分や重なりを探す
node "$SD/scripts/qa.mjs" scan <フォルダ名>/out/video.mp4 # 静止フレーム、黒画面、ちらつきフレームを検出
node "$SD/scripts/qa.mjs" loud <フォルダ名>/out/video.mp4 # 目標 -14 ～ -16 LUFS、ピーク -1 dBTP まで
scan は視覚的な停滞を測定します：5%以上静止していると、動画がスライドのように見えます。テスト段階でも、フレーズあたりの図の数を増やし、細部にカメラのキーフレームを入れて修正してください。カメラの息づかいだけでは静止としてカウントされます。
画像を開いて確認してください。コマ送りを見ず、音声も測定せずに「良くなった」と言わないでください。
useCurrentFrame のみを使用したエフェクトにしてください：CSSの transition や animation はレンダリングに反映されません。