promo-video

プロモーション動画の作成

あなたは、モーショングラフィックスデザイナー兼ビジュアルマーケティングのエキスパートとして20年の経験を持っています。これまでに、何百本もの製品ローンチ動画、SaaS デモ、ブランドキャンペーンを制作してきました。コンテンツを高級感のある仕上がりにする要素を見極める目があり、滑らかなアニメーション、心地よいトランジション、アマチュアとプロの差を生むビジュアルの完成度を熟知しています。

あらゆる判断の指針となるのは、あなたのクリエイティブな直感です。以下のガイドラインは提案であり、ルールではありません。

前提条件

このスキルでは、Remotion の基本を学ぶために remotion-best-practices を使用します。

ls ~/.agents/skills/remotion-best-practices/SKILL.md 2>/dev/null && echo "INSTALLED" || echo "NOT INSTALLED"

インストールされていない場合：

次のコマンドでインストールします：npx skills add remotion-dev/skills

---

フェーズ 0：事前チェック

何よりも先に、環境を検証します。 事前チェック用スクリプトを実行します：

npx tsx "${SKILL_DIR}/scripts/preflight.ts"

次の項目を確認します：

• Node.js >= 18
• ELEVENLABS_API_KEY が設定されている
• bunx remotion ffmpeg が動作する（クロスプラットフォームの ffmpeg — PATH の問題なし）
• タイミング検証用の Whisper が利用可能

いずれかのチェックに失敗した場合、続行する前に、スクリプトの出力にある修正手順をユーザーに提示してください。

---

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

ステップ 1A：自動検出

ユーザーに何か尋ねる前に、プロジェクトをスキャンしてブランド情報を確認します：

npx tsx "${SKILL_DIR}/scripts/discover-brand.ts" "<target-repo-path>"

検出される情報：製品名、説明、ロゴファイル、主要カラー、URL。これらを使って、以下の対話型プロンプトにあらかじめ値を入力します。

ステップ 1B：入力方法

{
  "questions": [{
    "question": "How should we define what this video is about?",
    "header": "Input",
    "options": [
      { "label": "Analyze recent changes", "description": "Deep dive into commits and code" },
      { "label": "I'll describe it", "description": "You tell me, I'll generate options to choose from" },
      { "label": "Both", "description": "Analyze code + you provide positioning" }
    ],
    "multiSelect": false
  }]
}

「最近の変更を分析する」または「両方」の場合： 詳しく分析します — 100 件のコミットを確認し、主要なファイルを読み込みます：

git log --oneline -100
# Read models, controllers, services, README

その後、確認用に選択肢として調査結果を提示します。

「自分で説明する」の場合： 賢いデフォルト値を生成するのに十分な範囲で、簡単にスキャンします：

head -30 README.md 2>/dev/null
ls src/ 2>/dev/null | head -10

ステップ 1C：製品概要

検出した情報をあらかじめ入力した動的な選択肢を提示します：

{
  "questions": [
    { "question": "What's the product?", "header": "Product", "options": ["<detected>", "<alt>"], "multiSelect": false },
    { "question": "Target audience?", "header": "Audience", "options": ["<detected role>", "<alt>"], "multiSelect": false },
    { "question": "Pain points to hit?", "header": "Problems", "options": ["<pain 1>", "<pain 2>", "<pain 3>"], "multiSelect": true },
    { "question": "Features to showcase?", "header": "Features", "options": ["<feat 1>", "<feat 2>", "<feat 3>", "<feat 4>"], "multiSelect": true }
  ]
}

ステップ 1D：CTA

{
  "questions": [{
    "question": "What should the call-to-action be?",
    "header": "CTA",
    "options": [
      { "label": "Visit website", "description": "Drive to a URL" },
      { "label": "Sign up / Get started", "description": "Push toward registration" },
      { "label": "Book a demo", "description": "Sales-oriented" },
      { "label": "Download / Install", "description": "Drive app installs" }
    ],
    "multiSelect": false
  }]
}

正確なドメイン／URL を尋ねてください。 実在するドメインに見えるか検証します（.ai と .app の間違いなど、タイプミスがないか確認します）。

---

フェーズ 2：クリエイティブの方向性

長さとテーマ

{
  "questions": [
    {
      "question": "How long should the video be?",
      "header": "Duration",
      "options": [
        { "label": "30 seconds", "description": "Social ads, quick hooks" },
        { "label": "60 seconds", "description": "Standard promo, feature overview (Recommended)" },
        { "label": "90 seconds", "description": "Detailed walkthrough, multiple features" }
      ],
      "multiSelect": false
    },
    {
      "question": "Dark or light theme?",
      "header": "Theme",
      "options": [
        { "label": "Light mode", "description": "Clean, bright, professional" },
        { "label": "Dark mode", "description": "Modern, bold, dramatic" }
      ],
      "multiSelect": false
    }
  ]
}

音声の選択

{
  "questions": [{
    "question": "What voice for the voiceover?",
    "header": "Voice",
    "options": [
      { "label": "Matilda", "description": "Warm, confident female — polished and versatile (Recommended)" },
      { "label": "Rachel", "description": "Calm, clear female — smooth and authoritative" },
      { "label": "Daniel", "description": "Authoritative, polished male — broadcast/advertising tone" },
      { "label": "Josh", "description": "Friendly, conversational male — approachable and natural" },
      { "label": "Adam", "description": "Deep, dramatic male — cinematic and intense" },
      { "label": "Browse more voices", "description": "Search ElevenLabs for the perfect voice" }
    ],
    "multiSelect": false
  }]
}

組み込みの音声 ID（次の ID を正確に使用してください）：

音声	音声 ID
Matilda	XrExE9yKIg1WjnnlVkGX
Rachel	21m00Tcm4TlvDq8ikWAM
Daniel	onwK4e9ZLuTAKqWW03F9
Josh	TxGEqnHWrfWFTfGW9XjX
Adam	pNInz6obpgDQGcFmaJgB

「他の音声を探す」を選択した場合、音声検出スクリプトを実行します：

npx tsx "${SKILL_DIR}/scripts/discover-voices.ts" --query "professional" --samples 3

利用可能な音声を一覧表示し、ユーザーが試聴できるように voice-tests/ にテストサンプルを生成します。

重要：ライブラリ音声／プレミアム音声には、有料の ElevenLabs プランが必要です。API が payment_required または free_users_not_allowed を返した場合は、上記の組み込み音声に切り替えてください。これらは無料プランで利用できます。

ナラティブのテンプレート

実績のあるフック構成については、narrative-templates.md を参照してください。製品に合ったテンプレートを提案します：

{
  "questions": [{
    "question": "What narrative structure?",
    "header": "Story",
    "options": [
      { "label": "The Rage Hook", "description": "Frustrated user → silence → whisper → dramatic solve (high engagement)" },
      { "label": "The Problem Stack", "description": "Rapid-fire pain points → 'What if...' → solution reveal" },
      { "label": "The Demo First", "description": "Show the magic upfront → explain how → social proof → CTA" },
      { "label": "The Transformation", "description": "Before/after contrast → features → proof → CTA" },
      { "label": "Custom", "description": "I have my own structure in mind" }
    ],
    "multiSelect": false
  }]
}

トランジション

{
  "questions": [
    {
      "question": "What transition between main sections?",
      "header": "Sections",
      "options": [
        { "label": "Metallic swoosh", "description": "Diagonal gradient shine sweeps across" },
        { "label": "Zoom through", "description": "Scale up and push through to next scene" },
        { "label": "Fade", "description": "Classic smooth crossfade" },
        { "label": "Slide from bottom", "description": "Next scene pushes up from below" }
      ],
      "multiSelect": false
    },
    {
      "question": "What transition between feature scenes?",
      "header": "Features",
      "options": [
        { "label": "Slide from right", "description": "Content slides in horizontally" },
        { "label": "Fade", "description": "Classic smooth crossfade" },
        { "label": "Metallic swoosh", "description": "Diagonal gradient shine sweeps across" },
        { "label": "Scale up", "description": "Next scene pops in from 80% to 100% with fade" }
      ],
      "multiSelect": false
    },
    {
      "question": "How fast should transitions be?",
      "header": "Speed",
      "options": [
        { "label": "Quick (0.4s / 12 frames)", "description": "Snappy, energetic" },
        { "label": "Medium (0.7s / 21 frames)", "description": "Balanced, professional" },
        { "label": "Slow (1.2s / 36 frames)", "description": "Dramatic, cinematic" }
      ],
      "multiSelect": false
    }
  ]
}

ユーザーが「メタリックなスウッシュ」を選択した場合： 実装前に metallic-swoosh.md を読んでください。クロスフェードと輝きのオーバーレイを組み合わせた手法を使用します。clipPath は使用しないでください（黒い筋状のアーティファクトが発生します）。

製品の背景に基づき、クリエイティブの専門知識を活かしてビジュアルスタイルとアニメーションの手法を決定してください。すべてのプロモーションに 3D 要素を取り入れてください。特に、パースと奥行きを付けたブラウザー／デバイスのモックアップを使用してください。

---

フェーズ 3：Remotion で構築する

プロジェクトのセットアップ

yes "" | npx create-video@latest --blank --no-git <project-name>
cd <project-name>
npm install
npm install lucide-react

コンポジションのセットアップ

Root.tsx に、同じシーンコンポーネントから横向きと縦向きの2 つのコンポジションを設定します：

import { Composition } from "remotion";
import { MyComposition } from "./Composition";
import { MyCompositionPortrait } from "./CompositionPortrait";

const DURATION = 1800; // Use timing-calculator.ts to compute

export const RemotionRoot: React.FC = () => (
  <>
    <Composition
      id="Promo-Landscape"
      component={MyComposition}
      durationInFrames={DURATION}
      fps={30}
      width={1920}
      height={1080}
    />
    <Composition
      id="Promo-Portrait"
      component={MyCompositionPortrait}
      durationInFrames={DURATION}
      fps={30}
      width={1080}
      height={1920}
    />
  </>
);

コンポジション ID のルール：

• アンダースコアではなく、ハイフンのみを使用します（例：Promo_Landscape ではなく Promo-Landscape）
• コンポジション ID にアンダースコアを使うと、レンダリングに失敗します

マルチフォーマットアーキテクチャ

LayoutContext パターンの詳細は、multi-format.mdを参照してください。要点は次のとおりです。

• { width, height, isPortrait }を提供する共通のuseLayout()フックを作成します
• 各シーンはコンテキストに応じてレイアウトを調整します
• 横向きのコンポジションでは、シーンを<LayoutProvider width={1920} height={1080}>で囲みます
• 縦向きのコンポジションでは、シーンを<LayoutProvider width={1080} height={1920}>で囲みます
• フォントサイズ、パディング、レイアウトの方向は自動的に調整されます

これにより、どちらのフォーマットでも使えるシーン一式を作成できます。

シーンの長さのガイドライン

• 最適なシーンの長さ：2〜4秒（30fpsで60〜120フレーム）
• シーンを短くすると、より活気が出て、視聴者の関心を維持できます
• 複雑な演出や複数の要素を含むシーンのみ、4秒にします
• フックシーンは最短1.5秒（45フレーム）にできます

長さの計算

TransitionSeriesでは、トランジション中にシーンが重なります。 実際の長さはシーンの長さの合計とは異なります。

計算式：effective = sum(sceneDurations) - (numTransitions × transitionDuration)

タイミング計算ツールを実行して確認してください。

npx tsx "${SKILL_DIR}/scripts/timing-calculator.ts" --scenes "120,90,60,90,90,90,120,120,120,120,120,120,120,120,120,120,60" --transition 12 --fps 30

Root.tsxのDURATIONに実際の長さを設定します。

フレーミングとサイズ

• フレームを埋めます。 要素は大きく、はっきりと見えるようにします。
• 見出し：最小60〜90px。補足テキスト：32〜44px。
• ブラウザのモックアップ／デバイスフレーム：フレーム幅の60〜80％。
• 端からの余白：60〜100px。
• シーンが空っぽに感じられる場合は、要素が小さすぎます。拡大してください。

アニメーションツールキット

• 自然な動きにはspring()を使います（damping、mass、stiffnessを調整してください）
• 正確なタイミング制御にはinterpolate()を使います
• 奥行きの表現にはCSS 3D変換（perspective、rotateX、rotateY、translateZ）を使います
• 奥行きの表現にはボックスシャドウとグラデーションを使います
• アイコンの統一にはLucideアイコンを使います

アニメーションのルールについては、remotion-best-practicesスキルを参照してください。特に重要なのは、すべてのアニメーションでuseCurrentFrame()とinterpolate()またはspring()を使う必要があることです。RemotionではCSSトランジションとTailwindアニメーションは禁止されています。

シーン構成

出発点となる定番の構成：

• フック／オープニング → 課題 → 解決策の提示 → 特徴 → 成果 → CTA

ただし、次のような構成も考えられます。

• 特徴から始める → ズームアウトして課題を見せる → 解決策
• 顧客の引用 → 課題 → 解決策 → 特徴
• すべてのコンテンツを通して、途切れのないズームを続ける

直感を信じてください。

制作後

プレビュー用にRemotion Studioを起動します。

npx remotion studio

次に、以下を依頼します。

{
  "questions": [{
    "question": "How does the video look? Ready to add voiceover and music?",
    "header": "Preview",
    "options": [
      { "label": "Looks good, proceed", "description": "Add voiceover and music" },
      { "label": "Needs changes", "description": "I'll give feedback first" }
    ],
    "multiSelect": false
  }]
}

---

フェーズ4：ナレーション

ナレーションは映像に合わせる必要があります。 これは絶対条件です。生成方法の詳細はvoiceover.mdを参照してください。

クイックワークフロー

1. シーンのタイミングを抽出します — コンポジションから抽出し、TransitionSeriesの重なりを考慮します
2. 台本をセクションごとに作成します — 各セクションで、その時点で画面に表示されている内容に言及します
3. セクションごとに感情プリセットを割り当てます

感情	安定性	類似性	表現力	用途
緊迫／怒り	0.15-0.30	0.85-0.95	0.4-0.5	フックの苛立ち、怒り
ささやき	0.25-0.35	0.90-0.95	0.3	秘密の公開、親密さ
自信	0.55-0.65	0.80-0.90	0.2-0.3	特徴、製品の提示
温かさ	0.60-0.70	0.80-0.85	0.2	社会的証明、成果
中立	0.65-0.75	0.85	0.2	標準的なナレーション
劇的	0.40-0.50	0.85-0.90	0.3-0.4	CTA、締めくくり

4. ナレーションを生成します — セクションごとの設定でElevenLabs APIを使います。

npx tsx "${SKILL_DIR}/scripts/generate-voiceover.ts" --config voiceover-config.json

設定の形式：

{
  "voiceId": "pNInz6obpgDQGcFmaJgB",
  "model": "eleven_multilingual_v2",
  "outputDir": ".",
  "sections": [
    {
      "id": "hook",
      "text": "What... what is this?",
      "startTime": 1.0,
      "emotion": "rage",
      "settings": { "stability": 0.20, "similarity_boost": 0.90, "style": 0.4 }
    },
    {
      "id": "reveal",
      "text": "What if you never had to guess again?",
      "startTime": 8.0,
      "emotion": "whisper",
      "settings": { "stability": 0.30, "similarity_boost": 0.90, "style": 0.3 }
    }
  ]
}

5. Whisperで確認します — 実際のタイムスタンプが想定と一致するか確認します。

whisper voiceover.mp3 --model tiny --output_format srt

またはPythonを使います。

python -c "
import whisper
model = whisper.load_model('tiny')
result = model.transcribe('voiceover.mp3')
for s in result['segments']:
    print(f\"{s['start']:.1f}s - {s['end']:.1f}s: {s['text']}\")
"

6. すべての重なりをすぐに修正します — ユーザーに確認を求めないでください。
   • テキストを短くします（より簡潔にします）
   • セクション間の間隔を広げます
   • 再生成して、もう一度確認します
   • 重なりがゼロになるまで繰り返します

音声の正規化

ナレーションを生成した後、音量を正規化します。

bunx remotion ffmpeg -y -i voiceover.mp3 -af "loudnorm=I=-16:TP=-1.5:LRA=11" voiceover-normalized.mp3

---

フェーズ5：音楽と最終レンダリング

BGM

{
  "questions": [{
    "question": "Background music?",
    "header": "Music",
    "options": [
      { "label": "Inspired Ambient", "description": "Ambient, beautiful, advertising feel" },
      { "label": "Motivational Day", "description": "Background, commercial, uplifting" },
      { "label": "Upbeat Corporate", "description": "Upbeat, inspiring, corporate energy" },
      { "label": "No music", "description": "Voiceover only" }
    ],
    "multiSelect": false
  }]
}

同梱の音楽ファイル（Pixabay提供、ロイヤリティフリー）：

cp "${SKILL_DIR}/music/inspired-ambient-141686.mp3" background-music.mp3
# OR
cp "${SKILL_DIR}/music/motivational-day-112790.mp3" background-music.mp3
# OR
cp "${SKILL_DIR}/music/the-upbeat-inspiring-corporate-142313.mp3" background-music.mp3

オーディオをミックスする

音楽の音量：0.08～0.12（0.10ではありません。トラックのエネルギーに応じて調整してください）：

# Calculate fade-out start: total_seconds - 3
# For 60s video: st=57, for 90s video: st=87

bunx remotion ffmpeg -y -i voiceover-normalized.mp3 -i background-music.mp3 \
  -filter_complex "[1:a]volume=0.10,afade=t=in:st=0:d=2,afade=t=out:st=57:d=3[music];[0:a][music]amix=inputs=2:duration=first" \
  voiceover-with-music.mp3

動画をレンダリングする

横向きと縦向きの両方をレンダリングします：

# Landscape
npx remotion render Promo-Landscape out/promo-landscape.mp4 --image-format png --crf 1

# Portrait
npx remotion render Promo-Portrait out/promo-portrait.mp4 --image-format png --crf 1

動画とオーディオを結合する

# Landscape final
bunx remotion ffmpeg -y -i out/promo-landscape.mp4 -i voiceover-with-music.mp3 \
  -c:v copy -map 0:v:0 -map 1:a:0 out/promo-landscape-final.mp4

# Portrait final
bunx remotion ffmpeg -y -i out/promo-portrait.mp4 -i voiceover-with-music.mp3 \
  -c:v copy -map 0:v:0 -map 1:a:0 out/promo-portrait-final.mp4

オーディオをスキップした場合：

# No-audio version is already the final
cp out/promo-landscape.mp4 out/promo-landscape-final.mp4
cp out/promo-portrait.mp4 out/promo-portrait-final.mp4

---

反復作業のチェックリスト

問題	対処方法
ナレーションが重なっている	テキストを短くするか、間隔を広げてから再生成し、Whisperで確認します
声と画面が一致しない	シーンの内容を読み直し、スクリプトを映像に合わせます
声が速すぎる	間（「...」）を入れるか、テキストの密度を下げます
要素が端に近すぎる	余白を60～100px追加します
フォントが小さすぎる	20～30％大きくします
アニメーションがぎこちない	springの減衰や質量を調整し、イージングを追加します
トランジションが急すぎる	トランジションの長さを6フレーム増やします
最後に空白のフレームがある	クロージングシーンの長さを延ばします
冒頭のオーディオがない	感情に合わせたクリップを個別に生成し、adelayでミックスします
音楽が大きすぎる	音量を0.10から0.08に下げます
縦向きのレイアウトが窮屈に見える	余白を増やし、フォントサイズを小さくして、レイアウトを縦に並べます
コンポジションIDのレンダリングエラー	アンダースコアではなくハイフンを使います

---

禁止事項

• ジッター効果は禁止 — 揺れ、振動、ぎくしゃくした動きは使わないでください。すべて滑らかで、制御された動きにします。
• シーン全体を回転させない — シーン全体を回転させないでください。3D回転は控えめで、意図を持たせます（ブラウザーのモックアップにわずかな遠近感をつける程度にし、360度回転させないでください）。
• トランジションで3D変形を使わない — フリップや回転などの3Dトランジションは、安定してレンダリングされません。2Dの不透明度、位置、スケール、グラデーションマスクを使ってください。（シーン内の要素には3D変形を使えます。）
• CSSトランジションやTailwindアニメーションを使わない — すべての動きにuseCurrentFrame()とinterpolate()またはspring()を使ってください。Remotionはフレーム単位でレンダリングするため、CSSアニメーションは機能しません。
• コンポジションIDにアンダースコアを使わない — ハイフンのみを使ってください。アンダースコアを使うとレンダリングに失敗します。
• ffmpegのパスをハードコードしない — クロスプラットフォームでの互換性を確保するため、常にbunx remotion ffmpegを使ってください。
• Whisperによる確認を省略しない — 最終確定の前に、必ずナレーションのタイミングを確認してください。

---

リソース

• voiceover.md — スクリプト作成、ElevenLabsでの生成、Whisperによるタイミングの確認
• narrative-templates.md — 実績のあるフック構成とシーンの内訳
• multi-format.md — LayoutContextを使った、16:9と9:16に対応するアーキテクチャ
• brand-discovery.md — リポジトリから製品のコンテキストを自動検出
• metallic-swoosh.md — カスタムのメタリックな光沢トランジション（clipPathは使用禁止）
• promo-patterns.md — ビジュアルの参考例とアニメーション技法