Webデモビデオ
動いているWebアプリを20〜60秒のMP4に変換します。画面は常に実際のアプリです。キャプション、カーソル、エフェクトはその上にレイヤーとして重ねられます。架空のデータのみを使用してください。
ツールキット: starter/ がこのファイルの隣にあります。それをユーザーのプロジェクトにコピーし（例: video/）、そこで npm install を実行し、その上でシーンスクリプトを作成します。リポジトリ内の実例: examples/sample-tasks/
1. 最初にスタイルを選ぶ
| ビデオの目的 | スタイル | 理由 |
|---|---|---|
| 機能の使い方（ガイド、オンボーディング、サポート回答） | ウォークスルー: 実際のUIをクリック操作を録画 | 視聴者は手順を再現するため、実際の編集されていない流れを読める速度で見せる必要がある |
| 製品の価値を伝える（ローンチ、ホームページ、広告、概要） | モーションプロモ: スクリーンショット上でアニメーション合成 | 視聴者は手順を追っていないため、アクションと結果を結びつけ、注意を引き続ける必要がある |
1つのビデオでこれらを混在させないでください。操作方法に飛び回るオブジェクトがあるとわかりにくいです。プロモを単なる録画で作ると長く感じられます。
詳細: ウォークスルーは references/walkthrough.md、モーションプロモは references/motion.md を参照。
2. レンダリング前に合意する
レンダリングはコストのかかるステップです。シーンコードを書く前に、ストーリーボード (references/storyboard.md) を作成し、ユーザーの承認を得てください:
- スタイル（ウォークスルーまたはプロモ）と誰が見るか
- 長さとシーン数
- 出力サイズ（デフォルト 2560x1440 @ 30fps; 縦長の場合は 1080x1920）
- ブランド: 色、フォント、ロゴ、製品名、および表示してはいけない言葉
- データ: 画面に表示する架空の名前と数字（実際の顧客は絶対に使用しない）
- ナレーションあり/なし
- 完了時のファイルの出力先
ストーリーボードには、画面とキャプションの列に加えて動きの列が必要です（プロモの場合）。各シーンで意図的に異なる種類の動きを使用します。
3. 構築
ウォークスルー
- まずフローを調査: 録画せずにクリックだけを行うスクリプトで、セレクタと待機を修正
- 部分ごとに録画（1ページまたは1ステップごと）
lib/recorder.mjsを使用し、concatPartsで結合 - references/copy.md を参照してキャプションを作成
モーションプロモ
lib/capture.mjsで各UI状態をキャプチャ（3840px幅のスクリーンショット + 要素位置）- Remotion で
motion/parts.tsxを使用してシーンを構成（カメラ、カーソル、キャプション、チップ、数字カウントアップ） - フルレンダリング前にキーフレームで静止画を確認（
remotion still ... --frame=N --scale=0.25）
ナレーション: ツールは含まれていません。ユーザーが希望する場合は、Charonボイスを使用した Gemini 3.1 Flash TTS (gemini-3.1-flash-tts-preview) を推奨します。
4. 引き渡し前に確認する
node lib/qa.mjs out/video.mp4 --sheet 16 --end を実行し、両方の画像を確認します。詳細: references/qa.md
- サイズ、fps、長さがストーリーボードと一致している
- キャプションが途切れたり、クリック中のボタンを覆い隠したりしていない
- 半開きのダイアログ、空白フレーム、遅れてロードされるロゴがない（最後の1秒は別途確認）
- アニメーションするすべての数字が実際の画面が表示する値で終わっている
- 引き渡す際に、どの部分が演出効果（飛び交う書類、カウントアップ）で、どの部分が製品の実際の動作かを明示する
5. 厳格なルール
- 実際のUI、架空のデータ。画面、キャプション、ファイル名、説明文に実際の顧客、個人名、会社名、ID、メールアドレス、数値を一切使用しない
- 公開しない（YouTube、SNS、Webサイト）ユーザーの明示的な許可なしにアップロードしない
- 製品ができないことを主張しない。撮影のために偽装したステップ（サーバー応答、アップロード）がある場合、キャプションでそれを自動的な魔法のように提示してはならない
- レンダリングソース（スクリプト、ストーリーボード）はリポジトリに保持する。MP4とスクリーンショットはgit管理対象外とする