プロモーションビデオスキル（Remotion）は何をしますか？

ウェブサイトのURLまたはユーザーが提供するブランド情報からプロモーションビデオを生成します。

2つのパス

パスA: ユーザーがウェブサイトURLを提供した場合

ユーザーからURLが提供された場合:

python generate_promo.py --source <url> を実行して src/data/brand.json と src/data/script.json を生成する

すぐに生成されたスクリプトをユーザーに表示する — クリーンな要約を提示する:

ブランド名: xxx
タグライン: xxx
メインカラー: #xxx
シーン構成:
  1. イントロ (3秒) — ブランドロゴ + 名称 + タグライン
  2. 機能 (5秒) — 機能1 / 機能2 / 機能3
  3. ダッシュボード (4秒) — 製品インターフェース表示
  4. CTA (3秒) — "xxx" + ボタン

確認を求める:
確認後、npm run dev を実行し、ユーザーに http://localhost:3000 でプレビューするよう伝える

パスB: ユーザーが何も提供しなかった場合

ユーザーが単に「ビデオを生成して」「プロモを作って」などと具体的に何も言わずに依頼した場合、コーディングを始めずに、以下の質問を一度にすべて尋ねる:

ブランド名は何ですか？（または宣伝したい製品/プロジェクト名）
製品を一言で説明してください（タグラインとして使用）
ブランドカラーはありますか？（ない場合はこちらで選びます）
どのようなセールスポイントを強調したいですか？（最大3つ）
ウェブサイトのURLはありますか？（あれば情報を自動取得できます）

ユーザーが回答したら、その回答に基づいて直接 src/data/brand.json と src/data/script.json を作成します。その後、スクリプトの要約を表示して確認します（パスAの手順2-3と同じ）。

確認後

npm run dev を実行してRemotion Studioを起動する
ユーザーに http://localhost:3000 でプレビューするよう伝える
エクスポートする場合: npx remotion render PromoVideo out/promo.mp4

デザインガイドライン

ビジュアル原則

画面を埋め尽くし、余白を減らす — 中間シーン（機能/ダッシュボード）では flex: 1 または全幅レイアウトを使用して1920×1080のキャンバスを埋め、大きな空白を避ける
テンプレート的な繰り返しレイアウトを避ける — 同じ動画内で「左に大見出し + 右にカード/mockup + 下部に字幕」という骨組みを繰り返し使用しない。各動画では少なくとも3つの明らかに異なる構成（例: 全面見出し、斜めティッカー、中心軸構成、コラージュカード、雑誌風段組み、全画面製品インターフェース、コードオーバーレイ、タイムライン/パス構成）を使用する。
同一動画内のカードの角丸は統一する — 各動画で CARD_RADIUS トークンを定義し、すべてのカード、パネル、mockupコンテナ、機能ブロックで同じ値を使用する。同一動画内で直角、12px、34pxを混在させない。字幕、ロゴ、小さなボタン、プログレスバーは機能的な角丸を持ってもよいが、コンテンツカードは統一する必要がある。
カードがデフォルトの回答ではない — 機能シーンは、ずらしたコラージュ、縦方向の重ね合わせ、ティッカー、ノード図、エディタパネル、製品スクリーンショットの切り抜きなどで表現できる。デフォルトで3等分のカード横並びにしない。
エンディングページは異なる締めくくり方を採用する — CTA/エンディングでは、以前のシーンで使用した左見出し右カードや左見出し左ボタンをデフォルトで再利用しない。中央ロックアップ、ポスター風レイアウト、周囲を取り巻く情報ブロック、全画面タイポグラフィッククローズ、またはブランド/URLを視覚的中心とした構成を優先し、明確な最終フレームを形成する。中央揃えの構成では、CTAボタンとURLを上下に配置し、中心軸を安定させる。
メインカラーはウェブサイトのCTAボタンから取得する — ブランドカラーはbutton/a要素のインラインスタイルからグラデーションカラーを抽出する必要があり、ランダムなCSS色ではない
グローバル字幕 — 各シーンの下部中央に字幕バー（薬莢形の半透明背景）を表示する。フォントサイズ32px、パディング18px 48px、スプリングアニメーションで出現する。字幕はscript.jsonの各シーンの subtitle フィールドで制御し、設定されていない場合は表示しない
URL入力のみサポート — SVGモードは削除済み。データソースとしてウェブサイトのURLのみを受け付ける

スクレイピングルール

ブランド名は優先的に og:site_name を使用し、次にtitleタグ（- または | で区切られた最初のセグメント）を使用する
タグラインは優先的に og:description を使用し、80文字以内に切り詰める
ブランドカラーは優先的にbutton/CTA要素のインラインスタイルからグラデーションカラーを抽出する
機能のタイトルは長さが45文字未満のものをフィルタリングし、長すぎる文はスキップする
ウェブサイトのライト/ダークテーマを検出し、背景色と文字色を自動的に一致させる

データ検証チェックリスト

データ生成後、ユーザー確認を取る前に以下の項目をチェックする:

ブランド名が簡潔でクリーンか（完全なHTMLタイトルではないか）
タグラインが80文字未満か
メインカラーがCTAボタンから取得されているか（ランダムな色ではないか）
機能が正確に3つあり、タイトルが簡潔で力強いか
各シーンのテキストが1920×1080のキャンバス上で読みやすいか

ビジュアルセルフチェックリスト（必須）

ビデオを実装または変更した後は、単にlintを実行するだけでなく、必ず自分でビジュアルレビューを行うこと:

npm run lint を実行する
npx remotion compositions src/index.ts でコンポジションが存在し、長さが正しいことを確認する

各主要シーンから少なくとも1枚の静止画像をエクスポートし、レイアウトを自己チェックする。例:

npx remotion still src/index.ts <CompositionId> /tmp/<id>-scene1.png --frame=30
npx remotion still src/index.ts <CompositionId> /tmp/<id>-scene2.png --frame=120
npx remotion still src/index.ts <CompositionId> /tmp/<id>-scene3.png --frame=210

キーフレームの画像を開いて以下の問題を確認する。何かあれば、先に修正してから納品すること:
- 重要なテキスト、ボタン、字幕が切り取られたり、キャンバスからはみ出したりしていないか
- 装飾的または動的なレイアウト（ティッカー、背景グラフィック、超大見出しの切り抜きなど）は、デザイン上の選択として見えるべきであり、エラーに見えてはならない。キャンバスからはみ出しても構わない
- カード内のコントロール（プログレスバーのトラック、チャートバー、入力フィールド、ボタン、ステータスバーなど）がカードの境界を越えていないか。このような意図しないオーバーフローは修正する必要がある
- 読み取りを妨げるような要素の重なりがないか
- 字幕が中央揃えで、主要なCTAや核心的な画面を圧迫していないか
- 同一動画内のすべてのコンテンツカード/パネル/mockupコンテナが同じ CARD_RADIUS を使用しているか
- 少なくとも3種類の異なるレイアウトがあり、動画全体で同じ左右分割構成を繰り返していないか
- 画面端にセーフゾーンが確保されているか：重要なテキストは端から少なくとも64pxの距離があるか
- 長い単語、長い見出し、ボタンテキストがコンテナから溢れていないか
ユーザーがStudioでのプレビューのみを希望する場合は、mp4を繰り返しエクスポートしないこと。http://localhost:3000 が開けることを確認すれば良い。

ファイル構造

src/
├── Root.tsx              # Remotionコンポジション登録
├── PromoVideo.tsx        # メインビデオオーケストレーター
├── scenes/
│   ├── Scene01_Intro.tsx     # ロゴ + ブランド名 + タグライン
│   ├── Scene02_Feature.tsx   # 3カード等幅横並びアニメーション
│   ├── Scene03_Dashboard.tsx # 全幅製品インターフェースシミュレーション
│   └── Scene04_CTA.tsx       # 行動喚起 + ボタン
└── data/
    ├── script.json       # ビデオスクリプト（テキスト、タイミング）
    └── brand.json        # ブランドデータ（色、フォント、ロゴ）

データ形式

brand.json

{
  "name": "ブランド名",
  "tagline": "一行説明",
  "colors": {
    "primary": "#3E4E33",
    "secondary": "#687058",
    "background": "#FFFFFF",
    "surface": "#F8FAFC",
    "text": "#0F172A",
    "textSecondary": "#64748B",
    "accent": "#3E4E33"
  },
  "font": "Inter, sans-serif",
  "logoUrl": "",
  "features": [
    { "title": "機能1", "description": "短い説明" },
    { "title": "機能2", "description": "短い説明" },
    { "title": "機能3", "description": "短い説明" }
  ],
  "cta": {
    "headline": "始めませんか？",
    "buttonText": "無料で始める",
    "url": "https://example.com"
  }
}

script.json

{
  "fps": 30,
  "width": 1920,
  "height": 1080,
  "scenes": [
    { "id": "intro", "duration": 90, "headline": "", "subtext": "", "subtitle": "" },
    { "id": "feature", "duration": 150, "headline": "", "subtitle": "", "items": [] },
    { "id": "dashboard", "duration": 120, "headline": "", "subtitle": "" },
    { "id": "cta", "duration": 90, "headline": "", "buttonText": "", "subtitle": "" }
  ]
}

カスタマイズ

src/data/brand.json を編集して、色、フォント、ロゴ、ブランド名を変更する
src/data/script.json を編集して、シーンのテキストとタイミングを変更する
src/scenes/ 内のシーンコンポーネントを編集して、レイアウトやアニメーションを変更する

プロモーションビデオスキル（Remotion）

プロモーションビデオスキル（Remotion）とは？

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

ドキュメント

プロモーションビデオスキル（Remotion）は何をしますか？

2つのパス

パスA: ユーザーがウェブサイトURLを提供した場合

パスB: ユーザーが何も提供しなかった場合

確認後

デザインガイドライン

ビジュアル原則

スクレイピングルール

データ検証チェックリスト

ビジュアルセルフチェックリスト（必須）

ファイル構造

データ形式

brand.json

script.json

カスタマイズ

関連スキル

steipete/video-frames

steipete/summarize

openclaw/openclaw

obra/superpowers

affaan-m/ECC

affaan-m/everything-claude-code

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

ドキュメント

プロモーションビデオスキル（Remotion） は何をしますか？

2つのパス

パスA: ユーザーがウェブサイトURLを提供した場合

パスB: ユーザーが何も提供しなかった場合

確認後

デザインガイドライン

ビジュアル原則

スクレイピングルール

データ検証チェックリスト

ビジュアルセルフチェックリスト（必須）

ファイル構造

データ形式

brand.json

script.json

カスタマイズ

関連スキル

steipete/video-frames

steipete/summarize

openclaw/openclaw

obra/superpowers

affaan-m/ECC

affaan-m/everything-claude-code

プロモーションビデオスキル（Remotion）は何をしますか？