不明点は止まらず「仮定 + 代替案 + 推奨 + 影響」で前進し、docs/に記録する。
エージェントチームを作ってください。
プロンプト本文
text
エージェントチームを作ってください。
# Remotion動画制作(自動設定 + Playwright UI検証 + Font Awesome + 関数的トライアド生成 + 数値テスト一式)チーム指示
【最重要方針(ユーザー入力は末尾だけ)】
- ユーザーは末尾の【入力欄】だけ記述する(ここ以外は書かない)。
- チームは【入力欄】を解析し、【目的】を含む上部仕様を自動生成してリポジトリ内ファイルに確定させる。
- 会話に依存しない:決定事項は必ず docs/ に残す。
- 不明点は止まらず「仮定 + 代替案 + 推奨 + 影響」で前進し、docs/に記録する。
【表現ルール】
- 絵文字は禁止。アイコンが必要なら Font Awesome を使用する。
- copydeck(画面に出るテキスト)に絵文字を入れない。アイコンは semantic 指定(例: warning/tip/check/info)として別管理し、実装で Font Awesome に解決する。
---
## 【目的】(自動生成:ユーザーは書かない)
- Remotion で動画を作成し、mp4 を out/draft.mp4 と out/final.mp4 に出力する。
- 配色は「プロジェクト名」から関数的にトライアド(3色)を生成し、背景・サーフェス・アクセントに適用する(再現性100%)。
- 文字と背景(またはサーフェス)のコントラスト比、およびトライアド妥当性(色相差)を数値で算出し、テストで合否判定する。
- 文字数に対してシーン秒数が長すぎる問題を、期待秒数を関数で算出して検証し、テストで落とす。
- フォントサイズ・余白・はみ出しなどのレイアウト崩れを自動で防ぎ、Playwright で UIベース検証(証跡付き)を必須にする。
- 作業場所: <作成先ディレクトリ例: example/> 配下に <プロジェクト名> を新規作成して完結させる。
※この【目的】は入力欄を解析して docs/generated-brief.md と https://t.co/9CiesrBgZu に具体化して上書きすること。
---
## 【制約・前提】
- Remotion 必須
- Playwright 必須(UIベース検証と証跡出力)
- Font Awesome 必須(絵文字禁止)
- 依存関係は最小化。追加する場合は理由を docs/architecture.md に記録する。
- 入力欄にない固有名詞・数値・断定表現の捏造は禁止(特に表示文言・数値は厳守)。
- テキストは原則「サーフェス(単色のカード/パネル)」上に置く(背景がグラデーションでも、文字直置きは禁止)。コントラスト計算を安定させるため。
---
## 【成果物(必須)】
- out/draft.mp4
- out/final.mp4
- artifacts/ui-screenshots/(チェックポイントごとのスクリーンショット証跡)
- playwright-report/(可能なら)
- artifacts/metrics/triad-report.json(トライアド検証の数値結果)
- artifacts/metrics/contrast-report.json(コントラスト比の数値結果)
- artifacts/metrics/timing-report.json(文字数→期待秒数 vs 実測秒数の数値結果)
- https://t.co/lPlBAYWdkG(セットアップ/プレビュー/レンダ/テストの手順)
- docs/
- https://t.co/jCEb7fTCxx(入力欄をそのまま保存:単一入力源)
- https://t.co/GsVuoriGbO(入力欄から自動生成した目的・前提・構成方針)
- https://t.co/3QSYbU45Gu(自動選択した設定一覧と根拠:尺/比率/トーン等)
- color-map.json(関数的に生成したトライアド配色:HSL/HEX両方 + 用途割当)
- typography.json(フォントスケール、最小/最大、行間、行長、safe-area、占有率閾値)
- timing-model.json(文字数→秒数のモデル + 過長ゲート閾値)
- https://t.co/LLxy6irewp(シーン表:start/end秒、textRole、copydeck参照ID、演出秒)
- https://t.co/LS49iimEDq(表示テキスト最終版:絵文字禁止)
- icon-map.json(semantic→Font Awesome アイコン名)
- ui-checkpoints.json(検証フレーム/期待テキスト/期待アイコン/期待背景ID)
- https://t.co/sKtw6Tu5Gi(Composition設計・データ構造・アセット方針・レビューページ仕様)
- https://t.co/Qk2Oo7GVFb(レンダコマンド・Composition ID・出力先)
- https://t.co/3Bvt1K3Bui(リスク/対策/未決事項)
- https://t.co/8omZ2I0czF(確認観点)
---
## 【チーム構成 / 役割】
1) UX担当(構成・情報設計)
- 入力欄から構成テンプレを推定し、情報量を調整(短文は短く、長文は分割/要約)。
- copydeck(表示文言)を確定。絵文字は排除し、必要な意味は semantic アイコン指定に変換する。
- ui-checkpoints(代表フレーム)を定義して、UI検証で崩れを拾える形にする。
- 成果物: docs/storyboard.md / docs/copydeck.md / docs/ui-checkpoints.json / docs/icon-map.json
2) 技術アーキテクト(Remotion実装・検証基盤)
- Remotionプロジェクトを作成し、Composition/コンポーネントを実装してレンダ可能にする。
- color-map.json / typography.json / timing-model.json を必ず読み、ベタ書き禁止。
- Font Awesome導入。アイコンは icon-map.json 経由で描画(semantic→faIcon)。
- Playwrightが安定して検証できる「検証用レビューページ」を用意する:
- URLで composition / frame(or time) / props を固定できること
- data-testid が揃っていること
- 成果物: 実装コード / tests/ui / scripts/test-* / out/*.mp4 / docs/architecture.md / docs/render.md
3) 悪魔の代弁者(反証・リスク・品質ゲート)
- リスク洗い出し(誤字・数字ミス・権利・再現性・読みづらさ・間延び・コントラスト不足)。
- 「数値テストで検知できる仕様になっているか」を監査し、不足があればdocsとテスト要件へ反映させる。
- 成果物: docs/risks.md / docs/qa-checklist.md(特に数値テスト観点)
---
## 【自動設定(入力欄から上部仕様を埋める:必須)】
チームは必ず実施し、docs/auto-config.md に決定値と根拠を記録する。
### 1) 動画の型(構成テンプレ)推定
- “手順/やり方/操作” が主 → チュートリアル型(Step/番号/強調)
- “なぜ/理由/設計” が主 → ロジック型(課題→方針→根拠→結論)
- “注意点/リスク/落とし穴” が主 → チェックリスト型(重要度/カテゴリ)
※推定結果を docs/generated-brief.md に明記する。
### 2) 尺・比率の自動決定
- 尺:トピック数×10〜15秒を基本に 30〜90秒へ丸める(増尺で逃げない)。
- 比率:指定がなければ16:9。“縦/ショート/SNS/リール” 等があれば9:16。
### 3) トライアド配色は「プロジェクト名」から関数的に生成(必須)
- 入力: projectName(例: example/<projectName> の <projectName> 部分)
- 手順(必須実装、docsに記録):
1) projectName を文字列ハッシュ化(例: FNV-1a 32bit など:再現性重視)
2) baseHue = hash % 360
3) hue2 = (baseHue + 120) % 360
4) hue3 = (baseHue + 240) % 360
5) saturation/lightness は入力欄の “雰囲気” から決定(無ければデフォルト)
6) 用途割当:
- primary: baseHue
- secondary: hue2
- tertiary: hue3
- background: primaryベースのグラデーション + 微ノイズ(背景未設定禁止)
- surface: 単色(テキストは原則surface上、直置き禁止)
- accent: secondary/tertiary
- semantic: warning/info/success 等は secondary/tertiary から派生
7) text色はコントラストが満たせるように自動補正(明度調整)
- docs/color-map.json には HSL と HEX を必ず保存する(テストで使用)。
### 4) タイポ(フォントサイズ/余白)の自動最適化(必須)
- docs/typography.json に以下を定義し、実装が従う:
- safe-area(上下左右固定マージン)
- type scale(title/body/caption等)
- min/max font size
- line-height
- max line length(行長制限)
- occupancy thresholds(“余白があるのに文字が小さい”を検知するための占有率閾値)
- 自動フィットの優先順位:
1) 分割(シーン分割/段落分割)
2) 要約(MVPに必要な情報のみ)
3) フォント縮小(最小値を下回らない)
### 5) 文字数と表示タイミングの自動整合(必須)
- docs/timing-model.json を単一ソースにして、storyboardと実装が従う。
- 長文は増尺より分割/要約を優先。
- 短文の“最大表示秒”を持ち、短いのに長いを防ぐ。
---
## 【数値テスト(必須:triad/contrast/timing を関数的に検証)】
- “目視” ではなく “数値” で合否判定する。
- Nodeスクリプトで算出し、JSONレポートを出力して、失敗時は exit 1 にする。
### A) トライアド検証(triad-report.json)
- docs/color-map.json の primary/secondary/tertiary の hue差を検証:
- Δh(primary, secondary) ≈ 120(許容誤差 ±5)
- Δh(primary, tertiary) ≈ 240(許容誤差 ±5)
- 出力: artifacts/metrics/triad-report.json(各Δhとpass/fail)
### B) コントラスト検証(contrast-report.json)
- ルール:
- 本文(body): contrastRatio >= 4.5
- 大きいテキスト(title等): contrastRatio >= 3.0
- 原則、テキストは surface(単色)上に置くので、
- 主検証は text vs surface で行う(背景直置きは禁止)。
- 出力: artifacts/metrics/contrast-report.json
- role(title/body/cta等), fgColor, bgColor, ratio, threshold, pass/fail
### C) タイミング過長の関数的検証(timing-report.json:必須)
- “文字数が少ないのにシーンが長い” を禁止し、関数で検証してテストで落とす。
- storyboardの各シーンに textRole(title/body/bullets/cta)と copydeck参照ID を必ず持たせる(機械計算のため)。
【timing-model.json 必須項目】
- readingSpeed:
- bodyCps(本文の文字/秒)例: 8〜12
- titleCps(タイトルの文字/秒)例: 4〜7
- bounds:
- minHoldSec(最低表示秒)例: 1.2
- maxHoldSec(単一シーン上限秒)例: 6.0
- transitionSec(演出固定秒)例: 0.4
- overageGate:
- maxOverageSec(期待超過の絶対秒許容)例: 0.6
- maxOverageRatio(期待超過の割合許容)例: 0.25
- allowExtraForCTA(CTA例外追加秒)例: 0.8
【期待秒数 expectedSeconds の関数定義(必須)】
- シーンごとに文字数を算出し、次で期待秒数を計算:
1) contentSeconds =
- title: titleChars / titleCps
- body: bodyChars / bodyCps
- bullets: bulletsChars / bodyCps(必要なら bulletFactor を導入)
- cta: ctaChars / bodyCps(または専用cps)
2) expectedSecondsRaw = transitionSec + contentSeconds
3) expectedSeconds = clamp(expectedSecondsRaw, minHoldSec, maxHoldSec)
【過長判定(FAIL条件:必ず落とす)】
- actualSeconds = storyboardの(end-start)
- 以下を両方満たさない場合は FAIL:
- actualSeconds <= expectedSeconds + maxOverageSec + (textRole==cta ? allowExtraForCTA : 0)
- actualSeconds <= expectedSeconds * (1 + maxOverageRatio) + (textRole==cta ? allowExtraForCTA : 0)
【レポート出力(必須項目)】
- sceneId, textRole
- chars(role別文字数)
- expectedSeconds, actualSeconds
- overageSeconds(actual-expected), overageRatio
- thresholds, pass/fail
- 出力: artifacts/metrics/timing-report.json
【FAIL時の自動修正方針(止まらない)】
- 優先順:
1) 不要な間(hold)を削る(演出時間を短縮)
2) 短文なら見せ方(レイアウト/タイポ/強調)で成立させつつ秒数は短縮
3) 長文なら分割/要約(増尺で逃げない)
---
## 【Playwright UIベース検証(必須・証跡必須)】
- 目視のみは不可。Playwrightで操作し、スクショ/レポートを残す。
- 検証用レビューページを用意し、URLで composition / frame(or time) / props を固定できること。
- data-testid を付与:
- title, subtitle, body, cta, bg, surface, safe-area
- icon-<semantic>
- 追加属性(検証を安定化):
- data-text-role="title|body|cta"
- data-bg-role="surface|background"
- Playwright 最低要件:
1) 描画にエラーがない(console errorなし)
2) ui-checkpoints.json の各チェックポイントでスクショ保存(artifacts/ui-screenshots/)
3) copydeckの文言一致(誤字検出)
4) bbox検証:主要要素がsafe-area内に収まる(はみ出しFAIL)
5) 背景IDまたは主要色が color-map.json と一致
6) 主要テキストがsurface上であること(data-bg-role=surface)
7) タイポ検証(最低限):
- フォントサイズが typography.json の最小値を下回らない
- safe-areaに対する主要テキスト占有率が極端に低い場合 FAIL(閾値は typography.json)
---
## 【実行コマンド要件(必須)】
- package.json に以下を用意する(例):
- npm run dev => レビューページ起動
- npm run render:draft => out/draft.mp4 を生成
- npm run render:final => out/final.mp4 を生成
- npm run test:colors => triad + contrast を算出し、JSON出力し、失敗でexit 1
- npm run test:timing => timing過長検証、JSON出力し、失敗でexit 1
- npm run test:ui => Playwright UI検証 + スクショ
- npm run test:quality => test:colors + test:timing + test:ui を全実行(最終ゲート)
---
## 【進め方(標準フロー)】
1) docs/user-input.md を作成し、末尾の【入力欄】をそのまま保存(単一入力源)
2) 入力欄を解析して以下を生成・確定:
- docs/generated-brief.md
- docs/auto-config.md
- docs/color-map.json(プロジェクト名→関数的トライアド)
- docs/typography.json
- docs/timing-model.json
- https://t.co/9CiesrBgZu
3) UX担当:docs/storyboard.md / docs/copydeck.md / docs/ui-checkpoints.json / docs/icon-map.json を確定
4) 悪魔の代弁者:数値テストとUI検証が仕様通りに落ちる状態か監査
5) 技術アーキテクト:Remotion実装 + レビューページ + Font Awesome + scripts/test-* + Playwright
6) out/draft.mp4 → npm run test:quality → 修正 → out/final.mp4 → npm run test:quality で完了
---
# 【入力欄】(ユーザーが書くのはここだけ)
【最後に:解説してほしい内容(必須入力欄)】
- 解説してほしい内容(箇条書き・必須):
- <トピック1>
- <トピック2>
- <トピック3>
- 重点を置いてほしい観点(任意):
- <例: 初学者向け/設計判断/落とし穴中心/実装手順中心>
- 想定読者(任意):
- <例: エンジニア/非技術者/混在>
- 望む尺の雰囲気(任意):
- <例: 30秒/60秒/90秒>
- 出したい雰囲気(任意):
- <例: ミニマル/テック/ポップ/和風/ビジネス>
- 参考(任意):
- <URL/ロゴ/素材パス等>
以上に従って、エージェントチームを作成し、共有タスクリストを作って担当を割り当て、作業を開始してください。ソース文脈
出典
- primary post: 2020197419640844289
- published at: 2026-02-08 03:06:12 JST
- archive doc: 2020197419640844289