product-launch-motion

モーションデザインのローンチ動画

Chan が望むローンチ動画の制作方法です。「The Spark」（v1）と Cheerful の実データ版（v2）を生み出した、すべてのプロンプトとレビューから導き出した要点です。 プロンプトそのものは、原文のまま順番どおりに references/prompts.md にあります。制作を始める前に読んでください。これが仕様です。コードのパターンは references/technique.md にあります。 過去の動画は手法を示すものです。このプロダクト独自のストーリーは、顧客の課題、現在のブランドアセット、実際の動作から組み立ててください。全体を通して、ひとつの形が連続する表現を保ってください。

スタンス：あなたがディレクターです

• 創造性に制約はありません。 Chan は「あなたにディレクターをしてほしい」「クリエイティブ面はすべて任せる」「型にはまらず考えて」「形やボタンに制限はない」と言っています。クリエイティブな判断について許可を求めず、自分で決めて DECISION として記録し、最後に一覧にしてください。Chan は一度の返信で、どの判断でも覆せるようになります。
• オリジナルであること。テンプレートも模倣も禁止です。 プロダクトのウェブサイトのコピー、UI、統計、画像をそのまま流用しないでください。シーンは独自に考案してください。「テンプレートのように見えるもの」は禁止です。
• ローンチ動画ならではの勢い。 モダンで、未来的で、上質に。Linear、Apple、Arc のようなトップクラスのモーションデザイナーの仕事を目指してください。すべてのビートで何かが起こり、間延びする時間はありません。
• 細部へのこだわりがプロダクトです。 マイクロインタラクション（ボタンを押す動き、ノブの伸縮、名前ピルの遅れ、クリックの波紋、オドメーターの停止、ステッカーの傾き）が、上質な仕上がりを生み出します。
• わかりやすさを大切にしてください。 各シーンで伝える要点はひとつに絞り、プロンプトと回答は短くし、結果を読めるだけの静止時間を確保してください。主題を保ちながら、補助的な動きと音でビートを生き生きとさせてください。視聴者を急かすのではなく、内容を簡潔にするか、ビートを追加してください。

絶対に守るモーションルール

1. 図形は1つだけで、カットはしません。 どの状態でも同じ要素がサイズ、角丸、色を変えながらモーフィングし、コンテンツは短いぼかしとともに切り替わります。カットは推奨しません。トランジションはモーフィングやカメラ移動、次のシーンになる要素へのズームイン（タイルが受信トレイに開く、返信カードが注文に変わる、カーソルがロゴの星に変わるなど）にします。
2. コンテンツは短いぼかしとともに切り替えます。 モーフィングするコンテナ内のテキストにも独自の開始・終了タイミングを設定します。終了は短く、早めにする必要があります。そうしないと、古いテキストと新しいテキストが重なります。
3. あらゆる動きにスプリングを使い、オーバーシュートはごくわずかにします。 弾むようなイージングは使いません。閉形式の減衰スプリングステップ応答のみを使います（テクニックを参照）。
4. 伸縮するように、先行端と後行端には別々のスプリングを使います。 タブインジケーター、トグルノブ、液体状のピルなどでは、先行端が後行端より先に進みます。
5. あらゆる変化を、実際のクリックやドラッグを行うカーソルで動かします。 ドラッグは直接操作です。押している間はカーソル位置から値を算出し、離すとその位置からスプリングで戻します。プロダクトのエージェント自身をカーソルにしてもかまいません（名前付きのピルを伴うグラデーションのマルチプレイヤーカーソル、短い動きの軌跡、速度に応じた傾き、クリック時の押し込みスケール＋波紋）。ユーザーのカーソル（「あなた」）から操作を引き継ぎます。
6. 各状態がフレームいっぱいに映るよう、カメラをズームします。 何もないフレームは不具合です。コンテンツをフレームに収めてから、押し込む、素早く振る、または引き戻します。引き戻す動きでスケール感を見せます（1通のメールから数百通のグリッドへ、1つの投稿から壁一面の投稿へ）。
7. 音楽を最優先してタイミングを決めます。 振り付けを考える前にサウンドトラックを選びます。エネルギッシュで、ブランドにふさわしく、盛り上がり、明確なドロップ、満足感のある終わりがある曲にします。BPMだけでエネルギーは決まりません。単調なシンセのループを安易に選ばないでください。ライセンスを取得した楽曲か、そのような音楽の展開を持つオリジナルスコアを使います。目安は約120 BPMです。numpyで曲を解析してビートグリッドを作り、ダウンビートから始め、曲の使用範囲を調整して、プロダクトの見せ場にドロップが来るようにします。毎拍で何かが起こるようにします。スネアで盛り上がる場面ではタイピングを32分音符に合わせ、強い動きは拍から8分音符、16分音符へと加速させます。
8. UIサウンドはすべて合成し、測定したピークをキックのピークグリッドに合わせて配置します。 ビジュアルと同じくらい真剣にサウンドデザインに取り組みます。映像に豊かさと生命感を与える、オリジナルで重層的な効果音を作ります（Hoopoe Clubの映像はその一例です）。創造性を発揮してください。
9. ループ： 映像をループさせる場合、最後のフレームを最初のフレームと同じにします。カーソルの位置と速度も含めて一致させてください。そうしないと、ループが途切れます。

ビジュアル

• 配色： ブランド独自のデザインシステムを使います（Cheerfulの場合、温かみのあるオフホワイトのキャンバス、ブランドグラデーション #B04ADC → #E35C91 → #FF7247 → #FFB21E、ライラック／ピーチの光だまり、インク #111827）。「黒＋紫1色」にはしません。すっきりしたUIフォントを1つ使います。
• 禁止事項（当初のブリーフで指定され、Chanが変更しない限り引き続き適用）： 弾むようなイージング、パーティクルの炸裂、グロー、UIクローム上のグラデーション、アイコンの線幅の不一致、間延びした時間、テンプレート風の見た目。

コンテンツ

• 実データを使います。 Chan：「データベースにアクセスできます。画像を選ぶだけでなく、創造性を発揮してください。」実際の、根拠を示せる数値を読み取り専用で取得し（リーチしたクリエイター数、送ったギフト数、追跡した投稿／閲覧数など）、ロール式のカウンターとして表示します。細かなストーリー（クリエイター、ブランド、メッセージ）は創作してもかまいませんが、大きな数値は事実に基づかせ、レポートでどちらがどちらかを明記します。
• 顧客ロゴは1つずつ、ドン、ドン、ドンと表示します。 ウェブサイト風の「信頼されている企業」ロゴ一覧にはしません。ヒットごとにサイズと色を変える図形は1つだけにし、実際にキャンペーンを実施したブランドだけを使います。
• ライセンス取得済みのメディアのみを使います。 フリーライセンスの動画・静止画素材は、アイテムごとにライセンスを確認します（Mixkitには、制限付きの素材も混在しています）。手っ取り早くプロダクト独自のマーケティング画像を使うことは禁止です。
• 彼が気に入った要素は残します。 Cheerfulの場合、ヘッドラインのイントロ、入力されていくブリーフ、発見検索の壁面表示、ワードマークで終わる演出の評価が高かったため、バージョン間でも印象的な見せ場は維持し、残りを改善していきます。

プロセス

1. まず入力を確認します（すでに提示されている場合、または「お任せ」と言われた場合を除く）：どのような形にするかを示す8～12の状態、カラーパレット（白黒、アクセントカラー1色、またはブランドシステム）、および著作権フリーの約120 BPMの楽曲を確認します。 「Director's cut / Director picks」の選択肢も提示します。通常はこれらが選ばれます。
2. まず演出し、その後で実装します。 アニメーションコードを書く前に、簡潔なクリエイティブプランを確定します： プロダクトのストーリーと見せ場、ブランドの表現、サウンドトラックと音楽の展開、続いてフレーミング、主要なインタラクション、トランジション、サウンドキューを含むビートごとのシーンプランです。プランを提示し、ディレクターとして不足を解消してから、実装に進みます。求められない限り、承認を待つ必要はありません。 各シーンに明確な要点と読み取れる時間を設け、デモ全体を通じて、誰もがわかる顧客事例を一貫して使います。映像向けに実際のプロダクトの動作を簡略化しても、存在しない操作や結果を作り出してはいけません。
3. seek(t) 内の時刻からすべてのスタイルを計算する単一のHTMLファイルを作成します。CSSトランジション、タイマー、フレーム間の状態保持は使いません。
4. 全体をレンダリングする前に、ビートごとに1フレームをレンダリングし、コンタクトシートにまとめます。グリッドからのずれ、窮屈さ、空白、読みづらさ、重なりを修正します。続いて、トランジションを±0.1秒の位置で確認します。全体をレンダリングする前に、低解像度の動画ドラフトを通常速度で確認し、読み取れる表示時間、カーソル操作、滑らかなモーフィングを検証します。静止画だけではタイミングが適切かどうかを確認できません。
5. Playwrightのサブフレームからffmpegのtmixモーションブラーを適用し、60 fps H.264と音声を組み合わせて全体をレンダリングします。
6. 1秒ごとのストーリーボードとフレーム差分スキャンで、継ぎ目や不具合がないかMP4そのものを検証します。通常速度でペース配分とトランジションを確認し、ちらつきをチェックして、映像に対する音声キューの同期を検証します。再生できる場合は音声を聴き、実際に聴いた内容と測定結果を区別します。tailnet経由で配信し、リンク、コンセプト、シーン一覧、実データと創作データの区別、DECISION、注意点（音声を実際に聴いたか、測定のみか、ロゴや肖像の使用許可）を報告します。

時間を無駄にしやすい落とし穴

• カメラで拡大縮小する要素には、will-change を決して指定しません。テキストがぼやけて表示されます。
• スプリングはイベント発生時に開始します。時刻Tに到達させたい目標は、settle-lead分だけ前に設定します。
• 不透明度をゼロにする hide() は、描画関数で元に戻さないと、要素が非表示のままになります。
• プロポーショナル数字はオドメーターで飛び跳ねます。各スロットを最終的な字形に合わせてサイズ設定し、縦方向のみをクリップします。
• VPSでは、ディスク容量に余裕がありません（4秒単位でレンダリングし、PNGを削除します）。Chromiumはearlyoomに最初に終了させられます（自動再試行、再起動、完了時に強制終了）。紛れ込んだ /tmp/inspect.py が標準ライブラリを隠してしまいます（プロジェクトディレクトリからPythonを実行します）。PreToolUseフックは一部のffmpegのglob文字列をブロックします。

出力

serve <dir> で配信する deliver/ フォルダーに納品物をまとめます（tailnet URLを使用し、localhostは使用しません）： MP4、1秒ごとのストーリーボード、主要な静止画、比較用の前バージョン。