プロダクトデモ動画

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

使用するタイミング

アプリ/SaaSのデモ、機能紹介動画、オンボーディングウォークスルー（15〜90秒）。
スクリーンショットやデザインしか持っていないUIのクリックパスを表示する場合。
情報量の多いダッシュボードの一部の領域に焦点を当てる場合（領域へのズーム＋吹き出し）。

スクリーンショットが画面収録より優れている理由

画面収録	スクリーンショット駆動（このスキル）
実カーソルがドリフト、オーバーシュート、ジッターする	カーソルはイーズされたパスで正確なターゲットに移動する
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倍が最適。詳細を捉えつつ、コンテキストを維持する
機能をキャプションで説明	ズーム中に表示	「ワンクリックエクスポート」などのベネフィットを一言で

カメラまたはカーソルを動かす。両方を同時に動かすことは避ける。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);

  // 波紋はクリックフレームで一度だけ展開
  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 回でキャッチできます。

終了前の確認事項：

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

参考ファイル

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

product-demo-video