launch-video

ローンチ動画

スクロールする手を止め、コンバージョンにつなげる、上質でエネルギッシュな15～60秒のローンチ動画を制作します。定番の構成――フック → 期待感の醸成 → お披露目 → 機能モンタージュ → エンドカードのCTA――を組み立て、音楽に合わせて編集し、あらゆるプラットフォームのアスペクト比で書き出します。

使用する場面

• 製品の発売、機能の発表、予告編、期待感を高める映像（15～60秒）。
• ランディングページの「シズル感」を演出するヒーロー動画。
• ブランドがドロップの瞬間に登場する、ビートに同期したお披露目。

構成

ビート	役割	目安の配分（30秒の場合）
フック（0～3秒）	スクロールする手を止める、印象的なフレームや動きを見せる	0～3秒
期待感の醸成	製品をほのめかし、ビートに合わせて好奇心を高める	3～9秒
お披露目	音楽のドロップに合わせて製品／ロゴを登場させる	9～13秒
機能モンタージュ	速く、躍動感のある映像で、1ショットにつき1つのベネフィットを見せる	13～25秒
エンドカード	ロゴ＋タグライン＋CTAをすっきりと見せる	25～30秒

同じ比率を15秒（よりタイトに）または60秒（モンタージュを長く。ただしフックは長くしない）の動画にも適用します。

絶対に守るべき2つのルール

1. 映像より先にサウンドデザインを決めます。 まず楽曲を確定し、ビートとドロップの位置を記録してから、その印に合わせて映像を編集します。完成した動画にあとから音楽を付けてはいけません。お披露目はドロップの「近く」ではなく、ドロップに合わせます。
2. 量より質を重視します。 完璧なショット数本は、平凡なショットを何本も並べるより効果的です。上質でないショットはすべてカットします。

ドロップに同期したお披露目

音声内のドロップの正確なタイムコードを見つけ、ブランドマークがそのフレームで完全に表示されるようにお披露目のタイミングを調整します。インパクトを出すため、わずかに行き過ぎる動きを加えます。

import gsap from "gsap";
const DROP = 9.0; // seconds, measured from the track
const tl = gsap.timeline({ paused: true });
// tease builds tension up to the drop
tl.to(".tease", { opacity: 1, scale: 1.05, duration: DROP, ease: "power1.in" })
// reveal SNAPS on the drop frame
  .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); // white hit
audio.addEventListener("play", () => tl.play());

固定グリッドではなく、トランジェントに合わせてカットします。最も強いカットはキック／スネアのヒットに合わせます。ドロップに向けて速度を上げ（タイムリマップ）、ドロップが終わったらハードカットします。

躍動感のある機能モンタージュ

1ショットにつき1つのベネフィットを見せ、各ショットは約0.6～1.0秒にします。ビートに合わせてハードカットします。各ショットには、大胆なキーワードを1つと、それを補うビジュアルを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 } }

// drive shots off beat marks measured from the track
const beats = [13.0, 13.8, 14.6, 15.4, 16.2]; // seconds
beats.forEach((t, i) => scheduleAt(t, () => showFeature(i)));

モンタージュ全体で、同じモーション表現（同じ開始カーブ、同じ終了方法）を保ちます。そうすれば、スピードが混乱ではなく自信として伝わります。

エンドカード

ロゴ＋タグライン＋CTAを、動かさずにすっきりと2秒以上表示します。CTAの邪魔になるような煩雑な動きは避け、ブランドの印象が定着する時間を取ります。残りの中で最も強いビートにブランドの登場を合わせ、最後に明快なボタン／URLを表示します。

複数アスペクト比での書き出し

中央のセーフゾーンを意識して構成し、1つのマスターからどのアスペクト比にもきれいにトリミングできるようにします。

アスペクト比	用途	解像度	セーフゾーン
16:9	YouTube、ランディングページのヒーロー、X	1920×1080	重要なコンテンツを中央90%以内に配置
9:16	Reels、TikTok、Shorts、Stories	1080×1920	テキストは中央80%の高さ以内に配置。上部12%／下部18%（UI領域）を避ける
1:1	フィード投稿	1080×1080	16:9フレームの中央の正方形

ヒーロー／ロゴ／CTAは中央の1:1の正方形の範囲内に配置し、どのトリミングでも残るようにします。まず16:9のマスターを書き出し、同じプロジェクトから9:16と1:1にリフレームします（単にレターボックス化しないでください）。

出力チェックリスト

• 先に楽曲を確定し、お披露目をドロップに正確に合わせる。
• 最初の3秒で視聴者を引きつけるフックにする。
• モンタージュは1ショットにつき1つのベネフィットを見せ、ビートに合わせてハードカットし、一貫したモーション表現を保つ。
• エンドカードは1つの明確なCTAとともに2秒以上表示する。
• 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）を使って流れを確認します。

# Frame-exact stills across hook → reveal → end-card
npx remotion still Launch out/f-hook.png   --frame=24  --props=props/launch.json   # hook earns first 3s
npx remotion still Launch out/f-reveal.png --frame=270 --props=props/launch.json   # logo SNAPS on the drop frame
npx remotion still Launch out/f-end.png    --frame=899 --props=props/launch.json   # end card: logo+tagline+CTA, clean hold
# inspect each: fidelity (product/logo, tagline, CTA text exact, brand colors right, reveal at the drop frame)
#   AND artifacts (text overflow, off-canvas, CTA in the 9:16 bottom third, missing font, flash frame stuck on)

複数アスペクト比 — すべてのアスペクト比をエンコードする前に、それぞれでマスターを検証します。 リフレームの不具合（ヒーローがセーフゾーンから外れるなど）は、すべてのアスペクト比で繰り返されます。早めに見つけましょう。

for ar in 16x9 9x16 1x1; do                                 # check reveal + end card per aspect
  npx remotion still Launch "out/reveal-${ar}.png" --frame=270 \
    --props=props/launch.json --props-merge="{\"aspect\":\"${ar}\"}"
done
# stills clean in all aspects? → then encode each:
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 demo

完了前に確認すること：

1. npx remotion still でフック／リビール／エンドカードがエラーやフォント・アセットの欠落なくレンダリングされる。
2. ロゴ／タグライン／CTA のテキストが正確で、ブランドカラーが正しい。リビールがドロップのフレームに合い、主要コンテンツが中央のセーフゾーン内にあり、9:16 の下部 3 分の 1 にかからない。
3. フレーム駆動のみを使用し、GSAP／オーディオコールバックによるタイミング制御、Date.now()、Math.random() を使わない（ビート／ドロップは props に埋め込む）。
4. 出荷する props で正しくレンダリングされる（defaultProps だけでなく）。エンドカードは 2 秒以上表示し、CTA は 1 つにする。
5. エンコード前に 16:9、9:16、1:1 でマスターを検証する。MP4 が再生できる。README 用の GIF は任意。

参考ファイル

• references/launch-structure.md — 30 秒動画のショットごとのタイムコード付きテンプレート（15～60 秒に拡張可能）、ビートに同期したリビールのタイミング、キネティックモンタージュのショットレシピ、サウンドデザイン主導の映像制作ワークフロー、16:9／9:16／1:1 の詳細な複数アスペクト比セーフエリアマップを掲載しています。