Communitygithub.com

memex-lab/product-launch-video-skill

Remotion を使用したシネマティックなプロダクトローンチ動画。YouTube デモサムネイル付き README。エージェントスキルでプレミアムなリビールフィルムを制作。

product-launch-video-skill とは?

このスキルは、プロダクトローンチ動画を設計・構築するための AI エージェントスキルです。Remotion を活用し、視聴者が製品に触れる前にその価値を*感じる*ような、映画的な高インパクト動画を生成します。特定の美的スタイルに固定されておらず、製品の DNA に合わせてビジュアルスタイルを適応させます。Cursor や Codex などの AI コードエディタと連携し、ストーリーボード作成から動画生成までをエージェントが自律的に進行します。3 つの基本原則(意図的装飾、感覚翻訳、コントラストの熟達)に基づき、製品理解、美的方向性の確立、ストーリーボード作成、Remotion コード生成、音声合成、最終書き出しという 6 つのフェーズで動作します。ストーリーボードは JSON スキーマで厳密に定義され、各シーンのタイミング、レイアウト、アニメーション、カメラワークが具体的に記述されます。出力は mp4 動画としてプロジェクトルートに保存されます。

対応~Claude Code~Codex CLI~Cursor
npx skills add memex-lab/product-launch-video-skill

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

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

プロダクトローンチ動画

映画的な高インパクトのプロダクトローンチ動画を設計・構築し、視聴者が製品に触れる前にその価値を感じるようにします。

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

基本理念

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

装飾ではなく意図性。 すべてのビジュアル要素、動き、光源には目的がなければなりません。ミニマリストであれマキシマリストであれ、空間を埋めるためだけに存在するものは何もありません。すべてが物語を推進し、特徴を強調し、特定の感情を呼び起こします。

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

コントラストの熟達。 優れた動画は対比によって成り立ちます。スケール(マクロのディテール vs ワイドショット)、ペース( frenetic なエネルギー vs スローモーションのリビール)、照明(影 vs ハイライト)、オーディオ(静寂 vs 重いビート)のコントラストを利用して、注目を集めるダイナミックな緊張感を生み出します。

使用タイミング

  • 製品ローンチまたは発表動画の作成
  • 映画的な品質のデモまたは機能ウォークスルーの構築
  • ブランドリビールまたはティーザートレーラーの制作
  • モーショングラフィックスを使用したアニメーション製品ショーケースの制作
  • あらゆる製品の動画構成のストーリーボード化と計画
  • 製品のビジュアル、写真、コンセプトを動画の物語に変換

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

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

ユーザーに一度に尋ねます(質問を小出しにしないこと):

  1. 製品 — 製品は何ですか?何をしますか?どのような問題を解決しますか?
  2. オーディエンス — 誰がこの動画を見ますか?開発者?消費者?投資家?内部チーム?
  3. コアメッセージ — 視聴者が視聴後に覚えておくべき唯一のことは何ですか?
  4. トーン — 視聴者は何を感じるべきですか?(印象/興奮/落ち着き/インスピレーション/エンパワーメント)
  5. 長さ — どのくらいの長さですか?(15秒ティーザー/30秒スポット/45~60秒フルローンチ/90秒+ ディープダイブ)
  6. アセット — ロゴ、製品写真、スクリーンショット、録画、ブランドカラー、フォントはありますか?
  7. ナレーション — 動画にナレーションは必要ですか?必要な場合、言語は?音声のキャラクター(性別、トーン、エネルギーレベル)の好みは?
  8. リファレンス — 参考にしている動画はありますか?(Apple キーノートスタイル、Nike プロダクトフィルム、Stripe デベロッパー美学、遊び心のある Notion の雰囲気、高級時計のコマーシャルなど)
  9. 公開コンテキスト — この動画はどこに投稿されますか?(ランディングページ、X/Twitter、LinkedIn、YouTube、Shorts/Reels/TikTok、投資家向けデッキ、内部デモ)アスペクト比、キャプション、ペーシングはこれに依存します。

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

GATE: 上記 9 つの質問すべてに対する回答(ユーザーから、またはコンテキストから推測)が得られるまで、フェーズ 1 に進まないでください。アセットが提供された場合は、それらを監査します。利用可能なすべてのアセットをリストアップし、それぞれを物語を強化するために使用する計画を立てます。すべてのアセットを表示する必要はありませんが、理由なく無視してはいけません。


フェーズ 1:美的指向を確立する

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

ステップ 1.1:ビジュアルディレクションを選択する

製品の個性とユーザーのトーンの好みに基づいて、2~3 の異なる美的ディレクションを提案します。各ディレクションには以下を含めます:

  • 名前 — 短く印象的なラベル(例:「ミッドナイトプレシジョン」「ウォームアナログ」「エレクトリックパルス」)

  • ムード — 感情的雰囲気の 2~3 文での説明

  • カラーパレット — 16 進数コードと役割(背景、プライマリ、アクセント、テキスト、ハイライト)を含む 4~5 色

  • タイポグラフィ — Google Fonts または Fontshare からのディスプレイフォントとボディフォントのペアリング(Inter、Roboto、Arial、システムフォントは不可)。書体は製品の個性を体現する必要があります:

    • エレガントなセリフ(例:Playfair Display、Cormorant)→ 高級感、エディトリアル、プレミアム
    • 太字のグロテスクサンセリフ(例:Space Grotesk、Satoshi)→ テクノロジー、大胆、モダン
    • ジオメトリックサンセリフ(例:Plus Jakarta Sans、General Sans)→ クリーン、信頼性、SaaS
    • キネティックまたは可変フォント(例:Syne、Cabinet Grotesk)→ 若者文化、クリエイティブ、遊び心
    • モノスペースまたはコードフォント(例:JetBrains Mono、Fira Code)→ 開発者ツール、ターミナル美学

    フォントは、ブランドの声を可視化したものです。製品の個性と書体のミスマッチは、他のすべてのデザイン決定を損なわせます。

  • モーションキャラクター — 動きの方法(スナップするスプリング、スムーズなグライド、弾むようなバウンド、映画的なスローリビール)

  • シグネチャーエレメント — この動画を特徴付ける唯一のビジュアルモチーフ(グラデーションメッシュ背景、ガラスモーフィズムカード、パーティクルフィールド、幾何学模様、光の筋、映画的な写真処理、コールアウトラベル付き製品クローズアップなど)

これらを簡潔なカードとして提示します。文章の壁にしてはいけません。ユーザーが 1 つを選択するか、要素を混ぜ合わせます。

悪い例(「AI スロップ」チェックリスト)

AI が生成した一般的な動画であることを露呈するこれらの決まり文句を避けてください:

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

GATE: 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 の美的ディレクションから(ウェイト付き)
  • カラーパレット — 色だけでなく役割を定義します:background(背景)、surface(浮き上がった要素)、primary(見出し)、muted(二次テキスト)、accent(CTA/ハイライト)、highlight(特別な瞬間)。各役割には明確な使用ルールが必要です。

物語構造

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

  • 問題 → 解決策 — 明確なペインポイントを解決する製品に最適。問題から始めて緊張を生み出し、解決策として製品をリビールし、機能を披露し、「ワウ」モーメントでクライマックスを迎え、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": "正確なナレーションテキスト、またはナレーションがない場合は null。ナレーションはタイミングのバックボーンです — ビジュアル要素はキーワードに同期します。すべてのシーンにナレーションが必要なわけではありません",
      "layout": "要素の空間的配置(スケッチまたは位置の説明)",
      "elements": "説明、サイズ、色、位置を含む各ビジュアル要素",
      "animation": "要素ごと:エフェクトタイプ、遅延、長さ、イージング",
      "camera": "ビューポートの動き(ズーム、パン、パララックス)",
      "lighting": "光源の位置、明るい部分、影の部分",
      "transitionOut": "このシーンが次のシーンにどのように移行するか"
    }
  ]
}

ストーリーボードの説明は超具体的でなければなりません。「クールなトランジション」や「要素がアニメーションイン」のような漠然とした説明は禁止です。これらは実装中に解釈の余地が大きすぎ、一般的な出力になります。

すべての要素の動きは、正確なメカニズムで説明されなければなりません。「タイトルが表示される」ではなく、「見出しが 30px 下からスケール 0.9→1、ぼかし 8→0 で 0.5 秒かけてスプリングインし、同時に斜めの光線が 0.3 秒遅延でテキスト表面を左から右にスイープする」と書きます。「カードがアニメーションインする」ではなく、「3 つの機能カードが右から 150ms のずれでカスケードし、それぞれ translateX(40)→0、opacity 0→1 で入り、3°の微妙な回転が 0°に落ち着く」と書きます。

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

タイミングとペーシング

ペーシングのリズム。 適切にペース配分された動画は、緊張と解放を交互に繰り返します:

速い → 遅い → 速い → 遅い → 速い → 停止
|       |       |       |       |       |
フック   リビール  機能   ひと息  クライマックス クローズ
(緊張)  (解放)  (エネルギー)(休止)  (頂点)  (解決)

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

長さの配分。 合計時間に基づいて時間を比例配分します。比率が正確な秒数よりも重要です:

  • 15 秒ティーザー: 約 20% フック、約 50% 製品の垣間見せ、約 30% ロゴリビール。展開の時間はありません。

(以下、原文が途中で切れていますが、これが提供された全文です。)

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

関連スキル