SaaS 製品デモ動画
Remotion でビート同期の SaaS 製品フィルムを制作するためのエンドツーエンドワークフロー。無声のシネマティックフィルム、ビートロックの水平デモ、縦型リール、コラージュ B-roll レイヤーを用いたフィルムをカバーします。
このスキルは、アセット、雰囲気 (Vibe)、ビート (Beats) の3つの柱にこだわっています。これを1つでも省略すると、他の SaaS デモと見分けがつかない、Canva 風の汎用的なモーショングラフィックスリールになってしまいます。この規律が違いを生みます。
これらは強い推奨であり、絶対的なルールではありません。ほとんどのプロダクションはこれに従いますが、意図を持って破ることもあります（例：ナレーションベースのフィルムで、ビート同期がナレーションと競合する場合）。ルールを破る場合は、それを認識した上で行ってください。
前提条件
開始する前に、これらが整っていることを確認してください。最初のものは真に必須であり、残りは強い推奨事項で、代替手段が文書化されています。
-
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-roll、模式的な UI、クリック位置、ライティングスタイル、
scripts/内のスクリプトはすべて同じように機能します。プラグインがないからといって作業を断らないでください。適応して進めてください。 -
Python 3 + librosa が利用可能であること。ビート検出は
scripts/detect-beats.pyを実行し、これはlibrosaをインポートします。インストールされていない場合は、pip install --break-system-packages librosa numpy soundfileを実行してユーザーに伝えてください。黙って実行しないでください。 -
リファレンス動画分析 (Pillar 2) について：スキルは優先順位に従って3つのパスをサポートします。利用可能な最も優先順位の高いものを使用してください。完全な検出ロジックは
references/reference-video-vibe.mdを参照してください。geminiCLI が PATH に存在する（公式 Google CLI、またはgemini-ytなどのコミュニティラッパー）。プロンプトと YouTube URL を引数として実行します。- 環境変数または
.envにGEMINI_API_KEYが設定されている。スキルの curl ラッパーscripts/analyze-reference-video.shを使用します。 - 上記のどれもない場合-手動の 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 のみの場合は、拡大時のピクセル化を防ぐためにネイティブの寸法を取得してください。
- ブランドのヘックスカラー（プライマリーアクセントカラー + 3〜6のサポートするパステルカラー）
- フォントスタック（すべて Google Fonts にある必要があります）
- コピー / スクリプト - 生成するよりも、ユーザーから提供された下書きを優先してください。ユーザーにスクリプトがない場合は、
references/script-development.mdを参照してください。 - ナレーション（オプション）
- サウンドトラックファイル - ビート同期に必須。ユーザーが持っていない場合は、ロイヤリティフリーのストックから選択してください。
完全な受け入れフロー、部分的なアセットでの最小実行可能セット、コピーイン時の命名規則、アセットアップスケーリングのピクセル化チェックについては、references/asset-intake.md を参照してください。
Pillar 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 を使用します。動画あたり約30秒かかります。出力はreferences/gemini-<slug>.mdに保存されます。 - 手動（常に機能） -
aistudio.google.comを開き、scripts/reference-video-prompt.mdのプロンプトを YouTube URL と一緒に貼り付け、結果をファイルにコピーします。面倒ですが、同様に使える出力を生成します。API が利用できない場合にこれを使用します。
監督用動詞語彙（プッシュスルー、ホイップパン、Vカットプルバック、インクマスク、マッチカットズーム）が最も負荷のかかる出力です。これにより、構築するための具体的なモーションプリミティブが得られます。
Pillar 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)ヘルパーを使用して、開発モードでアサーションを行います。scripts/check-typing-budget.pyを任意の TypedText/TypedChars に対して実行し、シーン内の長さに収まることを確認します。出荷前に画面外のタイピングをカットします。
完全な計算、ヘルパー、内部イベントの調整、タイピング予算チェックについては references/beat-sync.md を参照してください。
隣接する機能 - 基本では不十分な場合
これらは、標準的な「全モーショングラフィックス、スクリーンショットを録画するだけ」の SaaS デモを超えた状況をカバーします。ユーザーの状況が必要とする場合、関連するリファレンスを読んでください。
スクリプト開発 - ユーザーにスクリプトがない場合
ほとんどのユーザーは、完成した画面ごとのアイデアではなく、漠然とした製品アイデアを持ってやってきます。references/script-development.md では、4幕構成のアウトライン + 確定した画面ごとの構成 + 確定コピーのリファレンスページを生成し、仕様書にフィードする準備が整う、構造化された対話フローについて説明しています。
B-roll 統合 - フィルムが実写またはコラージュレイヤーを使用する場合
ユーザーがストックフッテージ、コラージュクリップ、またはバックドロップレイヤーとして使用したい動画を持っている場合は、references/b-roll-integration.md と BRollLayer テンプレートを使用してください。B-roll は全不透明度のバックドロップまたは低不透明度のテクスチャにすることができます。プリミティブはトリム、フェード、ブレンドモード、および fps 補正されたタイミングを処理します。
（このスキルの以前のバージョンでは、実写作品は Premiere/DaVinci に送ることを推奨していました。B-roll をモーショングラフィックスの下のレイヤーとして使用する場合、これは間違いです。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 作成特有の表現をユーザー向けコピーに残さない
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 を使用したビートトラッキング。対象の fps で BPM、ファーストキック、スネア/キックフレームを出力します。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-roll をモーショングラフィックスの下のレイヤーとして処理します。実写がフィルムの主題（インタビュー、開封、ウォークスルー）である場合は、Premiere、DaVinci、または…