SaaS プロダクトデモ動画

Remotion でビート同期の SaaS プロダクトフィルムを制作するためのエンドツーエンドワークフロー。サイレントシネマティックフィルム、ビートロックの横型デモ、縦型リール、コラージュBロールレイヤーを使用したフィルムをカバーします。

このスキルは、アセット、雰囲気、ビート の3つにこだわります。どれかをスキップすると、他のSaaSデモと変わらない、Canvaスタイルのモーショングラフィックスリールになってしまいます。この規律こそが違いを生みます。

これらは厳格なルールではなく、強い推奨事項 です。ほとんどの制作物はこれに従いますが、意図的に破るものもあります（例: ビート同期がVOと競合するナレーションドリブンのフィルム）。ルールを破るときは、そのことを認識した上で行ってください。

前提条件

開始前に、これらが整っていることを確認してください。一つ目は真に必須で、その他は文書化されたフォールバック付きの強力な推奨事項です。

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 を実行しないでください（矢印キーのプロンプトでブロックされます）。
Super Powers プラグイン（強く推奨、必須ではない）。利用可能な場合、このスキルは superpowers:using-superpowers、superpowers:brainstorming（ビジュアルコンパニオン付き）、superpowers:writing-plans、superpowers:subagent-driven-development を調整します。これらにより、レイアウト決定のためのブラウザでのHTMLモックアップ、正式な計画書、実装者＋レビューアのサブエージェントループが提供されます。

Super Powers がインストールされていない場合でも、スキルは機能します - ワークフローはより会話的になり、少し遅くなります。ブレインストーミングはインラインダイアログになります（ブラウザコンパニオンなし）。計画はチャット内に直接書かれます。シーンは、ディスパッチされたサブエージェント経由ではなく、インラインで実装されます。3つの柱（アセット / 雰囲気 / ビート）に加え、Bロール、模式的なUI、クリック配置、文体、および scripts/ 内のスクリプトはすべて同じように機能します。プラグインがないからといって作業を断らないでください。適応して続行してください。
Python 3 + librosa が利用可能であること。ビート検出は scripts/detect-beats.py を実行し、これは librosa をインポートします。インストールされていない場合は、pip install --break-system-packages librosa numpy soundfile を実行してユーザーに伝えてください。サイレントで行わないでください。
参考動画分析（柱2）の場合: スキルは優先順位順に3つのパスをサポートします。利用可能な最も高いものを使用してください。完全な検出ロジックは references/reference-video-vibe.md を参照してください。
1. PATH上の gemini CLI（公式Google CLI、または gemini-yt などのコミュニティラッパー）。プロンプト＋YouTube URLを引数として実行します。
2. 環境変数または .env に GEMINI_API_KEY が設定されていること。scripts/analyze-reference-video.sh のスキルのcurlラッパーを使用します。
3. 上記のいずれもない場合 - 手動のGoogle AI Studioコピーペーストにフォールバックします。面倒ですが常に機能します。品質は同等です。

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

3つの柱

これらは効果の高いアクティビティです。「時間を節約する」ためにどれかをスキップすると、ほとんどの場合、後でより多くの時間がかかります。

柱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 を参照してください。

柱2 - 参考動画の雰囲気ワークフロー

シーンを書く前に、ユーザーに2〜3本のYouTube参考動画を教えてもらい、その雰囲気を再現したいか尋ねてください。次に、それぞれについてディレクターズブレイクダウンを作成します。

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が利用できない場合にこれを使用します。

監督動詞語彙（プッシュスルー、ウィップパン、Vカットプルバック、インクマスク、マッチカットズーム）が最も負荷のかかる出力です。これにより、構築するための具体的なモーションプリミティブが得られます。

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

シーンの境界はスネア（修辞的な「ドラムヒット」感覚）に合わせる必要があります。内部イベント（クリック、カードの着地、カウンターの開始）は、シーン内のキックまたはスネアのいずれかに合わせる必要があります。

パイプライン：

scripts/detect-beats.py <soundtrack.mp3> --fps 30 --out beats.json を実行します。BPM、最初のキックフレーム、スネアのタイムスタンプ+フレームを出力します。
単一のタイミング定数オブジェクトに取り込みます（assets/code-templates/theme-v2.ts を参照）。すべてのシーン <Sequence from={...} durationInFrames={...}> はこれから値を取得します。
フェーズ6（シーンの構築）の後、scripts/align-internal-events.py をbeats.jsonとシーン内イベントのリストに対して実行し、±6フレーム以内の最も近いビートにイベントを移動します。これは、初期レンダリングに次いで2番目に効果の高いイテレーションです。視聴者は、ビートがずれた内部イベントを「リズムが時々ずれている」と感じますが、その理由を特定することはできません。
isSnare(n) / isKick(n) ヘルパーを使用して、開発モードでアサーションを行います。
任意の TypedText/TypedChars に対して scripts/check-typing-budget.py を実行し、シーン時間内に収まることを確認します。画面外のタイピングが出荷前にカットされます。

完全な数学、ヘルパー、内部イベント調整、およびタイピング予算チェックは references/beat-sync.md にあります。

理想的な順序

完全なエンドツーエンドフロー。注釈付きバージョンとその根拠については references/ideal-sequence.md を参照してください。

最初に入力を収集し、最後にコードを書く。 アセット取り込み質問票を実行します。
ユーザーにスクリプトがない場合は、スクリプトを開発する。 - references/script-development.md。
参考動画のブレイクダウンを作成する。 - scripts/analyze-reference-video.sh による自動化、またはAI Studioによる手動。
ビートを検出し、タイミング定数オブジェクトを書く。 scripts/detect-beats.py → theme-v2.ts。すべてのシーン開始はビートから派生します。
Remotion を手動でスキャフォールディングする。 最小限の package.json / tsconfig.json / remotion.config.ts。gitリポジトリ内で npx create-video を決して実行しないでください。
Root.tsx にシーンごとのデバッグ用コンポジションを登録する。 必須の高速化。1つの5秒シーンをスクラブするのは、完全なマスターよりも30倍高速です。
すべてのフォントを Root.tsx のトップレベルで読み込む。 subsets: ["latin"] を指定します。
コンポジションIDにハイフンを使用する。（v2-Scene06、v2_Scene06 は不可）。
スタイル/レイアウトの決定のために、ビジュアルコンパニオン付きの superpowers:brainstorming を呼び出す。 HTMLモックアップは散文よりも常に優れています。
仕様書を書く。 docs/superpowers/specs/YYYY-MM-DD-<name>-design.md。必要な場合は、模式的なUI忠実度セクションを含めます。
仕様を自己レビューし、ユーザーが承認する。 承認が得られるまでコードは書きません。
superpowers:writing-plans を呼び出す。 ディスパッチ前に計画テンプレートの衛生チェックを行います（references/project-scaffold.md を参照）。
最初にアニメーションプリミティブを構築する。（TypedText、MaskReveal、PopIn、Cursor、ZoomPunch、FloatingElements、BRollLayer、Counter、IceCrack（必要に応じて））。次に模式的なUIカード。次にシーン。次にマスター。
superpowers:subagent-driven-development を呼び出す。 サブエージェントのバッチは、ディスパッチあたり3〜4ファイルに制限します。それより大きいバッチは、タスクの途中でコンテキストが不足することがあります。references/iteration-playbook.md を参照してください。
シーン1のみをスポットレンダリングする。 スタイルを確立します。残りを始める前にユーザーの承認を得ます。
波状にイテレーションする。 各波は5〜8つの修正に制限します。内部イベント調整パスは、ベースラインレンダリング後に1回実行します。この1回のパスでリズムが著しく締まります。
公開品質でマスターレンダリングする。 --crf=14 --image-format=png（HD）または --crf=15 --image-format=png --scale=2（4K）。references/render-export.md を参照してください。
0.5倍速でビートマップに対してスポットチェックする。

リファレンス一覧

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

ideal-sequence.md - 完全な注釈付きフローとその根拠
prereq-check.md - 開始前に確認すべきこと
asset-intake.md - 完全な取り込みフロー、部分アセットのフォールバック、アセット拡大チェック、命名規則

SaaSプロダクトデモ動画（Remotion）