プロダクトデモ動画は何をしますか？

静的なプロダクトのスクリーンショットやデザインを、洗練されたアニメーションデモに変換します — 画面収録ツール不要、ぎこちない実際のカーソルなし、UIバージョンのずれなし。各画面をフレームに収め、合成カーソルを目的のピクセルまで滑らかに移動させ、クリックをリップルさせ、重要な部分にズームし、機能をキャプションで説明します。入力が静的で動きがコードであるため、すべての値は決定論的であり、スクリーンショットが変更された場合でも同一に再レンダリングされます。

使用するタイミング

アプリ / SaaS デモ、機能発表、オンボーディングウォークスルー（15～90秒）。
スクリーンショット/デザインしかないUIのクリックパスを表示する場合。
情報量の多いダッシュボードの1つの焦点領域を強調する場合（領域へのズーム + 吹き出し）。

スクリーンショットが画面収録に勝る理由

画面収録	スクリーンショット駆動（本スキル）
実際のカーソルがドリフト、オーバーシュート、ジッターする	カーソルが緩和されたパスで正確なターゲットに追従
1つのステップを修正するために全体を再収録	1つのPNGを交換し、同じコードを再レンダリング
収録中にUIが変化、マウスが迷う	各画面はクリーンで最終状態のアセット
ピクセル化せずにズームするのは難しい	スクリーンショットを2倍（DPR 2）でエクスポート → 鮮明なズーム

キャプチャ入力は表示サイズの2倍（Retina / deviceScaleFactor: 2）で行い、2倍ズームでも鮮明さを保ちます。Playwrightによるキャプチャスクリプトについては references/screenshot-demo.md を参照してください。

デモのループ

すべてのデモは同じビートを、機能ごとに繰り返します。読むのに十分な時間ホールドし、意図を持って移動し、クリックを着地させ、結果を明らかにします。

ビート	時間配分	役割
画面に落ち着く	0.5～1秒	動きが始まる前に視聴者が方向を確認できるようにする
カーソルがターゲットに移動	0.4～0.8秒	緩和された移動（イーズインアウト）、線形ではない
クリックリップル + 状態変化	0.2～0.3秒	触覚的なフィードバック；画面は同じフレームで反応
焦点領域にズーム	1～2秒でイン、2～4秒ホールド	2倍が最適 — 十分な詳細、コンテキストを維持
機能をキャプション表示	ズームと共にホールド	1つのベネフレーズ、例：「ワンクリックエクスポート」

カメラまたはカーソルのどちらかを動かし、両方を同時に動かすことは避けてください — 2つの同時モーションは注意を分割します。

スクリーンショットをフレームに収める

生のスクリーンショットはバグレポートのように見えますが、フレームに収められたものはプロダクトのように見えます。すべての画面を、ブランド化された背景上のブラウザまたはデバイスのクロームでラップします。

// ブラウザフレーム — スクリーンショットを入れると、信頼性のあるウィンドウに
const BrowserFrame = ({ url, children }) => (
  <div style={{ borderRadius: 12, overflow: "hidden", background: "#1e1e22",
                boxShadow: "0 40px 80px rgba(0,0,0,.35)" }}>
    <div style={{ height: 40, display: "flex", alignItems: "center", gap: 8, padding: "0 14px" }}>
      {["#ff5f57", "#febc2e", "#28c840"].map((c) => (
        <span key={c} style={{ width: 12, height: 12, borderRadius: "50%", background: c }} />
      ))}
      <div style={{ marginLeft: 12, flex: 1, height: 24, borderRadius: 6, background: "#2b2b30",
                    color: "#9aa", fontSize: 13, display: "flex", alignItems: "center", padding: "0 10px" }}>
        {url}
      </div>
    </div>
    <div style={{ background: "#fff" }}>{children}</div>
  </div>
);

アドレスバーに実際のURLを入れ（信頼性）、ソフトなシャドウとグラデーションの背景を追加します。モバイルの場合は、ノッチと角丸の電話フレームに切り替えます。すべての画面が一致するように、フレームスタイルを1つのテーマオブジェクトに保持します。

アニメーションカーソル + クリックリップル（コアムーブ）

位置は現在のフレームから駆動し、CSSトランジションや壁時計からは決して取得しないでください — ビデオレンダラーはすべてのフレームがフレーム番号の純粋関数である必要があります。そうしないと、カーソルが同期せずちらつきます。

import { useCurrentFrame, interpolate, spring, useVideoConfig } from "remotion";

// `from` から `to` への緩和された移動（startFrame から startFrame+dur の間）
const useCursor = (from, to, startFrame, dur) => {
  const frame = useCurrentFrame();
  const t = interpolate(frame, [startFrame, startFrame + dur], [0, 1],
    { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: (x) => x * x * (3 - 2 * x) }); // smoothstep
  return { x: from.x + (to.x - from.x) * t, y: from.y + (to.y - from.y) * t };
};

export const Cursor = ({ from, to, startFrame, dur, clickAt }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const { x, y } = useCursor(from, to, startFrame, dur);

  // リップルはクリックフレームで1回だけ展開
  const since = frame - clickAt;
  const showRipple = since >= 0 && since < 18;
  const r = spring({ frame: since, fps, config: { damping: 18 }, durationInFrames: 18 });

  return (
    <>
      {showRipple && (
        <div style={{ position: "absolute", left: x, top: y, transform: "translate(-50%,-50%)",
          width: 12 + r * 60, height: 12 + r * 60, borderRadius: "50%",
          border: "2px solid rgba(80,140,255,.9)", opacity: 1 - r }} />
      )}
      <svg width="28" height="28" viewBox="0 0 28 28"
           style={{ position: "absolute", left: x, top: y, filter: "drop-shadow(0 2px 3px rgba(0,0,0,.4))" }}>
        <path d="M3 2 L3 21 L9 15 L13 24 L16 23 L12 14 L20 14 Z" fill="#fff" stroke="#222" strokeWidth="1.4" />
      </svg>
    </>
  );
};

カーソルはスムースステップを使用して、静止状態から加速し、ターゲットに減速して停止します（線形カーソルはロボットのように見えます）。リップルと画面の状態変化の両方を同じ clickAt フレームで発火させ、原因と結果を一致させます。複数の画面にわたる複数のクリックを配線する完全な構成については、references/screenshot-demo.md を参照してください。

領域へのズーム（UIのケンバーンズ効果）

焦点要素にズームインするには、画面を拡大し、transform-origin をその要素の中心に設定します。これにより、フレームの中心ではなく、その要素にズームが収束します。

const ZoomToRegion = ({ target, scale = 2, startFrame, dur, children }) => {
  const frame = useCurrentFrame();
  const s = interpolate(frame, [startFrame, startFrame + dur], [1, scale],
    { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: (x) => 1 - Math.pow(1 - x, 3) }); // easeOutCubic
  return (
    <div style={{ transform: `scale(${s})`, transformOrigin: `${target.x}px ${target.y}px`,
                  willChange: "transform" }}>
      {children}
    </div>
  );
};

ズームは2倍程度に抑えてください（3倍を超えるとコンテキストを失い、方向感覚を乱します）。ズーム状態を2～4秒間ホールドします — 詳細を読むのに十分な時間です — その後、次の画面に移動する前にイーズアウトして戻します。ズームは常に吹き出しと組み合わせ、単独では使用しないでください。

吹き出し注釈と機能キャプション

変化点に注釈を付け、それを消去します。吹き出しは、ラベルと焦点要素を指すコネクタ（矢印、円、または下線）で構成されます。

ハイライト: ソフトなリングまたは暗くした周囲で要素を強調します（box-shadow: 0 0 0 9999px rgba(0,0,0,.45) でスポットライトの穴を作成）。
キャプション: ビートごとに1つのベネフィット — 短い名詞句（「リアルタイム分析」）、文章ではありません。ズームとともに入力し、次のステップの前に終了します。
キャプションは画面の下3分の1、かつタイトルセーフ領域内に配置し、9:16へのトリミングに耐えられるようにします。

スポットライトマスク、矢印コネクタ、タイプ付きキャプショントラックについては、references/annotation-and-transitions.md を参照してください。

画面間のトランジション

ステップ間では、一貫した1つの言語で画面を移動します。1つを選択し、それに従います：

トランジション	印象	用途
プッシュ / スライド	「次のステップ」への前方移動	リニアなウォークスルー
クロスズーム	勢い、アプリらしさ	詳細ビューへのジャンプ
クロスフェード	落ち着いた、ニュートラル	コンテキストの切り替え（設定→ダッシュボード）
共有要素でのマッチカット	シームレス	同じカードが複数の画面で持続

移動元の画面は、そのクリックが解決されるまで保持し、その後トランジション — 動きの途中でカットしないでください。references/annotation-and-transitions.md を参照してください。

出力チェックリスト

入力は2倍（DPR 2）でキャプチャされ、2倍ズームでも鮮明。
すべてのカーソル/ズーム値は useCurrentFrame() の純粋関数 — アニメーション状態にCSSトランジションを使用しない。
カーソルは緩和されたパス（スムースステップ）で移動し、リップルと状態変化は同じクリックフレームで発火。
各画面は実際のURLと一貫したテーマでフレーム化（ブラウザ/デバイス）されている。
一度に1つのモーション（カメラまたはカーソル）；ズームは2倍以下で、2～4秒ホールド。
ビートごとに1つのベネフィットキャプションをタイトルセーフな下3分の1に；トランジションは一貫した1つの言語を使用。

デリバリーと検証（レンダリング静止画 → MP4）

パッケージ化されたヘルパー（scripts/）：scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png で静止画をタイル表示し、scripts/probe-mp4.sh out.mp4 [WxH] [fps] でエンコードをアサートします。scripts/README.md を参照してください。

これはヘビー級の作業です：成果物はMP4であり、ライブページではありません。デモはユーザーのアセット（スクリーンショット/デザイン、オプションでロゴ）を取り込むため、検証は主に正しい画像が実際に読み込まれ、フレーム内に収まっているかです。

出力契約：

コンポジションが登録されたRemotionプロジェクト（<Composition> + zod schema + defaultProps）；すべてのカーソル/ズーム/トランジション値は useCurrentFrame() の純粋関数（CSSトランジション、タイマー、Date.now() なし）。
スクリーンショットは staticFile() で読み込まれ、delayRender/continueRender でゲート制御され、フレームがレンダリングされる前に2倍のPNG（および任意のWebフォント）が存在することを確認 — そうしないと、デモの途中で画面が空白でポップインします。
成果物 = レンダリングされた out/*.mp4 とプロジェクト（スクリーンショット変更時に再レンダリング）。

検証ループ — 静止画をレンダリング → 検査 → エンコード。 まず安価なPNGで確認し、正しいことが確認できてからビデオに進みます。

# 出荷するプロパティ（実際のスクリーンショットパス）を使用したフレーム正確な静止画、defaultProps ではない
npx remotion still ProductDemo out/f-settle.png --frame=15  --props=demo.json   # 画面フレーム化、移動前
npx remotion still ProductDemo out/f-click.png  --frame=90  --props=demo.json   # カーソルがターゲット上 + リップル
npx remotion still ProductDemo out/f-zoom.png   --frame=150 --props=demo.json   # 焦点領域にズーム + キャプション
# 最終フレーム = durationInFrames - 1（npx remotion compositions で読み取り）

各PNGを検査して、忠実度（正しいスクリーンショットが読み込まれているか；カーソルが正確なピクセルにあるか；クリックリップルと状態変化が同じフレームにあるか；キャプションテキストが正しいか）とアーティファクト（画像が空白/読み込まれていない、画面がキャンバス外、ズームがピクセル化またはフレームを超えてオーバーシュート、キャプションがタイトルセーフな下3分の1の外、アスペクト/レターボックスが間違っている）を確認します。

# 静止画がクリーンになってからのみ：
npx remotion render ProductDemo out/demo.mp4 --props=demo.json
npx remotion render ProductDemo out/demo.gif --props=demo.json --codec=gif   # READMEのファーストスクリーンプルーフ

バッチ処理（1つのテンプレート、多数のプロダクト）： プロダクトごとにデモをリニューアルする場合、カタログをバッチレンダリングする前に、静止画を使用して代表的な1つのプロダクトのプロパティを検証します — 空白画像やキャンバス外のバグをN回ではなく1回でキャッチします。

終了前に確認すること：

静止画がセトル、クリック、エンドの各フレームでクリーンにレンダリングされる — エラーなし、スクリーンショットが実際に読み込まれている（空白ではない）。
カーソルが正確なターゲットに着地；リップル + 状態変化が同じフレームで発生；キャプションテキストが正しく、タイトルセーフな下3分の1にある。
すべてのモーションがフレーム駆動 — CSSトランジション / タイマー / Date.now() / Math.random() なし。
出荷するプロパティ（実際のスクリーンショットパス）が正しくレンダリングされる（defaultProps だけではない）。
完全なMP4がエンコードされ再生される；（オプション）README用のGIFがレンダリングされている。

リファレンスファイル

references/screenshot-demo.md — 完全な実行可能なRemotionデモ：Playwrightを使用した2倍でのスクリーンショットキャプチャ、ブラウザ/電話フレームコンポーネント、複数の画面にわたってカーソルをクリックリップルとともに移動させるマルチステップコンポジション、およびレンダリングコマンド。
references/annotation-and-transitions.md — スポットライトマスク、矢印/円の吹き出しコネクタ、タイプ付き機能キャプショントラック、およびフレーム駆動実装とマルチアスペクト（16:9 / 9:16）セーフエリアノートを備えた4つの画面間トランジション。

プロダクトデモ動画