ソフトウェア製品のローンチ動画

誰かに製品を理解させ、欲しくさせる30〜60秒の動画を制作します。\n

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

画面録画はあなたに逆らいます。実際のレイテンシーは無音の時間です。撮り直しは高くつきます。フレームを保持することはできず、あるビートを遅くして別のビートを速くすることもできません。そして、圧縮による画質劣化を避けながらタイトにトリミングすることもできません。

だから、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 — 単一のナラティブ。デフォルト。 一人のユーザーが一つのジョブを実行し、一つのアーティファクトを得る。フィーチャーツアーではありません。

ビート	役割
フック (0–5秒)	視聴者の言葉で問題を述べる。まだUIはありません。
要求 (5–12秒)	ユーザーが何かを要求する。入力に焦点を当てる。
作業 (12–25秒)	製品が明らかに難しい何かを行う。証拠を見せる。
アーティファクト (25–35秒)	出力全体を、読めるサイズで表示。
コントロール (35–45秒)	ユーザーがそれを変更し、主導権を握る。
スレート (45–50秒)	ロゴ、一行、ドメイン。

作業とコントロールのビートこそが、実際のデモをモックアップから区別するものです。「推測する代わりに私に尋ねた」と「作られたものを編集できた」は信頼の根拠であり、ローンチ動画が実際に売っているのは信頼です。

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

形状B — チャプター形式のフィーチャーフィルム。 3つの機能を、それぞれ平易なラベルカードで導入してから表示します。

フック → [01 ラベル → 機能] → [02 ラベル → 機能] → [03 ラベル → 機能] → スレート

製品がゲートされている場合やランディングページから作業している場合、または機能が本当にユーザージャーニーを共有していない場合、または1つのビルドから3つのスタンドアロンクリップを取得したい場合に使用します。3つが適切な数です — 4つになるとどれも印象に残りません。

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

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

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

製品がどのドメインにあっても、そのコンテンツを発明しないでください。 法的な製品であれば、法令は実際のものでなければなりません。分析ツールであれば、数値はもっともらしく、内部的に一貫している必要があります。コードツールであれば、コードは読者の頭の中でコンパイルされる必要があります。

実際のものをリポジトリ、API、シードデータ、またはドキュメントから引き出してください。ドメインの専門家はこれらの動画を視聴しており、発明された詳細が一つあるだけで、彼ら全員を失うことになります。当事者名、日付、金額は発明しても問題ありません — これらは特定の顧客に関するものであり、世界についての主張ではありません。

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

フェーズ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 — すべての文字列、すべての数値、すべてのドキュメントコンテンツを、出典コメント付きで一つのファイルに。コンポーネントにハードコードされたものはありません。リタイミングと翻訳が両方とも簡単になります。
コンポーネント — 製品の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エントリを、最も重要なカットに一つhitsエントリを、そして感じ取られるよりも読まれてほしい保留ラインの下に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秒間がどのように感じられるかを判断することはできず、オーディオを聞くこともできません。そのように伝えてください。
観察ではなく再構築した画面 — 特にゲートされた製品の場合。それらをリストアップし、アクセスを共有してくれるなら、それらのビートをやり直すことを申し出てください。
あなたが判断を下した箇所で、ユーザーが同意しないかもしれないところ。
音楽を交換する方法：public/music.wavに任意のWAVまたはMP3をドロップして再レンダリングします。
構築中に製品で見つけたもの — レンダリングバグ、間違ったラベル、欠落した状態。あなたは今、ほとんどの人がすることのないほど注意深く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/`にコピー

短いバージョン

録画するよりも再構築せよ。一つのストーリー、一つのアーティファクト — ただし、製品がゲートされているか、その機能が本当に別々である場合は、平易なラベルを持つ3つのチャプターにせよ。すべてのドメインの事実を具体化せよ。フレームがすべての単位である。ページをトリミングするのではなく、コンポーネントを分離せよ。UIの動きは150〜300ms、カメラの動きは約1秒。4つの音で十分。音楽を作る前に尋ねよ。レンダリングする前にスチルを確認せよ。確認できなかったこと、推測したことを伝えよ。

LaunchReel — URL→Remotionローンチ映像