saas-product-demo-video

SaaS プロダクトデモ動画

Remotion で、ビートに同期した SaaS プロダクト動画を制作するためのエンドツーエンドのワークフローです。無音のシネマティックな動画、ビートに同期した横型デモ、縦型リール、コラージュの B ロールレイヤーを含む動画を扱います。

このスキルでは、素材、雰囲気、ビートの 3 点を重視します。どれか 1 つでも省略すると、ほかの SaaS デモと見分けがつかない、ありきたりな Canva 風のモーショングラフィックス動画になってしまいます。違いを生むのは、この 3 点を徹底することです。

これらは厳格なルールではなく、強く推奨される事項です。ほとんどの制作ではこれらに従いますが、意図を持って破ることもあります（例：ビート同期がナレーションの邪魔になる、ナレーション主導の動画など）。ルールを破る場合は、承知のうえで行ってください。

---

前提条件

開始前に、以下がそろっていることを確認してください。最初の項目は必須で、それ以外は、フォールバックの方法が記載された強い推奨事項です。

1. Remotion がインストールされていること（必須）。@remotion/cli 4.0.x、@remotion/google-fonts、React 19 が必要です。最小限の package.json／tsconfig.json／remotion.config.ts の正確な内容については、references/project-scaffold.md を参照してください。既存の git リポジトリ内では、矢印キーでの選択を求めるプロンプトで停止するため、npx create-video を実行しないでください。

2. **Super Powers プラグイン（強く推奨、必須ではありません）。**利用可能な場合、このスキルは superpowers:using-superpowers、（ビジュアルコンパニオン付きの）superpowers:brainstorming、superpowers:writing-plans、superpowers:subagent-driven-development をオーケストレーションします。レイアウトの検討に使えるブラウザー上の HTML モックアップ、正式な計画書、実装担当とレビュアーのサブエージェントによる反復作業を利用できます。

   Super Powers がインストールされていない場合も、このスキルは利用できます。ワークフローがより対話的になり、少し時間がかかるだけです。ブレインストーミングはインラインの対話形式になり（ブラウザーコンパニオンなし）、計画はチャットに直接記述し、シーンはサブエージェントに依頼する代わりにインラインで実装します。3 つの柱（素材／雰囲気／ビート）に加え、B ロール、模式的な UI、クリック位置の指定、文体、scripts/ 内のスクリプトは、いずれも同じように利用できます。プラグインがないことを理由に作業を断らず、適応して進めてください。

3. **Python 3 と librosa が利用できること。**ビート検出では librosa をインポートする scripts/detect-beats.py を実行します。インストールされていない場合は、pip install --break-system-packages librosa numpy soundfile を実行してユーザーに伝えてください。黙って実行しないでください。

4. **参考動画の分析（柱 2）を行う場合：**このスキルでは、優先順位順に 3 つの方法をサポートしています。利用可能な最上位の方法を使用してください。検出方法の詳細は references/reference-video-vibe.md を参照してください。

   1. PATH 上に gemini CLI がある場合（Google 公式 CLI、または gemini-yt のようなコミュニティ製ラッパー）。プロンプトと YouTube URL を引数として実行します。
   2. **環境変数または .env に GEMINI_API_KEY が設定されている場合。**スキルの curl ラッパー scripts/analyze-reference-video.sh を使用します。
   3. 上記のいずれもない場合 ― Google AI Studio で手動コピー＆ペーストする方法にフォールバックします。多少不便ですが、確実に機能し、品質も同程度です。

新しいセッションでは、最初に references/prereq-check.md を実行してください。

---

3 つの柱

ここで扱うのは、大きな効果が期待できる作業です。「時間の節約」のためにどれか 1 つを省略すると、たいていは後の工程で、かえって多くの時間がかかります。

Pillar 1 - アセットの受け入れとオンボーディング

まず、assets/prompt-templates/asset-intake-questionnaire.md の構造化された質問票を実行します。次の項目について尋ねます。

• アスペクト比（横向きの16:9、縦向きの9:16、または両方を並行して作成する場合は references/vertical-port.md を参照）
• 秒単位の尺（20～45秒を推奨）
• ロゴ - SVGを推奨します。PNGのみの場合、拡大時のピクセル化を防ぐため、元のサイズを記録します。
• ブランドカラーの16進数コード（メインのアクセントカラー＋補助的なパステルカラー3～6色）
• フォントスタック（すべてGoogle Fontsから選ぶ必要があります）
• コピー／台本 - 生成するよりも、ユーザーが提供した草稿を優先します。台本がない場合は、references/script-development.md を参照してください。
• ナレーション（任意）
• サウンドトラックファイル - ビート同期に必須です。ユーザーが用意できない場合は、ロイヤリティフリーのストック素材から選びます。

部分的なアセットしかない場合の最低限のセット、コピーの取り込み時の命名規則、アセット拡大時のピクセル化チェックなど、受け入れフローの全体については references/asset-intake.md を参照してください。

Pillar 2 - 参考動画の雰囲気を取り入れるワークフロー

シーンを書く前に、ユーザーが求める雰囲気のYouTube参考動画を2～3本尋ねます。その後、それぞれについて演出家の視点から分析します。

次の2つの方法を利用できます（references/reference-video-vibe.md を参照）。

• 自動（利用可能な場合に推奨） - ユーザーが GEMINI_API_KEY を設定している場合は、各動画について scripts/analyze-reference-video.sh <youtube-url> <slug> を実行します。curl経由でGemini Pro Previewを使用します。動画1本につき約30秒かかります。出力先は references/gemini-<slug>.md です。
• 手動（常に利用可能） - aistudio.google.com を開き、scripts/reference-video-prompt.md のプロンプトとYouTube URLを貼り付け、結果をファイルにコピーします。手間はかかりますが、自動と同等に活用できる結果が得られます。APIを利用できない場合はこちらを使います。

演出動詞の語彙（push-through、whip-pan、V-cut pull-back、ink-mask、match-cut zoom）は、成果物の中でも特に重要です。組み立ての基礎となる、具体的な動きのプリミティブを示してくれます。

Pillar 3 - サウンドトラックのビート同期

シーンの境界はスネアに合わせます（「ドラムヒット」のような印象を生みます）。シーン内のイベント（クリック、カードの表示、カウンターの開始）は、キックまたはスネアに合わせます。

パイプライン：

1. scripts/detect-beats.py <soundtrack.mp3> --fps 30 --out beats.json を実行します。BPM、最初のキックのフレーム、スネアのタイムスタンプとフレームを出力します。
2. これらを単一のタイミング定数オブジェクトに取り込みます（assets/code-templates/theme-v2.ts を参照）。各シーンの <Sequence from={...} durationInFrames={...}> は、ここから値を取得します。
3. フェーズ6（シーンの構築）が終わったら、beats.jsonとシーン内イベントのリストを使って scripts/align-internal-events.py を実行し、±6フレーム以内で最も近いビートにイベントを寄せます。これは初回レンダリング後に最も効果の高い反復作業です。観客は、シーン内イベントがビートからずれると、理由を説明できなくても「リズムが時々ずれている」と感じます。
4. 開発モードで isSnare(n) ／ isKick(n) ヘルパーを使い、アサーションを実行します。
5. scripts/check-typing-budget.py をすべてのTypedText／TypedCharsに対して実行し、シーンの長さに収まることを確認します。画面外で続くタイピングを、公開前に検出します。

計算式、ヘルパー、シーン内イベントの同期、タイピング予算のチェックについて詳しくは references/beat-sync.md を参照してください。

---

関連機能 - 基本機能だけでは足りない場合

これらは、一般的な「動きのあるグラフィックスだけで、スクリーンショットを撮るだけ」のSaaSデモを超える状況に対応します。ユーザーの状況に応じて、関連するリファレンスを読んでください。

台本の作成 - ユーザーに台本がない場合

多くのユーザーが持ち込むのは、完成した画面ごとの台本ではなく、漠然とした製品アイデアです。references/script-development.md では、構造化された対話の流れに沿って、仕様書にすぐ取り込める4幕構成のアウトライン、確定済みの画面ごとの構成、確定済みコピーのリファレンスページを作成します。

Bロールの統合 - ライブアクションやコラージュのレイヤーを使う場合

ユーザーがストック映像、コラージュクリップ、または背景レイヤーとして使いたい動画を持っている場合は、references/b-roll-integration.md と BRollLayer テンプレートを使用します。Bロールは不透明度 100％の背景にも、低不透明度のテクスチャにもできます。このプリミティブは、トリミング、フェード、ブレンドモード、フレームレートに応じたタイミングを処理します。

（以前のこのスキルのバージョンでは、ライブアクションの制作を Premiere／DaVinci に移すことを推奨していました。モーショングラフィックスの下にレイヤーとして Bロールを使う場合、これは誤りです。Remotion はこの用途に適しており、制作を 1 つのツールに集約することで生産性が向上します。）

シェマティック UI の忠実度 - 録画できる実際の UI がない場合

製品が Chrome 拡張機能、API、または初期段階のもので、スクリーンショットに使える実際の製品 UI がない場合、references/schematic-ui-fidelity.md では、実在するプラットフォーム（LinkedIn、Gmail、Slack）を侵害せずに、洗練された印象のシェマティック UI を作成する方法を説明しています。参考パターンは 3 つです。プロフィールカード、メール作成画面、API パネルです。コードテンプレートは assets/code-templates/Schematic*.tsx にあります。

クリック位置の指定 - イテレーションで最も問題になりやすい点

カーソルのクリック位置がボタンから外れることは、制作を通じてユーザーから最もよく寄せられる不満です。references/click-positioning.md では、3 つの方法（refs、位置計算用定数、デバッグオーバーレイ）を解説しています。最初にどれか 1 つを選んでください。ここで誤ると、シーンごとに何度も全体を再レンダリングすることになります。

ライティングスタイル - ユーザー向けの文章から AI らしさを排除する

エムダッシュ、曲線引用符、特定の言い回しの癖は、「AI が生成した」という印象を強く与えます。references/writing-style.md は、レンダリング前の grep チェックでこうした表現を検出する、標準のスタイルガイドです。ユーザー独自のブランドボイスガイドがある場合は、そちらを優先してください。

---

理想的な手順

エンドツーエンドの全工程です。根拠を注釈したバージョンについては、references/ideal-sequence.md を参照してください。

1. まず入力を集め、コードを書くのは最後にします。 アセット受け入れ用の質問票を実施します。
2. ユーザーがスクリプトを用意していない場合は、スクリプトを作成します — references/script-development.md。
3. 参照動画の分析結果を作成します — scripts/analyze-reference-video.sh で自動化するか、AI Studio で手動作成します。
4. ビートを検出し、タイミング定数オブジェクトを作成します。 scripts/detect-beats.py → theme-v2.ts。すべてのシーン開始時刻はビートから導出します。
5. Remotion の骨組みを手動で作成します。 最小限の package.json ／ tsconfig.json ／ remotion.config.ts を用意します。Git リポジトリ内で npx create-video を実行しないでください。
6. Root.tsx にシーンごとのデバッグ用コンポジションを登録します。 大幅な時間短縮に不可欠です。5 秒のシーンを 1 つスクラブするほうが、マスター全体をスクラブするより 30 倍速く済みます。
7. すべてのフォントを Root.tsx のトップレベルで subsets: ["latin"] を指定して読み込みます。
8. コンポジション ID にはハイフンを使います（v2-Scene06。v2_Scene06 は使わないでください）。
9. スタイルやレイアウトを決める際は、視覚的な補助資料とともに superpowers:brainstorming を呼び出します。 HTML モックアップは文章による説明より常に優れています。
10. 仕様書を作成します。 docs/superpowers/specs/YYYY-MM-DD-<name>-design.md。必要な場合は、図式的な UI の忠実度に関するセクションを含めます。
11. 仕様書を自己レビューしてから、ユーザーの承認を得ます。 承認されるまでコードは書きません。
12. superpowers:writing-plans を呼び出します。 ディスパッチ前に、計画テンプレートの整合性を確認します（references/project-scaffold.md を参照）。
13. まずアニメーションのプリミティブを構築します（必要に応じて TypedText、MaskReveal、PopIn、Cursor、ZoomPunch、FloatingElements、BRollLayer、Counter、IceCrack）。次に図式的な UI カードを作成し、その後にシーン、最後にマスターを作成します。
14. superpowers:subagent-driven-development を呼び出します。 1 回のディスパッチでサブエージェントに割り当てるファイルは 3〜4 個までにします。大きなバッチでは、タスクの途中でコンテキストが不足することがあります。references/iteration-playbook.md を参照してください。
15. シーン 1 だけを試しにレンダリングします。 スタイルを確立し、残りの作業に進む前にユーザーの承認を得ます。
16. 複数回に分けて反復します。 1 回の反復での修正は 5〜8 件までにします。ベースラインのレンダリング後に、内部イベントの整合性を一度確認します。この 1 回の確認でリズムが大きく整います。
17. 公開品質でマスターをレンダリングします。 HD の場合は --crf=14 --image-format=png、4K の場合は --crf=15 --image-format=png --scale=2 を使用します。references/render-export.md を参照してください。
18. 0.5 倍速でビートマップと照合し、スポットチェックします。

---

リファレンス一覧

詳しい情報は references/ ディレクトリにあります。現在のフェーズで必要なものだけを読み込んでください。

• ideal-sequence.md - 根拠を注釈した全工程
• prereq-check.md - 作業開始前に確認する項目
• asset-intake.md - アセットの受け入れ全工程、不足アセットへの対応、アセットのアップスケーリング確認、命名規則の整備
• script-development.md - ユーザーにスクリプトがない場合の画面ごとの手法
• reference-video-vibe.md - Gemini 分析プロトコル（API ／ CLI ／ AI Studio の各手順）
• beat-sync.md - ビートグリッドの計算、シーン境界のルール、内部イベントの整合性確認、タイピング予算の確認
• project-scaffold.md - 最小限の Remotion セットアップ、コミットチェックリスト、計画テンプレートの整合性確認、.gitignore の必須項目
• animation-patterns.md - TypedText、MaskReveal、PopIn、ZoomPunch、FloatingElements とその拡張
• b-roll-integration.md - BRollLayer のパターン、不透明度／ブレンド処理、レンダリング性能
• schematic-ui-fidelity.md - 洗練された印象を与えるフェイク UI の設計
• click-positioning.md - カーソルのクリックを正しいターゲットに合わせる 3 つの方法
• writing-style.md - 画面上のコピーで避けるべき em ダッシュなど、AI らしさが出る表現
• cursor-math.md - ホットスポットのオフセット、キーポイント、スケール比による変換
• iteration-playbook.md - 反復の構成、バッチレビュー、サブエージェントへのバッチ割り当て、Studio のホットリロード再起動
• render-export.md - HD／4K のレンダリングコマンド、CRF の根拠
• gotchas.md - コンポジション ID のアンダースコア、フォントの警告、イタリック体の読み込み、MaskReveal のスケールに関する落とし穴
• vertical-port.md - 9:16 リールへの移植手順

アセット

• assets/prompt-templates/ - アセットの受け入れ、仕様書、ビートシート用の記入式テンプレート
• assets/code-templates/ - 実績のあるコンポーネント（テーマ定数、イージング、Cursor、MaskReveal、TypedText、PopIn、ZoomPunch、FloatingElements、BRollLayer、Counter、IceCrack、SchematicProfileCard、SchematicEmailComposer、SchematicApiPanel、Act2Master、Act2MasterVertical）

スクリプト

• scripts/detect-beats.py - librosa を利用したビートトラッキング。BPM、最初のキック、目標 fps におけるスネア／キックのフレームを出力します。
• scripts/analyze-reference-video.sh + scripts/reference-video-prompt.md - YouTube 動画の演出分析を行う Gemini Pro ラッパー。
• scripts/align-internal-events.py - シーン内イベントを許容フレーム数 ± の範囲でビートに合わせます。
• scripts/check-typing-budget.py - レンダリング前に TypedText/TypedChars がシーンの長さに収まることを確認します。

---

このスキルを使用すべきでない場合

• 既存の Remotion プロジェクトの大幅な反復。 ユーザーが映画の制作を20回以上コミットした段階で、N+1回目の波のような調整を求めている場合は、受け入れ処理を再実行しないでください。references/iteration-playbook.md と references/beat-sync.md を読み込んで、そのまま進めてください。
• SaaS 以外のデモ。 イベントの振り返り、推薦コメントのモンタージュ、チュートリアルの画面録画には、ビート同期とプロダクト UI カードのパターンはうまく適用できません。
• ドキュメンタリー映像やトークヘッド映像が主題の場合。 このスキルでは、モーショングラフィックスの下に敷く レイヤー として B ロールを扱います。実写映像が映画の主題となる場合（インタビュー、開封動画、ウォークスルーなど）は、Premiere、DaVinci、Final Cut などのノンリニア編集ソフトを使用してください。
• ナレーション主導の動画。 台本がテンポを決める場合、ビートグリッド方式はナレーションと競合します。このスキルではビート同期を使わず、フレーム予算モードに切り替えます。そのことをユーザーにはっきり伝えてください。

---

出力要件

正常に実行されると、次の成果物が生成されます。

• マスターコンポジションと、登録済みのシーン別デバッグコンポジションを備えた、動作する Remotion プロジェクト。
• docs/superpowers/specs/YYYY-MM-DD-<name>-design.md（仕様書）と docs/superpowers/plans/YYYY-MM-DD-<name>.md（計画書）。
• 各参照動画の references/gemini-<name>.md（このスキル内ではなく、ユーザーのリポジトリ内に作成）。
• シーンに組み込まれた beats.json と theme-v2.ts のタイミング定数（コミット済み）。
• HD MP4（1920x1080 または 1080x1920、CRF 14）。
• オプションの 4K MP4（--scale=2、CRF 15）。
• 表情豊かなフレームを使ったサムネイル JPG。

ユーザーが各シーンを個別に再レンダリングでき、タイミング定数を1つ編集するだけで映画全体の流れを変更でき、追加の修正なしで安心して LinkedIn／Instagram／YouTube Shorts に公開できる状態にしてください。