ソフトウェア製品のローンチ動画
製品を理解させ、欲しくさせる30～60秒の動画を制作します。
すべてを決める判断：録画せず、再構築する
画面録画は問題だらけです。実際のレイテンシは無音時間になります。撮り直しはコストがかかります。 フレームを固定できず、あるビートを遅くして別のビートを速くすることもできず、 圧縮で劣化せずにクロップすることもできません。
そこで、UIをRemotion内のフレーム駆動型Reactとして再構築します。すべてのビジュアルはuseCurrentFrame()の純粋関数です。タイピングは正確な曲線で着地し、ローディング状態はビートに合わせて解決し、撮り直しは数値を1つ変えるだけです。
これは、製品の実際のコード（ローカルの場合）またはDOM+CSS（ホスト型の場合）を読み取り、忠実に再現できる場合にのみ合理的です。実際のクラス名、実際の色、実際のコピーを使ってください。再構築は録画と見分けがつかず、さらに優れているべきです。
録画すべき場合： ヘビーな3D、製品内のビデオコンテンツ、キャンバス/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 label → feature] → [02 label → feature] → [03 label → feature] → 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オブジェクト1つ。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。構築する前に尋ねてください。 ほとんどの人は意見を持っており、多くの人はすでにトラックを持っています。尋ねるのは一文のコストで済み、労力全体を節約できるかもしれません。
音楽は必要ですか？トラックがあれば送ってください。それに合わせてカットします。ない場合は、エネルギッシュ、落ち着いた、シネマティック、ミニマル、ウォーム、テンションの中から1つ合成できます。
トラックがある場合は、それに合わせてカットします。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つの音で十分です。音楽を作る前に尋ねてください。レンダリング前に静止画を見てください。確認できなかったこと、推測したことを伝えてください。