promo-video

promo-video — ローカルで動く SaaS からマーケティング動画へ

目的: ユーザーが自分のプロダクトのフォルダ (または空のフォルダ) で Claude を開き、見せたい内容を説明するだけで、本物のプロダクトを映した圧巻の MP4 が手に入ります。モックアップではありません。ストーリーテリングはコーディングの前にユーザーと合意します。画面上で動くものはすべて計測 (座標を取得) し、聞こえるものはすべて生成します (著作権フリー)。

このスキルは、実際の動画 (Trkly、41 秒、11 キャプチャ、音楽同期) を制作した経験に基づいて構築されており、Remotion、Playwright、lint の落とし穴や、製品動画を信頼できるものにするためのノウハウがすべてエンコードされています。

スキルのファイル

パス	役割
scripts/setup.mjs	Remotion プロジェクトの完全なスキャフォールド (依存関係、Playwright、Remotion スキル、テンプレート、音楽)
scripts/capture.mjs	実際のページの宣言的キャプチャ (JSON 計画 → PNG @2x + boxes.json)
scripts/boxes-to-ts.mjs	boxes.json → 型付けされた src/story/boxes.ts
scripts/make-music.mjs	合成音楽 + SFX (ドロップと決めの一撃はパラメータ調整可能)
scripts/probe.mjs	レンダリングされた MP4 を ffmpeg なしで検証 (長さ、トラック数)
templates/	コンポーネント (BrowserFrame, Cursor, Caption, Callout, DotGrid)、シーン、brand.ts、キャプチャ計画の例、プロジェクトの CLAUDE.md
templates/examples/Demo.example.tsx	完全なリファレンスデモ (28 秒、11 キャプチャ、スクロール、入力、チップ)。あなたの動画を書く前に必ず読んでください。
references/scenario.md	シナリオテンプレート + キャプションの書き方ルール
references/pitfalls.md	遭遇したすべての落とし穴 (Remotion、Playwright、lint、音声、Windows)
references/checklist.md	納品前に確認すべきこと

<skill> は、この SKILL.md があるディレクトリです (~/.claude/skills/promo-video、.claude/skills/promo-video、またはプラグインのキャッシュ)。スクリプトを実行する前に ls で確認してください。

ワークフロー

0. スコープを決める (5 分) — コーディング前にシナリオを合意する

以下の質問を自分自身 (またはユーザー) に一度にまとめて問いかけてください:

1. プロダクト: 名前、一言説明、ローカル URL (npm run dev のポートは？) または本番 URL。 ログイン/サブスクリプションの壁はあるか？ → それを回避して撮影する方法が必要 (アプリ内のデモフラグ、テストアカウント、Cookie)。パスワードを自分で入力するように決して要求しないでください。ユーザーがブラウザでログインし、Cookie を渡すか、デモモードを有効にしてもらいます。
2. 見せたいこと: 3 〜 5 つの具体的な瞬間 (ページ、フィルター、クリック、結果)。 各瞬間 = 1 キャプチャ + 1 カーソルアクション + 1 キャプション。
3. プロダクトが解決する悩み: 日常的なフレーズで一言 (「〜で困っていませんか？」)。
4. フォーマット: デフォルトは 16:9 (X、LinkedIn、YouTube、ランディング)。明示的に要求された場合のみ 9:16 (TikTok/Reels) — テンプレートは 1920x1080 で設計されています。
5. 最終 CTA: URL、「リンクは概要欄へ」、「無料トライアル」… そしてタグライン。

次に、references/scenario.md をモデルとしてチャットにシナリオを書きます: 8 シーン、尺、画面テキスト、見えるもの、技術選択肢 (Playwright による実際のキャプチャ、推奨) を提案します。ユーザーの「GO」を待ちます。ユーザーが「お任せします」と言ったら GO です。これ以上質問せず、決定して文書化してください。

承認されたシナリオをビデオプロジェクトのルートに SCENARIO.md として書き込みます。これはすべてのシーンと将来の修正のリファレンスとなります。

1. ビデオプロジェクトをスキャフォールドする

プロダクトとは別のプロジェクトにします (兄弟フォルダ <produit>-video)。Remotion + Chromium は SaaS のビルドに含めるべきではなく、next build の tsc がビデオファイルを読み込んでしまいます。

node <skill>/scripts/setup.mjs ../monapp-video --name "MonApp" --domain monapp.app --base http://localhost:3000 --accent "#f97316" --desc "一言説明"

このスクリプトは以下を行います: create-video --blank (Tailwind v4 含む)、remotion add でパッケージ追加 (transitions、google-fonts、media、zod、+ whisper-webgpu と video-matting は Studio のオプション依存で、これがないとエラーが表示される)、Playwright 1.63 + Chromium、Remotion 公式スキル (npx skills add remotion-dev/skills)、テンプレートのコピー、プロジェクトの CLAUDE.md、launch.json (Studio はポート 3012 — 使用中の場合は --port を変更)、デフォルトの音楽。所要時間は 3 〜 5 分です。

その後、プロジェクト内で npm run lint があらゆる変更の前に成功していることを確認します (スケルトンはプレースホルダーのボックスでコンパイルされます)。

2. プロダクトのブランド情報を抽出する

プロダクトの CSS (globals.css、tailwind.config、:root 変数) を開き、src/brand.ts を記入します: アクセントカラー、ダーク背景色、テキスト色、Google フォント (@remotion/google-fonts/<Font> のインポートを変更)、ロゴ (PNG を public/logo.png にコピー)、ドメイン。色を推測しないでください: 実際のファイルから読み取ります。すべてのコンポーネントは brand を参照し、シーンに色をハードコードしないでください。

3. 実際のプロダクトをキャプチャする

プロダクトが動作している必要があります (ユーザーにサーバーの起動を依頼するか、preview_start を使用します。Bash では絶対に実行しないでください)。壁によってコンテンツがブロックされる場合は、事前に解除します (デモモード、計画内の Cookie: "cookies": [...]、または "localStorage": {...})。

capture-plan.json を書きます (モデル: capture-plan.example.json、完全なドキュメントは scripts/capture.mjs の先頭にあります): アクションごとに 1 ステップ。シナリオの各瞬間に対して:

• アクション前の状態の shot、アクションの click/type、settle、アクション後の状態の shot。
• カーソルが狙う、またはハイライトが囲むすべての要素 (ボタン、メニューオプション、検索フィールド、テーブルの最初の行、バッジ、セクション) に対して box。
• 長いページの場合は、高い viewport (例: 1920x3400) を "group": "tall" と共に使用します。h-screen レイアウト / スクロール可能なパネルでは shotFull は決して使用しないでください。ビューポートしかキャプチャしません。
• AI 生成の場合: ローディング中の shot、スピナーの waitGone (タイムアウトは長めに)、結果の shot。

node <skill>/scripts/capture.mjs capture-plan.json      # PNG @2x + public/shots/boxes.json
node <skill>/scripts/boxes-to-ts.mjs                    # -> src/story/boxes.ts

各キャプチャを確認 (Read ツールを使用) してから続行します: 不適切なコンテンツ (見苦しいテストデータ、表示バグ、ユーザー名)、ポップオーバーが正しく開いていない、ページが読み込まれていない。計画側で修正し (wait の追加、URL フィルター、要素を隠す css)、再キャプチャします。プロダクトのバグを見つけた場合は、納品物にメモします。依頼がなければプロダクト内で修正しないでください。

4. 音楽

setup.mjs はすでに public/audio/ (music + click/whoosh/pop/impact) を生成しています。音楽は構造化されています: 緊張感のあるイントロ → ドロップ → グルーブ → 決めの一撃 → テール。ドロップをプロダクトが画面に現れるタイミングに合わせ、決めの一撃をシグネチャに合わせます:

node <skill>/scripts/make-music.mjs --drop 8 --end 36 --total 42.5 [--bpm 120] [--transpose -2] [--seed 7]

120 BPM = 30 fps で 1 拍あたり 15 フレーム。シーンを 15 の倍数に合わせます。ユーザーが mp3 を提供する場合は、public/audio/music.wav|mp3 に配置し、Story.tsx を適応させます。事前にライセンスを確認してください。

5. シーンを書く

templates/examples/Demo.example.tsx を全体読んでください: これが期待される動作のモデルです (クリックされた各要素へのカメラズーム、弧を描いて到着しクリックするカーソル、フェードインする次のキャプチャ、ハイライトとラベル、高いキャプチャのスクロール、1 文字ずつ入力されるキーボード、ポップアップするチップ、アイデアごとのフルフレームキャプション、強いカットでの白いフラッシュ、ビートに合わせたパルス)。次に Demo.tsx を適応させます: SHOTS (キャプチャと境界)、ZOOM (カメラキーフレーム)、SCROLL、CURSOR (クリックがサウンドをトリガー)、Callout、Caption。

演出ルール:

• キャプションは 1 アイデアにつき 1 つ、3 〜 6 単語 + アクセントのグループ。2 つのキャプションを同時に表示しないでください。
• 読み取らせたいものにズーム (1.4 〜 1.7) してから 1 に戻す: 視聴者は実際のラベルを読める必要があります。ズームされていないフルワイドキャプチャは読めません。
• カーソルはクリック前に示す: クリックの 15 〜 25 フレーム前に到着し、テレポートさせないでください。
• 1 アクション = アクション前の状態 → クリック → アクション後の状態、SHOTS の 4 フレームフェードを使用。
• 座標をハードコードしないでください: すべて boxes から取得します。足りない数字があれば、計画に box を追加します。
• コピーとテキストシーン (Hook/Tension/Outro) は Story の props を通過します → Studio で編集可能。

進行中は Studio の縮小表示ではなく、スチルで確認します:

npx remotion still Demo out/check.png --frame=120 --scale=0.5

各スチルを確認します (Read ツール)。探すもの: ウィンドウの端で切れたテキスト、読まれている要素に重なるラベル、間違った位置のカーソル、まだ表示されていないキャプチャ、アクションを覆うキャプション。修正して再レンダリングし、すべてのキーモーメントがクリーンになるまで繰り返します。

6. レンダリングして確認する

npm run lint
npx remotion render Story out/<slug>-story.mp4
node <skill>/scripts/probe.mjs out/<slug>-story.mp4     # 長さ、ビデオトラック、オーディオトラック

レンダリングを見ただけで「よし」と結論付けないでください。最終版のキーモーメントで 6 〜 10 のスチルをレンダリングし、それらを確認します。ミックスを聴くことはできません: その旨をユーザーに伝え、調整方法を示します (Story.tsx の volume、make-music.mjs のパラメータ)。

7. 納品する

MP4 (SendUserFile) と、それだけで完結する概要を送ります: ファイルの場所、長さ/フォーマット、各シーンで何が見えるかのリスト、確認済みおよび未確認の項目 (音声)、撮影中に見つけたプロダクトのバグ、UI が変わった場合の再キャプチャ方法 (3 コマンド)、簡単なバリエーション (9:16、15 秒版、別言語 = Story の props)。references/checklist.md を参照してください。

動画を「圧巻」にする要素 (影響度順)

1. 画面上の実際のプロダクトが読める (ズーム)、実際の操作を行うカーソル。
2. 音楽のドロップがプロダクトの登場と同期、カットで白いフラッシュ。
3. キャプション: 短く、親しみやすく、1 アイデアにつき 1 つ、1 語をアクセントに。
4. ハイライトが話題の要素を正確に指す (実際の価格バッジ、ボタン)。
5. リズム: 2 秒以上何も起こらない状態を避け、合計 40 秒以内。
6. マイクロディテール: キャプチャ間のフェード、ビートに合わせたパルス、ポップアップするチップ、クリック SFX。

Remotion のコードを書く前に references/pitfalls.md を読み、納品前に references/checklist.md を再確認してください。