ローンチビデオ作成ツール

30〜60秒のモーショングラフィックス・ローンチビデオを、<YOUR_BRAND>の製品または機能向けにエンドツーエンドで構築します。

Remotion 4 ReactコンポジションをMP4（1920×1080 + 1080×1080）にレンダリング
ElevenLabs AIナレーション（デフォルトはBillボイス）、イベントごとの効果音、および背景音楽
ビートアンカー方式のタイミング: すべてのビジュアルフェーズの開始フレームは、script.timings.json の計測済みオーディオ持続時間から読み取られます。スクリプトを編集 → オーディオを再生成 → すべてのビジュアルが自動的に同期されます。手動でフレームを調整する必要はありません。
ブランドにモーションサブシステム（ガラス/カーソル/ツールピルコンポーネント）がある場合は、そこから継承します。以下に説明する参照パターンは、一つの有効なシステムです: ガラスモーフィック・モーションサブシステム（チャットシェル、カーソル、ツールピル）をクリーンな白色表形式システム（結果テーブル、ダッシュボード、トレース）の上に重ねたものです。

リポジトリに参照用のRemotionプロジェクトがある場合は、このスキルをそのプロジェクトに設定してください。それ以外の場合は、以下に説明するパターンが単独で機能します。ソースリポジトリ内の参照実装パス: <YOUR_REFERENCE_VIDEO_PATH>。

使用するタイミング

以下の場合にトリガー:

"Xのローンチビデオを作成して"
"ローンチビデオ / プロダクトビデオ / 機能紹介動画を作って"
"[機能名]のビデオをレンダリングして"
ユーザーが明示的に /launch-video と入力

スキップする場合:

静的なソーシャルグラフィックス → /graphics-designer
スライドデッキ / ウェビナー → デッキパイプラインへ
8秒未満の短い広告クリップ → 通常はRemotionの単一静止画または1シーンコンポジションで十分。このスキルのフルパイプラインは過剰です。
生の録画映像（トーキングヘッド、ウェビナー録画、創業者ビデオ、顧客インタビュー、スクリーンキャプチャデモ） → 代わりに /video-use を使用してください。そのスキルはScribeトランスクリプトから単語境界でカットし、フィラーワードを除去し、カラーグレーディングを行い、字幕を焼き付けます。このスキルはRemotionでゼロから構築する合成モーショングラフィックス向けです。両スキルは連携可能です。/video-use 編集からブランドアニメーションインサート用のRemotionオーバーレイスロットを生成できますが、カット自体は /video-use から行われます。

アーキテクチャ図

motion/<video-name>/
├── package.json              # remotion 4 + react 19 + tsx + dotenv + mp3-duration
├── remotion.config.ts        # publicDir → ../../brand/motion (単一アセットソース)
├── tsconfig.json
├── SCRIPT.md                 # 人間が読めるナレーションスクリプト（ビート単位）
├── .env                      # ELEVENLABS_API_KEY (gitignored!)
├── .env.example
├── generate-audio.ts         # ElevenLabsナレーションランナー、ビートごとにハッシュキャッシュ
├── generate-sfx.ts           # ElevenLabs効果音生成ランナー、ハッシュキャッシュ
├── generate-music.ts         # ElevenLabs音楽ランナー + 先行無音トリム
├── script.timings.json       # ナレーション持続時間（生成）
├── sfx.timings.json          # 効果音持続時間（生成）
├── music.timings.json        # 音楽持続時間（生成）
└── src/
    ├── Root.tsx              # registerRoot
    ├── Video.tsx             # コンポジションレジストリ + LaunchVideoCompositionラッパー
    ├── theme.ts              # fps + 持続時間 + 色 (<YOUR_BRAND_TOKENS_PATH> をミラーリング)
    ├── script.ts             # ナレーションビート (id, phase, text)
    ├── timings.ts            # script.timings.json のローダー + beatStartFrame()
    ├── sfx.ts                # 効果音クリップ定義（フレームにアンカー）
    ├── music.ts              # 音楽プロンプト + ボリューム
    ├── Narration.tsx         # ナレーション専用Sequenceトラック
    ├── SoundDesign.tsx       # ナレーション + 効果音 + 音楽の組み合わせ
    └── scenes/
        ├── HeroBackground.tsx      # ループ再生 /video/hero-bg.mp4
        ├── OpeningScene.tsx        # オーケストレーションシーン（全フェーズをアンカー）
        ├── GlassCursor.tsx         # マルチプレイヤー風「あなた」カーソル
        ├── CompanyTable.tsx        # データテーブルに列を表示しながらデータ投入
        ├── AgentDashboard.tsx      # Googleカレンダーの週表示
        ├── AgentRunDetail.tsx      # ツール呼び出しトレースビュー
        ├── MemoryPanel.tsx         # 統計 + スパークラインダッシュボード
        ├── Confetti.tsx            # パーティクルバースト
        └── ClosingCard.tsx         # クロージングチャットのコールバック（「招待中」パターン）

アセットは brand/motion/ にあります:

video/hero-bg.mp4 + ポスター（ブランドのヒーロー背景ループ例：brand/motion/video/hero-bg.mp4 のアンビエントビデオ）
logos/{models,tools,companies,sequencers}/ — サードパーティのブランドマーク
audio/{launch-narration,sfx,music}/ — 生成されたmp3（再現可能なレンダリングのためにコミット）
components/HeroChatMockup.tsx — フレームワーク非依存のチャットシェル

新しいローンチビデオのワークフロー

1. ブリーフィング

ユーザーから以下を入手:

オーディエンス: 誰向けか？（GTMチーム？エンジニア？投資家？）
再生時間: 目標秒数（デフォルト30〜45秒。60秒以上はハイプ動画には長く感じられます）
主要メッセージ: 伝えるべき4〜8項目を、ナラティブ順に
出力フォーマット: ランドスケープ（Web/LinkedIn）、スクエア（IG/フィード）、または両方

2. ビートのアウトライン

各ビート = 1つのビジュアルフェーズ中に配置される1つのナレーション文。通常 6〜8ビート。ビートのオーディオ長の合計 = 総再生時間。各ビートの長さは 3〜7秒 を目標とします。

各ビートについて以下を記録: id, phase（1行のビジュアル説明）, text（音声行、10〜20ワード）。

3. SCRIPT.md を作成

人間がレビューできるよう、package.json と同じ階層にスクリプトを保存します。

形式:

## ビート N — フェーズ名
**フレーム** ~start–end（秒） · **目標 ~Nワード**

> "ここに音声行。"

**ビジュアル同期:** 画面上で起こること。

4. `src/script.ts` を構築

SCRIPT.md をデータとしてミラーリングします。ナレーションジェネレーターとコンポジションの両方が SCRIPT をインポートします。ここではRemotionのインポートは行いません。これにより、ジェネレーターをプレーンなNodeで実行できます:

export interface Beat { id: string; phase: string; text: string; }
export const SCRIPT: Beat[] = [...];
export const AUDIO_SUBDIR = "audio/launch-narration";
export function audioPath(id: string) { return `${AUDIO_SUBDIR}/${id}.mp3`; }

5. ナレーションを生成

cd motion/<video-name>
cp .env.example .env  # ELEVENLABS_API_KEY をペースト
npm install
npm run generate-audio

これにより brand/motion/audio/launch-narration/{beat-id}.mp3 が作成され、持続時間が script.timings.json に書き込まれます。ビートテキストごとにハッシュ化されるため、変更のないビートは以降の実行でスキップされます（低コストな反復）。

6. ビジュアルシーンを構築

OpeningScene.tsx 内:

モジュールロード時にビート開始位置を計算:

const HERO_BEAT     = beatStart("hero", 0);        // → 0
const DATABASE_BEAT = beatStart("database", 0);    // → 171 (hero終了後)
// ... 以下同様

すべてのアニメーションフレームを BEAT_X + offset で表現:

const BADGE_IN     = HERO_BEAT + 6;
const TYPE_START   = HERO_BEAT + 38;
const TOOLS_START  = HERO_BEAT + 115;  // "GTM stack" の歌詞に同期
const CURSOR_PRESS = HERO_BEAT + 165;

ビートごとの不透明度ゲートを使用して、フェーズシーン間をクロスフェード。

7. 効果音を生成（オプションだが効果的）

src/sfx.ts でクリック/トランジションの瞬間を定義します。各クリップを、同じ beatStartFrame() ヘルパーを使用して特定の fromFrame にアンカーします。効果的なクリップ例:

プロンプトアニメーション下のタイピングテクスチャ
カーソル押下時の鮮明なクリック
「登録」/完了瞬間のお祝いポップ
クロージングカード表示時の微妙な盛り上がり

npm run generate-sfx

8. 音楽を生成

src/music.ts で1つのプロンプトと持続時間を定義します。generate-music.ts は先行無音を自動的にトリムします（ElevenLabsの音楽は、ナレーションに対して「無音」と読まれる静かな小節で始まることがよくあります）。

npm run generate-music

9. レンダリングで反復

npm run render:landscape

レンダリングには約30〜90秒かかります。出力を常に yuv420p TVレンジに再エンコードしてQuickTime互換性を確保してください。背景ビデオは yuvj420p（JPEGレンジ）であり、その伝播が一部のプレーヤーで再生を壊します:

ffmpeg -y -i out/launch-landscape.mp4 \
  -c:v libx264 -profile:v high -level:v 4.0 \
  -pix_fmt yuv420p -color_range tv -crf 18 -c:a copy \
  out/launch-landscape-fixed.mp4
mv out/launch-landscape-fixed.mp4 out/launch-landscape.mp4

ffmpeg -ss N -i ... -frames:v 1 /tmp/check.jpg を使用して、レンダリング全体を視聴せずに特定のタイムスタンプをスポットチェックします。

デザインルール

ボイス（ビジュアル + 音声）

決して ダッシュ（―）を使用しないでください。ピリオド、カンマ、コロン、パレン、中点のみ使用可能。
どこでも禁止ワード: レバレッジ, シナジー, ロバスト, ワールドクラス, シームレス, 直感的, パワフル, 革新的。
数字は形容詞に勝る（「多くのツール」ではなく「8つのツール」）。
簡潔で具体的。曖昧さは避ける。
クロージング: ブランド主導で、「おめでとう」ではない。 ここで最も強いクロージングパターン: 「招待中」キッカー → 新しいプロンプトが入力されたチャット入力 → URL署名。冒頭のビートへのチャットコールバックは毎回祝賀の気持ちを呼び起こします。

色（例示トークン · ブランドに合わせて調整）

明るく、ニュートラル。アクセントは1色のみ、意味のある場面で1シーンに1回だけ使用（ライブドット、ハイライト、成功状態）。

トークン	16進数	用途
`--bg`	`#fafafa`	ページ背景
`--surface`	`#ffffff`	カード、ダッシュボード
`--ink`	`#0a0a0a`	主要テキスト + 数字
`--muted`	`#71717a`	二次テキスト
`--line`	`#e4e4e7`	境界線
`--accent`	`#10b981`	唯一のアクセント

タイポグラフィ

スタック: 'Helvetica Neue', Helvetica, Arial, sans-serif
モノ（キッカー、コード、ラベル）: ui-monospace, 'SFMono-Regular', Menlo
ヒーロータイポグラフィ: ウェイト450、タイトトラッキング（-0.05em）
モノキッカースタイル: 11-14px、大文字、文字間隔 0.16-0.18em、色 #71717a または #a1a1aa
ミュートグレーの本文テキスト内の太字/中字部分はブランドパターンをミラーリング: <span style={{ color: "#0a0a0a", fontWeight: 500 }}>bold</span> を周囲の #71717a テキストと対比。

2つのビジュアルモード

シーンごとに1つを選択。混在させない:

ガラスモーフィック / プロダクト内 — チャットシェル、カーソル、ツールピル、ヒーロー背景ビデオの上。backdrop-filter: blur(28px)、rgba(255,255,255,0.45) の白いガラス。
クリーンな白色 / 表形式 — テーブル、ダッシュボード、トレース、メモリパネル。bg #ffffff、1px solid #e4e4e7、微妙なドロップシャドウ。

モード間の背景フェードトランジションは最も映画的な瞬間の1つです。それに約20〜30フレームを割り当て、Easing.bezier(0.4, 0, 0.2, 1)（マテリアル標準）を使用してスムーズさを実現します。

アニメーションルール

スプリングのダンピングは22〜28。 20未満ではアマチュアと見なされるバウンスが発生します。「ポップ」効果を意図的に狙う場合にのみ14〜18を使用してください。
遅いよりはタイトなステガー。 最初の直感は常に遅くすることです。2回目のパスでは通常、ステガーを半分にカットします。カスケードアイテム間のデフォルトのステガー: 3〜6フレーム。
重要な箇所ではビジュアルを歌詞に同期。 ナレーションが「GTMスタック」と言っている場合、ツールピルはその単語に合わせて飛び込むべきです。3秒前ではありません。ElevenLabsの with_timestamps を単語レベルの同期に使用するか、概算で問題なければビートの持続時間/ワード数から推定します。
行の高さを予約。 テーブル/カードがテキストをアニメーションで表示するとき、行の minHeight により、コンテンツが埋まるにつれてレイアウトが飛び跳ねるのを防ぎます。カスケード中に行が成長すると見栄えが悪くなります。
高い空の長方形を作成する場合は、不透明度0ではなく条件付きレンダリングを使用。 まだ表示を開始していないカードはスペースを占有しないようにします。
シーンモード間はクロスフェードし、ハードカットしない。 主要な各シーンには、interpolate + イージングカーブを介してアニメーション化された opacity ゲートを設定します。

ElevenLabsの注意点

デフォルトのボイス + モデル: generate-audio.ts はデフォルトで Bill（pqHfZKP75CvOlQylNhV4）を eleven_multilingual_v2 で使用します。BillはElevenLabsライブラリ内の advertisement ユースケースボイスです: 賢明で成熟、鮮明。実際の広告ナレーションのように聞こえ、「ソーシャルメディアのAI担当者」ではありません。multilingual_v2 はプロダクションナレーションに最も安定していてリアルなモデルです。ローンチビデオには eleven_turbo_v2_5 を使用しないでください。高速/低コストモデルであり、ヒーロー背景ビデオに対してその違いははっきり聞こえます。Turboはプレビュー/効果音のタイミングチェックには適していますが、最終レンダリングには適していません。
ボイス設定 はスクリプトに組み込まれています: stability 0.40、similarity_boost 0.75、style 0.30、use_speaker_boost true。ElevenLabsのベストプラクティスによると: 安定性0.30未満は不安定、0.60超は単調。類似性0.75はドキュメントでのスイートスポット。スタイル0.20〜0.40はドリフトなしで表現力を追加します。顕著な抑揚の変動を望まない限り、スタイルを0.4以上にしないでください。
ボイスキャッシュキーにはボイス + モデル + 設定が含まれます。 これらのいずれかを変更するか（またはビートテキストを編集する）、キャッシュされたMP3が無効になり、ビートが再レンダリングされます。.env（VOICE_ID=... MODEL_ID=...）または generate-audio.ts を編集し、npm run generate-audio を再実行するだけです。
その他のナレーショングレードのボイス（Billが合わない場合）:
- Eric cjVigY5qzO86Huf0OWal — スムーズで信頼感があり、モダンなSaaS感
- Chuck Miller HIGUfNOdjuWQwwapnTRW — プロクローン、深くハスキーで映画的
- George JBFqnCBsd6RMkjVDRZzb — イギリス人のストーリーテラー、ナラティブストーリー
- Logan jD4PjnscE4XmlzgsuqY0 — プロクローン、若いストーリーテラー
- Brian nPczCjzI2devNBz1zQrb — 従来のデフォルト。social_media とラベル付けされ、Billよりも「AI感」が強い
- コミットする前に、参照用RemotionプロジェクトでこれらのA/Bサンプルをテストしてください。
ボイスの一覧表示には voices_read 権限が必要です。 一部のキーはこれを持っていません。GET /v1/voices ができない場合は、既知のIDにフォールバックしてください。
Music APIはプロンプト内のブランド名を拒否します。 「Apple keynote」、「Linear launch trailer」などはTOS違反をトリガーします。ブランド名を挙げずに雰囲気を説明してください（「モダンテクノロジー発売予告編のためのシネマティックインストゥルメンタル」、「アルペジエイトされたシンセメロディーを伴うパルシングエレクトロニックビート」）。
音楽はデフォルトで先行無音（約1〜2秒）で始まります。 ジェネレーターの silenceremove ffmpegパスがそれを取り除き、フレーム0で再生が始まるようにします。そのフィルターはそのままにしておいてください。
効果音の最小持続時間は0.5秒です。 それ未満ではAPIがエラーになります。切り上げてください。
音楽の音量: 0.10 はナレーションの下で無音と読まれます。0.15〜0.18 がスイートスポットです。はっきりと存在しますが、ボイスと競合しません。

避けるべき落とし穴

<Sequence> なしで <Audio> を追加: ランダムなタイミングで再生され、問題の追跡が困難になります。常に <Sequence> 内に <Audio> を配置してください。
各シーンで useCurrentFrame() を再計算: OpeningScene.tsx ですべてのビート開始位置を一度だけ計算し、各シーンコンポーネントに渡します。コンポーネントに useCurrentFrame() - 開始フレームを認識させ、絶対フレーム位置を認識させないでください。
音楽の先行無音をトリムしない: ElevenLabsの音楽はたいてい一度無音で始まります。generate-music.ts では silenceremove がパイプラインに組み込まれています。これは維持してください。
レンダリングを yuvj420p で残す: 背景が yuvj420p の場合、RemotionのMP4はそのまま継承します。QuickTime / macOSプレビューで壊れて表示されます。常に yuv420p に再エンコードしてください。
ヒーロー背景のループに loopAround を使用しない: Remotion 4にはネイティブのループがありません。Video コンポーネントの src/brand/motion/video/hero-bg.mp4 は remotion.config.ts 経由で publicDir から提供され、再生を継続します（Remotionドキュメントの「ループなし」パターン）。
プレビューに Studio を使用しない: Remotion Studioのプレビューは、このビデオが扱う複雑なコンポジション（多くのアセット、外部オーディオファイル）では不安定です。代わりに npm run render:landscape を使用して正確な出力を得てください。Studioは単一シーンの開発にのみ使用し、フルビデオの反復には使用しないでください。

クイックリファレンス

ファイルテンプレートパス

スクリプト: motion/<name>/SCRIPT.md
ナレーションデータ: motion/<name>/src/script.ts
タイミング: motion/<name>/script.timings.json
オーケストレーション: motion/<name>/src/scenes/OpeningScene.tsx
ヒーロー背景ビデオ: brand/motion/video/hero-bg.mp4
生成されたオーディオ: brand/motion/audio/launch-narration/{id}.mp3
効果音: brand/motion/audio/sfx/{id}.mp3
音楽: brand/motion/audio/music/music.mp3

便利なコマンド

# ナレーションを生成
npm run generate-audio

# 効果音を生成
npm run generate-sfx

# 音楽を生成
npm run generate-music

# ランドスケープレンダリング
npm run render:landscape

# スクエアレンダリング
npm run render:square

# フレームをスポットチェック (例: フレーム 1850)
ffmpeg -ss 1850 -i out/launch-landscape.mp4 -frames:v 1 /tmp/check.jpg

# yuv420p に再エンコード
ffmpeg -y -i out/launch-landscape.mp4 -c:v libx264 -profile:v high -level:v 4.0 -pix_fmt yuv420p -color_range tv -crf 18 -c:a copy out/launch-landscape-fixed.mp4

スキルメタデータ

スキル名: timscheuerai/content-vault
説明: ブランド製品または機能の30〜60秒モーショングラフィックスローンチビデオを構築。Remotion 4 Reactコンポジション + ElevenLabs AIナレーション + 効果音 + 背景音楽、ビートアンカー方式のタイミング、ブランドに合わせたデザインシステム。「ローンチビデオを作成」「プロダクトビデオを作成」「X機能のビデオ」「新機能をローンチ」または「/launch-video」と依頼されたときに使用。
トリガー: create launch video, make product video, video for X feature, launch new feature, /launch-video
スキップ条件: 静的グラフィックス（→ /graphics-designer）、スライドデッキ/ウェビナー（→ デッキパイプライン）、8秒未満の短いクリップ、生の録画映像（→ /video-use）

このスキルは、ブランドのモーションサブシステムが存在する場合はそれを継承し、存在しない場合はスタンドアロンの参照パターンとして機能します。

timscheuerai/content-vault

content-vault とは？

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

ドキュメント

ローンチビデオ作成ツール

使用するタイミング

アーキテクチャ図

新しいローンチビデオのワークフロー

1. ブリーフィング

2. ビートのアウトライン

3. SCRIPT.md を作成

4. `src/script.ts` を構築

5. ナレーションを生成

6. ビジュアルシーンを構築

7. 効果音を生成（オプションだが効果的）

8. 音楽を生成

9. レンダリングで反復

デザインルール

ボイス（ビジュアル + 音声）

色（例示トークン · ブランドに合わせて調整）

タイポグラフィ

2つのビジュアルモード

アニメーションルール

ElevenLabsの注意点

避けるべき落とし穴

クイックリファレンス

ファイルテンプレートパス

便利なコマンド

スキルメタデータ

関連スキル

steipete/video-frames

steipete/summarize

openclaw/openclaw

obra/superpowers

affaan-m/ECC

affaan-m/everything-claude-code

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

ドキュメント

ローンチビデオ作成ツール

使用するタイミング

アーキテクチャ図

新しいローンチビデオのワークフロー

1. ブリーフィング

2. ビートのアウトライン

3. SCRIPT.md を作成

4. src/script.ts を構築

5. ナレーションを生成

6. ビジュアルシーンを構築

7. 効果音を生成（オプションだが効果的）

8. 音楽を生成

9. レンダリングで反復

デザインルール

ボイス（ビジュアル + 音声）

色（例示トークン · ブランドに合わせて調整）

タイポグラフィ

2つのビジュアルモード

アニメーションルール

ElevenLabsの注意点

避けるべき落とし穴

クイックリファレンス

ファイルテンプレートパス

便利なコマンド

スキルメタデータ

関連スキル

steipete/video-frames

steipete/summarize

openclaw/openclaw

obra/superpowers

affaan-m/ECC

affaan-m/everything-claude-code

4. `src/script.ts` を構築