ソフトウェアプロダクトのローンチビデオ

30～60秒のビデオを作成し、視聴者にプロダクトを理解させ、欲しいと思わせます。

すべてを決定づける判断：録画するな、再構築せよ

画面録画はあなたに牙をむきます。実際のレイテンシは無音の時間です。撮り直しは高くつきます。フレームを保持できず、あるビートを遅くして別のビートを速くすることもできず、圧縮ノイズが出ずにトリミングすることもできません。

そこで、UIをRemotion内のフレーム駆動型Reactとして再構築します。すべてのビジュアルは useCurrentFrame() の純粋関数です。タイピングは正確なカーブ上で行われ、ローディング状態はビート上で解消され、撮り直しは1つの数値変更で済みます。

これは、プロダクトの実際のコード（ローカルの場合）またはDOM+CSS（ホスト型の場合）を読み取り、忠実に再現できる場合にのみ合理的です。実際のクラス名、実際の色、実際のコピーを使用してください。再構築は録画と見分けがつかず、それ以上であるべきです。

録画すべき場合： ヘビーな3D、プロダクト内のビデオコンテンツ、Canvas/WebGLサーフェス、ネイティブデスクトップアプリ。特定のサーフェスを再構築できない場合は、そのサーフェスのみを録画し、<OffthreadVideo> で合成します。

フェーズ1 — プロダクトを理解する

このフェーズを始める前に references/discovery.md を読んでください。ブラウジングとトリアージの手順、認証情報の確認方法、ライブサイトからデザインシステムを抽出する方法について説明しています。

短いバージョン：

URLが与えられた場合：ブラウズします。最初にランディングページ（プロダクトがどのように自社を位置づけているかがわかる）、次にアプリ本体。プロダクトが誰に対してどのような仕事をするのかを把握します。
ローカルリポジトリ/開発サーバーが与えられた場合：コードを読みます。はるかに豊かです。実際のコンポーネント、実際のテーマトークン、実際のシードデータが得られます。
ページをトリアージします。 ほとんどのプロダクトには20の画面があり、重要なのは3つです。認証、設定、請求、プライバシー、アカウント、オンボーディングの定型画面 — これらはほとんどストーリーにはなりません。プロダクトが唯一できることを実行する画面を見つけてください。
良いものがログインの背後にある場合：まず尋ねてください — テスト認証情報、またはローカル開発環境のシードアカウント。どちらも利用できない場合は、諦めず、見たことのないセッションを偽装しないでください。チャプター形式に切り替え、ランディングページ自体の機能カード、コピー、コンポーネントから構築します。discovery.md に収集手順と誠実さのルールがあります。

その後、構築を始める前に、あなたの読み取りをユーザーと確認してください。プロダクトの読み取りを誤ると、ビルド全体が無駄になります。次の内容を示してください：プロダクトが何をすると思うか、特集する予定の2～4の画面、ヒーローシナリオ、ショットリスト、音楽に関する質問（フェーズ4を参照）。1つのチェックポイントを設けてから実行に移します。

フェーズ2 — 形式を選ぶ

references/structure.md を読んでください。2つの形式が機能します。間違った選択はビルドを台無しにします。

形式A — 単一ナラティブ。デフォルト。 1人のユーザーが1つのジョブを実行し、1つのアーティファクトを取得します。機能ツアーではありません。

ビート	役割
フック（0～5秒）	視聴者自身の言葉で問題を述べます。まだUIはありません。
依頼（5～12秒）	ユーザーが何かを依頼します。入力に密着。
作業（12～25秒）	プロダクトが明らかに難しいことを行います。証拠を見せます。
成果物（25～35秒）	出力を完全な状態で、読みやすいサイズで表示。
制御（35～45秒）	ユーザーがそれを変更し、主導権を握ります。
スレート（45～50秒）	ロゴ、1行、ドメイン。

作業と制御のビートが、実際のデモとモックアップを分けるものです。「推測する代わりに尋ねてくれた」や「作ったものを編集できた」は信頼の根拠であり、信頼こそがローンチビデオが実際に販売しているものです。

プロダクトが人が簡単に自分でできないことを行う瞬間を選び、出力を具体的で目に見えるものにします — 生成されたドキュメント、作成されたチャート、修正されたバグ、デプロイされたサイト。具体的なアーティファクトは人々が覚えているものです。

形式B — チャプター形式のフィーチャーフィルム。 3つの機能。それぞれが平易な言葉のラベルカードで紹介され、その後表示されます。

hook → [01 ラベル → 機能] → [02 ラベル → 機能] → [03 ラベル → 機能] → slate

プロダクトがゲート付きでランディングページから作業している場合、または機能が実際にユーザージャーニーを共有していない場合、または1つのビルドから3つのスタンドアロンクリップが必要な場合に使用します。3つが数です。4つではどれも印象に残りません。

シーケンスをチャプター化しないでください。 機能が1つのセッションで次々に発生する場合（調査 → 下書き → 編集）、それは1つのワークフローであり、3つの機能としてラベル付けすることは素材に反します。順次的なプロダクトでチャプターを要求された場合は、中間の道を提案してください：単一ナラティブを維持し、各機能が現れるときにラベルをアクションの上に配置します。同じ可読性、同じクリップ境界、ランタイムコストなし、ストーリーはそのままです。

structure.md では、チャプターカードのデザイン、ラベルの書き方（メカニズムではなく結果に名前を付ける。プロダクト自身の言葉を借りる）、トランジション、順序について説明しています。

フェーズ3 — すべてを具体化する

プロダクトがどのドメインであっても、その内容を発明してはいけません。 法律関連のプロダクトなら法文は実際のものでなければなりません。分析ツールなら数値はもっともらしく、内部的に一貫している必要があります。コードツールなら、コードは読者の頭の中でコンパイルできる必要があります。

リポジトリ、API、シードデータ、またはドキュメントから実際のものを引き出してください。ドメインの専門家はこれらのビデオを見ており、1つの発明された詳細がすべての専門家を失わせます。当事者名、日付、金額は発明しても問題ありません — これらは顧客に固有のものであり、世界についての主張ではありません。

各事実がどこから来たのかを示す出典メモをデータファイルに残してください。将来の自分がそれを必要とします。

フェーズ4 — 構築する

スキャフォールドを実行します。これにより、実際に連携して動作するバージョンが固定され、設定が書き込まれます。

python3 <skill-dir>/scripts/scaffold_video.py <target-dir> \
    --name "product-launch" --fps 60 --seconds 45

スタンドアロンのRemotionプロジェクト（独自のgitリポジトリ — 特に依頼がない限り、ビデオツールをプロダクトのリポジトリに追加しないでください）が作成され、useCamera.ts がコピーされ、入力するためのタイムラインモジュールが残されます。

次に、順番に：

src/timeline.ts — フレーム計算とショット境界。ビートがフレームの整数になるBPMを選択します（60fpsの場合：120 BPM = 30フレーム、90 BPM = 40）。すべてのショット境界をビート上に配置します。音楽がなくても、これによりカットに内部リズムが生まれ、後で音楽ベッドを追加する場合も再編集なしで対応できます。
src/data/script.<lang>.ts — すべての文字列、すべての数値、すべてのドキュメントコンテンツを、出典コメント付きの1つのファイルにまとめます。コンポーネントにハードコードされたものはありません。タイミング調整と翻訳の両方が簡単になります。
コンポーネント — プロダクトのUIを再現します。実際のクラス名をコピーします。プロダクトがTailwindを使用している場合は、その設定とテーマCSSをベンダー化します。色にCSS変数を使用している場合は、それらを持ってこなければ、すべてが無色でレンダリングされます。
src/scenes/ProductScene.tsx — すべてのビートを絶対フレーム番号として保持する、エクスポートされた単一の B オブジェクト。DOM、カメラ、サウンドのすべてがそこから読み取ります。タイミング調整はそのブロックを編集するだけで完了します。

ショットシステムについては references/camera.md、持続時間とタイポグラフィについては references/motion.md を読んでください。

フェーズ5 — オーディオ

2つのトラック、2つのファイル、2つの <Audio> タグ：効果音 と音楽。これらを分離して、どちらかを再生せずに置き換えられるようにします。

効果音 — references/sound.md。抑制がすべてです。45秒のビデオには通常、合計3～5つのイベントが必要です。ポップは何かが現れたことを意味し、スウィッシュは要素がショット内で移動したことを意味し、ウーッシュはショットが移動したことを意味します。

python3 <skill-dir>/scripts/make_sfx.py sfx.spec.json public/sfx.wav

音楽 — references/music.md。構築する前に尋ねてください。 ほとんどの人には意見があり、多くの人はすでにトラックを持っています。尋ねるのは一文のコストで、努力全体を節約できるかもしれません。

音楽ベッドは必要ですか？トラックがあれば送ってください。それに合わせてカットします。ない場合は合成できます — エネルギッシュ、落ち着いた、シネマティック、ミニマル、温かみのある、または緊張感のある？

トラックがある場合は、それに合わせてカットします：そのBPMを見つけ、タイムラインを一致させ、ショット境界をそのバーに合わせます。それ以外の場合は、アレンジメントの変化があなたのカットに合うベッドを合成します。

python3 <skill-dir>/scripts/make_music.py music.spec.json public/music.wav

実際の各ショット境界に sections エントリを配置し、最も大きなカットに1つの hits エントリを配置し、読み取られたいが感じられたくない任意の保持行の下に1つの ducks エントリを配置します。音楽はピークで約0.30、効果音は約0.62。プロダクトの性質からムードを選択します — 深刻な主題はより落ち着いたベッドを必要とし、忙しいカットはよりスパースなベッドを必要とします。

フェーズ6 — レンダリング前に静止画で検証する

これはタイトなループであり、これをスキップすると何時間も無駄になります。

npx remotion still <CompositionId> out/f0700.png --frame=700

そして実際にPNGを見てください。 ショットごとに1枚の静止画をレンダリングし、各トランジションでも1枚ずつレンダリングします。被写体がフレーム内にあるか、単語の途中でクリップされていないか、デッドスペースはないか、テキストが収まっているかを確認します。

サイレントコンポジション（defaultProps: { withAudio: false }）を追加して、静止画がオーディオファイルを必要としないようにします。

可能な限り数値的に調整してください。 イージングカーブ、スクロール距離、スペクトルコンテンツ — これらはすべて計算可能です。カーブをサンプリングして、そうでなければ推測していたであろう値を出力する使い捨てのPythonスクリプトを作成してください。レンダリングより速く、正確です。

静止画が正しくなってから、完全なものをレンダリングしてください。

npx remotion render <CompositionId> out/video.mp4 --concurrency=4

16GBマシンでは並行処理数を4程度に制限してください — RemotionはスロットごとにChromeタブを起動し、デフォルト（コア数）ではスワップが発生します。

フェーズ7 — 正直に引き渡す

ファイルを送信します。次に、率直に伝えます。

検証できなかったこと。静止画は読めますが、8秒間の感じを判断することはできず、オーディオを聞くこともできません。その旨を伝えてください。
再構築したが観察しなかった画面 — 特にゲート付きプロダクトの場合。それらをリストアップし、アクセスを共有してくれるならそれらのビートをやり直すことを申し出てください。
彼らが同意しないかもしれない判断を下した箇所。
音楽の交換方法：任意のWAVまたはMP3を public/music.wav にドロップして再レンダリングします。
構築中にプロダクトで見つけたもの — レンダリングバグ、間違ったラベル、欠落している状態。ほとんどの人が決してしないほど注意深くUIを読みました。その観察結果は、ビデオ自体よりも価値があることがよくあります。

リファレンスファイル

関連するフェーズに到達したときにこれらを読んでください。詳細であり、すべてを前もってロードする価値はありません。

ファイル	いつ
`references/discovery.md`	フェーズ1 — ブラウジング、ページトリアージ、認証情報、デザインシステム、およびゲート付きプロダクトのランディングページからの構築
`references/structure.md`	フェーズ2 — 単一ナラティブ vs チャプター、チャプターカードのデザイン、機能ラベルの書き方、トランジション、順序
`references/camera.md`	ショットの構築 — レイアウトスペース、フォーカスポイントカメラ、カット vs プッシュ vs モーフ、コンポーネントの分離
`references/motion.md`	アニメーションの持続時間、タイポグラフィ、フックパターン、質問リール
`references/sound.md`	サウンドデザイン — ポップ/スウィッシュ/ウーッシュの語彙、抑制、キーボードとクリックの合成
`references/music.md`	ソーシング vs ベッドの合成、ムードの選択、セクションのカットへの合わせ方、効果音とのミキシング
`references/pitfalls.md`	最初のレンダリング前にこれを読んでください。実際に時間を浪費するバグとその修正方法。

バンドル済みスクリプト

以下の <skill-dir> はこのスキル自身のディレクトリです — スキルがロードされたときに与えられたパスです。固定されたインストール場所を想定しないでください。スキルは個人用にインストールされたり、プラグインとして、またはプロジェクトにチェックアウトされたりする場合があります。

スクリプト	内容
`scripts/scaffold_video.py`	動作するバージョンピンと設定でRemotionプロジェクトを作成します
`scripts/make_sfx.py`	JSONイベントリストから効果音トラックを合成します。サンプル不要、numpy以外の依存関係はありません。
`scripts/make_music.py`	6つのムードのいずれかで音楽ベッドを合成し、そのアレンジメントをカットに合わせます。同じ依存関係。
`assets/useCamera.ts`	フォーカスポイントカメラフック — `src/hooks/` にコピーします
`assets/ChapterCard.tsx`	チャプター形式用のチャプターカード — `src/components/` にコピーします

短いバージョン

録画するのではなく再構築します。1つのストーリー、1つのアーティファクト — ただし、プロダクトがゲート付きであるか、機能が実際に分離している場合は、平易なラベルを持つ3つのチャプター。すべてのドメイン事実を具体化します。フレームがすべての単位です。ページをトリミングするのではなく、コンポーネントを分離します。UIモーションは150～300ms、カメラ移動は約1秒。4つの音で十分です。音楽を作る前に尋ねます。レンダリング前に静止画を見ます。確認できなかったこと、推測したことを伝えます。

marketing-launch-video