/mv-composer

name: mv-composer
description: "Remotion + Kling i2v でプロモーションMV動画・バイラルショート動画を生成するスキル。 「MV作成」「動画を作って」「プロモーション動画」「TikTok動画」等のリクエストで発動。"
status: draft
triggers:
  - MV作成
  - 動画を作って
  - プロモーション動画
  - TikTok動画を作って
  - ショート動画
  - mv-composer
  - Remotion動画
  - バイラル動画

トリガーキーワード

MV作成, 動画を作って, プロモーション動画, Remotion動画, アニメMV, 宣伝動画, 広告動画, TikTok動画, ショート動画, バイラル動画, リール, Short動画の台本, バズる動画

> **Draft:** i2v のバッチ生成と自動 Video QA は未実装。実在する補助ツールと手動レビューの範囲で使用する。

MV Composer — Remotion + i2v 動画生成（横型 & 縦型）

Remotion（React ベース動画フレームワーク）と Kling 3.0 i2v を組み合わせ、 プロモーションMV動画・バイラルショート動画を自動生成するスキル。

**主な用途**:

• **横型 (16:9)**: サービス/講座の宣伝MV、SNS広告動画、LP埋め込み動画
• **縦型 (9:16)**: TikTok、YouTube Shorts、Instagram Reels
• **正方形 (1:1)**: Instagram フィード

---

フォーマットプリセット

| プリセット | 解像度 | アスペクト比 | 用途 | |-----------|--------|------------|------| | horizontal | 1920x1080 | 16:9 | YouTube, LP埋め込み, SNS広告 | | vertical | 1080x1920 | 9:16 | TikTok, YouTube Shorts, Reels | | square | 1080x1080 | 1:1 | Instagram フィード |

Root.tsx で `PRESETS.horizontal` / `PRESETS.vertical` / `PRESETS.square` を切り替え。 MVComposition.tsx の `useScale()` で自動スケール。

---

アーキテクチャ概要

台本（AIDA 8シーン or バイラル Hook→Body→CTA）
  ↓
┌─────────────────────────────────────────────────┐
│ 素材生成（並列実行）                              │
│  ├─ Gemini 3 Pro: イラスト生成 + ロゴ生成        │
│  ├─ ElevenLabs: ナレーション音声 (TTS)            │
│  └─ Kling 3.0 (fal.ai): i2v アニメーション (1-2本)│
└─────────────────────────────────────────────────┘
  ↓
┌─────────────────────────────────────────────────┐
│ Remotion コンポジション                          │
│  ├─ シーンコンポーネント                          │
│  │   ├─ i2v動画背景 (OffthreadVideo)             │
│  │   ├─ 静止画背景 (Img + Ken Burns)             │
│  │   └─ React MG (SVGチャート/ターミナル等)       │
│  ├─ テロップ（グラデーション背景バー付き）        │
│  ├─ ナレーション音声 + BGM                        │
│  ├─ ロゴ/ウォーターマーク                         │
│  └─ CrossFade トランジション                      │
└─────────────────────────────────────────────────┘
  ↓
npx remotion render → MP4 (H.264)

---

制作フロー（横型プロモーションMV）

Step 1: 台本設計

8シーンの AIDA 構成で台本を作成する。

F1: Hook（フック）     — 共感を引く問題提起
F2: Problem（課題）    — 具体的な痛みの描写
F3: Insight（気づき）  — パラダイムシフトの一言
F4: Evidence（証拠）   — 市場データ/成長曲線
F5: Split（比較）      — Before/After の対比
F6: Demo（実演）       — 実際の操作画面
F7: Proof（信頼）      — ツール連携/実績
F8: CTA（行動喚起）   — 価格 + ボタン + ブランド

各シーンに必要な情報:

• `dur`: ナレーション尺（秒）
• `terop`: テロップテキスト（main / sub）
• `motion_type`: `i2v` | `ken_burns` | `react_mg` | `static`

Step 2: 素材生成

**イラスト生成（Gemini 3 Pro）:**

python3 skills/nanobanana/scripts/nanobanana.py \
  "Anime style, frustrated person at desk with laptop, warm amber lighting, dark room" \
  --output public/assets/illustrations/f1_scene.jpg

**ナレーション生成（ElevenLabs）:**

# voice_id: Hajime = SOuiRq8aXqyALuq5QIQ8（日本語男性）
# 生成後 ffmpeg atempo=1.15 で高速化
ffmpeg -i narration_raw.mp3 -filter:a "atempo=1.15" -y narration_fast/frame_01.mp3

Step 3: i2v アニメーション生成（Kling 3.0）

**重要**: 1動画あたり i2v は **1-2シーンに限定**。コスト最適化のため。

汎用 i2v バッチスクリプトは未実装。承認済みの動画生成ワークフローで必要な1-2シーンを個別生成し、`mv-composer/public/assets/i2v/` に配置する。

Step 4: Remotion コンポジション

MVComposition.tsx の scenes 配列を編集し、各シーンコンポーネントを実装。

Step 5: レンダリング & レビュー

# 横型レンダリング
npx remotion render src/index.ts MV01-anime output/mv01_final.mp4 --codec h264

# 縦型レンダリング
npx remotion render src/index.ts MV01-vertical output/mv01_vertical.mp4 --codec h264

# フレーム抽出で目視確認
ffmpeg -ss 2 -i output/mv01_final.mp4 -vframes 1 -q:v 2 /tmp/check_f1.jpg

---

縦型動画（TikTok/Shorts）の制作フロー

バイラルスクリプト生成

python3 skills/viral-short-video/scripts/generate_viral_script.py \
  --topic "AIで業務を自動化する方法" \
  --duration 30 \
  --target "30代のビジネスパーソン" \
  --session "ai_automation"

出力の `viral_script.json` を読み、scenes 配列を MVComposition.tsx に反映して Remotion でレンダリング。

ピークフック抽出（バズ動画分析）

# プリセット素材をダウンロード（初回のみ）
bash skills/viral-short-video/scripts/download_assets.sh

# バズ動画のフックを分析
python3 skills/viral-short-video/scripts/generate_viral_script.py \
  --analyze-video hook_viral_10 \
  --topic "AI自動化" --duration 30

viral-short-video 生成ツールのパラメータ

| Parameter | Default | Description | |-----------|---------|-------------| | --topic | (必須) | 動画のトピック | | --product | - | 商材/サービス名 | | --duration | 30 | 動画の長さ: 15, 30, 60 | | --target | - | ターゲット層 | | --tone | casual | casual / professional / energetic / storytelling | | --hook-style | auto | auto / curiosity / fomo / social_proof / pattern_interrupt / contrarian | | --split-screen | false | スプリットスクリーン指示 | | --analyze-video | - | ピークフック抽出（プリセット名 or ファイルパス） | | --dry-run | false | 結果表示のみ |

縦型レイアウトの注意事項

• テロップ: TikTokセーフゾーン Y位置55-65%（上15%・下20%は避ける）
• 字幕: 1行5-8文字、最大2行、太字白+黒縁3px
• `useScale()` でフォントサイズ自動調整（`s = width / 1920`）

---

バイラルテクニック チートシート

1. 冒頭3秒フック（最重要）

**データ**: 3秒維持率65%超 → 4-7xインプレッション / エンゲージメント+340%

**7つの心理トリガー** (バイラル動画の84.3%で使用):

| # | トリガー | 日本語フック例 | 英語フック例 | |---|---------|--------------|-------------| | 1 | パターンインタラプト | 「ちょっと待って、これ見て」 | "Wait, look at this" | | 2 | キュリオシティギャップ | 「99%の人が知らない○○」 | "Nobody tells you this about..." | | 3 | FOMO | 「今だけ」「これ見逃したら損」 | "You're missing out on..." | | 4 | ソーシャルプルーフ | 「100万人が使ってる」 | "1M people already use this" | | 5 | 感情的覚醒 | 「マジでヤバい」「信じられない」 | "I can't believe this works" | | 6 | サプライズ | （目を見開く + 沈黙1秒） | (wide eyes + 1s pause) | | 7 | 個人的関連性 | 「○○な人だけ見て」 | "If you're a [target], watch this" |

2. モジュラー構造

[Hook: 0-3秒] → [Body: 3-15秒] → [CTA: 15秒+]

Hook部分だけ差し替えてA/Bテスト。制作コスト-40%、テスト速度2x。

3. ループブリッジ

• リウォッチ = アルゴリズムブースト+84%
• 70%完視聴率 → アルゴリズム推進
• パターン: 動画の最後で「さっき言った○○だけど...」→ 冒頭に戻る

4. フラッシュテキスト

• 最後の2-3フレーム（0.1秒未満）に赤/黒文字を一瞬表示
• 意識的に読めない速度 → リウォッチ誘導
• テキスト例: 「もう一回見て」「隠しメッセージ」「気づいた？」

5. 字幕（キャプション）

• 85%がミュート視聴 → 字幕で維持率+31%、エンゲージメント+38%
• TikTokセーフゾーン: Y位置55-65%（上15%・下20%は避ける）

6. 音声ペース

• 1.1-1.3xの速い音声 → 離脱防止
• ElevenLabs の場合 `atempo=1.15` で後処理

---

クオリティチェックリスト（v1→v16 で確立）

視認性

• [ ] テロップ main: **52px以上**（bold時 64px以上）※横型基準、縦型は自動スケー