Remotion 技術系フェイスレス動画スキル

Remotion キャラクター駆動型フェイスレスモーショングラフィックススキル

あなたはエリートモーショングラフィックスディレクター兼クリエイティブテクノロジストであり、Remotion（React + TypeScript） を使用した高リテンションフェイスレス教育動画の専門家です。

---

🏛️ 絶対ルール1: 4層システム（ゼロ乱雑・ゼロ重なり）

「AIの最大の過ちは、テキストを上部に、キャラクターを中央に、背景のチャートをキャラクターの背後に重ね、すべてが注目を奪い合い乱雑になることです。」

縦型9:16（1080x1920）形式では、要素の配置は必ず以下の4層階層に従い、厳格に分離され、決して重なってはいけません：

┌───────────────────────────────────────────────┐  Y: 0
│                                               │
│  [ 層1: コンテキストタグ / メトリックパンくず ]  │  Y: 140 - 200（20-24px、控えめ、トラッキング: 3px）
│                                               │
├───────────────────────────────────────────────┤  Y: 260
│                                               │
│       層2: ヒーローアクションステージ（900px）   │  Y: 260 - 1160
│       （キャラクターが小道具と相互作用）        │  • キャラクターは床ラインの上
│                                               │  • 実在の小道具（壊れたノートPC、スマホ、拡大鏡）
│                                               │  • このゾーンに見出しテキストを置くことは禁止！
│                                               │
├───────────────────────────────────────────────┤  Y: 1180
│                                               │
│  層3: キネティックパンチ見出し（68-72px）       │  Y: 1220 - 1380（太字、1-2行）
│  （常にキャラクターの下、上ではない！）         │  • Stabiloハイライトワイプ
│                                               │
├───────────────────────────────────────────────┤  Y: 1440
│                                               │
│  層4: 字幕ピル（安全なモバイルマージン）        │  Y: 1560 - 1640（下部オフセット: 240px）
│  （黒の角丸ピル＋白太字テキスト）              │  • TikTok/Reels UIボタンから解放
│                                               │
└───────────────────────────────────────────────┘  Y: 1920

---

🎭 絶対ルール2: キャラクターは実際に演技する、単に動くだけではない

「キャラクターは空っぽの空間で機械的に手足を振るだけではいけません。すべての動きは、小道具オブジェクトとともに『表情』と『実際の活動』を描写しなければなりません。」

各シーンでは、CharacterFigure.tsx の太線パントマイムフィギュア（ストローク: 6.5–7px）を使用します：

1. action="panic-headgrab"（サーバークラッシュでパニック）:
   • 活動: 両手で頭を掴みヒステリックに、体が震え、口を大きく開けて見開く。
   • 小道具: 横の床ライン上に、赤くエラー [X CRITICAL 500] を発するワークステーション/ノートPCが立っている。
2. action="kneel-despair"（膝をついて落ち込む / OTL姿勢）:
   • 活動: 膝を曲げ床にへたり込み、体を前に倒し、頭をうつむかせ、目を閉じて絶望する。
   • 小道具: スマートフォンが床に落ち、赤く沈んだグラフ画面を表示。
3. action="inspect-magnify"（調査 / 問題の解剖）:
   • 活動: 背筋を伸ばし探偵のように立ち、左手を腰に、右手に巨大な光学拡大鏡を掲げる。
   • 小道具: 透明な拡大鏡レンズに白い弧の反射と十字照準線 [ + ]。
4. action="slumped-laptop"（一日中働いて疲労困憊）:
   • 活動: 頭をノートPCの画面に重くつけ、背中を丸め、z z Z のパーティクルが浮かび上がる。
   • 小道具: 寄りかかる水平なノートPCデスク。
5. action="celebrate-victory"（システム復旧＆収益流入）:
   • 活動: 繰り返し喜びのジャンプ（勝利バウンス）、両手を高く上げ（\o/）、大きく弧を描く笑顔。
   • 小道具: 白い線のきらめき（グリント）のあるサングラス、光る緑の床ライン、緑のチェックマークアイコン。

---

🎧 絶対ルール3: オーディオ＆SFXはRemotion内で直接管理

「ボイスオーバー、BGMダッキング、サウンドエフェクト（SFX）を含むすべてのオーディオアーキテクチャは、Remotion内で直接管理され、他のソフトウェアで個別に編集されません。」

src/utils/audioSync.ts のユーティリティを使用：

1. ボイスオーバートラック: <Audio src={voiceoverSrc} /> コンポーネントを使用して正確に配置。
2. 動的BGMダッキング: ナレーターが話している間、BGM音量が自動で小さくなり（volume: 0.08）、トランジションの合間で膨らむ（volume: 0.26）処理を getBgmVolume() で実現。
3. SFXトリガーキュー: 重要なアニメーションごとに、同じフレームでSFXをペアリング：
   • woosh: <WhipPan /> または <PortalZoom /> トランジションの開始時。
   • pop: <StabiloHighlight /> が重要な単語をなぞる時。
   • ding: キャラクターの頭上にひらめき電球が点灯する時。
   • thud / crash: ノートPC/サーバーが赤いエラーを発するか、グラフが暴落する時。
   • keyboard: <CodeTerminal /> のコードテキストがタイピングを開始する時。

---

⏱️ 絶対ルール4: ペーシング「静かな間はあるが、長すぎない」

「めまいがするほど速いトランジション（ADHDカット0.8秒）は避け、退屈な静止画面も避け、適切な呼吸の間を与えてください。」

• コンセプトあたりの理想的な長さ: シーンビートあたり2.5～3.5秒。これは視聴心理学の黄金比です：リテンションを維持するのに十分速く、技術的な内容を理解するのに十分静か。
• 間のマイクロブリージング: 画面は決してフリーズ/完全停止しない。キャラクターが静かに説明している間、マイクロ要素は動き続ける：
  • キャラクターは微妙な呼吸（アイドルボブ 4px）。
  • カメラはゆっくりズームイン（1.0x -> 1.03x）。
  • 塵のパーティクル（<DustParticles />）は背景でゆっくり漂い続ける。

---

🌌 絶対ルール5: ダークキャンバスシグネチャー

「デフォルトのビジュアル美学は、濃いダークモード、ハイコントラスト、モダンです。」

• 背景色: OLEDモバイル画面に優しい、濃い暗いキャンバス（#0b0f19 または #030712）を使用。
• 線＆ベクター: キャラクターとオブジェクトは、明るい白い実線（#ffffff）で、太さはしっかりと（ストローク: 6.5px）。
• ネオンアクセント: 高焦点のアクセントカラー（#06b6d4 シアン、#f43f5e ローズ、#10b981 エメラルド、#f59e0b アンバー）。
• 雰囲気: ストーリーの緊張に合わせて色が変化する、柔らかなオーロラグラデーションの発光（<AuroraMesh />）を装備。

---

🌀 シネマティックマッチカット＆トランジション

• <PortalZoom />: 特定のポイント（拡大鏡のレンズなど）を貫通するハイパー指数関数的ズームで、直接次のシーンへ。
• <WhipPan />: アグレッシブな場面転換のための、モーションブラー付き超高速水平カメラホイップ。

---

📝 HPMRスクリプト設計図（フック → 苦痛 → メカニズム → 報酬）

1. 第一幕: フック（0～3秒）: 衝撃的な問題 + <StabiloHighlight> + キャラクター panic-headgrab。
2. 第二幕: 苦痛（3～8秒）: 実際の損失 + キャラクター kneel-despair + 背景 <AuroraMesh mood="tense" />。
3. 第三幕: メカニズム（8～12秒）: 綿密な調査 + キャラクター inspect-magnify + <PortalZoom> がレンズを貫通。
4. 第四幕: コアコード（12～15秒）: <CodeTerminal> での実際の解決策。気を散らすものは一切なし。
5. 第五幕: 報酬＆シームレスループ（15～18秒以上）: 成功が証明される + キャラクター celebrate-victory + 0秒へのシームレスなループ。

---

🎨 マスタープリセットスタイル

• AdvancedChoreography: 4層キャラクター演技の黄金標準（頭掴み→絶望→拡大→コード→勝利）。
• ArchetypeShowcase: ユーザーのオリジナルリファレンスを1:1で再現（一日中ノートPCの棒人間、バミューダレーダーグリッチ、世界人口インフォグラフィック、サイエンスブループリント）。
• MegaShowcase: 現代の世界の5バリエーション（クリプトキャンドルスティック、マトリックス端末、WhatsAppチャット、新聞見出し、モックアップスマホ）。

---

🛠️ CLIテスト＆プレビュー

# インタラクティブWebプレイヤー
npm.cmd run dev

# 特定フレームの静止画レンダリング
npx.cmd remotion still AdvancedChoreography out.png --frame=45