Innate-Labs/product-demo-video

Product Demo Video

実在するWeb製品を洗練されたデモ動画にします：実際のページスクリーンショット + コードから再構築したUIをブラウザウィンドウのモックアップに収め、字幕・ロゴ・音楽を付けて縦型/正方形の短尺動画にレンダリングします。

自動化されています——実行可能なプロジェクトを指定するだけで、Claudeが：

• 製品を自動理解：CLAUDE.md / README / ルーティングを読み、各ページの役割と製品の調性を把握します。
• コードを読み込み自動で文案を生成：各ページの実際の機能に基づき、対応するシーンのタイトル/サブタイトル字幕とアドレスバーを自動生成します。手動での記述は不要です。
• ロゴを自動配置：public/ 内からプロジェクトの実際のベクターロゴを特定し、冒頭と末尾に使用します。

ユーザーはいくつかの重要な選択肢（キャンバス比率、含めるページ、テンポ、音声）を決めるだけでOKです。

前提スキル：本スキルは [remotion-best-practices]（動画フレームワーク）および [agent-browser]（スクリーンショット）に依存します。Remotionコードを扱う前に、まず remotion-best-practices を読み込んでドメイン知識を取得してください。

使用タイミング

ユーザーが、動作するWeb製品（自身のプロジェクト/指定ディレクトリ）を製品デモ/プロモーション用の短尺動画にしたい場合。典型的なリクエスト：「うちの製品のデモ動画を作って」「このページを縦型のプロモーション動画にして」。

成果物の形式

Remotionプロジェクトとして生成され、mp4にレンダリングされます：

• キャンバス：縦型 1280×1706（3:4、デフォルト、ソーシャルメディア向け）/ 正方形 1080×1080 / 横型 1920×1080
• 構成：N個のシーン、各シーン = 製品ページ（実際のスクリーンショットまたはコード再構築）をブラウザウィンドウモックアップに配置、下部に字幕。シーン間はクロスフェード＋ウィンドウ全体のスローケンバーンズ効果。最後はブランドロゴ＋スローガンで締めくくります。
• 音声：ロイヤリティフリーBGM（デフォルト）またはTTSナレーション（オプション）

完全なワークフロー（5段階）

フェーズ1 — 製品の把握とナラティブ計画

1. プロジェクトの CLAUDE.md / README.md / DESIGN.md を読み込み、以下を把握：製品の内容、コアとなるページ/機能、調性仕様（カラー/フォント/禁止事項——reference/tone.md を参照。プロジェクト独自の DESIGN.md を優先すること）。
2. ページルートをリストアップ（find app -name page.tsx）、各ページの機能を読み解き、「ユーザージャーニー」のナラティブラインを自動で要約（例：「コア機能A → B → C → 結果ページ」）、各セクションの字幕文案を自動生成します。
3. ユーザーと確認：キャンバス比率、含めるセクション、テンポ、音声方式。実際にスクリーンショットが取得できないページは事前にリスクを通知（リアルタイム/特殊データが必要なページ）。

フェーズ2 — 実際のページをスクリーンショット（取得可能なものを優先）

agent-browser を使用。詳細は scripts/capture-pages.md を参照。要点：

• 対象プロジェクトのフロントエンドとバックエンドを起動し、準備ができるまで待機。
• 標準ビューポートを設定 agent-browser set viewport 1440 900 2（@2x retina、16:10の標準ブラウザ比率、スクリーンショットが鮮明に）。
• ログイン処理：多くの (app) ページはログインが必要です。dev.db からテストアカウントを探します。パスワードはハッシュ化されているため、ユーザーの許可を得た上で、プロジェクト自身のハッシュ関数を使って一時的にリセットします（完了後必ず元に戻すこと。教訓を参照）。
• 開発用バッジを除去：agent-browser eval "document.querySelectorAll('nextjs-portal').forEach(e=>e.remove())"。
• 対象各ページのクリーンなスクリーンショットを1枚取得し、Remotionプロジェクトの public/<brand>/ に保存します。

フェーズ3 — スクリーンショットが取得できないページをコードで再構築（品質の要）

実際のスクリーンショットが取得できないページがあります（リアルタイム音声面接ルームはヘッドレスでマイクがない、レポートページはバックエンド生成に依存、データ不足など）。想像で描かないこと——

1. 実際のコンポーネントコードを読みに行く（components/.../XxxLayout.tsx など）、実際のレイアウト/要素/データ構造を確認します。
2. 実際の構造に基づき、Remotion内に1:1でReactコンポーネントとして再構築し、ウィンドウのコンテンツエリアにレンダリングします（サイズ = ウィンドウコンテンツエリア W×H）。
3. サンプルは templates/screens/InterviewScreen.tsx（セッション型UI）、templates/screens/ReportScreen.tsx（レポート型UI）を参照——これらは「実際のコードに基づく再構築」の中立的なテンプレートです。製品を変更する際は、この手法を参考にして実際の製品コンテンツに書き換えてください。

フェーズ4 — デモ動画の組み立て

templates/PromoVideo.tsx を骨格として使用（ブラウザモックアップ＋シーンクロスフェード＋ケンバーンズ＋字幕＋アウトロ＋オーディオ）、templates/PromoRoot.tsx でコンポジションを登録。

• 各シーンの設定 { type: 'image'|'<custom>', src?, addr, title, sub }。
• アドレスバーはシーンに応じて変化（リアル感を向上）。
• 冒頭と末尾では、プロジェクトの実際のロゴを自動で特定して使用（public/ 内の icons/logo.svg などのベクターロゴを探す。プレーンテキストで代用しないこと）。
• 調性仕様を厳守（下記参照）。

フェーズ5 — 音声とレンダリング

• BGM（デフォルト）：Mixkitのロイヤリティフリー・商用利用可能な音楽。scripts/get-bgm.sh でダウンロード＋試聴してユーザーが選択。動画全体に流し、冒頭と末尾はフェードイン/アウト。
• TTSナレーション（オプション）：scripts/gen-tts.sh を使用。AiHubMix/OpenAI互換の /audio/speech エンドポイント経由（gpt-4o-mini-tts、高品質。ユーザーのAPIキーが必要）。各セリフをシーンに合わせ、シーンの長さはナレーションの長さに応じて調整。macOS の say コマンドは使わない（機械音で品質が低い）。
• レンダリング：npx remotion render <id> out/<name>.mp4。音声トラックと再生時間を確認し、~/Desktop/ にコピー。

調性 — Tone（これが「ターミナル」らしい質感の鍵です。詳細は reference/tone.md を参照）

デフォルトの調性 = 抑制、プロフェッショナル、リアル。プロジェクトの DESIGN.md に別途指定がない限り：

• カラー：白ベース（#F4F4F6 キャンバス / #FFF ウィンドウ）+ 白黒グレーのテキスト（#141414 / #8A8A90）、カラーは使わない。機能的な赤い点（録画中/接続中など）は実際の状態に従い保持。
• フォント：日本語・英語ともに PingFang（"PingFang SC","Heiti SC",sans-serif）。レンダリングマシンがmacOSであればそのまま使用可能。Interなどは使わない（日本語のフォールバックが不一致になるため）。
• ブラウザモックアップ：角丸18の白いウィンドウ＋上部のChromeバー（3つのグレーの点。赤・黄・緑のカラーリングは使わない＋アドレスバーのピル型）、ソフトな影。
• カメラワーク：イージングは統一して Easing.bezier(0.16,1,0.3,1)。ウィンドウのフェードインはspring。ウィンドウ全体のスローケンバーンズは scale 1→1.03（ウィンドウ自体に適用。内部画像には適用しないこと。コンテンツが切れるため）。
• テンポ：シーン長は統一（デフォルトでは各シーン60フレーム/2秒 @30fps）、整然と。BGMのBPMを測って小節に合わせることも可能。
• 字幕：下部中央揃え。タイトルはPingFang Semibold大文字＋サブタイトルはグレーの小文字、クロスフェード。
• 絵文字は不使用。

やってはいけないこと：カラフルな色の乱用、赤黄緑のカラードット、日本語テキストへのInterの使用、objectFit coverによるページコンテンツの切り抜き拡大、スクリーンショットが取れないページを想像で描くこと、機械音のTTS、テンポの不規則な変化、プレーンテキストによる偽ロゴ。

失敗から学んだ教訓（必読）

• ヘッドレスブラウザにはマイク/カメラがない：リアルタイム音声/動画ページは「準備中/デバイス利用不可」で止まり、スクリーンショットが取得できません——コード再構築に直接進み、無理に取得しようとしない。
• ローカル開発DBのスキーマドリフト：コードにマイグレーションが追加されたがローカルDBが未実行の場合、500エラーが発生（例：no such column: xxx）。スクリーンショット/データ入力のために、ALTER TABLE ADD COLUMN で不足しているカラムを追加することは安全（データは削除しない）ですが、その旨を説明すること。
• ローカルDBの変更は必ず元に戻す：リセットしたテストパスワード、一時的に入力したサンプルデータは、スクリーンショット取得後、必ず元の値に戻す（事前に元のハッシュ/JSONをバックアップしておく）。追加したカラムはそのままでも構いません（コードが期待するものであるため）。
• objectFitでコンテンツを切り抜かない：スクリーンショットは objectFit:"contain" でウィンドウ内に完全表示。ケンバーンズの拡大は外側のウィンドウに適用し、画像自体には適用しない（そうしないとページ下部が切れる）。
• サンプルデータ入力時のフィールド名はコードで確認：フロントエンドが参照するフィールド名は直感と異なることが多い（複数形やアンダースコア命名など）。必ずレンダリングコンポーネントのコードを読んで確認し、推測で行わない。
• 日本語の文案内にASCIIダブルクォートが含まれる場合 → 文字列全体をバックティックで囲む（グローバルなCLAUDE.mdルール）。
• Bashのカレントディレクトリは呼び出しをまたいで保持されない：絶対パスを使用し、cd サブディレクトリ を繰り返さない。

クイックチェック

Remotionコードを修正したら：npx tsc --noEmit；キーフレームのレンダリング確認 npx remotion still <id> out/check.png --frame=N --scale=0.5；最終レンダリング後は ffprobe で音声トラックと再生時間を確認。