SaaSプロダクトデモ動画
Remotionで短いプロダクトフィルムを制作します。サウンドトラックのビートに合わせ、プロダクト自身のブランドと実際の画面を使用します。同じフローで、水平デモ、垂直リール、Bロールレイヤーがあるフィルム、記録するインターフェースがないプロダクト、すでに存在していて一連の変更が必要なフィルムをカバーします。
汎用的なモーショングラフィックスリールは簡単に作れますが、簡単に無視されます。それは、AIで作られたものも同様で、今や多くのオーナーが見分けられます。フィルムをそれらから差別化するものは、どのシーンも存在する前に収集されます。プロダクトの実際のアセットとスクリーン、ユーザーが好きな参照フィルムから借りたルック、サウンドトラックから取ったタイミンググリッド、そしてフィルムが伝える1つのビジュアルアーギュメントです。このスキルの残りの部分は、それらに基づいて構築されるクラフトです。
正しいブランチから始める
- 新しいフィルム。 インテーク、ルック、スキャフォールド、ビート、ブリーフ、チェックポイント、構築：以下のフロー、
references/workflow.mdに理由が記載されています。 - 既存のフィルム。
docs/video/notes.md（最初にすべての「決定」エントリ）、ブリーフ、最新の引き継ぎ情報を読み、承認済みレンダリングとソースを個別に検査し、何も触る前にリクエストを分類します：微調整はスイッチの背後に、リスキンはすべてのタイミングと動きを保持、リビルドはストーリーボードまたはテストベッドを取得します。references/iteration-playbook.md、「最初にリクエストを分類する」。小さな修正のためにインテークを繰り返したり、ルックを再開したりしないでください。 - 批評または計画のみ。 レンダリングをレビューし（
references/self-check.md、references/taste-review.md）、ランク付けされたリストを返します。何も構築しません。各所見がどの証拠（静止画、測定値、またはあなたができない再生）に基づいているかを述べてください。 - ナレーションがペースを決める。 スキャフォールドは音楽主導です。ナレーションに合わせてカットされたフィルムは、そのイベントを手動で配置し（タイミングファイルで
BEAT_SYNCED = false）、ブリーフにはカットが音楽に乗らないと明記されています。開始する前にその旨を伝えてください。
完了の定義
- マスターコンポジションとシーンごとに1つのデバッグコンポジションを持つRemotionプロジェクト。すべての候補変更は、デフォルトが出荷ルックとなるスイッチの背後にあります。
docs/video/brief.md：入力、ルック、1文でのビジュアルアーギュメント、シーンごとのスクリプト、前提条件。beats.jsonと、すべてのシーンがフレーム数を読み取るタイミングファイル。これにより、1つのビートインデックスを変更するだけでフィルム全体が再フローされます。- HD MP4（1920x1080 または 1080x1920）、カラータグ付き、サムネイル静止画、およびHDのオーディオを引き継ぐオーナーの承認後の4Kレンダリング。
- すべてのシーンが、ユーザーが見る前にあなたがレンダリングした静止画でチェックされていること。単語数がカウントされていること。何が測定され、誰もまだ視聴していないことがオーナーに伝えられていること。
- すべての波とすべての決定を含む
docs/video/notes.md、および作業が未完了の状態でセッションが終了する場合の引き継ぎファイル。 - オプションで、マスターの
sfxプロップの背後にある4～8個の効果音。それらのイベントに測定されて配置され、ユーザーが耳で選択できるように、マスターの隣にMaster-NoSfxレンダリングがあります。
フロー
- セットアップ。 ツールを確認し、不足しているものをメモします。
references/setup.md - インテーク。 質問票を1つのメッセージとして送信し、回答を記録します。記憶ではなく、今日のサイトをキャプチャします。
references/asset-intake.md、references/product-ui-from-site.md - ルックとアーギュメント。 2～3本の参照動画を、トランジション動詞、ペーシング、特徴的な動きに分解します。フィルムが主張する一文と、1つの特徴的な動きを書きます。
references/reference-video-vibe.md、references/creative-direction.md - スキャフォールド。
assets/scaffold/をプロジェクトにコピーしてインストールします。references/project-scaffold.md - ビート。 サウンドトラックに対して
scripts/detect-beats.pyを実行し、スキャフォールドのプレースホルダーを上書きしてbeats.jsonを書き込み、その信頼性の判定に基づいて行動します。references/beat-sync.md - ブリーフと最初のシーン。
docs/video/brief.mdを書き、シーン1とプロダクトを表示する最初のシーンを構築し、静止画でチェックした後、以下のチェックポイントで停止します。 - フルビルド。 残りのシーンとマスターを構築し、各シーンを静止画でチェックし、単語数をカウントし、アテンションパスを実行します。その後、フィルムに効果音を追加する場合はサウンドレイヤーを追加します：
references/sound-effects.md。最初の修正波の前に行うことで、すべてのキューが動きの止まったフレームに配置されるようにします。 - 修正波と出荷。 ユーザーのノートをバッチで収集し、スイッチの背後で修正し、マスターのフラグでレンダリングし、エクスポートします。ユーザーが再考を望むシーンは、音楽とともに2～4方向のテストベッドを用意し、並べてフルサイズで表示し、ユーザーが選択します。ストーリーを再構築する波は、最初にストーリーボード（画面上のすべての文字列とフレームごとに1行）を作成し、コードの前に承認を得ます。長いセッションは引き継ぎファイルで終了します。
references/iteration-playbook.md、references/render-export.md、assets/prompt-templates/handoff.md
1つのチェックポイント
フルビルドの前に、ユーザーの承認のために正確に1回停止します。オープニングシーンと最初のプロダクトシーンがレンダリングされ、それらの間のカットと音楽があり、ブリーフが書かれているときです。そのクリップとブリーフからのスクリプトを一緒に表示し、3つのことを尋ねます：ルックは正しいか、言葉は正しいか、音楽と一緒にうまく動いているか。
クリップは両方の種類のシーンを必要とします。なぜなら、それらは異なる方法で失敗するからです。タイプ主導のオープニングはルックを示します。プロダクトシーンは、画面上の情報量とイベントがビートにどのように配置されるかを示し、これらはユーザーがフルビルド後に初めて見た場合に拒否するものです。ユーザーが後でレビューする場合、動画とスクリプトを並べた小さなローカルHTMLページが両方を1か所にまとめます。assets/prompt-templates/checkpoint.html が出発点です。
ここに1つの停止を置く理由：人々はドキュメントよりもレンダリングをはるかにうまく判断し、ここで間違ったルックやリズムをキャッチすれば、フィルム全体ではなく2つのシーンの手直しで済みます。チェックポイント前のすべては元に戻せるため、ドキュメントの承認を求めずに行います。インテークの質問を1つのメッセージで行い、ユーザーに好みがない場合は賢明な選択をし、各選択をブリーフの前提条件リストに書き込んで、簡単に拒否できるようにします。チェックポイント後は、再度ノートを求める前にフィルム全体を構築します。承認された雰囲気内での微調整には2回目のチェックポイントは必要ありません。雰囲気の変更には必要です。
誰も答える人がいない場合（無人実行）、与えられた材料からインテークに答え、すべての前提条件をブリーフにリストし、それでもチェックポイントで停止します。未承認のルックで構築されたフィルム全体は、この停止が防ごうとしている高価なミスです。唯一の例外は、チェックポイントをレンダリングして続行するよう明示的に指示する引き継ぎブリーフです。その場合はレンダリングし、ユーザーに開いて、構築を続けます。なぜなら、誰も答えられない状態でセッションが停止すると、何も提供できないからです。
テンプレートルックは敵
オーナーはそれを一言で名付けます（「クローデスク風」、「Canva風」、「安っぽい」）。それは一連のデフォルトです：セリフ体のクリーム色のキャンバス、グローとブラー、見出しの1つのイタリックまたは色付きの単語、アイブロウラベル、ハブアンドスポーク図、クリップアートグリフ、サイトにある実際のダッシュボードではなく考案されたダッシュボード、シーンごとのトリック、すべてのビートで何かがポップする、アイドルバウンシング、フェードインして留まるテキスト。すべての16進数カラーはブランドファイルから取得でき、フィルムはそれらのさらに1つにしか見えません。完全なリスト、出荷されたフィルムで各アイテムを何で置き換えたか、および1-シグネチャームーブルールは references/creative-direction.md の「テンプレートとして読まれるもの」にあります。最初のシーンの前と、「よりプレミアム」なパスの前に読んでください。
フィルムはそのリストをクリアしても、クリーンなスライドデッキのように読める可能性があります。同じ見出しがスラブの上にあり、共有された世界がなく、トーンアークがなく、アクセントがあらゆる場所にあります。2回連続でポリッシュパスが「良くなったが、まだ違う」という結果になった場合、モーションを触るのをやめ、静止画でブラインドアートディレクション批評を実行します（references/iteration-playbook.md、「ポリッシュパスが停滞するとき」）。それが生まれたフィルムでは、答えは1つの共有された3Dワールド、プロットを伝えるトーン、コンポジションとしてのタイプ、フレームごとに1つのアクセントでした（references/creative-direction.md、references/3d-world.md）。
カットフレームは絵を運ぶ
すべてのカットはバックビートに着地し、それが着地するフレームは構成されている必要があります。最初の行、バー、または見出しを持つカード。次のビートにかけて埋まる空の長方形ではありません。1つの構成要素で十分です。カット上にカードがあれば、その隣の見出しはビートで上がることができます。初稿とシーンエージェントは、カット後の最初のビートに最初の行を配置し、フィルムは6つのシーンを連続して空白の白で開きます。ルール、カウンターとチップフィールドのためのプレロールトリック、およびシーンを結合するカメラ移動は、references/animation-patterns.md にあります。
モーションはカットを通して続き、テキストは一方向に動く
全体的にフィルムを気に入ったオーナーからの2つの注意：「ぎくしゃく感が少ない」と「テキストモーションが退屈」。前者は、すべてのカットの両側で完全に停止するトランジションと、最初の0.5秒で全動作を行うカメラホールドから生じました。修正は、カットに加速して入る出口、速度を保ったままカットを出る入口、そして均等にドリフトするホールドです。後者は、フェードインして留まる見出しから生じました。修正は、参照から選ばれ、すべてのシーンで使用され、ビートで入り、カメラが出るように出る、表示テキストのための1つの動きです。シーンごとの新しいトリックではありません。assets/components/Stage.tsx が前者を実装し、Title.tsx が1つのテキスト移動を実装します。references/animation-patterns.md には数値があり、ログ空間での大きなプッシュのキーや、1つのオブジェクトがカットをまたいで引き渡される方法が含まれています。
一度に1つの変更領域：0.5秒以内に、シーンのメインイベントが着地している間に遠い隅で何も動いてはいけません。二次要素を、目がすでにある場所、またはカット上に配置します（references/motion-language.md）。
アイデアを見せよ、画面を見せるな
プロダクトフィルムはウォークスルーではありません。各プロダクトシーンは1つのアイデアを運び、そのカードはそのアイデアを伝えるために必要なものだけを示します：名前、ステータス、フレーズ。オーナーが満足したフィルムからの予算：実行時間1秒あたり約4ワード、プロダクトカードあたり15～30ワード、見出しは12ワード未満で1行。その2倍のカットは「テキストが多すぎる」と評価されました。保持する少数の単語の出典はプロダクトの実際の文言です。それはすべてを保持する理由にはなりません。ユーザーが明示的に要求しない限り、価格、クレジット、プラン名は省略します。scripts/check-copy.mjs がカウントします。references/writing-style.md にルールと兆候があります。
自分のレンダリングをチェックする
ユーザーがシーンを見る前に、重要なフレームで静止画をレンダリングして見てください。各クリックフレーム、テキストの最長行が完全に画面に表示されるフレーム、各カットの直前のフレーム、カットフレーム全体。カーソルチップがターゲットにあり、テキストが折り返したりクリップしたりせず、何もセーフエリアからはみ出さず、単語がブリーフと正確に一致することを確認します。マスターレンダリング後：コンタクトシート、カットストリップ、フィルムの判定された動きが計画通りに通過したかどうかのジャークレポート、アテンションパス。references/self-check.md にフレームリストとコマンドがあります。
これは重要です。なぜなら、このようなフィルムの通常の失敗（ボタンを外すカーソル、折り返す見出し、グリッドから外れるカード、古くなったタイミングダンプ）はすべて、型チェックを通過し、エラーなくレンダリングされるからです。それらは画像、または数値でのみ表示されます。
静止画はモーションを示しません。フィルムがスムーズで、音楽とよく合っているかどうかは、見ている人だけが言えることです。したがって、チェック済みとして報告しないでください。何が測定され、誰も視聴していないかを伝えてください。
3つの入力
アセット。 アスペクト比、長さ、ロゴ、ブランドカラー、フォント、スクリプト、サウンドトラック。事前に assets/prompt-templates/asset-intake-questionnaire.md の質問票で収集します。強いモーションとプレースホルダーブランドを持つフィルムはテンプレートとして読まれ、遅れて到着するすべてのアセットは再レンダリングを強制します。プロダクトの実際のUIは、今日のサイトからキャプチャされ、DOMから測定されます。記憶から描画されることはありません（references/product-ui-from-site.md）。1つの考案されたダッシュボードがバージョン全体を台無しにしました。ユーザーにスクリプトがない場合、references/script-development.md がユーザーと一緒にスクリプトを開発します。
ルック。 ユーザーが好きな2～3本の参照動画。それぞれをディレクターズブレイクダウンに変換します：ショットリスト、トランジション動詞（プッシュスルー、ホイップパン、マッチカットズーム、マスクワイプ）、ペーシング、タイポグラフィ、特徴的な動き。トランジション動詞が最も重要な部分です。なぜなら、それらはシーンリストを、フェードするスライドデッキではなく、カメラプランに変えるからです。ユーザーが以前に気に入ったフィルムは、すべての参照より優先されます。そのカットポイントとエントランスタイミングを最初にロードします。Geminiが利用可能な場合はそれを使用し、そうでなければ自分でフレームをサンプリングして読みます。両方のパスが references/reference-video-vibe.md にあります。
ビート。 scripts/detect-beats.py がサウンドトラックを読み取り、beats.json を書き込みます：テンポ、すべてのビートのフレーム、どのビートがバックビートか、トラックが盛り上がる場所。シーンカットはビートに、デフォルトではバックビートに配置されます。これにより、カットがドラムヒットのように感じられます。高価に見えた3本の参照フィルムは、1分間に10～13カット実行し、3.5秒未満のショットはなく、すべてのシーンにカメラ移動がありました。クリックとエントランスもビートで開始されますが、すべてのビートではありません。ほとんどのビートは何も運びません。タイミングファイルはすべてのフレームを beats.json から導出するため、シーンは手動で入力されたフレーム番号ではなく、ビート番号によって配置されます。スクリプトは信頼性の判定で終わります：good の場合は構築、check の場合はユーザーに耳で確認してもらう、poor の場合はトラックがビートカットフィルムに適さないため、トラックを変更するか、フィルムがビート同期されないことをユーザーに伝えます。
ほとんどのフィルムは3つすべてに従います。一部は意図的に1つを破りますが、それが選択である場合は問題ありません。例えば、ナレーションに合わせてカットされたフィルムは、ビートに合わせてカットすることはできません。
オーナーとの連携
- 彼らは見て承認します。 最後に承認されたカットと、何が変わったかの時間付きの数行のプレーンテキストを並べて、HDレンダリングを彼らに開きます（
open out/...mp4）。4Kは承認後に来ます。選択を求められるものについては、フルサイズの静止画を表示します。2人のオーナーはフルサイズで選択を変更しました。 - 推奨し、引き継がない。 オープニングで、フィルムを何についてにするかの提案を含むブリーフのドラフトを示します。「好きなように作って」は、彼らが承認するものがなくなることを意味します。インテークで彼らが好みを持たなかったすべてのポイントについて、1つの賢明な選択をして、ブリーフに記録します。
- 彼らのスクリプトが間違っていることを伝えます。 プロダクトフィルムの規則（1秒あたり約4ワード、カードあたり15～30ワード、見出しは1行）は、彼らが書いたものでも適用されます。彼らにこれを伝え、トリミングを提案します。
references/writing-style.mdのルールに従ってトリミングされたバージョンと、彼らのバージョンを見せて比較させます。ユーザーが気に入ったフィルムはすべて、文字数制限を尊重していました。 - 彼らに伝えてから、彼らのために行う。 設定を変更する前に、何をしようとしているかを説明します。ビート検出が低い信頼性を示した場合、それを伝えてから、耳で確認を依頼します。見つからないUI要素をインテークで収集する代わりに発明する前に、発明しようとしていることを伝えます。推奨が却下された場合、それを記録し、決定を尊重します。
セッションの一時停止と引き継ぎ
セッションを早めに一時停止する：完了の定義を満たす前に注意散漫になった場合、翌朝フィルムがどこにあるかが不明な場合、または編集中にエージェントのコンテキストがタイムアウトした場合。別のエージェントが中断したところから再開するために必要なすべて、または完了の定義の残りの部分をゼロから完了するために必要なすべてを出力します。assets/prompt-templates/handoff.md。
引き継ぎファイルは、開いているすべての決定と選択を説明します。なぜそれらが行われたかを知らずに、誰かがワイヤーフレームを理解し、修正できるようにします。docs/video/notes.md が引き継ぎファイルのデータソースです。
アンケート
開始時、これらの質問を1つのメッセージとしてまとめて送信します。assets/prompt-templates/asset-intake-questionnaire.md
- フィルムは、製品紹介、機能デモ、ソーシャルリール、または他の何かですか？
- 主なアスペクト比は何ですか？（16:9 ワイド、9:16 縦長、または特定のサイズ）
- 希望する長さは？（秒数、または「音楽に合わせて」）
- サウンドトラックはありますか？あれば、そのファイルはどこにありますか？（なければ、その雰囲気/ジャンルを説明してもらい、後で提案します）
- 使用したいブランドカラー、ロゴ、フォントは何ですか？（ブランドガイドラインがあれば、共有してください）
- 製品の本来の画面をキャプチャするためのライブサイト/アプリへのリンクはありますか？（なければ、そのUIをどのように表現すればよいですか？）
- 製品のメッセージを伝えるためのスクリプトやキーフレーズはありますか？
- 参考になる動画のリンクはありますか？（2～3本の動画で、スタイル、ペース、雰囲気を指定してください）
- フィルムが伝えるべき1つの中心的なアイデアや価値提案は何ですか？
- フィルムに含めるべきでない特定の要素（価格、競合他社名、特定の機能）はありますか？