pj1433139082-hue/video-design-skills

remotion-consult — 動画要件 → 動画デザインシステム

「この動画をどう作るか」をアイデアから実装可能なエンジニアリング仕様に変換します。明確化、リサーチ、提案を通じて、最終的に DESIGN.md（動画デザインシステムドキュメント、tokens.ts 契約を含む）を生成し、remotion-build が直接利用できるようにします。

入口分類（「動画を作る」に遭遇したら、まずフローを決め、直接質問しないこと）

ユーザーが「動画を作る/一本仕上げる」と言ってもカテゴリが不明な場合、まず1つの質問でフローの所属を決めます（consult/build/video-shotcraft の3つすべてが「動画を作る」をトリガーするため、明示的に振り分ける必要があります）。

ユーザーの意図	どのフローを使用するか
任意の動画を作成/修正する（ナレーション、データ、製品デモ、ブランドモーション、教育、画像+テキストスライドショー）	一律で本フロー（consult → build）を使用します。モーションは、総モーションライブラリ + shotcraft ショットカードの2つのソースから選択します。
明示的に video-shotcraft テンプレート（Ink Press）/ 自主的な自由創作 / 共同創作を使用する	各フローのスキルに従い video-shotcraft をトリガーします（ユーザーが明示的に選択し、自動ルーティングは行いません）。
既存の DESIGN.md / 参考動画 / 明確なリニューアル方向がある	本フローを使用し、Phase 0 の事前チェックから直接開始します。

分類のための質問文：「明示的に video-shotcraft テンプレート/自主制作/共同制作を使用しますか？違う場合 → 一律 consult→build を使用し、ショットカードは shotcraft からモーションライブラリとして参照します（各文にカードを強制選択する必要はありません）。」

使用するタイミング

• 動画を作成/修正する場合（ナレーション、データ可視化、製品デモ、ブランドモーション）。
• 動画のデザイン方向性を決定する場合：アスペクト比、字幕スタイル、配色、フォント、リズム、トランジション、モーション。
• 「動画デザインシステム」、「video design tokens」、「DESIGN.md」が必要な場合。
• 要件が曖昧な場合（「動画を作って」）、明確化してから作業を開始する必要がある場合。

中核的な考え方

1. 方向性を先に、詳細は後で：最初に美的感覚/字幕/リズムのシステムを決定し、その後で画面の実現方法について話し合います。
2. テンプレートに依存しない：目標は「この動画に固有のリズム指紋」を生成することであり、テンプレートライブラリから選択することではありません。
3. 実行可能性を優先：DESIGN.md は、tokens.ts とシーンブループリントを直接記述できるほど具体的でなければならず、「もう少し高度に」で止まってはいけません。
4. 誠実さ：字幕テキストでデータや事実を捏造しないこと。

フロー（順番に実行）

Phase 0 — 事前チェック

• 作業台/動画/{slug}/ に既存の DESIGN.md / ナレーション原稿 / captions.srt がないか確認します。あればベースラインとして使用し、ゼロから作り直しません。
• 同一ブランドのクロスドメインデザインアセットをチェックします（ユーザーの「まずWeb、次に動画」ワークフローの場合）：作業台/デザインテスト/{ブランド}/DESIGN.md（Web版）または 資料庫/AIツール/デザインシステム庫/{ブランド}-DESIGN.md → 存在する場合、その配色/フォント/雰囲気はブランドDNAのベースラインとなり、動画版はそれを継承・発展させ、再作成しません（Phase 3 のデザインシステム一貫性チェックの入力にもなります）。
• ブランドの制約（プロジェクトのREADME、既存のビジュアルアセット、参考動画）を確認します。

Phase 1 — 明確化（必須、スキップ禁止）

AskUserQuestion を使用して一度に明確化します。最低9項目をカバーします（一度に6質問を超えないこと。分割しても構いません）。最初の2項目はスタイルソースであり、必須で尋ねなければなりません（スキップ禁止）（ユーザーは「自動選択」で素早く通過できますが、確認は必須です）。

1. スタイルソース（最初の必須質問）：自由設計 / 参考サイトから自分で選択（video-real-library.md から候補を提示してユーザーに選ばせる）/ 参考サイトが自動選択（ユーザーがテーマを与えて自動選択）/ ユーザーが参考を提供（URL/スクリーンショット、最優先）。
2. 参考選択（3次元で補完、いつ何を使うか）：
   • ブランド DESIGN.md（デザインシステム庫 資料庫/AIツール/デザインシステム庫/{ブランド}-DESIGN.md または自身のプロジェクトの DESIGN.md）→ デザイントークンのベースライン（配色/フォント/間隔）、ブランドの継続/リニューアル時に使用し、システムを再作成しません。
   • Web HTML（video-real-library / real-design-library 参考サイト）→ レイアウト/ビジュアルの実例（レイアウト/階層/構図）、特定のビジュアル構造が必要な場合に使用します。
   • 動画（video-real-library モーションソース / ユーザー提供の動画）→ モーション/リズム/字幕スタイル、特定の動きの言語が必要な場合に使用します。
   • 補完：DESIGN.md がシステムを決定 → HTML が実例を提供 → 動画がモーションを提供し、3つを組み合わせて完全な方向性を形成します。ユーザー提供の参考が最優先です。選択された参考については opencli（ログイン状態を維持） を使用して実際のフォント/色値/リズムを取得し、Phase 4 で忠実に継承します。
3. 動画とは何か：一言でのポジショニング + 誰に見せるか + 公開プラットフォーム（抖音/Bilibili/学術/内部向け——アスペクト比とリズムのベースラインを決定します）。
4. カテゴリアンカー：remotion-shared/categories/ の4つのカテゴリのいずれか（voiceover-caption/data-viz/product-demo/brand-motion）、またはカスタム。
5. アスペクト比と尺：9:16 縦型 / 16:9 横型 / 1:1；目標尺；シリーズ化するかどうか（シリーズ＝リズムは再利用可能である必要があります）。
6. 雰囲気/スタイル：プロフェッショナルで抑制的 / シャープなデータ / 温かいナラティブ / クリエイティブなリズム / ビンテージ……2～3の比較可能な方向性を示す言葉を提案します。
7. コンテンツの形態（字幕駆動の鍵）：既存のナレーション原稿あり / 既存の .srt/.vtt あり / 画像+テキストデータあり / ゼロから起草——字幕ソースのルーティングを決定します。
8. 好み/禁忌：嫌いなもの、字幕スタイル（一文単位/単語レベルハイライト/字幕なし）、可読性の最低基準。
9. 一貫性チェック：Phase 0 の事前チェックでブランドDNA（DESIGN.md/ビジュアルアセット/参考動画）が既に存在するか → 存在する場合、以降の方向性はそれから逸脱してはなりません（抑制的に発展）。存在しない場合は自由設計。

video-taste-profile（作業台/動画/*/.taste-profile.json またはグローバルプロファイル）が存在する場合は、まずそれを読み込みます。 スタイルソースが参考サイトの場合、Phase 2 で参考の実値を取得（chrome-devtools/vision）し、Phase 4 で忠実に継承する必要があります——参考をキーワードに抽象化して自由に解釈してはいけません。

Phase 2 — リサーチ（ユーザーの同意を得てから実行、並行実行可能）

3層リサーチ法、優先度は低いものから高いものへ：

• Layer 1 業界慣行：同種の動画が一般的にどのように作られているか（安全なベースライン）。
• Layer 2 新しいトレンド：remotion-shared/video-anti-slop.md と照合し、実際の動画参考を1～2件取得します（remotion-shared/video-real-library.md 参照ソース + ユーザー提供の参考が最優先）。字幕スタイル/トランジション/リズムから参考にできる点を抽出します。
• Layer 3 第一原理：視聴者の心理、字幕の可読性、コンテンツ主導のリズム——最高優先。矛盾が生じた場合は、「なぜ慣行から逸脱するのか」を明示的に記録します。

提案内の「ビジュアル参考の説明」は、実際の参考ライブラリの事例（「xxx のような単語レベルハイライト字幕スタイル」など）でアンカーできるようにし、漠然としたものにしてはいけません。

Phase 3 — 完全な提案（中核成果物）

references/video-proposal-format.md に従って出力：

• SAFE 方向（2～3個）：カテゴリのベースライン、堅実。
• RISK 方向（2～3個）：意図的に逸脱。それぞれに「なぜ価値があるか + 何を失うか」を記述する必要があります。
• memorable-thing：一言でアンカー——「視聴者に覚えてほしい一つのビジュアル/リズムの瞬間」（例：「3秒目のあのズームイン」）。
• 各方向：美的キーワード、字幕フォント、配色、タイムラインリズム（文字/秒、トランジション頻度）、構図、トランジションスタイル、ビジュアル参考の説明。

自己チェック：2つの方向が単に色とフォントを変えただけの場合、差別化ができていないため、やり直します。

デザインシステム一貫性チェック：Phase 0 の事前チェックで既存のブランドデザインシステム（DESIGN.md / ブランドDNA、例：既に作成されたWebサイトや動画）が検出された場合、SAFE/RISK 方向は既定のブランドDNA（配色/フォント/雰囲気のベースライン）から逸脱してはなりません—— RISK 方向は既定のDNA内での抑制的な逸脱のみ許可されます（例：アクセント色相の変更、明暗構造の変更、フォントシステムの変更）。既存のシステムを完全に破棄したり、無関係なスタイルに移行したりすることはできません。自由な発想は、既存のシステムがない場合にのみ許可されます。DESIGN.md を生成する前に、「配色/フォント/雰囲気」の3項目がベースラインと一致しているか、または合理的に発展しているかを項目ごとに確認します。

Phase 4 — デザインシステム（DESIGN.md）

ユーザーが方向性を選択した後、references/video-design-system-template.md に従って DESIGN.md を記述します。7つのセクション：

1. 美的方向：1段落でのポジショニング + キーワード + 禁忌。
2. 字幕フォント：caption/title/body の3段階 + アスペクト比ベースのフォントサイズ + ハイライトモード（word/line/none）。
3. 配色：セマンティックカラーパレット（captionActive/captionInactive を含む）+ コントラスト比の下限。
4. タイムラインリズム：fps/アスペクト比/総尺 + 字幕リズム + トランジション頻度。
5. 画面構図：セーフゾーン + 字幕ゾーン + タイトルゾーン。
6. トランジションモーション：トランジションの選択 + 尺 + 登場モーション + イージング。
7. Video Design Tokens（tokens.ts 契約、remotion-shared/video-tokens-spec.md 参照）+ モーション構成アウトライン（シーンブループリントからアップグレード、video-design-system-template.md §8 参照）：素材レイヤー別リスト（bg/mid/fg、組み立て可能）+ 字幕ごとの → 素材の出入力モーション + フォントモーション + ナレーション連動（視聴覚統合）。

また、tokens.ts 契約（TS定数オブジェクト、セマンティック命名）を生成します——これは remotion-build への唯一のインターフェースです。モーションは総モーションライブラリから選択・組み合わせて DESIGN.md に記述します（remotion-shared/categories/{カテゴリ}/motion-list.md）。

第8セクション：レンダリングコアの指定（オプション、デフォルトは Remotion）：DESIGN.md でレンダリングバックエンドを指定します——デフォルトは Remotion コア。ユーザーが明示的に指定した場合、またはスタイルにWeb的な操作感が必要な場合は HyperFrames コア（HeyGen オープンソース HTML→MP4、remotion-build/references/hyperframes-guide.md 参照）を指定します。判断基準：複雑なショットカード/既存のRemotionプロジェクト → Remotion；純粋なHTML/GSAPモーション、組み込みlintが必要 → HyperFrames。レンダリングコアは build のレンダリング記述にのみ影響し、素材/BGM/字幕/承認/§8アウトラインはすべて再利用可能です。

Phase 5 — プレビュー + スタイルサンプル承認ゲート（オプション、デフォルトはオン）

全編をレンダリングしません。成果物：

• 3～5枚のキーフレーム静止画（npx remotion still <id> --frame=N、文頭/文末/トランジションフレームをカバー）——ユーザーに構図と字幕の位置を確認してもらいます。
• または3～5秒の低解像度サンプル（--scale=0.25）——ユーザーに実際のモーションリズムを見てもらいます。
• スタイルサンプル承認ゲート（paper-collage-video style-proof から借用）：方向性を決定した後、まず1～2のキーセンテンスの3～5秒の実際のサンプル（低解像度）をレンダリングし、ユーザーに確認してもらいます——スタイル/配色/モーションの感触が合っているかどうか。確認後、remotion-build による全編制作に進みます（全編が完成してからスタイル方向性が間違っていたことに気付くのを防ぎます）。

プレビュー成果物は 作業台/動画/{slug}/preview/ に配置します。プレビューの目的は、ユーザーが実際のビジュアルに基づいて決定を下せるようにすることであり、「レンダリングできる」ことを示すことではありません。

レッドライン

• デフォルトのパターン禁止：紫と藍のグラデーションを積極的に提案しない、全編で同じ字幕リズムにしない、すべてのシーンで中央揃え同じ構図にしない。
• コピー禁止：他人の動画をピクセル単位で複製しない（字幕スタイル/リズムを参考にすることは可能、全編を丸ごと持ってくることは不可）。
• 捏造禁止：データ、ブランドの事実をでっち上げない。
• コントラスト比の下限：字幕 ≥3:1（実写/画像背景上でも同様）。
• 動画フォントサイズの下限（画面上のテキストはすべてキーワード）：字幕 caption ≥64px/800、データ mono ≥44px/700、タイトル ≥88px/900——細字・小さな文字の注釈は禁止。鉄則の数字の唯一の事実源 = remotion-build/references/video-quality-metrics.md §字幕ハードしきい値（「動画鉄則」行）。ここでは数字をコピーせず、しきい値を変更する場合は metrics を先に変更すること。
• 明確化してから設計：Phase 1 を完了せずに計画に飛びついてはいけません。

参考ファイル

📍 remotion-shared 共有ライブラリの検索順序：プロジェクト .claude/skills/remotion-shared/ → グローバル Codex → グローバル Claude Code。最初に見つかったものを使用します。

ファイル	いつ読むか
.claude/skills/remotion-shared/video-anti-slop.md	任意のフェーズで方向性を判断するとき（均質化防止）
.claude/skills/remotion-shared/video-real-library.md	Phase 2 リサーチで実際の動画参考を取得するとき
資料庫/AIツール/video-shotcraft/	ショットレシピカードライブラリ（202カード12カテゴリ：カメラワーク/リズム/トランジション/フォント/エフェクト）、demos/{カテゴリ}/{カード} を直接コピー可能。video-shots-spec 参照

video-shotcraft の位置づけ（第2のモーションライブラリ / テンプレートライブラリ。ルーティングの分岐先ではない）：

• shotcraft = 完全で参考にできるコンポーネント/モーションライブラリ（demos/{カテゴリ}/{カード}/{コンポーネント}.tsx シーンレベルのショットモーション + template/ テンプレートプロジェクト + assets/ コンポーネントと効果音）。すべての動画は一律で本 consult→build を使用し、製品動画/ナレーション動画で分岐しない。
• §8 カード選択：DESIGN §8.2 ショットカード列はオプションで記入可能。値には意図マーク [copy] / [参考] を含めます。連携手順の唯一の事実源 = remotion-shared/video-shots-spec.md「ショットカード連携手順」（build がその通りに実行）。
• ユーザーが明示的に shotcraft テンプレート（Ink Press）/ 自主的な自由創作 / 共同創作 を使用する場合のみ、スキル video-shotcraft をトリガーし、その独自のフローに従って進めます（ユーザーが明示的に選択し、自動ルーティングは行いません）。 | .claude/skills/remotion-shared/video-shots-spec.md | ショットカードシステム + 権威テクニック（監督/編集/デザイン/サウンド、検索+プラットフォームから抽出） | | .claude/skills/remotion-shared/video-design-presets.md | Phase 4 でプリセットデザインシステムを選択するとき（6セットの検証済みブランド） | | .claude/skills/remotion-shared/video-tokens-spec.md | Phase 4 で tokens を記述するとき | | .claude/skills/remotion-shared/categories/{カテゴリ}/DESIGN.template.md | Phase 4 でカテゴリテンプレートに従って下書きを始めるとき | | .claude/skills/remotion-shared/categories/{カテゴリ}/motion-list.md | Phase 4 でモーションの組み合わせを選択するとき | | .claude/skills/remotion-shared/motion-library/ | 総モーションライブラリのコンポーネントリスト（50個、build 用） | | 資料庫/AIツール/デザインシステム庫/ | Phase 2 リサーチ/Phase 3 提案：ブランド DESIGN.md の美的アンカー | | 資料庫/AIツール/美的参考庫/美的参考総覧.md | Phase 2 フロントエンド/写真/編集トレンド + Phase 4 リズムデザイン | | .claude/skills/remotion-shared/aesthetic-judgment/ | Phase 4 方向性決定時：写真/編集/フロントエンド組版の6軸判別（素材スタイル/リズム/レイアウト） | | .claude/skills/ui-ux-pro-max/SKILL.md | デザインルールエンジン：動画画面のスタイル決定時に参照（Phase 4） | | .claude/skills/hallmark/SKILL.md | 反AIスロップレビュー（57のゲート）：方向性がプロフェッショナルか/テンプレート回避か（Phase 2/3） | | .claude/skills/taste-skill/SKILL.md | テイストチェック（Pre-Flight 40+ 項目）：方向性が十分な水準か（Phase 3 自己チェック） | | 資料庫/AIツール/design-skills/open-design/craft/anti-ai-slop.md | テンプレート回避ルール（「七つの大罪」）+ 151のデザインシステム代替案（Phase 2/4） | | .claude/skills/design-shared/review-panel.md | レビューパネル：agency-agents 視点 + デザインシステム庫/美的参考庫の判断基準（Phase 4 方向性自己チェック + 一貫性チェック） | | .claude/skills/design-shared/wcag-basics.md | 配色/字幕の可読性決定時（ハード制約） | | references/video-proposal-format.md | Phase 3 で提案を作成するとき | | references/video-design-system-template.md | Phase 4 で DESIGN.md を記述するとき | | references/video-taste-profile.md | ユーザーの動画テイストを記録/更新する必要があるとき |

出力と締めくくり

統一された納品サマリで締めくくります：

STATUS: PASS | FAIL | BLOCKED
成果物: DESIGN.md パス + プレビューキーフレーム/サンプルパス
重要決定: 選択された方向性（SAFE/RISK のどれ + memorable-thing + 所属カテゴリ）
NEXT_OWNER: remotion-build（動画生成）| user（方向性確認待ち）
確認待ち: 未解決事項

締めくくりに質問します：方向性は決まりましたか？動画を生成しますか？（remotion-build に委ねることを推奨）