プロダクトデモディレクターは何をしますか？

あなたは、ソフトウェアマーケティングで最も難しいショット、つまり実際のUIが実際の動作を行う様子を、初見の視聴者が一度見て理解できる形で撮影します。デフォルトの失敗は、人間の速度でそのまま画面録画したものです。カーソルがテレポートし、三つのことが同時に変化し、視聴者はどこを見ればよいかわかりません。あなたの仕事は、注意を振り付けることです。一度に一つの変化、カメラはそれを捉え、読み取れるだけの時間保持します。

これはテイストレイヤーです。モノがどのように動くか（イージングカーブ、アンティシペーション、12の原則）の文法はmotion-design-principlesに、ビートリストはvideo-storyboardに、文字のアニメーションはkinetic-typographyにあります。あなたはカメラとカーソルがUI上で何をするかを決定し、その結果をこれらのスキルとビルドパック（remotion-compose、remotion-render）に渡します。

一つの例を通して作業します。12秒のクリップで、ユーザーが設定ダッシュボードで機能フラグをオンにし、メトリックタイルが光る様子を示します。

ワークフロー

これらの順番で実行します。記録と再構築のどちらかを決める前に、カーソルの振り付けを始めないでください。その決定は後続のすべてを変えます。

ステップ1 - 決定する：画面録画するかUIを再作成するか

これが分岐点です。他の作業の前に選択してください。

画面録画：UIが実際のもので安定しており、デモの信頼性が「これが実際の製品です」に依存する場合。最も速くキャプチャできますが、制御を犠牲にします。ぎこちないカーソル、遅いネットワークスピナー、実際の顧客データ、ズームでアンチエイリアスがひどくかかるフォントは修正できません。最終解像度の2倍で録画すると、画質を落とさずに拡大する余地が生まれます。
UIを再作成する（関連する画面をコンポーネントとして再構築）：クリーンなカーソルパス、決定論的なタイミング、偽物だが正直なデータ、まだ存在しない部分的な製品状態、ピクセルパーフェクトなズームが必要な場合。作業は増えますが、完全に制御できます。これはremotion-composeに渡すパスで、各画面がコンポーネントになり、カーソルがアニメーション化されたレイヤーになります。
ハイブリッド（一般的で過小評価されています）：画面録画でテクスチャ（実際のスクロール、アプリ内で再生される実際のビデオ）をキャプチャし、その上に再作成したコールアウト、カーソル、ハイライトを合成して、振り付けを自動作成します。製品は実在するが、生の録画が演出するには乱雑すぎる場合に使用します。

決定を理由とともに書き留めてください。詳細なトレードオフ表については、references/record-vs-recreateを参照してください。

ステップ2 - ビートごとに一つの変更に減らす

デモが判読可能であるためには、一度に正確に一つのことだけが変化し、視聴者がその瞬間にそれを見ている必要があります。フロー内のすべての状態変化をリストアップします（フォーカスが移動する、フィールドが埋まる、トグルが切り替わる、タイルが更新される、トーストが表示される）。同じフレームで二つ発生する場合は、時間的に分離するか、一方を従属させる（暗くする、ズームの外に押し出す）必要があります。「フラグをオンにする」は一つのビートではありません。カーソルがトグルに到着 → トグルが切り替わる → メトリックタイルが再計算 → 確認トースト。四つのビート、四つの保持された読み取り。

ステップ3 - カーソルを振り付ける

カーソルはナレーターです。マウスのログではなく、俳優のように扱ってください。

意図を持って動かし、わずかに弧を描く。 テレポートさせず、ジッターを発生させないでください。カーソルは静止状態から加速し、ターゲットに減速しながら入ります（イーズインアウト。motion-design-principlesからカーブを借用してください）。かすかな弧は、定規のように真っ直ぐな線よりも意図的に見えます。
動作の前に落ち着く。 到着し、約6〜10フレーム一時停止してからクリックします。この一時停止は、「これからこれを行います」というビートで、目に必要です。
クリックを見せる。 実際のクリックは見えません。可視的なアフォーダンスを追加します。カーソルのすばやい縮小/拡大、クリックポイントでの放射状のリップル、ターゲットの短い押下状態。これらのうち一つだけにしてください。
一つのカーソル、一つのパス。 フローでカーソルが二つの場所に必要な場合は、カットします。フレームを横切ってカーソルを動かさないでください。ハードカットは4フレームのダッシュよりもすっきりと読めます。
カーソルが主役でないときは引退させる。 タイルが更新中でカーソルがただ置かれているだけのときは、フェードアウトするか、ズームの外に移動させてください。主役と競合する静的なカーソルは、注意を分割します。

ステップ4 - カメラを指示する：ズーム、パン、コールアウト

フレームはUI上のカメラです。一貫した動きの語彙を使用して、視聴者があなたの言語を学べるようにします。

押し込む（ズーム）：変更が発生する前に領域にコミットします。トグルが切り替わる前に到着します。押し込みは予告であり、変更は見返りです。
パン/トラック：一つのフレームに収めるには離れすぎている二つの領域間でカーソルを追従します。パンはゆっくりと、カーソルに動機付けられて行います。カメラは俳優を追います。
引き出す（ズームアウト）：詳細なビートの後にコンテキストを再確立し、次の領域の前に視聴者が再アンカーできるようにします。
コールアウト（ハイライトリング、ラベル、コネクターライン、他のすべてを暗くするスポットライト）：言葉で名前を付けなければならないものを指し示します。UI要素が画面上にある場合は、ナレーションよりもコールアウトを優先してください。

ルール：カメラはすでに要素を見ている前に変化してください。トグルが切り替わり、その後ズームインすると、瞬間を逃しています。

ステップ5 - 状態変化を判読可能にする

デモ全体は状態変化のために存在します。それぞれに意図的な処理を施します。

重要な変化で世界を遅くする。 ナビゲーションでは通常のペースを維持し、実際の切り替え/更新を実際の時間の約1.3〜1.6倍に引き伸ばして、目が原因→結果を登録できるようにします。その後、速度ランプで元に戻します。
変化の前後デルタをハイライトする。 変化した要素をパルスさせます（グロー、短いカラーウォッシュ、スケールバンプ）。数値が変化する場合、値をハードカットするのではなくカウントアップします。動き自体がメッセージです。
フォーカスを引く。 メトリックタイルが更新されるとき、約10フレーム間、他のすべてを暗くするかぼかして、タイルが明確に主役になるようにし、その後空間を戻します。
原因と結果を間のビートでシーケンスする。 トグルが切り替わる（保持）、その後タイルが更新される（保持）。同じフレームで発生すると、視聴者はトグルがタイルを引き起こしたことを認識できません。

ステップ6 - ショットリストをリントし、ハンドオフする

ビートリストに下記のリンターを実行して、古典的な判読性の失敗（重複する変更、欠落した保持、カーソルのテレポート、遅れて到着するカメラ）を検出します。すべてのフラグを修正してください。その後、指示されたショットリストを下流に渡します。タイミング/イージングの詳細はmotion-design-principlesへ、ビートの順序はvideo-storyboardへ、実際の実装（カーソルレイヤー、ズーム変換、コンポーネント画面）はビルド用のremotion-composeと反復ループ用のremotion-renderへ。

品質基準

以下のすべてが満たされた場合のみ、デモはA+です。

レコード対リクリエイトの決定が理由とともに文書化され、制作がそれを尊重している（「クリーン」な再構築に、ぎこちない生の録画が紛れ込んでいない）。
ビートごとに正確に一つの変更が主役であり、同時の変更は意図的に従属されており（暗くするかフレーム外）、偶発的ではない。
すべてのクリックに可視的なアフォーダンスがあり、カーソルは動作前に落ち着いている。テレポート、ジッター、ホイップパンはない。
カメラは各要素が変化する前にすでにフレームに収まっている。
すべての状態変化に少なくとも一つの可読性処理（スローダウン、ハイライト、フォーカスプル、カウントアップ）とその後の保持された読み取りがある。
ショットリストがリンターをゼロフラグで通過している。

やってはいけないこと

生のリアルタイム画面録画をデモとして出荷しないでください。演出するか、それは単なる映像でありデモではありません。
二つの状態変化を同じフレームに着地させないでください。視聴者は原因と結果を割り当てられません。
カーソルをテレポート、ジッター、ホイップパンさせないでください。二つの場所に必要なら、カットしてください。
要素が変化した後にズームインしないでください。カメラが常に先に到着します。
コールアウトが画面上で指し示せるものをナレーションで説明しないでください。
ここで正確なイージングカーブやフレームごとのタイミングを指定しないでください。それはmotion-design-principlesの役割です。ビートの順序をゼロから書かないでください。それはvideo-storyboardの役割です。画面上の言葉をここでアニメーションさせないでください。それはkinetic-typographyの役割です。React/Remotionコードを書いたりレンダリングしたりしないでください。それはremotion-composeとremotion-renderの役割です。

リンター

自己完結型のNodeスクリプト。demo_lint.jsとして保存し、node demo_lint.jsで実行します。依存関係はありません。デモをビートの順序付きリストとして記述します。リンターは、ワークフローにある古典的な判読性の失敗をフラグします。デモに合わせてbeats配列を編集してください。

// プロダクトデモショットリストリンター。実行：node demo_lint.js
// 各ビートはタイムライン上の一瞬です。フィールド：
//   t          開始時間（秒、昇順）
//   dur        ビートが保持される時間（秒）
//   changes    このビートで発生するUI状態変化（0、1、またはそれ以上）
//   camera     'push' | 'pan' | 'pull' | 'hold' （このビートへのカメラ移動）
//   framedOn   ビート開始時にカメラが向けられている要素
//   cursorTo   このビートでカーソルが移動する場所（null = そのまま / 主役ではない）
//   click      このビートでクリックが発生するかどうか
//   clickAffordance  クリックが可視化されているかどうか（リップル/押下/スケール）
//   legibility 'slowdown' | 'highlight' | 'focuspull' | 'countup' | null
const beats = [
  { t: 0.0, dur: 1.2, changes: [],               camera: 'push', framedOn: 'settings-panel', cursorTo: 'toggle',     click: false, clickAffordance: false, legibility: null },
  { t: 1.2, dur: 0.5, changes: [],               camera: 'hold', framedOn: 'toggle',         cursorTo: null,         click: true,  clickAffordance: true,  legibility: null },
  { t: 1.7, dur: 1.0, changes: ['toggle-on'],    camera: 'hold', framedOn: 'toggle',         cursorTo: null,         click: false, clickAffordance: false, legibility: 'slowdown' },
  { t: 2.7, dur: 1.4, changes: ['tile-update'],  camera: 'pan',  framedOn: 'metric-tile',    cursorTo: null,         click: false, clickAffordance: false, legibility: 'countup' },
  { t: 4.1, dur: 0.8, changes: ['toast','badge'],camera: 'hold', framedOn: 'metric-tile',    cursorTo: 'export-btn', click: false, clickAffordance: false, legibility: null },
]

const HOLD_MIN = 0.4 // 状態変化はこれだけの時間が必要
const flags = []
for (let i = 0; i < beats.length; i++) {
  const b = beats[i]
  const id = `ビート ${i + 1} (t=${b.t}s)`
  // 1. ビートあたり一つの変更。
  if (b.changes.length > 1)
    flags.push(`${id}: 一度に${b.changes.length}個の変更（${b.changes.join(', ')}） - 一つ以外を分割または従属させる`)
  // 2. すべての変更に保持された読み取り時間が必要。
  if (b.changes.length === 1 && b.dur < HOLD_MIN)
    flags.push(`${id}: 変更「${b.changes[0]}」が${b.dur}sしか保持されていない - ${HOLD_MIN}s以上保持して読み取れるようにする`)
  // 3. すべての変更に可読性処理が必要。
  if (b.changes.length >= 1 && !b.legibility)
    flags.push(`${id}: 変更「${b.changes[0]}」に可読性処理がない（スローダウン/ハイライト/フォーカスプル/カウントアップ）`)
  // 4. クリックは可視化されなければならない。
  if (b.click && !b.clickAffordance)
    flags.push(`${id}: クリックに可視的なアフォーダンスがない - リップル/押下/スケールを追加する`)
  // 5. カメラは変更の前に要素をフレームに収める。変更ビート上では行わない。
  if (b.changes.length >= 1 && (b.camera === 'push' || b.camera === 'pan'))
    flags.push(`${id}: 変更と同じビートでカメラが移動（${b.camera}）- まず到着し、その後変更する`)
  // 6. カーソルのテレポートがない：クリックビートでカーソルがちょうど到着した場合、落ち着く時間がない。
  if (b.click && b.cursorTo)
    flags.push(`${id}: 同じビートでカーソルが移動しクリックしている - クリック前に落ち着く（約6〜10フレーム）必要がある`)
}

if (flags.length === 0) console.log('合格 - ショットリストは判読可能です。')
else {
  console.log(`${flags.length}個のフラグ：`)
  for (const f of flags) console.log('  - ' + f)
}

動作例の出力

上記のビートでスクリプトは以下を出力します。

3個のフラグ：
  - ビート 4 (t=2.7s): 変更と同じビートでカメラが移動（pan）- まず到着し、その後変更する
  - ビート 5 (t=4.1s): 一度に2個の変更（toast, badge） - 一つ以外を分割または従属させる
  - ビート 5 (t=4.1s): 変更「toast」に可読性処理がない（スローダウン/ハイライト/フォーカスプル/カウントアップ）

解釈：トグルクリック（ビート2〜3）はクリーンです。カーソルが落ち着き、クリックにリップルがあり、切り替えがスローダウンされ保持されています。しかし、ビート4はメトリックタイルが更新中にパンしているため、カメラが見返りに遅れて到着します。ビート3の保持中にパンして、タイルが再計算される前にフレームに収まるように修正してください。ビート5は同時に二つの間違ったことを行っています。同じフレームでトーストとバッジを発火し、トーストに可読性処理がありません。バッジを従属させる（暗くするか、ズームの外に押し出す）ことでトーストを単一の主役にし、トーストにハイライトまたは保持を与えます。三つすべてを修正すると、リンターは合格します。

テンプレート：デモショットカード

以下をコピーし、FILLフィールドを埋め、結果をリンターに送り、その後関連スキルに渡します。

プロダクトデモショットカード。[FILL: 機能名] - [FILL: 長さ]秒

プロダクション判断
  録画 / 再作成 / ハイブリッド：[FILL]
  理由：[FILL: このパスの理由]
  キャプチャ解像度：[FILL: 録画の場合は最終の2倍]

クリップの主題（視聴者が得るべき一文）
  [FILL]

ビートシート（変更ごとに一行、カメラは変更前に到着）
  #  時間  カメラ  フレーム対象       カーソル          変更            可読性          保持
  1  [FILL] [push]  [FILL]           [FILLに移動]      -                -                [FILL]秒
  2  [FILL] [hold]  [FILL]           [落ち着く+クリック] -               -                [FILL]秒
  3  [FILL] [hold]  [FILL]           [停止/フェード]   [FILL: 切り替え]  [slowdown]        [FILL]秒
  4  [FILL] [pan]   [FILL]           [フレーム外]      [FILL: 効果]      [countup/glow]    [FILL]秒
  （行を追加、一行に二つの変更は不可）

コールアウト言語（クリップ全体で一貫させる）
  ハイライトスタイル：[FILL: リング / スポットライト暗転 / コネクター]
  クリックアフォーダンス：[FILL: リップル / 押下 / カーソルスケール]
  フォーカスプル処理：[FILL: 他を暗くする / 他をぼかす]

ハンドオフ
  イージング + タイミング詳細 -> motion-design-principles
  ビート順序 / ストーリーアーク -> video-storyboard
  画面上の言葉 -> kinetic-typography
  ハイライトの色と光 -> motion-color-and-light
  サウンドデザイン -> motion-sound

参照

このスキルは、方法（イージング、構成、タイポグラフィ、色、音）を他のスキルに委任しつつ、何をいつカメラとカーソルが行うかという演出上の決定に集中します。

プロダクトデモディレクター