ローンチ動画
プレミアムで高エネルギーの15〜60秒のローンチ動画を作り、スクロールを止めてコンバージョンを生み出します。クラシックな構成—フック→ティーザー→リビール→フィーチャーモンタージュ→エンドカードCTA—を音楽に合わせてカットし、すべてのプラットフォームのアスペクト比で書き出します。
使用するタイミング
- プロダクトドロップ、機能発表、トレーラー、ハイプリール（15〜60秒）
- ランディングページ向けの「シズル」ヒーロー動画
- ビート同期リビール（ブランドモーメントがドロップで炸裂）
構成
| ビート | 役割 | 一般的な配分（30秒の場合） |
|---|---|---|
| フック（0〜3秒） | 目を引くフレーム/モーションでスクロールを止める | 0〜3秒 |
| ティーザー | プロダクトをほのめかし、好奇心を高める、ビートに同期 | 3〜9秒 |
| リビール | プロダクト/ロゴが音楽のドロップに合わせて登場 | 9〜13秒 |
| フィーチャーモンタージュ | 高速、キネティック、1ショットあたり1つのメリット | 13〜25秒 |
| エンドカード | ロゴ+タグライン+CTA、クリーンにホールド | 25〜30秒 |
同じ割合を15秒（よりタイト）または60秒（モンタージュを長く、フックはそのまま）にスケールします。
絶対に譲れない2つのルール
- サウンドデザインが映像をリードする。 まずトラックをロックし、ビートとドロップをマークしてから、それらのマークに映像をカットします。完成したカットに後からスコアを付けないでください—リビールはドロップに「正確に」合わさなければならず、「だいたい近く」ではいけません。
- 質は量に優先する。 いくつかの完璧なショットが、多くの中程度のショットに勝ります。プレミアムでないショットは容赦なくカットします。
ビート同期リビール（ドロップに合わせて）
オーディオからドロップの正確なタイムコードを見つけ、そのフレームでブランドマークが完全に表示されるようにリビールのタイミングを合わせ、インパクトのためにマイクロなオーバーシュートを加えます。
import gsap from "gsap";
const DROP = 9.0; // 秒、トラックから測定
const tl = gsap.timeline({ paused: true });
// ティーザーはドロップまで緊張を高める
tl.to(".tease", { opacity: 1, scale: 1.05, duration: DROP, ease: "power1.in" })
// リビールはドロップフレームでSNAP
.set(".logo", { opacity: 1 }, DROP)
.fromTo(".logo", { scale: 1.18 }, { scale: 1.0, duration: .18, ease: "power3.out" }, DROP)
.fromTo(".flash", { opacity: .9 }, { opacity: 0, duration: .25 }, DROP); // ホワイトフラッシュ
audio.addEventListener("play", () => tl.play());
固定グリッドではなく、トランジェントでカットします：最も強いカットはキック/スネアのヒットに合わせます；ドロップに向けて速度をランプアップ（タイムリマップ）し、その後ハードカットで抜けます。
キネティックフィーチャーモンタージュ
1ショットあたり1つのメリット、各ショット約0.6〜1.0秒、ビートに合わせてハードカット。各ショット = 太字のキーワード + 1つの補助的なビジュアル。
.feature { opacity:0; }
.feature.in .kw { animation: pop .35s cubic-bezier(.22,1,.36,1) forwards; }
.feature.in .word { display:inline-block; }
@keyframes pop { from { opacity:0; transform:translateY(24px) } to { opacity:1; transform:none } }
// トラックから測定したビートマークに基づいてショットを駆動
const beats = [13.0, 13.8, 14.6, 15.4, 16.2]; // 秒
beats.forEach((t, i) => scheduleAt(t, () => showFeature(i)));
モンタージュ全体で1つのモーションランゲージを維持します（同じ出現カーブ、同じ終了）これにより、スピードが混乱ではなく自信として伝わります。
エンドカード
ロゴ+タグライン+CTAを静止してクリーンに2秒以上ホールドします。CTAと競合する忙しないモーションは避け、ブランドを落ち着かせます。ブランドモーメントを最も強い残りのビートに合わせ、その後クリーンなボタン/URLを配置します。
マルチアスペクト書き出し
1つのマスターから全てのアスペクトにクリーンにクロップできるように、中央のセーフゾーンを考慮してコンポーズします。
| アスペクト | 用途 | 解像度 | セーフゾーン |
|---|---|---|---|
| 16:9 | YouTube、ランディングヒーロー、X | 1920×1080 | 主要コンテンツを中央90%以内に保持 |
| 9:16 | リール、TikTok、ショート、ストーリーズ | 1080×1920 | テキストは中央80%の高さ以内；上部12% / 下部18%は避ける（UI） |
| 1:1 | フィード投稿 | 1080×1080 | 16:9フレームの中央正方形 |
ヒーロー/ロゴ/CTAは1:1の中央正方形内にデザインし、すべてのクロップで生き残るようにします。16:9のマスターをレンダリングし、同じプロジェクトから9:16と1:1を（単にレターボックスするのではなく）リフレームします。
出力チェックリスト
- トラックを最初にロックし、リビールが正確にドロップに合っている
- フックが最初の3秒を獲得している
- モンタージュ：1ショットあたり1つのメリット、ビートに合わせたハードカット、一貫したモーションランゲージ
- エンドカードが2秒以上ホールドされ、1つの明確なCTAがある
- 16:9 + 9:16 + 1:1の書き出し、主要コンテンツが中央セーフゾーン内にある
- プレミアムなショットのみ—中程度のものは一切残さない
納品と検証（レンダリングスチル→MP4）
パッケージ化されたヘルパー（
scripts/）：scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.pngでスチルをタイル表示し、scripts/probe-mp4.sh out.mp4 [WxH] [fps]でエンコードを検証します。scripts/README.mdを参照。
ローンチ動画がRemotionで構築/レンダリングされる場合は、それをヘビー層として扱います：<Composition>（+ zod schema + defaultProps）を登録し、すべての値をuseCurrentFrame()で駆動します—レンダリング時にGSAPタイムライン / オーディオイベントコールバック / Date.now() / Math.random()を使用しないでください（ビートとドロップのタイムコードをpropsにベイクします）。成果物 = アスペクトごとにレンダリングされた out/*.mp4（プロジェクトファイルも含む）。
検証ループ — スチルをレンダリング → 検査 → エンコード。 defaultPropsだけでなく、出荷用のprops（実際の見出し/タグライン/CTA）を使用してアークをサンプリングします。
# フック→リビール→エンドカードのフレーム正確なスチル
npx remotion still Launch out/f-hook.png --frame=24 --props=props/launch.json # フックが最初の3秒を獲得
npx remotion still Launch out/f-reveal.png --frame=270 --props=props/launch.json # ロゴがドロップフレームでSNAP
npx remotion still Launch out/f-end.png --frame=899 --props=props/launch.json # エンドカード：ロゴ+タグライン+CTA、クリーンホールド
# それぞれを検査：忠実度（プロダクト/ロゴ、タグライン、CTAテキストが正確、ブランドカラーが正しい、リビールがドロップフレームにある）
# およびアーティファクト（テキストオーバーフロー、オフキャンバス、9:16の下部3分の1にあるCTA、欠落フォント、フラッシュフレームが固着）
マルチアスペクト — 全てをエンコードする前に、各アスペクトでマスターを検証。 リフレームバグ（ヒーローがセーフゾーンから押し出される）はすべてのアスペクトで繰り返されます；一度キャッチすれば十分です。
for ar in 16x9 9x16 1x1; do # アスペクトごとにリビール+エンドカードをチェック
npx remotion still Launch "out/reveal-${ar}.png" --frame=270 \
--props=props/launch.json --props-merge="{\"aspect\":\"${ar}\"}"
done
# すべてのアスペクトでスチルがクリーン？→ それぞれをエンコード：
for ar in 16x9 9x16 1x1; do
npx remotion render Launch "out/launch-${ar}.mp4" --props=props/launch.json --props-merge="{\"aspect\":\"${ar}\"}"
done
npx remotion render Launch out/demo.gif --codec=gif --props=props/launch.json # READMEデモ
終了前に確認すること：
npx remotion stillがフック/リビール/エンドカードでクリーンにレンダリングされる—エラー、フォント/アセット欠落なし- ロゴ/タグライン/CTAテキストが正確、ブランドカラーが正しい；リビールがドロップフレームに合っている；主要コンテンツが中央セーフゾーン内にあり、9:16の下部3分の1を避けている
- フレーム駆動のみ—GSAP/オーディオコールバックタイミング、
Date.now()、Math.random()なし（ビート/ドロップはpropsにベイク） - 出荷用propsが正しくレンダリングされる（
defaultPropsだけでない）；エンドカードが2秒以上ホールドされ、1つのCTAがある - エンコード前にマスターが16:9 + 9:16 + 1:1で検証されている；MP4が再生される；（任意）README用のGIF
参考ファイル
references/launch-structure.md— 30秒動画用のショットバイショットテンプレート（15〜60秒にスケーラブル）、ビート同期リビールタイミング、キネティックモンタージュショットレシピ、サウンドデザインが映像をリードするワークフロー、16:9 / 9:16 / 1:1の詳細なマルチアスペクトセーフエリアマップを含む