SaaS プロダクトデモ動画
Remotionでビート同期されたSaaSプロダクト動画を納品するためのエンドツーエンドワークフロー。無音のシネマティックフィルム、ビートロックされた横長デモ、縦長リール、コラージュBロールレイヤーを含む動画をカバーします。
このスキルは以下の3つの柱にこだわっています：アセット、雰囲気、ビート。どれか一つを省略すると、他のSaaSデモと同じような凡庸なCanvaスタイルのモーショングラフィックスリールになってしまいます。この規律こそが差を生みます。
これらは厳格なルールではなく、強い推奨事項です。ほとんどの制作はこれに従いますが、意図を持って破る場合もあります（例：ビート同期がVOと競合するナレーションドリブンの動画）。ルールを破る場合は、そのことを認識して行ってください。
前提条件
開始する前に、これらが整っていることを確認してください。最初のものは必須です。それ以外は強く推奨されますが、代替手段が文書化されています。
-
Remotionがインストールされていること（必須）。
@remotion/cli4.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が利用可能であること。ビート検出は
librosaをインポートするscripts/detect-beats.pyを実行します。インストールされていない場合は、pip install --break-system-packages librosa numpy soundfileを実行し、ユーザーに伝えてください。黙って実行しないでください。 -
リファレンス動画分析（柱 2）：優先順位の高い順に3つの方法をサポートしています。利用可能な最も高い優先順位のものを使用してください。完全な検出ロジックは
references/reference-video-vibe.mdを参照してください。- PATH上に
geminiCLI（公式Google CLI、またはgemini-ytのようなコミュニティラッパー）。プロンプトとYouTube URLを引数として実行します。 - 環境変数または
.envにGEMINI_API_KEYが設定されている。scripts/analyze-reference-video.shのスキルのcurlラッパーを使用します。 - 上記のどれも該当しない - 手動でGoogle AI Studioにコピーペーストする方法にフォールバックします。面倒ですが常に機能し、品質は同等です。
- PATH上に
新しいセッションでは、最初のアクションとして 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（シーン構築後）の後、beats.jsonとシーン内イベントのリストに対して
scripts/align-internal-events.pyを実行し、±6フレーム以内の最も近いビートに移動させます。これは、初期レンダリングに次いで2番目に効果の高いイテレーションです。視聴者はオフビートの内部イベントを「リズムが時々おかしい」と感じますが、その理由を特定することはできません。 - 開発モードでアサーションするために
isSnare(n)/isKick(n)ヘルパーを使用します。 - TypedText/TypedCharsに対して
scripts/check-typing-budget.pyを実行し、シーン時間内に収まることを確認します。出荷前に画面外のタイピングをカットします。
完全な数学、ヘルパー、内部イベントアライメント、タイピングバジェットチェックについては、references/beat-sync.md を参照してください。
関連機能 - 基本だけでは不十分な場合
これらは、標準的な「オールモーショングラフィックス、スクリーンショットを録画するだけ」のSaaSデモを超えた状況をカバーします。ユーザーの状況が必要とする場合、関連するリファレンスを読んでください。
スクリプト開発 - ユーザーにスクリプトがない場合
ほとんどのユーザーは、完成した画面ごとのものではなく、漠然としたプロダクトアイデアを持って訪れます。references/script-development.md は、4幕構成のアウトライン＋ロックされた画面ごと＋ロックされたコピーのリファレンスページを生成し、仕様書にフィードする準備ができる構造化されたダイアログフローを説明しています。
Bロール統合 - 動画が実写やコラージュレイヤーを使用する場合
ユーザーがストック映像、コラージュクリップ、または背景レイヤーとして使用したい任意の動画を持っている場合、references/b-roll-integration.md と BRollLayer テンプレートを使用してください。Bロールは全不透明度の背景または低不透明度のテクスチャにできます。プリミティブはトリム、フェード、ブレンドモード、fps補正されたタイミングを処理します。
（このスキルの以前のバージョンでは、実写作品は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、計算された位置定数、デバッグオーバーレイ）をカバーしています。最初に一つを選択してください。これを誤ると、シーンごとに複数回のフルレンダリングサイクルが発生する可能性があります。
ライティングスタイル - AI的な痕跡をユーザー向けコピーから排除する
emダッシュ、スマート引用符、および特定の言い回しの癖は「AI生成」と叫びます。references/writing-style.md はデフォルトのスタイルガイドで、これらをキャッチするプレレンダーgrepチェックが含まれています。ユーザーが独自のブランドボイスガイドを持っている場合は、そちらを優先してください。
理想的なシーケンス
完全なエンドツーエンドフロー。注釈付きのバージョンとその根拠については、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にシーンごとのデバッグコンポジションを登録する。 不可欠な高速化。5秒のシーン1つをスクラブすることは、フルマスターよりも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- 完全な受け入れフロー、部分アセットのフォールバック、アセットアップスケーリングチェック、命名規則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、またはその他のノンリニアエディターを使用してください。