video-producer

使用する場面

ユーザーが動画ブリーフ（複数のシーンや物語の展開を含む、完成動画の説明）を提示した場合に、このスキルを使用します。

トリガー：「プロモーション動画を作成して」「製品デモを作って」「30秒の広告が必要」「ソーシャルメディア向けのアニメーションを作成して」など、複数シーンの動画について説明するプロンプト。

次の場合は使用しないでください：

• 単一のアニメーション効果 → gsap-animation を使用
• ビジュアル背景コンポーネント → react-animation を使用
• 動画以外のタスク

スキル間の関係

video-producer (this skill)       ← orchestration: what story, which scenes
├── gsap-animation                ← animation: text splits, SVG drawing, timeline orchestration
├── spring-animation              ← physics: bouncy entrances, elastic trails, organic motion
├── react-animation               ← visuals: Aurora, Silk, particles, grain
└── Remotion                      ← engine: rendering, composition, sequences

ワークフロー

初回リクエスト：$ARGUMENTS

フェーズ 1：ブリーフの確認

ユーザーのリクエストから以下を抽出します。不足している必須項目があれば、AskUserQuestion を使用します。

項目	必須	デフォルト	例
製品／ブランド名	はい	—	"Topview"
動画の種類	はい	SaaS Promo	SaaS Promo / Typographic / Social Overlay
主要メッセージ（2～4件）	はい	—	"AI-powered editing", "No coding required"
感情的なトーン	はい	—	緊急感のある / 安心感のある / ワクワクする / プロフェッショナル / 反骨的 / 温かみのある / 遊び心のある
記憶に残る要素	はい	—	「30秒後に視聴者が覚えている、ただ一つのイメージ」
対象ユーザー	いいえ	一般	"開発者", "マーケター"
長さ	いいえ	テンプレートのデフォルト	"25 seconds"
解像度	いいえ	1920x1080	正方形の場合は 1080x1080
FPS	いいえ	30	ソーシャルメディアの場合は 60
ビジュアルスタイル	いいえ	Apple Minimal	Apple Minimal / Bold Typography / Dark Tech / Warm Organic / Retro Pop / Editorial Mono
CTA テキスト	いいえ	なし	"Start Creating →"
アクセントカラー	いいえ	スタイルプリセットから	"#FF7D00"

感情的なトーンに基づいて、アニメーション技法、スプリング設定、テンポを選択します。

• 緊急感のある → SPRING.stiff と GSAP のハードカット、速いスタッガー（2～3フレーム）、GSAP シーンでは power3.out
• 安心感のある → SPRING.smooth / SPRING.gentle、高いダンピング、ゆっくりとした表示、暖色系パレット
• ワクワクする → SPRING.bouncy / SPRING.pop、低いダンピング、彩度の高い色、SpringTrail のポップイン
• プロフェッショナル → SPRING.snappy / SPRING.smooth、落ち着いたタイミング、クリーンな動き、十分な静止時間
• 反骨的 → SPRING.stiff と SPRING.rubber の組み合わせ、GSAP のグリッチ効果、不規則なスタッガー
• 温かみのある → SPRING.gentle / SPRING.molasses、暖色系グラデーション、丸みのある形状、ゆっくりとしたスタッガー（6～8フレーム）
• 遊び心のある → SPRING.wobbly / SPRING.rubber、大きなオーバーシュート、GridStagger の中央から外側への展開、明るいアクセント

記憶に残る要素 — 視聴者がスクリーンショットを撮ったり、思い出したりする、唯一のビジュアル場面です。制作上のあらゆる判断で、この要素を際立たせる必要があります。「この動画を友人に説明するとしたら、どんなイメージを伝えますか？」と尋ねてください。

フェーズ 2：計画

1. 動画の種類に基づいてナラティブテンプレートを選択 → rules/narrative-templates.md を参照
2. ビジュアルスタイルを選択 → rules/style-presets.md を参照
3. 選択したテンプレートのシーン枠に、ユーザーのメッセージを割り当てます
4. 各シーンのアニメーションパターンを選択 → rules/scene-patterns.md を参照
5. 計画を表にしてユーザーに提示します。

Scene | Duration | Pattern        | Content
1     | 3s       | TitleCard      | "Topview is powerful"
2     | 3s       | CardFlip3D     | CLI pain → AI solution
...

続行する前に、ユーザーの確認を待ちます。

フェーズ 3：プロジェクトのひな形作成

標準的な Remotion プロジェクト構成を生成します → rules/project-scaffold.md を参照：

1. src/config.ts — すべてのパラメーター（色、タイポグラフィ、シーンのフレーム数）
2. src/Root.tsx — コンポジションの登録
3. src/Composition.tsx — すべてのシーンを含む TransitionSeries
4. src/components/ — 共有コンポーネント（背景など）
5. src/scenes/ — シーンごとに 1 ファイル

フレーム数の計算： sceneFrames = Math.ceil(sceneDurationSeconds * fps)

フェーズ 4：シーンの実装と評価

シーンを順番に実装します。次のシーンに進む前に、各シーンで構築 → 検証 → 修正のサイクルを実施します。→ 完全な採点基準と自動修正ルールについては、rules/scene-evaluator.md を参照してください。

各シーンについて：

ステップ 4a：シーンを実装する

1. src/scenes/SceneN_Name.tsx を作成します
2. 適切な手法を選択します：
   • テキスト分割／SVG 描画／複雑なタイムライン → useGSAPTimeline または useGSAPWithFonts（gsap-animation スキルから）
   • 弾む／伸縮する登場演出／スプリングの軌跡／オーバーシュート効果 → spring() + プリセット（spring-animation スキルから）
   • シンプルなフェード／スライド／線形カウンター → Remotion ネイティブの interpolate()
   • ビジュアル背景 → react-animation コンポーネント
3. プランで選択したアニメーションパターンを適用します
4. Composition.tsx に接続し、Root.tsx にプレビューを登録します

ステップ 4b：静止画をレンダリングする

目視確認用に重要なフレームを 2 枚キャプチャします：

# Entry frame — catches early layout, initial positions
npx remotion still src/index.ts SceneN-Preview /tmp/sceneN_entry.png --frame={floor(SCENE_FRAMES.sceneN * 0.15)}

# Peak frame — hero moment, all entrances settled
npx remotion still src/index.ts SceneN-Preview /tmp/sceneN_peak.png --frame={floor(SCENE_FRAMES.sceneN * 0.60)}

ステップ 4c：評価する

シーンのコード、config.ts、レンダリングしたスクリーンショットを確認します。重み付けされた 7 つの評価項目（アンチパターンの遵守、タイポグラフィ、色とコントラスト、モーションデザイン、構図、ストーリーの一貫性、技術的な正確さ）で採点します。

• スコア >= 7.0 で、即時失格項目がない → 合格、次のシーンに進みます
• スコア < 7.0 または即時失格項目に該当 → ステップ 4d に進みます

ステップ 4d：自動修正（最大 2 回）

rules/scene-evaluator.md の減点 → 修正対応表に基づいて、対象を絞った修正を適用します。各減点項目は、曖昧な提案ではなく、具体的なコード変更に対応します。修正後：

• ステップ 4b に戻ります（静止画を再レンダリングし、再採点します）
• 2 回目の反復後も基準を下回る場合は、警告を出力し、次のシーンに進みます

シーン間の追跡： シーンごとに使用したアクセントカラー、スプリングのプリセット、登場方向、手法のコンテキストを継続的に保持します。シーン 3 以降では、バリエーションに関する問題（同じプリセットが 3 回連続する、登場方向が同じになるなど）を確認します。

すべてのシーンの完了後： フェーズ 5 に進む前に、シーンごとのスコア、反復回数、シーン間の所見を示す完全な評価サマリーテーブルを出力します。

パターン選択の原則： バウンス／オーバーシュートを伴う物理ベースの動きには spring() を使用します。SplitText、DrawSVG、MorphSVG、複雑なタイムラインの調整には GSAP を使用します。シンプルな線形／イージングの動きには interpolate() を使用します。

フェーズ 5：レンダリング

# Standard MP4
npx remotion render src/index.ts MainVideo --output out/video.mp4

# High quality
npx remotion render src/index.ts MainVideo --codec h264 --crf 15

# Transparent background (social overlays)
npx remotion render src/index.ts MainVideo --codec prores --prores-profile 4444
npx remotion render src/index.ts MainVideo --codec vp9 --output out/overlay.webm

形式	アルファ	用途
MP4 H.264	いいえ	幅広い環境での再生
ProRes 4444	はい	プロフェッショナルなコンポジット
WebM VP9	はい	Web オーバーレイ

複雑さの調整

実装の複雑さは、感情的なトーンとビジュアルスタイルに合わせます。アニメーションに費やす労力は、クリエイティブなビジョンを支えるものであり、それを上回ったり損なったりしてはいけません。

トーン × スタイル	ペース	スプリングのプリセット	GSAP の使用法	ホールド時間
緊迫感のある＋大胆なタイポグラフィ	速い（1.5-2.5秒のシーン）	stiff（スタガー：2f）	charCascade、ハードカットのトランジション	短い（0.5秒）
エキサイティング＋ダークテック	やや速い（2-3秒）	bouncy / pop（スタガー：3f）	circleReveal トランジション、DrawSVG	中程度（0.8秒）
プロフェッショナル＋Apple ミニマル	落ち着いた（3-4秒）	smooth / snappy（スタガー：5f）	textReveal、SplitScreenComparison	長い（1.2秒）
温かみのある＋温かくオーガニック	ゆっくり（3-5秒）	gentle / molasses（スタガー：8f）	GSAP は最小限にし、スプリングのみを優先	長い（1.5秒）
反骨的＋レトロポップ	不規則	stiff と rubber を交互に使用	ScrambleText、グリッチ効果	可変
遊び心のある＋任意のスタイル	弾むような（2-3秒）	wobbly / pop（スタガー：3f）	GSAP は最小限にし、SpringTrail と GridStagger を使用	中程度（0.8秒）

原則： 完璧に仕上げた特徴的なトランジションを1つ使うほうが、平凡なエフェクトを6つ使うよりも大きなインパクトを生みます。アニメーションの予算は、記憶に残る瞬間に投入しましょう。

肥大化を防ぐルール： 各シーンでは、中心となるアニメーション手法を1つだけ使用します。

• スプリング主体：すべての動きに spring() と interpolate() を使用します（弾むような登場、軌跡、カウンター）。
• GSAP 主体：テキスト分割、SVG 操作、複雑なオーケストレーションに useGSAPTimeline を使用します。
• 併用：要素の登場にはスプリングを使い、その要素内のテキスト分割には GSAP を使います（許容されます）。
• 絶対に避けること：1つのシーンで GSAP タイムライン、スプリング物理、react-animation の背景、複雑な補間を組み合わせること。

スプリング優先の原則： すべての登場、退場、スタガーアニメーションでは、まず spring() を使います。SplitText、DrawSVG、MorphSVG、ScrambleText、または複雑なタイムラインラベルが特に必要な場合にのみ、GSAP を追加します。スプリングは軽量で、追加の依存関係を必要とせず、自然でオーガニックな動きを生み出します。

クリエイティブディレクションの原則

すべての動画には独自の視点が必要です。 強い美的こだわりのない「クリーンでプロフェッショナル」な動画は、ありきたりな動画にすぎません。具体的で大胆な選択を貫きましょう。

• 画面を支配する色（同じ比重のパステルカラーを5色使うのではなく）
• 個性のあるフォント（Google Fonts の検索結果の先頭にあるものではなく）
• シーンを通じて繰り返される動きの特徴（同じイージングカーブ、同じ登場方向、同じホールドのリズム）
• 期待を裏切る空間上のルール（すべてのテキストを左端から20％の位置に配置する、非対称のパネル、斜めのグリッド）

記憶に残るかのテスト： プランを確定する前に、「AI が生成したほかのプロモーション動画を10本並べたとき、自分の動画ははっきりと違って見えるだろうか？」と問いかけてください。そうでなければ、さらに美的な個性を押し出しましょう。

すぐに使える選択ガイド

「必要なもの…」	使用するもの
大胆なテキストの登場（文字ごとに分割）	gsap: charCascade / textReveal effect
大胆なテキストの登場（単語が弾む）	spring: WordTrail / CharacterTrail
横並びの比較	gsap: SplitScreenComparison template
カードのめくり表示（スムーズ）	gsap: CardFlip3D template
カードのめくり表示（バネ物理）	gsap: SpringCardFlip
両側から登場する要素	gsap: PerspectiveEntrance template
単語のハイライト	gsap: TextHighlightBox pattern
UI クリックのシミュレーション	gsap: CursorClick pattern
テキストの切り替えアニメーション	gsap: RotateXTextSwap pattern
流れる背景	react-animation: Aurora / Silk
フィルムグレインのオーバーレイ	react-animation: NoiseOverlay
シンプルなフェード／スライド	Remotion: interpolate()
数値カウンター（線形）	Remotion: interpolate()
数値カウンター（オーバーシュート）	spring: SpringCounter
弾むような拡大で登場	spring: ScalePop
リスト／グリッドを段階的に表示	spring: SpringTrail / GridStagger
登場＋退出のアニメーション	spring: useSpringEnterExit
順次オーケストレーション	spring: useSpringChain
タイピングエフェクト	Remotion: .slice() + interpolate()
シーン遷移（ワイプ／アイリス）	gsap: circleReveal / wipeIn effect
シーン遷移（バネ式スライド）	spring: SpringSlide / SpringCrossfade
ロゴの線を描画	gsap: DrawSVG + drawIn effect
機能グリッドのポップイン	spring: SpringFeatureGrid

---

多様性の徹底

異なる動画で同じ美的表現を二度と使わないでください。各作品はテンプレートを埋めたものではなく、独自の創作物として感じられる必要があります。

• フォントを変える： 連続する動画で同じディスプレイフォントを使わないでください。前回 Space Grotesk を使ったなら、今回は Clash Display か Cabinet Grotesk を選びましょう。
• 色温度を変える： 暖色系（オレンジ／コーラル／ゴールド）と寒色系（ブルー／バイオレット／エメラルド）を主体とするパレットを交互に使いましょう。
• 空間構成を変える： 前回の動画が中央揃えで対称的だったなら、今回は左寄せで非対称な構成にしましょう。
• 動きの特徴を変える： バネ主体、線形で機械的、有機的で流動的なアニメーションの考え方を使い分けましょう。
• 背景の表現を変える： 単色、グラデーションのブロブ、オーロラ、グレインテクスチャ、幾何学模様を順に使いましょう。

差別化ルール： フェーズ 3 を始める前に、計画した美的表現を「デフォルトの AI 動画」と頭の中で比較してください。白背景、中央揃えの Inter テキスト、フェードイン遷移、青のアクセントがその例です。これらの特徴を複数共有している場合は、デフォルトからさらに遠ざけてください。

---

創造的な意欲

すべての動画は、視聴者がフレームをスクリーンショットに撮って共有したくなるものにしてください。これはモーショングラフィックスという技術であり、テンプレートの組み立てではありません。

「機能的」な水準を超え、「印象的」なものを目指しましょう。意外性のあるフォントの組み合わせを使い、思い切った色の組み合わせを試してください。ひとつのシーンでグリッドを破りましょう。記憶に残るアンカーとなる瞬間には、ほかのシーンの 2 倍のアニメーションを注ぎ込んでください。

忘れられるプロモーションと記憶に残るプロモーションの差は、技術的な複雑さではなく、創造する勇気です。大胆な選択をし、精密に仕上げましょう。