product-launch-video

Name: product-launch-video
Author: memex-lab

github.com/memex-labクリエイティブ・メディア26124 回インストール22 週間前に更新

リポジトリ

product-launch-video について

製品発表動画やデモ、ティーザーの企画を支援するクリエイティブスキルです。製品の理解からビジュアルの方向性、ストーリーボードまでを整理し、製品の特徴を映像表現に落とし込みます。

主な機能

01製品と視聴者の要件整理
02ビジュアル方針の策定
03ストーリーボードと構成の設計
04テンポと公開先の検討

活用シーン

01製品発表動画の制作
02製品デモの構成
03ブランド紹介やティーザーの企画

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/memex-lab/product-launch-video-skill --skill product-launch-video

インストール後、Claude Code で/product-launch-videoを入力して読み込まれたか確認します。

詳細

製品ローンチ動画

視聴者が製品に触れる前からその魅力を感じられる、映画のように演出された、インパクトの強い製品ローンチ動画をデザインし、制作します。

このスキルは、ひとつの美的スタイルに限定されません。ビジュアルスタイルは製品のDNAに合わせて変化します。重要なのは、どの方向性を選ぶにしても、モーション、ライティング、構図、ビジュアルストーリーテリングにおいて最高水準の仕上がりを実現することです。

基本理念

あらゆる判断は、次の3つの原則に基づきます。

装飾より意図。 あらゆるビジュアル要素、動き、光源には目的が必要です。ミニマルな演出でもマキシマルな演出でも、空間を埋めるだけの要素は存在しません。すべての要素が物語を前に進め、機能を際立たせ、または特定の感情を呼び起こします。

感覚への変換。 優れたローンチ動画は、視聴者に製品を感じさせます。抽象的な概念（速度、安全性、快適さ）や物理的な特性（重さ、質感、応答性）を、視覚と聴覚で体験できるものへ変換します。製品が速いなら、視聴者にも速度を感じさせる必要があります。洗練されているなら、すべてのフレームでその上質さを感じさせる必要があります。

コントラストの妙。 優れた動画は、対比によって力を発揮します。スケール（マクロのディテールと広がりのあるワイドショット）、テンポ（せわしない躍動感とスローモーションでの登場）、ライティング（影とハイライト）、音声（静寂と重厚なビート）にコントラストを取り入れ、視聴者を引きつけるダイナミックな緊張感を生み出します。

使用する場面

製品ローンチ動画や発表動画を制作するとき
映画のようなクオリティでデモや機能紹介動画を制作するとき
ブランドのお披露目動画やティーザートレーラーを制作するとき
モーショングラフィックスを使ったアニメーション製品紹介を制作するとき
あらゆる製品の動画構成を絵コンテ化し、計画するとき
製品のビジュアル、写真、コンセプトを動画の物語へと仕立てるとき

Phase 0: 製品を理解する

ビジュアル制作に入る前に、紹介する製品を深く理解してください。ここでの理解がすべての土台になります。

ユーザーに一度にまとめて質問します（少しずつ小出しに質問しないでください）。

製品 — どのような製品ですか？何をするものですか？どんな課題を解決しますか？
視聴者 — この動画を見るのは誰ですか？開発者ですか？一般消費者ですか？投資家ですか？社内チームですか？
中心となるメッセージ — 視聴後、視聴者に覚えていてほしいことは何ですか？ひとつに絞ってください。
トーン — 視聴者にどのような気持ちになってほしいですか？（感銘／高揚／安らぎ／インスピレーション／自信）
尺 — どのくらいの長さですか？（15秒のティーザー／30秒のスポット／45〜60秒の本格的なローンチ動画／90秒以上の詳しい紹介）
素材 — ロゴ、製品写真、スクリーンショット、録画、ブランドカラー、フォントはありますか？
ナレーション — 動画にナレーションを入れますか？入れる場合、言語は何ですか？声の特徴（性別、トーン、エネルギーのレベル）に希望はありますか？
参考例 — 好きな動画はありますか？（Appleの基調講演風、Nikeの製品映像、Stripeの開発者向けの美学、Notionの遊び心ある雰囲気、高級腕時計のCMなど）
公開先 — 動画はどこに投稿しますか？（ランディングページ、X/Twitter、LinkedIn、YouTube、Shorts/Reels/TikTok、投資家向け資料、社内デモなど）。アスペクト比、字幕、テンポは公開先によって変わります。

会話の中ですでにユーザーが背景情報を提供している場合は、そこから回答を読み取り、不足している点を確認します。

GATE: 上記9項目すべてについて、ユーザーから回答を得るか、会話の文脈から推定するまではPhase 1に進まないでください。素材が提供されている場合は、それらを確認し、利用可能な素材をすべて列挙したうえで、物語を強める箇所にそれぞれをどう使うか計画してください。すべての素材を動画に登場させる必要はありませんが、理由なく無視してはいけません。

Phase 1: 美的スタイルを定める

これは最も重要なクリエイティブ上の判断です。 美的スタイルは、この製品のために特別にデザインされたと感じられるものでなければなりません。ロゴを差し替えただけの汎用テンプレートのように見えてはいけません。

ステップ 1.1：ビジュアルの方向性を選ぶ

製品の個性とユーザーのトーンの好みに基づいて、異なる美的方向性を2〜3案提案します。各案には、次の項目を含めてください。

名前 — 印象に残る短いラベル（例：「Midnight Precision」「Warm Analog」「Electric Pulse」）
ムード — 感情的な雰囲気を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生成動画だとすぐに分かる、次のような特徴は避けてください。

暗い背景に紫のグラデーション（最もありがちなパターン）
ディスプレイテキストにInter／Roboto／システムフォントを使う
タイミングが一様で、すべてが同じ速度、同じ遅延で登場する
アイコンとして絵文字を使う
奥行きや影のない、均一に照らされた平坦なシーン
アニメーションがすべて同じ、ありきたりなカードグリッド
コンテンツとの空間的な関係がなく、ただ「フェードイン」するテキスト
単色で塗りつぶしただけの背景

必須： 2〜3案の美的方向性をユーザーに提示してください。ユーザーが方向性を選ぶか確認するまで、フェーズ2に進まないでください。ユーザーが「任せる」と言った場合は、製品の個性に最も合う方向性を選び、先に進む前に選んだ案を明示してください。

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

ストーリーボードは設計図です。すべてのシーンに、その存在意義が必要です。

必須： コードを書く前に、ストーリーボードをすべて作成してください。以下のスキーマに従って、プロジェクトのルートディレクトリに storyboard.json として保存します。このセクションの最後にあるストーリーボード・レビュー・チェックリストに照らして確認してください。ショーケースシーンが連続する場合、レイアウトやアニメーションパターンを同じにしてはいけません。

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

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

ユーザー提供の2Dアセット（未加工のスクリーンショット、平面的なロゴ、基本的な写真）は、あくまでコンセプトの種やベーステクスチャとして扱います。
ストーリーに、より豊かなエコシステムを構築するための追加のビジュアルバリエーション、補助的な環境、またはBロールが必要かどうかを評価します。必要であれば、ストーリーボードに自然に組み込んでください。
ただし、新たに生成するアセットは、製品の物語やビジュアルの階層構造に積極的に役立つ場合にのみ導入してください。複雑にすること自体を目的に、アセットを生成してはいけません。

ナラティブの流れ

製品ローンチ動画は、短いものでもドラマチックな構成に沿って展開します。

Act	目的	標準的な長さ（30秒の動画）
Hook	視聴者の注意を引きます。問題を提示したり、緊張感を生み出したり、印象的なビジュアルで始めたりします。	3-5s
Reveal	製品を紹介します。「主役の登場」となる場面です。	5-8s
Showcase	2〜4個の主要機能を実演します。それぞれに独自のビジュアル演出を用意します。	12-18s
Climax	最も印象的な場面です。全画面のデモ、インパクトのある数値、あるいは「驚き」のあるトランジションを見せます。	3-5s
Close	ロゴ、タグライン、CTAを表示し、強い印象を残します。	3-5s

短い動画（15s）では、Hook → Reveal → Closeの構成に圧縮します。長い動画（60s以上）では、Showcaseに機能ごとの演出を追加し、締めくくりの前に「社会的証明」または「ビジョン」の場面を加えます。

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

公開とフィードのルール

製品を早い段階で見せます。 ローンチ、デモ、ソーシャル向けの動画では、最初の3秒以内に製品、製品インターフェース、または製品だとすぐにわかる成果物を視聴者に見せます。抽象的な導入が許されるのは、すぐに製品へとつながる場合に限ります。
ミュート再生を前提に設計します。 動画がフィードに表示される可能性がある場合、音声なしで視聴する人が多いと想定してください。ナレーションがある場合でも、重要な主張、場面の要点、字幕、CTAは画面上で見えるようにする必要があります。

動画のメタデータ

制作に着手する前に、以下の項目を記録します。

長さ、FPS、解像度 — Phase 0から決定します
公開コンテキスト — Phase 0から決定します。動画の公開先と、テンポ、字幕、安全領域、納品物に影響する制約を記載します。
ディスプレイフォント＋本文フォント — Phase 1の美的方針に基づきます（ウェイトも指定します）
カラーパレット — 色だけでなく、それぞれの役割を定義します。背景、サーフェス（浮き上がった要素）、プライマリ（見出し）、ミュート（補助テキスト）、アクセント（CTA／強調箇所）、ハイライト（特別な場面）です。それぞれの役割に、明確な使用ルールを設けます。

ナラティブ構成

製品のストーリーに最も合う構成を選びます。

問題 → 解決策 — 明確な課題を解決する製品に最適です。問題から始めて緊張感を生み出し、製品を解決策として登場させ、機能を紹介し、「驚き」のある場面をクライマックスにして、CTAで締めくくります。
ビジョン → 現実 — 理想を掲げる製品や新しいカテゴリーに最適です。理想の未来を描き、現状との隔たりを示し、製品がどう橋渡しするかを見せ、機能で裏付けて締めくくります。
モンタージュ → フォーカス — 機能が豊富な製品や大規模なアップデートに最適です。多くの機能を素早いモンタージュで見せ、いったんペースを落として2〜3個の主要機能を掘り下げ、再びモンタージュに戻って全体像を見せてから締めくくります。
ティーザー（15s以下） — 抽象的なビジュアルで興味を引き、製品を短く映し、ロゴとローンチ日を公開します。

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

ストーリーボードは、プロジェクトのルートにあるstoryboard.jsonとして保存します。これが唯一の信頼できる情報源となり、実装、ナレーション生成、タイミングを左右します。

{
  "meta": {
    "title": "Product name and video type",
    "durationSec": "Total video duration in seconds",
    "fps": 30,
    "width": 1920,
    "height": 1080,
    "narrativeStructure": "problem-solution | vision-reality | montage-focus | teaser",
    "fonts": {
      "display": { "family": "Google Fonts / Fontshare family name", "weights": ["700"] },
      "body": { "family": "Google Fonts / Fontshare family name", "weights": ["400", "500"] }
    },
    "colors": {
      "background": "#hex - base background",
      "surface": "#hex - elevated elements like cards",
      "primary": "#hex - headlines and key text",
      "muted": "#hex - secondary text and labels",
      "accent": "#hex - CTAs and highlights",
      "highlight": "#hex - special moments and emphasis"
    }
  },
  "voice": {
    "enabled": "true if video has voiceover, false if music-only",
    "gender": "male | female | neutral",
    "age": "young adult | middle-aged | mature",
    "tone": ["Array of traits for AI voice search: confident, warm, energetic, calm, authoritative, conversational, inspiring"],
    "accent": "American | British | neutral | other",
    "pace": "fast | moderate | slow"
  },
  "scenes": [
    {
      "id": "Unique kebab-case scene identifier",
      "act": "hook | reveal | showcase | climax | close",
      "startSec": "Absolute start time. Adjacent scenes may overlap 0.2-0.5s for transitions",
      "durationSec": "Scene length. If voiceover present, must fit narration at ~2.5 words/sec",
      "purpose": "Why this scene exists, what it communicates",
      "emotionalBeat": "What the viewer should feel",
      "voiceover": "Exact narration text, or null if no VO. Narration is the timing backbone - visual elements sync to key words. Not every scene needs VO",
      "layout": "Spatial arrangement of elements (sketch or describe positions)",
      "elements": "Each visual element with description, size, color, position",
      "animation": "Per-element: effect type, delay, duration, easing",
      "camera": "Viewport movement (zoom, pan, parallax)",
      "lighting": "Where light comes from, what's bright, what's in shadow",
      "transitionOut": "How this scene exits to the next"
    }
  ]
}

ストーリーボードの説明は、非常に具体的でなければなりません。「かっこいいトランジション」や「要素がアニメーションで表示される」といった曖昧な説明は禁止です。こうした説明では実装時の解釈に余地がありすぎて、ありきたりな仕上がりになります。

すべての要素の動きを、正確な仕組みまで記述する必要があります。「タイトルが表示される」ではなく、「見出しが30px下からスプリングで現れ、0.5sかけてscale 0.9→1、blur 8→0となる。同時に、0.3s遅れて斜めの光線がテキスト面を左から右へ横切る」と記述します。「カードがアニメーションで表示される」ではなく、「3枚の機能カードが150msの間隔で右から順に現れ、それぞれtranslateX(40)→0、opacity 0→1で入場し、わずかに3°回転してから0°に落ち着く」と記述します。

説明は、異なる2人の開発者が読んでもほぼ同じ実装になるほど具体的でなければなりません。大きく異なるビジュアル表現になり得る説明は、具体性が不足しています。

タイミングとペース配分

ペース配分のリズム。 適切なペースの動画では、緊張と緩和が交互に訪れます。

FAST → SLOW → FAST → SLOW → FAST → HOLD

Hook    Reveal   Features  Breathe  Climax  Close
(tense) (relief) (energy)  (pause)  (peak)  (resolve)

ローンチ動画で最も避けるべきなのは、全編を通して同じテンポを保つことです。単調なペース配分では、どれほど美しい映像でも視聴者は眠くなってしまいます。

時間の配分。 全体の長さに応じて、時間を比例配分してください。正確な秒数よりも比率が重要です。

15秒のティーザー： 約20％をフック、約50％を製品のちら見せ、約30％をロゴの登場に配分します。機能を紹介する時間はありません。興味を引き、ブランドを印象づけるだけにします。
30秒のスポット： 約15％をフック、約15％を製品の登場、約45％を機能の紹介（3つの機能）、約15％をクライマックス、約10％を締めくくりに配分します。
60秒のフルローンチ： 約8％をフック、約8％を製品の登場、約42％を機能の詳しい紹介（4〜5つの機能）、約17％を社会的証明／ビジョン、約12％をクライマックス、約13％を締めくくりに配分します。
90秒の詳細紹介： 約9％をフック、約8％を製品の登場、約44％を機能の紹介（5〜6つの機能）、約17％を実際の使用例、約11％をクライマックス、約11％を締めくくりに配分します。

これらは出発点です。製品のストーリーに合わせて調整してください。際立った機能が1つある製品なら、その機能の紹介だけに60％を費やすこともあります。

シーンの長さは、その役割によって異なります。タイトルやロゴの登場、統計情報は短く（2〜4秒）、課題の提示や機能紹介には適度な時間（各3〜5秒）が必要です。全画面のデモには最も長い時間（5〜8秒）を割り当てます。最後のCTAは3〜5秒にします。

アニメーションの長さは、要素の重要度によって異なります。控えめな補助要素には短いフェード（300〜500ms）、主要な要素にはスプリング（400〜600ms）、要素が連続して現れるグループにはスタッガー遅延（項目間で80〜200ms）を使い、シーンの切り替えは200〜400msにします。タイプライター効果は、1秒あたり30〜60文字が最適です。

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

フェーズ3に進む前に確認してください。

フェーズ3：アセットの生成と拡張（条件付き）

storyboard.jsonを確認してください。ストーリー展開に既存の入力素材以外の視覚要素が必要な場合は、マルチモーダル機能を活用してここで作成してください。既存のアセットでストーリーボードに対応できる場合は、次のフェーズに進んでください。

アセットを生成する際は、ブランドと製品の忠実度を維持することを最優先にしてください。

制御されたバリエーション（Image-to-Image／Image-to-Video）： 中核となる製品、ロゴ、UIを扱う場合は、ユーザーが提供したアセットを参照として使用してください。ユーザーの製品の構造的なアイデンティティや中核的なデザインを変更してはなりません。
補助要素の作成（Text-to-Image／Text-to-Video）： 製品への忠実度が求められない、背景プレート、雰囲気を演出するレイヤー、環境のBロールなどの補助要素を新たに生成し、マスタースタイルプロンプトと調和させてください。

コーディングを始める前に、処理済みのアセットをすべてpublic/ディレクトリに保存してください。

フェーズ4：構築

フェーズ4は、ナレーションの生成（該当する場合）、デザイン原則（「なぜ」）、技術的基盤（「ルール」）、実装リファレンス（「方法」）の4つのパートで構成されます。

4.0 ナレーション音声の生成

ストーリーボードで voice.enabled が true の場合、動画コードを書く前に音声ファイルを生成してください。実際の音声の長さがシーンのタイミングを決定します。

ステップ 1：音声を選択します。 voice オブジェクトのタグ（gender、age、tone、accent、pace）を使って、利用可能な TTS 音声の中から最も適したものを選びます。

ステップ 2：シーンごとの音声を生成します。 voiceover が null ではない各シーンについて、シーンのナレーションテキストを使って音声ファイルを生成します。各ファイルを public/vo-{scene.id}.mp3 に保存します（例：public/vo-reveal.mp3）。

ステップ 3：タイミングを測定して調整します。 生成後、各音声ファイルの実際の長さを取得します。音声の長さがそのシーンのストーリーボード上の durationSec と異なる場合、音声に合わせてストーリーボードのタイミングを更新します。ペース配分の基準となるのはナレーション音声です。タイミングの変更は、後続シーンの startSec にも反映します。

ステップ 4：コンポジションに埋め込みます。 各シーンのコンポーネントで、Remotion の <Audio> コンポーネントを使って対応するナレーション音声を再生し、シーンの <Sequence> のタイミングに同期させます。

4.1 デザイン原則

これらの原則は、実装中のすべてのクリエイティブな判断の指針となります。任意の仕上げではなく、最低限満たすべき品質基準を定めるものです。

モーションデザインの理念

モーションは装飾ではなく、コミュニケーションです。 すべてのアニメーションは、次の問いに答える必要があります。このモーションは見る人に何を伝えているのか？ 答えが「何も伝えていない。ただ見栄えがいいだけ」なら、そのモーションは適切ではありません。

モーションの基本ルール：

リニアイージングは決して使用しないでください。 すべてのモーションには、ベジェ曲線またはスプリング物理を使用する必要があります。遊び心のある登場に弾むような弾力を持たせる場合も、プレミアム感のある演出に重厚で滑らかな勢いを持たせる場合も、テクニカルな製品に素早く正確な動きを持たせる場合も、オブジェクトは質量感を伴って加速・減速します。リニアな動きは機械的で生気がありません。意図的にロボットや機械のような動作を再現する場合のみ例外です。

勢いは途切れません。 モーションのエネルギーは、要素間やシーン間で消えるのではなく、受け渡されます。カードが右方向に移動して退出するなら、次の要素も右から登場し、その方向のエネルギーを引き継ぐ必要があります。ある要素が縮小して消えるなら、次の要素は大きくなりながら表示される必要があります。こうすることで、すべてのモーションが単独の出来事ではなく、直前の動きの結果として感じられる、途切れのない流れが生まれます。これはシーン内（要素 A の退出が要素 B の登場につながる場合）にも、シーン間（退出するシーンの勢いが次のシーンに受け継がれる場合）にも適用してください。

ローンチ動画におけるモーションの三原則：

1. すべての要素に、少なくとも3つのモーションプロパティを同時に適用する必要があります。 単一の fadeIn はアニメーションではなく、最低限の登場表現です。適切な登場表現では、物理的な実在感を生み出す複数のプロパティを組み合わせます。透明度（実体化する）、トランスフォーム（どこかから到着する）、フィルター（カメラのピントが合うように鮮明になる）です。同時に変化するプロパティが多いほど、その要素は画面上に現れる div ではなく、実在する物体のように感じられます。

2. すべてのシーンに、独立したモーションレイヤーを少なくとも3つ設ける必要があります。 コンテンツのアニメーションだけでは、シーンは平坦に感じられます。背景レイヤー（グラデーションの変化、グローの脈動、ゆっくりとしたズームなど、ゆったりとしたアンビエントな動き）、コンテンツレイヤー（スプリングによる登場、カードの連続登場、テキストの強調表示など、主要なアニメーション）、雰囲気レイヤー（パーティクル、ライトスイープ、ノイズテクスチャなど、豊かさを加える要素）が必要です。コンテンツのアニメーションしかないシーンは、PowerPoint のスライドのように感じられます。

3. 連続する2つのシーンで、同じモーションパターンを使用してはいけません。 シーン A で「カードがずらして上にスライドする」パターンを使った場合、シーン B では同じパターンを使えません。登場する方向、アニメーションの種類、空間レイアウト、カメラの動きを変化させ、リズムを生み出してください。

モーションの語彙 — 各モーションタイプが伝えること：

モーション	伝えること	使用する場面
オーバーシュートを伴うスプリング	エネルギー、登場、重要性	ヒーローシーン、ロゴの表示、インパクトのあるメッセージ
滑らかな滑走	優雅さ、自信、プレミアム感	製品の表示、映画のようなトランジション
3D パースペクティブの傾き	奥行き、物理的な存在感、実体感	カード、製品画像、注目アイテム
ライトスイープ	お披露目、発見、プレミアムな仕上げ	要素が落ち着いた後、仕上げとして
拡大するリング	インパクト、衝撃波、発表	ロゴの表示、重要な場面
パーティクルフィールド	雰囲気、躍動感、アンビエントなエネルギー	背景レイヤー、シーン全体
ぼかし → 鮮明化	焦点、注目、カメラのような表現	登場、シーントランジション
浮遊／漂流	静けさ、アンビエント感、生命感	背景要素、待機状態
タイプライター	テクニカル、正確、コードのような表現	開発者向け製品、ターミナルのテキスト

モーション密度の基準 — 制作品質としての最低ライン：

要素の登場ごとに、同時に適用するモーションプロパティを最低3つ（透明度＋トランスフォーム＋フィルター）
シーンごとに、独立したモーションレイヤーを最低3つ（背景＋コンテンツ＋雰囲気）
シーン全体を通じて、継続するアンビエントなモーションを最低1つ（浮遊、脈動、漂流、パーティクル）
シーンのタイミングに反応するライト／グロー効果を最低1つ
シーンの退出は複合アニメーション（透明度＋スケール＋ぼかし）にし、単なるフェードにしない

いずれかのシーンがこの密度を下回る場合、完成とはいえません。

グループの振り付け

個々の要素のアニメーション（1枚のカードがどう入ってくるか）は、モーションデザインの課題の半分にすぎません。もう半分は振り付け、つまり、複数の要素がシステムとしてどのように連動して動くかです。多くの項目（製品画像、機能、カード、ロゴ、お客様の声）を見せるシーンでは、空間的な配置と全体のモーションパターンこそが、映画のようなショーケースと、フェードインするだけの静的なグリッドを分ける要素になります。

振り付けの原則：

ステージング。 ディズニーの12の原則から取り入れた考え方です。それぞれのアイデアを、疑いなく明確に伝わるように提示します。複数の項目を見せるときは、振り付けそのものが物語を伝える必要があります。豊富さ、多様性、エコシステムの広がり、あるいは着実な進展などです。モーションパターンそのものがメッセージになります。

共通運命（ゲシュタルト）。 同じ方向に同じ速度で動く要素は、ひとまとまりのグループとして認識されます。これを利用して、エコシステムの一体感を表現しましょう。動きに変化をつけるのは、選択的に行います。動きの異なる要素が1つあるだけで、たちまちそれが焦点になります。

同時に動かさず、時間差をつけます。 要素のグループを同時にアニメーションさせてはいけません。80～200msの細かな遅延を適用して要素を順番に出現させ、見る人の視線を意図的な経路に沿って導く読み順を作ります。時間差の方向自体が、空間的な関係性を伝えます（上から下＝階層、左から右＝順序、中心から外側＝放射）。

Z軸の階層。 ヒーロー要素を前景に配置し、キレのある重みを感じさせる動きを与えます。補助要素は、スケールを小さくし、不透明度を下げ、速度を遅くし、わずかにぼかして背景に退かせます。これにより、3Dレンダリングを使わずに奥行きが生まれます。

移動より変形。 画面外からスライドしてくるだけの要素よりも、表示状態へと変形する要素（ある点から拡大する、展開する、マスクの背後から現れる、形状が変化する）を優先します。変形は、その要素がずっとそこにあり、見えるようになるのを待っていたことを示唆します。移動は、どこか別の場所からやってきたことを示唆します。

ショーケースの振り付けパターン：

以下は、項目のコレクションを表示するための標準的な空間モーションパターンです。モーションが製品について何を伝えるかに基づいて選択してください。

パターン	動き	伝えること	最適な用途
無限マーキー	アイテムが途切れなく一方向にスクロールし、シームレスにループします	ボリューム、豊富さ、エコシステムの広がり	ロゴ一覧、連携機能、お客様の声の一覧、機能一覧
交互スクロールレーン	2～3 本の横または縦のレーンが、交互に異なる方向へスクロールします	豊かさ、多様性、躍動感	画像ギャラリー、製品バリエーションの紹介、コンテンツが豊富な製品
段階的なカスケード	アイテムが同じ方向から、順番に、遅延時間を増やしながら表示されます	秩序ある進行、勢いの高まり	機能一覧、段階的なフロー、料金プラン
放射状バースト	アイテムが中心点から全方向へ広がるように現れます	インパクト、可能性の広がり、ローンチの高揚感	機能の概要、エコシステムのマップ、「すべてが含まれる」ことを伝える場面
軌道上の浮遊	アイテムが中心となるヒーロー要素の周りをゆっくりと周回、または漂います	エコシステム、衛星のような関係性、脇を固める要素	中核製品の周囲に配置する連携機能、ロゴの周囲に配置する機能
グリッド表示	アイテムが、波のようなパターン（斜め、らせん状、または行ごと）でグリッドに表示されます	網羅性、カタログ、包括的なカバー範囲	テンプレートギャラリー、アイコンセット、機能マトリクス
遠近感のある壁面	アイテムを奥へと傾斜する平面上に配置し、ゆっくりと漂わせます	規模、奥行き、高級感のあるギャラリー	製品画像の紹介、ポートフォリオの展示、メディアが豊富な製品
扇状展開	アイテムが、カードの束を手に持ったように、重なった状態から扇状に広がります	見せ方、選択肢、選択	プラン比較、カードの種類、バリエーションの紹介
ヒーロー要素への収束	散らばったアイテムが内側へ動き、ヒーロー要素を形成する、または囲むように配置されます	一体感、組み立て、「すべてがひとつにまとまる」様子	ロゴの表示、最終的な CTA の場面、製品の組み立て
パララックスレイヤー	ビューポートがパンする間、奥行きの異なるアイテムがそれぞれ異なる速度で動きます	映画のような奥行き、没入感、高級感	全画面の紹介シーン、ヒーローセクション

振り付けは必須です。 シーンで 3 個を超えるアイテムを表示する必要がある場合は、この表にある意図的な振り付けパターン（または意図に沿った応用）を使用してください。カードを並べたグリッドを、単に時間差でフェードインさせるのは最低限であり、目標ではありません。

ビジュアル構成の考え方

すべてのフレームは、動きを止めてポスターとして使えるほど魅力的でなければなりません。 どの時点で一時停止しても、フレームが未完成の読み込み状態のように見えるなら、構成は失敗です。

豊かなシーンは、それぞれ独立した視覚レイヤーを重ねて作ります。各レイヤーには明確な役割があり、それぞれ異なる速度で動くことで、パララックスによる奥行きが生まれます。

レイヤー	Z 順序	役割	動きの速さ
1. 背景グラデーション	最も低い	雰囲気や色彩の印象を演出する	非常に遅い（漂う）
2. 構造的なグリッド／パターン	低い	幾何学的な構造を加える	静止、または非常に遅い
3. グローオーブ／環境シェイプ	中低	奥行きと温かみを生み出す	遅い（脈動、浮遊）
4. パーティクル	中	生命感と雰囲気を加える	中程度（上向きに漂う）
5. メインコンテンツ	中高	実際の情報を伝える	シーンに応じた表示
6. 光のエフェクト	高い	仕上げを加え、見せ場を演出する	イベントに応じて動く
7. ノイズテクスチャ	最も高い	アナログな温かみとフィルムの質感を加える	静止

すべてのシーンにすべてのレイヤーが必要なわけではありませんが、3 層未満のシーンは平坦に感じられます。コンテンツレイヤーだけでは決して不十分です。

構図のフレームワークと導線

レイヤーを重ねることで奥行きが生まれますが、フレーム内のどこに要素を配置するかによって、構図が意図的に感じられるか、無作為に感じられるかが決まります。

構造的なグリッドを使います。 重要な要素は画面の中央ではなく、三分割法、黄金比、または動的対称性のラインに沿って配置します。上三分割のラインに見出しを置き、右下の交点に商品画像を配置すると、構図が整って見えます。同じ要素を画面中央に配置すると、デフォルトの PowerPoint レイアウトのように感じられます。前衛的、あるいは混沌とした効果を狙って意図的にグリッドを崩す場合でも、その根底にある構造的な論理が明確でなければなりません。ルールを破る演出が機能するのは、ルールが見えているときだけです。

導線を作ります。 光線、装飾的なライン、カードの縁、グラデーションの方向、粒子の軌跡、商品の輪郭など、シーンにすでにある幾何学的要素を使って、焦点となる要素を直接指し示す見えない道筋を作ります。視聴者の目は無意識にその道筋をたどります。フレーム内に焦点を指し示す幾何学的な要素がなければ、構図には意図性のレイヤーが欠けています。

ストーリーテリングとしてのライティング

ライティングは単に見やすくするためのものではありません。視線を誘導し、ムードを設定するための主要なツールです。

光で形を作ります。 グラデーション、グロー、シャドウを使って、要素に奥行きと立体感を持たせます。商品画像の背後に控えめな放射状グラデーションを加えると、スポットライトを浴びているように見えます。
視線を誘導します。 フレーム内で最も明るい部分、またはコントラストが最も高い部分に、視聴者の目が自然と向かいます。そこをコア機能の位置に合わせます。
素材を忠実に表現します。 ガラスを見せるなら、屈折による歪みも表現します。画面を見せるなら、ピクセルの光を表現します。金属を見せるなら、鏡面ハイライトを表現します。質感が感じられるようにします。
光を物語に呼応させます。 グローの強さは、明かされる瞬間やクライマックスに向けて高まるようにします。「プライバシー」をテーマにしたシーンでは、柔らかく抑えた光が適しています。「パワー」をテーマにしたシーンでは、鋭く方向性のある光線が適しています。

動きとしてのタイポグラフィ

動画内のテキストは静的ではなく、シーン内の物理的なオブジェクトです。タイポグラフィも、ほかの要素と同じ厳密さでモーションを設計する必要があります。

テキストをただフェードインさせてはいけません。 最低でも、フェード、スライド、ブラーを組み合わせます。見出しには、スプリングまたはスケールによる登場を使います。インパクトのあるメッセージには、テキストスラム（剛性とオーバーシュートを高くしたスプリング）を使います。テキストに単純な fadeIn を使うことは、モーションデザインを怠っていると見なされる最も一般的なサインです。
キネティックテキストは、スライド、スケール、回転、ブラーイン、またはタイプライター風のアニメーションを適用できます。言葉の意味に合った動きを選びます。「速さ」に関する言葉なら素早く登場させ、「落ち着き」に関する言葉ならゆっくり漂うように登場させます。
空間的なテキストは、影を落としたり、商品に一部を隠されたり、遠近感のある面に置かれたりして、環境と相互作用します。
タイミングで階層を作ります。 最も重要なテキストを最初に表示し、最も長く表示します。補足テキストはその後に登場させ、先に消します。

4.2 技術基盤（Remotion）

プロジェクト構成

src/
├── index.ts              # registerRoot() entry point
├── Root.tsx              # Composition definitions
├── index.css             # Global styles, font loading
├── constants.ts          # Colors, timing, shared config
├── utils/
│   └── animations.ts     # Reusable animation functions
├── components/           # Shared visual components (backgrounds, containers, atmosphere, etc.)
└── scenes/               # One file per scene, named after the storyboard

重要なルール

すべてのアニメーションは useCurrentFrame() から生成します — CSS トランジション、CSS アニメーション、Tailwind のアニメーションクラスは禁止です。動画出力で正しくレンダリングされません。

時間は秒で考え、フレームでコードを書きます。

const { fps } = useVideoConfig();
const startTime = 2.5; // seconds
const startFrame = startTime * fps; // frames

メインコンポジションのパターン

シーン名を開始時間と再生時間（秒）に対応させるタイムラインオブジェクトを定義し、それぞれを <Sequence> としてレンダリングします。

export const MainVideo: React.FC = () => {
  const { fps } = useVideoConfig();

  const timeline = {
    hook:    { start: 0,    duration: 4 },
    reveal:  { start: 4,    duration: 5 },
    // ...
  };

  return (
    <AbsoluteFill>
      {Object.entries(timeline).map(([key, { start, duration }]) => (
        <Sequence key={key} from={start * fps} durationInFrames={duration * fps} premountFor={fps}>
          {/* Render the corresponding scene component */}
        </Sequence>
      ))}
    </AbsoluteFill>
  );
};

シーンコンポーネントのパターン

これは、実際にモーション密度の基準を適用する例です。構造上の重要な点は次のとおりです。

背景レイヤー — 継続的な環境モーション（グローの脈動、グラデーションの移動など）
コンテンツレイヤー — 各要素の登場に、不透明度、トランスフォーム、フィルターをすべて組み合わせます
雰囲気レイヤー — 粒子、光線、ノイズテクスチャ
複合的なシーン終了 — ルートコンテナに不透明度、スケール、ブラーを適用します

export const MyScene: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const sceneDurationSec = 5;

  // --- Background layer: continuous ambient motion ---
  const glowScale = 1 + Math.sin((frame / fps) * 0.8) * 0.05;

  // --- Content layer: entrance with 3 properties (opacity + transform + filter) ---
  const titleOpacity = interpolate(frame, [0, 0.4 * fps], [0, 1], { /* clamp + easing */ });
  const titleY = interpolate(frame, [0, 0.5 * fps], [40, 0], { /* clamp + easing */ });
  const titleBlur = interpolate(frame, [0, 0.4 * fps], [8, 0], { /* clamp + easing */ });

  // --- Compound exit: opacity + scale + blur ---
  const exitStart = (sceneDurationSec - 0.4) * fps;
  const exitEnd = sceneDurationSec * fps;
  const exitOpacity = interpolate(frame, [exitStart, exitEnd], [1, 0], { /* clamp */ });
  const exitScale = interpolate(frame, [exitStart, exitEnd], [1, 0.96], { /* clamp */ });
  const exitBlur = interpolate(frame, [exitStart, exitEnd], [0, 6], { /* clamp */ });

  return (
    <AbsoluteFill style={{
      opacity: exitOpacity, transform: `scale(${exitScale})`, filter: `blur(${exitBlur}px)`,
    }}>
      {/* Background layer */}
      {/* Content layer — elements use opacity + transform + filter */}
      {/* Atmosphere layer — light effects, particles, noise, etc. */}
    </AbsoluteFill>
  );
};

イージングとスプリングのリファレンス

モーションの印象を決めるのは、長さではなくカーブです。モーションにどのような感触を持たせたいかに基づいてイージングを選びます。

感触	Bézier	最適な用途
キレのある登場	`(0.16, 1, 0.3, 1)`	機能カード、テキスト、素早い表示
滑らかな滑走	`(0.25, 0.1, 0.25, 1)`	プロダクトの登場、ヒーロー演出
ドラマチックな登場	`(0.7, 0, 0.3, 1)`	ロゴの登場、クライマックスの演出
穏やかな漂い	`(0.4, 0, 0.6, 1)`	背景要素、環境的なモーション

スプリング設定：

感触	設定	最適な用途
正確で、オーバーシュートなし	`damping: 200, stiffness: 300, mass: 1`	開発者向けツール、技術製品
穏やかなバウンス	`damping: 10, stiffness: 200, mass: 0.5`	コンシューマーアプリ、親しみやすい製品
重厚で高級感のある	`damping: 200, stiffness: 80, mass: 2`	高級品、ハイエンド製品
弾力があり遊び心のある	`damping: 6, stiffness: 180, mass: 0.4`	ゲーム、ソーシャル、若者向けブランド

4.3 実装リファレンス

モーションユーティリティ

フェードイン／アウト、スライド、スケール、ぼかしながらの登場、スプリングによるポップ、段階的な遅延、浮遊、パルス、回転、タイプライターなど、よく使うモーションのために再利用可能なプリミティブを構築します。それぞれがRemotionのフックからframeとfpsを受け取り、スタイルに適用する単一の数値を返します。

実装例：

import { interpolate, spring, Easing } from "remotion";

const EASE_OUT_EXPO = Easing.bezier(0.16, 1, 0.3, 1);

export function fadeIn(
  frame: number, fps: number, delaySec: number = 0, durationSec: number = 0.4
): number {
  const start = delaySec * fps;
  const end = start + durationSec * fps;
  return interpolate(frame, [start, end], [0, 1], {
    extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: EASE_OUT_EXPO,
  });
}

export function springPop(
  frame: number, fps: number, delaySec: number = 0,
  config?: { damping?: number; stiffness?: number; mass?: number }
): number {
  const delayFrames = Math.round(delaySec * fps);
  if (frame < delayFrames) return 0;
  return spring({
    frame: frame - delayFrames, fps,
    config: { damping: config?.damping ?? 12, stiffness: config?.stiffness ?? 200, mass: config?.mass ?? 0.5 },
  });
}

複合アニメーションパターン

よくあるローンチ動画の演出に向けて、複数のプリミティブを組み合わせます。

ヒーローの登場（プロダクトの紹介）：

function useHeroEntrance(frame: number, fps: number, delaySec: number = 0) {
  return {
    opacity: fadeIn(frame, fps, delaySec, 0.6),
    scale: scaleIn(frame, fps, delaySec, 0.9, 1, 0.7),
    blur: blurIn(frame, fps, delaySec, 0.6, 8),
    y: slideIn(frame, fps, delaySec, 20, 0.6),
  };
}

// Usage:
const hero = useHeroEntrance(frame, fps, 0.5);
<div style={{
  opacity: hero.opacity,
  transform: `scale(${hero.scale}) translateY(${hero.y}px)`,
  filter: `blur(${hero.blur}px)`,
}}>

機能カードの連続登場：

function useCardCascade(frame: number, fps: number, index: number, baseDelay: number = 0.3) {
  const delay = stagger(index, baseDelay, 0.15);
  return {
    opacity: fadeIn(frame, fps, delay, 0.4),
    y: slideIn(frame, fps, delay, 30, 0.4),
    scale: scaleIn(frame, fps, delay, 0.95, 1, 0.4),
  };
}

テキストの強調表示（力強いメッセージ）：

function useTextSlam(frame: number, fps: number, delaySec: number = 0) {
  const scale = springPop(frame, fps, delaySec, { damping: 15, stiffness: 300, mass: 0.8 });
  const opacity = fadeIn(frame, fps, delaySec, 0.15);
  return { scale, opacity };
}

環境的な漂い（背景要素）：

function useAmbientDrift(frame: number, fps: number, seed: number = 0) {
  return {
    x: float(frame, fps, 15, 4, seed * 90),
    y: float(frame, fps, 10, 5, seed * 120 + 45),
    rotation: rotate(frame, fps, 0.02 + seed * 0.01),
    scale: pulse(frame, fps, 0.03, 3 + seed),
  };
}

シーンの退出（複合）：

const sceneDurationSec = 5;
const exitOpacity = fadeOut(frame, fps, sceneDurationSec - 0.3, 0.3);
const exitScale = interpolate(
  frame,
  [(sceneDurationSec - 0.4) * fps, sceneDurationSec * fps],
  [1, 0.95],
  { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
);

<AbsoluteFill style={{ opacity: exitOpacity, transform: `scale(${exitScale})` }}>

ビジュアルモジュール

レイヤースタック内の各ビジュアルの役割に応じた、再利用可能なReactコンポーネントを構築します。具体的なコンポーネントは製品と美的な方向性によって異なるため、適したものを選びます。すべての動画ですべてを作る必要はありません。

背景モジュール（レイヤー1～2）：

アニメーション付きグラデーション背景（中心が漂う複数点の放射状グラデーション）
構造的なグリッドまたはパターンのオーバーレイ（不透明度を抑えた幾何学的な線）
ビネットまたは放射状の減衰を加えた単色背景
Ken Burns効果を加えた全面的なプロダクト写真（scaleとtranslateに対するinterpolateによる、ゆっくりとしたズームとパン）

奥行きモジュール（レイヤー3～4）：

浮遊する光るオーブ（filter: blur()を使った脈動する放射状グラデーション、sin/cosによる移動）
環境的なパーティクルフィールド（シード付きの位置を持つ多数の小要素が、それぞれ独立して漂う）
ボケの円（写真の被写界深度のような印象を生む、大きく柔らかなピントのぼけた光の点）
主要な要素の下に置く控えめな影のレイヤー

コンテンツコンテナ（レイヤー5）：

すりガラス風カード（backdropFilter: blur()、半透明の背景、控えめな境界線）
デジタル製品向けのデバイスフレーム（スクリーンショットを囲むスマートフォン／ノートPC／ブラウザーのベゼル）
実物製品向けのスタイル付きフォトフレーム（影、角丸、控えめな回転）
仕様／注釈ラベル（テキストと、実物製品の機能を示す製品の詳細を指す線）
統計／指標の表示（インパクトを与える演出向けの、大きな数字と単位、ラベル）

雰囲気モジュール（レイヤー6～7）：

光の効果（光線、発光、広がるリング、エッジのハイライト、色の変化）
フィルムグレイン／ノイズテクスチャ（インラインSVGのfeTurbulence、最前面のレイヤー、mixBlendMode: "overlay"、非常に低い不透明度の0.03～0.05）
カラーウォッシュのオーバーレイ（時間とともに色相が変化する半透明のカラーレイヤー）

各モジュールはカスタマイズ用のプロパティ（色、サイズ、速度）を受け取り、すべてのアニメーションをuseCurrentFrame()から制御します。すべての動画ですべてのモジュールが必要なわけではありませんが、すべてのシーンに「ビジュアル構成の考え方」のレイヤーテーブルにあるレイヤーを少なくとも3つ使う必要があります。

構成のヒント — レイヤーテーブルに沿ってモジュールを重ねます。構成例：

<AbsoluteFill>
  {/* Layer 1: Background — animated gradient, photo with Ken Burns, or color wash */}
  <BackgroundModule />
  {/* Layer 2: Structural pattern (optional) */}
  <PatternOverlay />
  {/* Layer 3: Depth elements — glow orbs, bokeh, or shadow layers */}
  <DepthElements />
  {/* Layer 4: Ambient particles or floating elements */}
  <AmbientLayer />
  {/* Layer 5: Main content — product visuals, text, cards, specs */}
  <div style={{ position: "relative", zIndex: 10 }}>{/* ... */}</div>
  {/* Layer 6: Light effects — beams, sweeps, color washes */}
  <LightEffects />
  {/* Layer 7: Film grain / noise texture */}
  <NoiseOverlay />
</AbsoluteFill>

トランジション

シーンの切り替えには、アマチュア動画らしさが表れます。優れたトランジションは、目に見えないほど自然です。見る人の意識を途切れさせずに、あるアイデアから次のアイデアへと視線を導きます。

原則：

動きに必然性を持たせる。 カメラやビューポートは、動かすこと自体を目的に動いてはいけません。すべてのトランジションは、直前のシーンの勢いから生まれる自然な結果に感じられる必要があります。
勢いを引き継ぐ。 直前のシーンの動く方向を、次のシーンの登場につなげます。シーン A の要素が左に動いて画面外へ出るなら、シーン B の要素は右から登場させます。
マッチカットを使う。 形、色、動きの連続性を利用して、シーンをつなぎます。

トランジション一覧：

トランジション	印象	使用する場面	使用しない場面
クロスフェード	ニュートラルで汎用性が高い	視覚表現の異なるシーン間	レイアウトが似ている場面（残像が生じます）
スケールディゾルブ	高級感があり、映画的	製品のお披露目、抽象から具体への移行	エネルギッシュなモンタージュ
方向性ワイプ	エネルギッシュで前進感がある	機能紹介、進捗の表示	落ち着いた雰囲気や高級感を重視する場面
ズームスルー	集中感があり、掘り下げる印象	機能概要から詳細への移行	関連性のないシーン間
カラーワイプ	大胆で、ブランドを印象づける	異なるカラーパレットのシーン間	控えめなトランジションが適する場面
ハードカット	意外性があり、インパクトが強い	モンタージュ、コメディーの間	滑らかさが必要な場面
ブラー・トランジション	夢のようで、映画的	ウェルネスや落ち着いた製品、抽象から具体への移行	エネルギッシュなシーケンス

トランジションのタイミング：

速い（0.2～0.3 秒）： エネルギッシュで、モンタージュ風
中程度（0.3～0.5 秒）： 標準的で、プロフェッショナル
遅い（0.5～0.8 秒）： 映画的で、ドラマチック、高級感がある

トランジションの悪い例：

シーンが切り替わるたびに同じトランジションを使わず、変化をつけます
重要なコンテンツが表示されている間はトランジションを使いません。シーンの切り替わり中に、見る人がテキストを読んでいる状態にならないようにします
短いシーン（2～3 秒）には複雑なトランジションを使いません。クロスフェードやハードカットのほうが適しています
コンテンツに逆らわないようにします。レイアウトが似ている場合は、クロスフェードではなく、方向性ワイプやハードカットを使います

フェーズ 5：レンダリング前の確認

レンダリングする前に、すべての項目を確認します。これが最終的な品質チェックです。

ストーリーボードとナラティブ

すべてのシーンに明確な目的がある（埋め草がない）
ナラティブの流れに緊張と緩和がある
全体の長さが目標に合っている（±1 秒）
「ヒーローとなる瞬間」が明確に定められている
最初の 3 秒に、スクロールを止めるほどの引きつける力がある
クライマックスの前に間を置く。静止する瞬間を設けることで、最も印象的なビジュアルが際立つ

モーションの品質

ビジュアル構成

トランジションとテンポ

トランジションに意図があり、唐突ではありません
動画にリズムがあり、単調なテンポではなく、速い場面と遅い場面が交互に現れます
静止フレームを2秒以上表示しないでください。常に何かが動いている必要があります
ロゴやブランド要素が適切なタイミングで表示されます（早すぎず、表示を忘れることもありません）

ナレーション（該当する場合）

ナレーションの音声ファイルがすべて生成され、public/ に保存されています
シーンの長さが実際の音声の長さと一致しています（タイミングの基準となるのは音声です）
ナレーションのある各シーンの実装に、対応する <Audio> コンポーネントがあります

フェーズ 6：レンダリングと納品

# Preview in browser
npx remotion studio

# Example: render a representative frame for layout audit
npx remotion still [CompositionId] out/frame-check.png --frame 60

# Render final video
npx remotion render [CompositionId] out/video.mp4

# Render at specific quality
npx remotion render [CompositionId] out/video.mp4 --codec h264 --crf 18

全体をレンダリングする前に、各シーンから代表的なフレームを少なくとも1つ書き出し、画像として確認してください。全体の動画をレンダリングするために時間をかける前に、レイアウト、クロップ、重なり、テキストの欠け、コントラストの問題を修正してください。

レンダリング後、ユーザーに次の情報を伝えてください：

ファイルの保存場所とサイズ
動画の長さと解像度
異なる設定で再レンダリングする方法
変更方法：色（定数）、タイミング（メインコンポジションの Sequence レイアウト）、コンテンツ（各シーンのコンポーネント）を管理するファイル

Markdown 対応

ログインしてコメント

基本情報

作者: memex-lab
リポジトリ: memex-lab/product-launch-video-skill
カテゴリ: クリエイティブ・メディア
インストール数: 124
GitHub スター: 26

問題を報告