product-launch-video

製品ローンチ動画のワークフロー

Remotion を使用して、15～30 秒の製品ローンチ動画を制作するための再現可能なワークフローです。X、LinkedIn、YouTube Shorts、ランディングページ向けの機能ローンチ、アプリのデモ、ビフォー／アフターの変化を紹介する動画を制作するためのものです。

使用する場面

• 製品ローンチで、SNS向けの短い動画が必要な場合
• X／LinkedIn向けの新機能デモ
• 製品のビフォー／アフターを紹介する動画
• ランディングページのヒーロー動画

前提条件

• Node.js 18+
• このリポジトリをクローンし、npm install を実行済みであること
• ffmpeg（GIFを書き出す場合のみ）
• 製品の画面録画（30～60秒。デザインの参考としてのみ使用）
• ローンチ用コピー：見出し、タグライン、主な機能、トーンの方向性

ワークフロー

1. 入力情報を集める（並行して実施）

何かを書く前に、次の情報を並行して集めます。

• ブリーフ — ローンチ投稿、ランディングページ、概要資料。見出し、タグライン、主な機能、トーンを抜き出します。
• ブランドトークン — フォント、色、アイコン、ロゴ。デザインシステムがあれば、その値を確認します。なければ、公開中の製品から取得します。
• 画面録画 — 実際に製品を使っている様子を30～60秒録画したもの。これはデザインの参考資料であり、実際のUIコピーを確認するための情報源です。実際のアプリに存在しないラベル、エージェント名、機能を作り出してはいけません。
• 音声のトーン合わせ（任意） — 動画にナレーションがある場合や、特定の声でキャプションを代筆する場合は、最近の投稿やクリップを確認して、話すリズムや言葉選びを合わせます。

2. コードを書く前に絵コンテを作る

ショットリストの表を作成します。すぐにコードを書き始めたい気持ちは抑えましょう。

ビート	時間	ビジュアル	テキストオーバーレイ

再レンダリングを防ぐためのルール：

• 実際の製品UIのコピーを使います。 実際のアプリのスクリーンショットを撮り、表示内容をそのまま反映します。作り物のラベルは、ローンチ動画が偽物らしく見える最大の原因です。
• 製品名ではなく、視聴者の課題から始めます（フック）。
• 3秒以内に製品を登場させます（a16z Speedrun によるローンチ動画の調査）。
• ビフォー／アフターが見せ場です — 動画全体をそれを中心に設計します。
• すべてのテキストを720pで読めるようにします（スマートフォンのフィードを想定）。最小サイズは18px相当です。
• SNSでの再生の85％以上はミュート状態です — すべてのキャプションを映像に焼き込みます。明示的に求められない限り、ナレーションは付けません。

3. Remotionで構築する

このリポジトリには最小限のRemotionスキャフォールドが含まれています。src/LaunchVideo.tsx から始めて、カスタマイズします。

• コンポジションはシンプルに保ちます。複雑さが増したら、シーン、テーマ、フォント、モックデータをそれぞれ独立したファイルに切り出します。
• src/Root.tsx に新しいコンポジションを登録します（複数のプラットフォームに配信する場合は、アスペクト比ごとに1つ）。
• public/ 内のアセットには staticFile() を使用します。
• デフォルトは1920×1080、30fps、h264 crf 18です。プラットフォーム固有の上書き設定については、公開セクションを参照してください。

フォント読み込みのパターン（文字の欠けやレイアウトのちらつきを防ぎます）：

const [handle] = useState(() => delayRender('fonts'));
useEffect(() => {
  const font = new FontFace('Name', `url(${staticFile('fonts/file.otf')})`);
  font.load().then(f => { document.fonts.add(f); continueRender(handle); });
}, [handle]);

クロスフェードトランジション — シーンごとではなく、オーケストレーター／ルートのレベルで処理します。シーンごとの終了フェードはオーケストレーターと競合し、二重のフェードを引き起こします。

4. レンダリングと監査のループ

# Single frame audit
npx remotion still <comp-id> out/test.png --frame 60

# Full render
npx remotion render <comp-id> out/video.mp4 --codec=h264 --crf=18

まず各シーンから1フレームずつレンダリングします。全体をレンダリングする前に、レイアウトやクリッピングの問題を修正します。次の点を確認します。

• テキストが欠けていないこと（ディセンダーのあるセリフ体フォントでは、行の高さを1.2以上にする）
• パネルが予期せず縦に積み重なっていないこと（AbsoluteFill のデフォルトは flex-direction: column）
• バブル、カード、チャットUI内のコンテンツが途中で切れていないこと

5. マルチエージェントによるレビュー（見落としをすべて拾う工程）

2〜3回自分で反復した後、約20フレーム（見せ場と場面転換のフレーム）を out/review/ に書き出し、4つのレビューページェントを並行して起動します。それぞれがPNGフレームを確認し、優先順位を付けた修正リストを返します。

1. デザイン／レイアウトの批評担当 — 傾いた要素、ずれ、比率、トリミング
2. テキスト／読みやすさの批評担当 — 720pでの視認性、コントラスト、途切れ、誤字
3. ナラティブ／ペース配分の批評担当 — ストーリー展開、注目度の山と谷、尺の妥当性、CTAの強さ
4. ブランド一貫性の批評担当 — フォント、色、UIの外観が実際の製品と一致しているか

次のレンダリングに進む前に、4人の批評担当の出力と自分のメモをまとめ、1つの修正計画を作成します。この工程では、50回レンダリングした後には見えなくなる問題を見つけられます。

6. フィードバックを反映する

QuickTime（または好みのプレーヤー）でレンダリングを確認し、反復します。よくあるフィードバックとその修正方法は次のとおりです。

• 「このテキストが切れています」 → 行の高さまたはオーバーフローの問題です
• 「動きがぎこちないです」 → アニメーションのタイミングが速すぎる、または遅すぎます。カウンターの数字が切り替わる速度を確認します
• 「このラベルは作り物ですね」 → 画面録画にある実際のUI文言に置き換えます
• 「ここをもっと長く表示してください」 → シーンの長さを延ばし、アニメーションのタイミングはそのままにします
• 「全体的に少し長いです」 → 重複するシーンをカットします（通常、ナラティブの批評担当がどれを削るべきか特定します）

7. 適切なプラットフォーム向けに仕上げる

レンダリングする前に、公開先のプラットフォームをユーザーに確認してください。 アスペクト比と尺の制限はプラットフォームによって異なります。16:9のクリップを後から9:16にトリミングすると、たいてい見栄えが悪くなります。アスペクト比が異なる複数のプラットフォームに動画を公開する場合は、それぞれに別個のRemotionコンポジションを作成し、個別にレンダリングします。

このリポジトリのデフォルトは1920×1080の横向きです。対象プラットフォームに合わせて、src/Root.tsx の寸法を変更してください。

プラットフォーム	アスペクト比	推奨サイズ	最大尺
X / Twitter（フィード）	16:9	1920×1080	2:20
X / Twitter（縦向き）	9:16	1080×1920	2:20
LinkedIn（フィード、横向き）	16:9	1920×1080	10分
LinkedIn（フィード、正方形）	1:1	1200×1200	10分
YouTube（標準）	16:9	1920×1080	—
YouTube Shorts	9:16	1080×1920	60秒
Instagram Feed	4:5	1080×1350	60秒
Instagram Reels	9:16	1080×1920	90秒
TikTok	9:16	1080×1920	3分

推奨する納品物一式：

• 希望するアスペクト比ごとのMP4
• 埋め込みやSlackでの共有用GIF版（下記のレンダリングコマンドを参照）
• 各プラットフォーム向けのキャプション案（長さやトーンはそれぞれ異なります）
• XやLinkedInの返信用スレッド／機能一覧版

苦労して得た教訓

• 製品のUIラベルを決して作り出さないでください。 実際のアプリのスクリーンショットを撮り、文言をそのまま再現します。ローンチ動画が気恥ずかしい仕上がりになる最大の原因はこれです。
• 自社製品にしか実現できない瞬間を見つけ、最も長く見せてください。 すべてのローンチ動画には、差別化につながる見せ場があります。それ以外の動画部分は、その見せ場を引き立てるために使います。各機能に尺を均等に割り当てないでください。
• ビフォー／アフターは、同時に見せるより時間差をつけるほうが効果的です。 まず「ビフォー」を0.7〜1秒表示し、その後「アフター」をスプリングのオーバーシュートと色のフラッシュを加えて勢いよく登場させます。両方を同時に表示するより、はるかにドラマチックです。
• カウンターアニメーション：1フレームごとの数字の変化速度を自然に感じる速さに合わせます。目標の数値が大きい場合、同じアニメーション時間に収めず、時間を延ばしてください。
• エンドカードは見出し1つとCTAにします。 3行の文言を重ねないでください。より印象的に聞こえるよう自分で考えた文句ではなく、ランディングページで実際に使われているタグラインを使います。
• 「問題のある状態」は、説明なしでも視聴者がわかるものを選びます。 何が問題か理解するのに1文必要なら、フックが抽象的すぎます。

レンダリングコマンド

# Preview in browser (hot-reload studio)
npm run studio

# Single frame (fastest way to audit)
npx remotion still <comp-id> out/frame.png --frame 60

# Full video
npx remotion render <comp-id> out/video.mp4 --codec=h264 --crf=18

# GIF (for embeds — requires ffmpeg)
ffmpeg -y -i out/video.mp4 \
  -vf "fps=15,scale=960:-1:flags=lanczos,split[s0][s1];[s0]palettegen=max_colors=128[p];[s1][p]paletteuse=dither=bayer:bayer_scale=3" \
  out/video.gif