製品ローンチ動画は何をしますか？

製品を手にする前に、視聴者にその製品を感じさせる、映画的でインパクトのある製品ローンチ動画をデザイン・構築します。

このスキルは単一の美学に固定されません。ビジュアルスタイルは製品のDNAに適応します。重要なのは、選択された方向性にかかわらず、その実行がモーション、ライティング、構図、ビジュアルストーリーテリングにおいて最高水準を反映していることです。

基本理念

すべての決定を支配する3つの原則：

意図性、装飾性ではない。 すべてのビジュアル要素、動き、光源は目的を持たなければなりません。ミニマリストであれマキシマリストであれ、単にスペースを埋めるために存在するものはありません。すべてがナレーティブを推進し、機能を強調し、特定の感情を喚起します。

感覚的な翻訳。 優れたローンチ動画は、視聴者に製品を感じさせます。抽象的な概念（速さ、セキュリティ、快適さ）や物理的特性（重さ、質感、応答性）を、視覚的・聴覚的な体験に変換します。製品が速いのであれば、視聴者は速度を感じるべきです。エレガントであれば、視聴者はすべてのフレームに洗練を感じるべきです。

コントラストの極致。 優れた動画は対比によって成り立ちます。スケール（マクロなディテールとワイドショット）、ペーシング（熱狂的なエネルギーとスローモーションのリビール）、照明（影とハイライト）、オーディオ（静寂と重いビート）のコントラストを利用して、注意を引きつけるダイナミックな緊張感を生み出します。

使用するタイミング

製品ローンチまたは告知動画を作成する場合
映画的な品質でデモや機能ウォークスルーを構築する場合
ブランド発表やティーザートレーラーを作成する場合
モーショングラフィックスを使用したアニメーション製品ショーケースを制作する場合
任意の製品の動画構造をストーリーボード化および計画する場合
製品のビジュアル、写真、コンセプトを動画ナラティブに変換する場合

フェーズ0：製品を理解する

ビジュアル作業の前に、何を紹介しているのかを深く理解します。これがすべてを形作ります。

ユーザーに（一度に、質問を小出しにせずに）尋ねること：

製品 — 製品は何ですか？何をするものですか？どのような問題を解決しますか？
視聴者 — 誰がこの動画を見ますか？開発者？消費者？投資家？社内チーム？
コアメッセージ — 視聴者が視聴後に覚えていてほしい唯一のことは何ですか？
トーン — 視聴者にどのように感じてほしいですか？（印象的 / 興奮 / 落ち着き / インスパイア / 力づけられる）
尺 — どのくらいの長さですか？（15秒のティーザー / 30秒のスポット / 45〜60秒の完全版 / 90秒以上のディープダイブ）
アセット — ロゴ、製品写真、スクリーンショット、録画、ブランドカラー、フォントはありますか？
ナレーション — 動画にナレーションは必要ですか？必要な場合、言語は？声の特徴（性別、トーン、エネルギーレベル）の希望はありますか？
参考 — 参考にしている動画はありますか？（Appleのキーノートスタイル、Nikeの製品フィルム、Stripeの開発者向け美学、遊び心のあるNotionの雰囲気、高級時計のコマーシャルなど）
公開コンテキスト — この動画はどこに投稿されますか？（ランディングページ、X/Twitter、LinkedIn、YouTube、Shorts/Reels/TikTok、投資家向けデッキ、社内デモ。）アスペクト比、キャプション、ペーシングはこれに依存します。

ユーザーが会話の中で既にコンテキストを提供している場合は、そこから回答を抽出し、ギャップを確認します。

ゲート：上記9つの質問すべてに対する回答（ユーザーから、またはコンテキストから推測して）が得られるまで、フェーズ1に進まないでください。アセットが提供された場合は、それらを監査します — 利用可能なすべてのアセットをリストアップし、ナラティブを強化するためにそれぞれをどのように使用するかを計画します。すべてのアセットが表示されなければならないわけではありませんが、理由なく無視されるべきものはありません。

フェーズ1：美学を確立する

これが最も重要なクリエイティブ上の決定です。 美学は、この特定の製品のためにデザインされたように感じられなければなりません — ロゴが入れ替えられただけの汎用テンプレートではありません。

ステップ1.1：ビジュアル方向性を選択する

製品の個性とユーザーのトーンの好みに基づいて、2〜3の明確な美学方向性を提案します。各方向性には以下を含める必要があります：

名前 — 簡潔で示唆に富むラベル（例：「ミッドナイトプレシジョン」「ウォームアナログ」「エレクトリックパルス」）
ムード — 感情的な雰囲気の2〜3文の説明
カラーパレット — 4〜5色の色相コードと役割（背景、プライマリ、アクセント、テキスト、ハイライト）
タイポグラフィ — Google FontsまたはFontshareからの表示フォント＋本文フォントのペアリング（Inter、Roboto、システムフォントは不可）。書体は製品の個性を体現するものでなければなりません：
- エレガントなセリフ（例：Playfair Display、Cormorant）→ 高級、エディトリアル、プレミアム
- 大胆なグロテスクサンセリフ（例：Space Grotesk、Satoshi）→ テック、大胆、モダン
- ジオメトリックサンセリフ（例：Plus Jakarta Sans、General Sans）→ クリーン、信頼性、SaaS
- キネティックまたはバリアブルフォント（例：Syne、Cabinet Grotesk）→ ユースカルチャー、クリエイティブ、遊び心
- モノスペースまたはコードフォント（例：JetBrains Mono、Fira Code）→ 開発者ツール、ターミナル美学
フォントはブランドの声を可視化したものです。製品の個性と書体のミスマッチは、他のすべてのデザイン決定を弱体化させます。
モーションキャラクター — 物事がどのように動くか（スナップするバネ、滑らかなグライド、弾力のあるバウンス、映画的なスローのリビール）
シグネチャーエレメント — この動画を特徴的にする1つのビジュアルモチーフ（グラデーションメッシュ背景、ガラスモーフィズムカード、パーティクルフィールド、幾何学パターン、光の筋、映画的な写真処理、コールアウトラベル付き製品クローズアップなど）

これらをテキストの壁ではなく、簡潔なカードとして提示します。ユーザーが1つを選ぶか、要素を組み合わせます。

悪い例（「AIスロップ」チェックリスト）

一般的なAI生成動画の決まり文句を避ける：

暗い背景のパープルグラデーション（最大の決まり文句）
表示テキストにInter/Roboto/システムフォントを使用
均一なタイミング — すべてが同じ速度と遅延で入ってくる
アイコンとしての絵文字
奥行きや影のないフラットで均一に照らされたシーン
同一のアニメーションを持つ既製のカードグリッド
コンテンツとの空間的関係なしに単に「フェードイン」するテキスト
背景が単なる無地の色

ゲート：ユーザーに2〜3の美学方向性を提示します。ユーザーが方向性を選択または確認するまで、フェーズ2に進まないでください。ユーザーが「とにかくやってくれ」と言った場合は、製品の個性に最も合う方向性を選び、先に進む前に明示的に選択を述べてください。

フェーズ2：ストーリーボード

ストーリーボードは設計図です。すべてのシーンはその存在を正当化しなければなりません。

必須：コードを書く前にストーリーボード全体を書き出します。以下のスキーマを使用して、プロジェクトルートディレクトリにstoryboard.jsonとして保存します。このセクションの最後にあるストーリーボードレビューチェックリストと照らし合わせて確認します。連続する2つのショーケースシーンが同じレイアウトやアニメーションパターンを使用してはなりません。

「無制限ビジュアル予算」ルール

ストーリーボードを概念化する際に、ユーザーが提供した生のアセットに想像力を制限しないでください。

ユーザー提供の2Dアセット（生のスクリーンショット、フラットなロゴ、基本的な写真）は、単なる概念的な種やベーステクスチャとして扱います。
ナラティブの要件を評価します。ストーリーがより豊かなエコシステムを構築するために追加のビジュアルバラエティ、補足的な環境、またはBロールを必要とする場合は、それらを自然にストーリーボード化します。
ただし、追加の生成アセットは、製品のナラティブとビジュアル階層に積極的に貢献する場合にのみ導入します。複雑さのためにだけアセットを生成しないでください。

ナラティブアーク

製品ローンチ動画は、短いものであってもドラマチックな構造に従います：

幕	目的	典型的な尺（30秒動画）
フック	注意を引く。問題を提起するか、緊張を示すか、印象的なビジュアルで開く。	3〜5秒
リビール	製品を紹介する。「ヒーローモーメント」。	5〜8秒
ショーケース	2〜4の主要機能をデモする。それぞれが独自のビジュアルビートを持つ。	12〜18秒
クライマックス	最も印象的な瞬間 — フルスクリーンデモ、劇的な統計、または「すごい」トランジション。	3〜5秒
クローズ	ロゴ、タグライン、CTA。永続的な印象を残す。	3〜5秒

より短い動画（15秒）の場合：フック→リビール→クローズに圧縮。より長い動画（60秒以上）の場合：より多くの機能ビートでショーケースを拡張し、クローズの前に「ソーシャルプルーフ」または「ビジョン」ビートを追加します。

コードを1行も書く前に、動画構造を計画します。ストーリーボードは、クリエイティブなビジョンと技術的な実行の間の契約です。

公開とフィードのルール

製品を早期に見せる。 ローンチ、デモ、およびソーシャルフォーマットでは、視聴者は最初の3秒以内に製品、製品インターフェース、または紛れもない製品アーティファクトを見るべきです。抽象的なフックは、すぐに製品に解決される場合にのみ許可されます。
ミュート再生向けにデザインする。 動画がフィードに表示される可能性がある場合、多くの視聴者が音声なしで視聴することを想定します。主要な主張、シーンビート、キャプション、CTAは、ナレーションが存在する場合でも、画面上に表示可能でなければなりません。

動画メタデータ

構築する前に、以下の決定事項を文書化します：

尺、FPS、解像度 — フェーズ0から導出
公開コンテキスト — フェーズ0から導出。動画がどこに投稿され、ペーシング、キャプション、セーフエリア、または成果物に影響を与える可能性のある制約を記録します。
表示フォント＋本文フォント — フェーズ1の美学方向性から（ウェイトを含む）
カラーパレット — 色だけでなく役割を定義：背景、サーフェス（浮き上がった要素）、プライマリ（見出し）、ミュート（二次テキスト）、アクセント（CTA/ハイライト）、ハイライト（特別な瞬間）。各役割には明確な使用ルールが必要です。

ナラティブ構造

製品のストーリーに最も適した構造を選択します：

問題→解決 — 明確なペインポイントを解決する製品に最適。緊張を生み出すために問題で開き、答えとして製品をリビールし、機能を紹介し、「すごい」瞬間でクライマックスを迎え、CTAで閉じる。
ビジョン→現実 — 野心的な製品や新しいカテゴリーに最適。理想的な未来を描き、ギャップを認め、製品がどのように橋渡しするかを示し、機能で証明し、閉じる。
モンタージュ→フォーカス — 機能豊富な製品やメジャーアップデートに最適。多くの機能の高速モンタージュ、一時停止してスローダウン、2〜3の主要機能へのディープダイブ、幅広さのためのモンタージュリターン、閉じる。
ティーザー（15秒以下） — 抽象的なビジュアルで興味をそそり、製品の簡単な垣間見せをフラッシュし、ロゴ＋発売日をリビールする。

ストーリーボードスキーマ

ストーリーボードはプロジェクトルートにstoryboard.jsonとして保存されます。これは唯一の真実の情報源であり、実装、ナレーション生成、およびタイミングを駆動します。

{
  "meta": {
    "title": "製品名と動画タイプ",
    "durationSec": "動画の総尺（秒）",
    "fps": 30,
    "width": 1920,
    "height": 1080,
    "narrativeStructure": "problem-solution | vision-reality | montage-focus | teaser",
    "fonts": {
      "display": { "family": "Google Fonts / Fontshareファミリー名", "weights": ["700"] },
      "body": { "family": "Google Fonts / Fontshareファミリー名", "weights": ["400", "500"] }
    },
    "colors": {
      "background": "#hex - ベース背景",
      "surface": "#hex - カードなどの浮き上がった要素",
      "primary": "#hex - 見出しと主要テキスト",
      "muted": "#hex - 二次テキストとラベル",
      "accent": "#hex - CTAとハイライト",
      "highlight": "#hex - 特別な瞬間と強調"
    }
  },
  "voice": {
    "enabled": "ナレーションがある場合はtrue、音楽のみの場合はfalse",
    "gender": "male | female | neutral",
    "age": "young adult | middle-aged | mature",
    "tone": ["AI音声検索のための特性の配列：自信、温かみ、エネルギッシュ、落ち着き、権威、会話的、感動的"],
    "accent": "American | British | neutral | other",
    "pace": "fast | moderate | slow"
  },
  "scenes": [
    {
      "id": "ユニークなケバブケースのシーン識別子",
      "act": "hook | reveal | showcase | climax | close",
      "startSec": "絶対開始時間。隣接するシーンはトランジションのために0.2〜0.5秒重なる場合があります",
      "durationSec": "シーンの長さ。ナレーションがある場合、〜2.5語/秒で収まる必要があります",
      "purpose": "このシーンが存在する理由、伝える内容",
      "emotionalBeat": "視聴者が感じるべきもの",
      "voiceover": "正確なナレーションテキスト、またはVOがない場合はnull。ナレーションはタイミングのバックボーンです - ビジュアル要素はキーワードに同期します。すべてのシーンにVOが必要なわけではありません",
      "layout": "要素の空間的配置（スケッチまたは位置の説明）",
      "elements": "各ビジュアル要素：説明、サイズ、色、位置",
      "animation": "要素ごと：エフェクトタイプ、遅延、期間、イージング",
      "camera": "ビューポートの動き（ズーム、パン、パララックス）",
      "lighting": "光の発生源、明るい部分、影の部分",
      "transitionOut": "このシーンが次のシーンにどのように遷移するか"
    }
  ]
}

ストーリーボードの説明は超具体的でなければなりません。「クールなトランジション」や「要素がアニメーションで入ってくる」といった曖昧な説明は禁止です — 実装時に解釈の余地が大きすぎ、汎用的な出力になります。

すべての要素のモーションは、正確なメカニズムで記述されなければなりません。「タイトルが表示される」の代わりに、「見出しが30px下からスケール0.9→1、ブラー8→0で0.5秒かけてバネのように飛び込み、同時に対角線の光線が0.3秒の遅延でテキスト表面を左から右に掃引する」と書きます。「カードがアニメーションで入ってくる」の代わりに、「3つの機能カードが右から150msの間隔でカスケードし、各々がtranslateX(40)→0、opacity 0→1、および0°に落ち着く微妙な3°の回転で入ってくる」と書きます。

説明は、2人の異なる開発者が実装してもほぼ同一の結果を生成できるほど具体的でなければなりません。説明が大きく異なるビジュアル結果をもたらす可能性がある場合、それは十分に具体的ではありません。

タイミングとペーシング

ペーシングのリズム。 よく構成された動画は、緊張と解放の間を交互に行き来します：

FAST → SLOW → FAST → SLOW → FAST → HOLD

フック    リビール   機能    呼吸    クライマックス  クローズ
（緊張）  （解放）  （エネルギー）（ポーズ） （ピーク）    （解決）

ローンチ動画が最もしてはいけないことは、全体を通して単一のテンポを維持することです。単調なペーシングは、ビジュアルがどれほど美しくても、視聴者を眠らせてしまいます。

尺の配分。 総尺に基づいて時間を比例配分します。正確な秒数よりも比率が重要です：

15秒ティーザー： 約20%フック、約50%製品の垣間見せ、約30%ロゴリビール。機能説明の時間はありません。
30秒スポット： 約15%フック、約25%リビール、約40%ショーケース（2つの機能ビート）、約10%クライマックス、約10%クローズ。
45〜60秒フルローンチ： 約12%フック、約18%リビール、約50%ショーケース（3〜4つの機能ビート、それぞれ約12%）、約10%クライマックス、約10%クローズ。
90秒以上： 15秒フルローンチ構造＋追加の「ビジョン」または「ソーシャルプルーフ」ビート（約10〜20%）。

セクションが削除された場合でも、常に少なくとも2秒のフック、2秒の製品の明確な眺め、1秒のクローズが存在する必要があります。

ストーリーボードレビューチェックリスト

ストーリーボードを確定する前に、以下を確認します：

ゲート：ストーリーボード全体をstoryboard.jsonとして保存し、上記のチェックリストに照らし合わせて確認します。ストーリーボードが完了し、コードを1行も書く前にチェックアウトされるまで、フェーズ3に進まないでください。ユーザーにストーリーボードをレビュー用に提示し、承認を得た後にのみ実装を開始します。

フェーズ3：実装

必須：このスキルは、実装にRemotion（https://remotion.dev）を使用します。

クイックスタート

次の構造で新しいRemotionプロジェクトを初期化します：

npx create-video@latest --template blank

一般的なファイル構造：

project-root/
├── src/
│   ├── Root.tsx          # Compositionの登録
│   ├── Video.tsx          # メイン動画コンポーネント
│   ├── scenes/
│   │   ├── Hook.tsx
│   │   ├── Reveal.tsx
│   │   ├── Showcase1.tsx
│   │   ├── Showcase2.tsx
│   │   ├── Climax.tsx
│   │   └── Close.tsx
│   ├── assets/
│   │   ├── images/      # スクリーンショット、ロゴ、写真
│   │   ├── fonts/       # ダウンロードしたフォントファイル
│   │   └── audio/       # 音楽とナレーション
│   └── styles/
│       └── theme.ts     # 色、フォント、モーション設定
├── public/
├── package.json
├── remotion.config.ts
├── storyboard.json      # フェーズ2から
└── README.md

Remotion構成

remotion.config.tsでFPSと解像度を設定します：

import { Config } from "@remotion/cli/config";

Config.setVideoImageFormat("jpeg");
Config.setOverwriteOutput(true);

動画コンポーネント構造

メインのVideo.tsxは<Sequence>を使用してシーンを整理します：

import { AbsoluteFill, Sequence, useVideoConfig } from "remotion";
import { Hook } from "./scenes/Hook";
import { Reveal } from "./scenes/Reveal";
// ...その他のシーン

export const Video = ({ assets, voiceoverEnabled }) => {
  const { fps } = useVideoConfig();
  
  return (
    <AbsoluteFill style={{ backgroundColor: theme.colors.background }}>
      {/* フック：0〜3秒 */}
      <Sequence name="Hook" from={0} durationInFrames={3 * fps}>
        <Hook assets={assets} />
      </Sequence>
      
      {/* リビール：3〜8秒 */}
      <Sequence name="Reveal" from={3 * fps} durationInFrames={5 * fps}>
        <Reveal assets={assets} />
      </Sequence>
      
      {/* トランジションオーバーラップ用のグローバルレイヤー */}
      <TransitionOverlay />
    </AbsoluteFill>
  );
};

テーマ設定

フェーズ1からの美学方向性をテーマファイルに抽出します：

export const theme = {
  colors: {
    background: "#0a0a0f",
    surface: "#1a1a2e",
    primary: "#ffffff",
    muted: "#8a8a9a",
    accent: "#6c63ff",
    highlight: "#ffd700",
  },
  fonts: {
    display: { family: "Space Grotesk", weights: ["700"] },
    body: { family: "Inter", weights: ["400", "500"] },
  },
  motion: {
    defaultEasing: "cubic-bezier(0.16, 1, 0.3, 1)",
    springConfig: { mass: 1, stiffness: 100, damping: 20 },
    staggerDelay: 0.15,
  },
};

モーション実装パターン

スプリングアニメーション

import { spring, useCurrentFrame } from "remotion";

const MyAnimatedElement = ({ delay = 0 }) => {
  const frame = useCurrentFrame();
  const progress = spring({
    frame: frame - delay,
    fps: 30,
    config: { mass: 1, stiffness: 80, damping: 15 },
  });
  
  return (
    <div style={{
      opacity: progress,
      transform: `scale(${progress}) translateY(${(1 - progress) * 30}px)`,
    }}>
      {/* コンテンツ */}
    </div>
  );
};

インターレースアニメーション

const ShowcaseCards = ({ cards }) => {
  const frame = useCurrentFrame();
  
  return (
    <div style={{ display: "flex", gap: 20 }}>
      {cards.map((card, index) => {
        const delay = 10 + index * 5; // フレーム単位
        const progress = spring({
          frame: frame - delay,
          fps: 30,
          config: { mass: 1, stiffness: 100, damping: 20 },
        });
        
        return (
          <div key={index} style={{
            opacity: progress,
            transform: `translateX(${(1 - progress) * 50}px)`,
          }}>
            {/* カードコンテンツ */}
          </div>
        );
      })}
    </div>
  );
};

パララックスエフェクト

const ParallaxLayer = ({ children, speed = 0.5 }) => {
  const frame = useCurrentFrame();
  const x = frame * speed;
  
  return (
    <div style={{ transform: `translateX(${x}px)` }}>
      {children}
    </div>
  );
};

カスタムフォント

loadFontを使用してGoogle Fontsを読み込みます：

import { loadFont } from "@remotion/google-fonts";

const { fontFamily } = loadFont("Space Grotesk", {
  weights: ["400", "700"],
});

// コンポーネント内で fontFamily を使用

アセット処理

画像：<Img>コンポーネントを使用し、staticFile()でパスを指定
オーディオ：<Audio>コンポーネントを使用
動画ファイル：<Video>コンポーネントを使用

import { Img, Audio, staticFile } from "remotion";

<Img src={staticFile("logo.png")} />
<Audio src={staticFile("background-music.mp3")} />

レンダリング

npx remotion render src/index.ts Video out/video.mp4

H.264と高品質設定を使用：

npx remotion render src/index.ts Video out/video.mp4 --codec=h264 --crf=18

GIFまたはループ出力の場合

npx remotion render src/index.ts Video out/output.gif --codec=gif --every-nth-frame=2

品質チェックリスト

実装後、レビューします：

シーンはストーリーボードのタイミングと一致している
トランジションはガタつきやグリッチなしでスムーズ
フォントは正しく読み込まれ、すべてのテキストに適用されている
色はフェーズ1のパレットと正確に一致している
アニメーションは指定されたイージングと遅延パラメータを尊重している
製品は最初の3秒以内に表示されている
テキストは十分なコントラストがあり、完全に読み取れる
オーディオレベルがバランスよく、クリッピングがない
コンテンツがストーリーボードのクリエイティブな意図と一致している

付録：よくある落とし穴

すべてを一貫してアニメーション化する — 静的な瞬間は動的な瞬間のインパクトを高めます。すべてが動いている場合、何も目立ちません。
移行を忘れる — カットは開始と終了があります。トランジションはシーン間の視覚的な橋渡しです。適切に処理しないと、動画が不連続に感じられます。
製品のストーリーボードを無視する — 強制ではありません。クライアントがストーリーボードを提供した場合は、それを使用するか、逸脱する理由を説明します。
読み込み時間をテストしない — Remotionのレンダリング時間は複雑さに応じて大幅に異なる場合があります。レンダリング時間がわずか10秒の動画で数時間かかる場合、過度に複雑です。
テキストを小さくしすぎる — モバイル画面やソーシャルフィードでは、細かいテキストは読み取れません。タイトルには少なくとも48px、本文には24pxを目安にします。
音楽を最後まで残す — 最高のオーディオ体験のために、トランジションではオーディオも考慮します。音楽のキューイング、サウンドエフェクト、およびボリュームオートメーションはビジュアルと同じくらい重要です。

お気に入りのAIに質問する

ドキュメント

製品ローンチ動画 は何をしますか？