ソフトウェア製品のローンチ動画
製品を理解し、欲しくなるような30〜60秒の動画を制作します。
すべてを左右する決断：再構築せよ、録画するな
スクリーンレコーディングはあなたに逆らいます。実際のレイテンシは無音の時間です。リテイクは高くつきます。フレームをホールドできず、あるビートを遅くして別のビートを速くすることも、圧縮による画質劣化なしにきれいにトリミングすることもできません。
そのため、UIをRemotion内でフレーム駆動のReactとして再構築します。すべての視覚要素は useCurrentFrame() の純粋関数です。タイピングは正確なカーブで着地し、ローディング状態はビート上で解決し、リテイクは数値の変更で済みます。
これは、製品の実際のコード（ローカルの場合）または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つの機能。それぞれが平易な言葉のラベルカードで紹介され、その後機能が表示されます。
フック → [01 ラベル → 機能] → [02 ラベル → 機能] → [03 ラベル → 機能] → スレート
次の場合に使用します。製品がゲート（制限） されていてランディングページから作業している場合、機能が真に同じユーザージャーニーを共有していない場合、または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）。すべてのショット境界をビート上に配置します。音楽がなくても、これによりカットに内部リズムが生まれ、後でBGMを追加する際に再編集が不要になります。 -
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を見つけ、タイムラインをそれに合わせ、ショット境界をその小節上に移動します。それ以外の場合は、アレンジメントの変化がカットに正確に合うBGMを合成します。
python3 <skill-dir>/scripts/make_music.py music.spec.json public/music.wav
実際の各ショット境界に sections エントリを、最も大きなカットに1つの hits エントリを、読み上げてほしい（感じさせたいのではなく）任意のホールドされたセリフの下に ducks エントリを配置します。音楽はピークで約-0.30、効果音は約-0.62。雰囲気は製品の性質から選びます。シリアスな題材はより落ち着いたBGMを必要とし、忙しいカットはよりまばらなBGMを必要とします。
フェーズ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 | BGMの調達 vs 合成、雰囲気の選択、カットへのセクションの整合、効果音の下でのミキシング |
references/pitfalls.md | 最初のレンダリングの前に読んでください。 実際の時間を消費するバグとその修正方法 |
バンドルスクリプト
以下 <skill-dir> は、このスキル自身のディレクトリです。スキルがロードされたときに与えられるパスです。固定されたインストール場所を想定しないでください。スキルは個人用にインストールされたり、プラグインとして、またはプロジェクトにチェックアウトされたりする場合があります。
| スクリプト | 内容 |
|---|---|
scripts/scaffold_video.py | 動作するバージョン固定と設定を含むRemotionプロジェクトを作成します |
scripts/make_sfx.py | JSONイベントリストから効果音トラックを合成します。サンプルは不要で、numpy以外の依存関係はありません |
scripts/make_music.py | 6つの雰囲気のいずれかで、カットに合わせたアレンジメントのBGMを合成します。同じ依存関係です |
assets/useCamera.ts | フォーカスポイントカメラフック。src/hooks/ にコピーします |
assets/ChapterCard.tsx | チャプター形状用のチャプターカード。src/components/ にコピーします |
簡略版
録画するのではなく再構築する。1つのストーリー、1つのアーティファクト — ただし、製品がゲートされているか、機能が真に分離している場合は、平易なラベルを持つ3つのチャプター。すべてのドメインの事実を現実に基づかせる。フレームはすべての単位である。ページをトリミングするのではなく、コンポーネントを分離する。UIモーションは150〜300ミリ秒、カメラ移動は約1秒。4つのサウンドで十分。音楽を作る前に尋ねる。レンダリングする前にスティルを見る。確認できなかったこと、推測したことを伝える。