lroe/apple-dracula

スキル: ミニマリスト説明アニメーション — ドラキュラダーク（MinutePhysics / 思考を誘うスタイル）

ミニマルな手描きスタイルの概念説明ビデオ向けに、ストーリーボード、タイミングシート、ビジュアルスクリプト、制作プロンプトを生成します。

---

1. ビジュアルアイデンティティと美的ルール

• キャンバス: ドラキュラナイト背景（#282A36）、グラデーションなし、ドロップシャドウなし。
• 線描: 手描きインクスタイル（チョーク/モノライン、有機的な粗さを微妙に含む）、一貫した線幅（3px–4px）、ドラキュラ前景（#F8F8F2）。スマートフォンセーフフロア: 1080pで図のストロークは3px未満にしない; 地面線は4pxを使用。
• スマートフォンセーフタイプフロア（単一の16:9 YouTubeマスター）: 1080pで画面上のテキストは36px未満にしない。セカンダリラベル36–44px、キーラベル48–56px、見出し72–80px。ラベルが36pxで収まらない場合は、切り落とすか、その詳細を縮小せずにナレーションに移す。
• パレット（ドラキュラ）:
  • ベース: ドラキュラ背景（#282A36）+ 前景（#F8F8F2）。
  • サーフェス: ドラキュラカレントライン（#44475A）— ハイライト/アクティブカード用; 標準パネルには#313342、凹んだウェル/スクリーンには#1E1F29を使用。
  • 機能アクセントA: ドラキュラレッド（#FF5555）— 損失、解雇、負のバランス、摩擦。
  • 機能アクセントB: ドラキュラグリーン（#50FA7B）— 利益、雇用、代替、バランス。
  • サポートアクセント（控えめに使用）: ピンク（#FF79C6）、パープル（#BD93F9）、シアン（#8BE9FD）、オレンジ（#FFB86C）、イエロー（#F1FA8C）。
  • ニュートラルフィル: ドラキュラカレントライン（#44475A）— 微妙なオブジェクトフィル（机、建物）。
  • ディープフィル: ドラキュラコメント（#6272A4）— 大きな塗りつぶし形状のみに使用し、本文テキストには決して使用しない。
• タイポグラフィ:
  • フォントスタイル: クリーンな手書きサンセリフまたはカジュアルなレタリング（例：Caveat、Patrick Hand）。
  • 単語密度: コールアウトあたり最大1～5単語。ナレーション全体を画面に書き写さない。
  • 配置: 関連するビジュアルアンカーのすぐ上、下、または隣に配置。
  • 低コントラストテキスト禁止: セカンダリラベル、アイブロウ、字幕は暗い背景でも読みやすく保つこと: ドラキュラ前景（#F8F8F2）またはラベンダーグレー（#B8B9C5）。テキストにドラキュラコメント（#6272A4）や薄いグレーを使用しないでください。プロジェクターで見えなくなります。
  • 左上のシーン見出し禁止: コンテンツシーンの上部にナレーションをタイトル＋サブタイトルとして繰り返さない。ナレーションが文を運び、図は短い機能ラベルのみを表示する。これにより、「左上を読んでから中央を見る」という視線のピンポンを避ける。
  • チャプターカードのみ例外: チャプター番号＋単一のモチーフを全画面トランジションとして使用してもよい。控えめに保ち、段落を絶対に追加しない。

---

2. キャラクターとメタファーのデザイン

• キャラクター: シンプルな棒人間または豆人間。最小限の顔（点の目、ニュートラル/微妙な口の曲線）。シンプルな小道具（帽子、机、電話）で区別する。
• 概念メタファー:
  • タスク/仕事: 円形のクラスター、点線のアウトラインがフェードイン/アウト。
  • マクロ経済: 天秤、2D折れ線グラフ、ドットグリッド/アレイ（例：1,000ドット）。
  • 制度: 基本的な幾何学的な建物のラインアート、アクセス/空きを表すドア枠。

---

3. タイミング、同期、ペーシングルール

• 発話同期トリガー: ビジュアル要素は、その音節が発話された正確なタイミングで描画またはポップ表示される。
• 順次ステガー: 複雑な概念を個別のビジュアルコンポーネントに分解し、一つずつ導入する（例：タスク1 $\rightarrow$ タスク2 $\rightarrow$ ATMアームがタスク1を引き寄せる）。
• 「呼吸の間」ルール（重要）:
  • アセットが表示された直後にトランジションしてはいけない。
  • そのポイントのナレーションが終了した後、完成したフレームを1.5～3.0秒以上保持する。ユーザーがすべてを処理できるようにする必要がある。
  • 視聴者はコールアウトを読み、関係を認識し、洞察を吸収する時間が必要であり、その後で動きが再開される。
• 最小処理ホールド（絶対ルール）:
  • シーン内の最後のビジュアル公開は、カットの前に少なくとも2.0秒の表示時間が必要。ナレーションがそれを不可能にする場合は、その公開を文脈に応じて早めるか、次の自然な間までシーンを延長する。
  • 図を完成させる同じ単語でカットしてはいけない。
  • 最後のナレーション行が単なるハンドオフ（「数字を見てみましょう」「アダプターがそれを修正します」など）の場合は、そのコピーを次のシーンに移動し、画面に0.1～0.8秒だけ表示したままにしない。
  • 密度の高いシーン（複数パートの図、数学、アーキテクチャ）では、最終状態を2.5～3.5秒保持する。カットを急がずに、最後のビートを簡素化する。
• トランジション＝ドラキュラ背景を通した短いフェード（絶対ルール）:
  • 30fpsで#282A36を通して4～6フレームのフェード（0.13～0.2秒）を使用。左から右へのワイプは使用しない。カットが機械的に感じられる。
  • 次のシーンの最初のビジュアルを少しだけ先に表示し、暗い隙間がまばたき程度になり、空白のシーンにならないようにする。空のキャンバスを約0.2秒以上露出させない。
  • シーンに本当にチャプターカードが必要な場合は、モチーフを画面に残し、カードが空のテキストスライドにならないようにする。
  • シーン開始から0.4秒後の静止画で確認する。約80%以上が空の場合は、最初のビジュアルをより早く移動する。

---

4. 構図とネガティブスペース

• ネガティブスペース: 常にキャンバスの60%～80%を空に保つ。
• グラウンドライン/ベースライン: フィギュアと建物を、途切れのない下部水平ガイドラインに固定する。
• 焦点の分離: ビートごとに1つのアクティブフォーカスゾーン（左、中央、または右）を維持する。無関係な複数の象限を同時にアニメーション化しない。
• トランジション: ドラキュラ背景#282A36を通した短いフェード（4～6フレーム）、グラウンドラインに沿った横パン、または突然のクリアトゥダーク。左から右へのワイプ、派手なズーム、回転は使用しない。
• フォントサイズは大きく保つ。

---

5. ストーリーボード生成ワークフロー

ナレーションスクリプトまたは概念トピックが与えられた場合：

1. タスクレベルの分解: ナレーションを3～7秒のビジュアルビートに分割する。
2. ビジュアルメタファーのマッピング: 抽象的な経済/技術的クレームに、具体的でミニマルなメタファーを割り当てる。
3. 画面テキストの選択: ビートごとに画面強調用に3つ以下のアンカーワードを選択する。
4. タイミングとホールド割り当て: 正確な同期ポイント（[SYNC]）とポーズ/ホールド時間（[HOLD: Xs]）をマークする。

---

6. 出力テンプレート

各ビデオシーンについて、出力を次のようにフォーマットする：

### シーン [番号]: [シーンタイトル]
**音声タイムスタンプ:** [MM:SS - MM:SS]
**ナレーション:** "[正確なトランスクリプトセグメント]"

* **ビジュアル説明:** （ビジュアルレイアウトとアセットに関する1～2文）
* **画面上テキスト:** "[正確なテキスト]" | 位置: [例：上部中央] | 色: [例：ドラキュラレッド]
* **アニメーションシーケンス:**
  1. `[00:00.0 - 単語]` ベースライン上に[アセットA]を描画。
  2. `[00:02.0 - 単語]` [アセットB]を[アセットA]にフェード/スライド。
  3. `[00:03.5 - 単語]` ラベルが小さくバウンスしながらポップアップ。
* **アニメーション後ホールド:** [X.X秒] （理解を確実にするための静止フレーム保持、トランジション前）
* **トランジションアウト:** [カット / グラウンドライン左パン / ダークへフェード]

---

1. 線描とメタファーエンジン: Rough.js

• 理由: MinutePhysicsの有機的な手描き感を求めるなら、静的SVGに頼ることはできない。Rough.jsは、幾何学的形状、線、パスを受け取り、調整可能な「粗さ」、「曲がり」、スケッチ風のペンストロークでレンダリングする軽量なキャンバス/SVGライブラリです。
• LLM親和性: 非常に高い。複雑なスプライン座標の代わりに、LLMは単純に以下のように呼び出します：

rc.line(x1, y1, x2, y2, { roughness: 1.5, stroke: '#F8F8F2', strokeWidth: 3 });
rc.circle(x, y, diameter, { fill: '#50FA7B', fillWeight: 3, roughness: 1.2 });

2. アニメーションとタイミングランタイム: Remotion (React + TypeScript)

• 理由:
  • 従来のCSS/ブラウザアニメーションはフレーム落ちする可能性があるが、Remotionはフレームごとにレンダリングする（fps = 30 または 60）。
  • ポップインやリニアライト用に interpolate() や spring() などの組み込みフックがある。
  • useCurrentFrame() によるオーディオタイミングのネイティブ処理。
• 「描画」エフェクトの実装: SVG線ストロークの場合、LLMは strokeDashoffset をパスの全長から 0 までアニメーション化する。

3. タイポグラフィ: Google Fonts (Caveat または Patrick Hand)

• @remotion/google-fonts またはローカルの @font-face を介してフォントを直接埋め込む。
• スタイルは厳格に #F8F8F2 に設定し、コールアウトあたり最大1～5単語とする。

4. オーディオ同期パイプライン（上流）: OpenAI Whisper（単語レベルタイムスタンプ）

• LLMがアニメーション化する前に、生のボイスオーバーが単語レベルのJSONタイムスタンプとともに文字起こしされる（例：Whisper timestamp_granularities=["word"] を使用）。
• LLMはタイムスタンプ付きのトランスクリプトを受け取り、それらをフレーム番号に変換する：

  ターゲットフレーム = タイムスタンプ（秒） × FPS