エージェントチームを作ってください。

エージェントチームを作ってください。

プロンプト本文

エージェントチームを作ってください。

# Remotion動画制作(自動設定 + Playwright UI検証 + Font Awesomeアイコン)チーム指示

【最重要方針(ユーザー入力は末尾だけ)】
- ユーザーは末尾の【入力欄】だけ記述する。
- チームは末尾の【入力欄】から、【目的】を含む上部の仕様を自動生成し、会話に依存しない形でリポジトリ内ファイルに確定させる。
- “入力欄以外の空欄” はブロッカーにしない。仮定で前進し、決定理由を必ず残す。

【重要:アイコンは絵文字禁止、Font Awesomeで統一】
- 画面上の装飾・強調・箇条書き記号として絵文字を使わない。
- アイコンが必要な場合は Font Awesome を使用する(推奨:SVGベースの公式Reactコンポーネント)。
- copydeck(表示テキスト)には絵文字を含めない。アイコンは「アイコン指定(semantic)」として別管理する。

---

## 【目的】(自動生成対象:ユーザーは書かない)
- Remotionで動画を作成し、mp4を出力する(draft/final)。
- Playwrightを使ってUIベースで成果物確認を自動化し、レイアウト崩れ・背景未適用などをテストで検知できる状態にする。
- 絵文字を使わず、Font Awesomeアイコンで視覚記号を統一する。
- 作業場所: <例: example/> 配下に <プロジェクト名> を新規作成して完結させる。

※上記【目的】は、末尾の【入力欄】を解析して `docs/generated-brief.md` と `https://t.co/9CiesrBgZu` に具体化して上書きすること。

---

## 【制約・前提】
- 技術要件:
 - Remotionを必須
 - Playwrightを必須(UIベース検証の証跡を出すこと)
 - Font Awesomeを必須(絵文字は禁止)
- 依存関係は最小化。追加する場合は理由をドキュメント化。
- “入力欄にない内容” を勝手に捏造しない(固有名詞・数値・文言は特に禁止)。
- 不明点は止まらず「仮定 + 代替案 + 推奨 + 影響」で前進し、記録する。

---

## 【成果物(必須)】
- out/draft.mp4
- out/final.mp4
- artifacts/ui-screenshots/(チェックポイントごとのスクショ証跡)
- playwright-report/(可能なら)
- https://t.co/lPlBAYWdkG(セットアップ/プレビュー/レンダ/検証の手順)
- docs/
 - https://t.co/jCEb7fTCxx(末尾の入力欄をそのまま保存:単一入力源)
 - https://t.co/GsVuoriGbO(入力欄から自動生成した目的・前提・構成方針)
 - https://t.co/3QSYbU45Gu(自動選択した設定一覧と根拠:尺/比率/背景/フォント/トーン/アイコン方針 等)
 - https://t.co/LLxy6irewp(シーン表:秒 or フレーム)
 - https://t.co/LS49iimEDq(画面に出る全テキスト:絵文字禁止の最終版)
 - icon-map.json(Font Awesomeアイコン割当:semantic→faIcon名)
 - ui-checkpoints.json(どのフレームを何で検証するか)
 - https://t.co/sKtw6Tu5Gi(Composition設計・データ構造・アセット方針・検証用ページ仕様)
 - https://t.co/Qk2Oo7GVFb(レンダコマンド・Composition ID・出力先)
 - https://t.co/3Bvt1K3Bui(リスク/対策/未決事項)
 - https://t.co/8omZ2I0czF(確認観点)

---

## 【チーム構成 / 役割】
1) UX担当(構成・情報設計の責任者)
- 入力欄をもとに、視聴体験として成立する構成に落とす。
- 絵文字を使わない表現で、強調や区切りを設計する(アイコンはsemantic指定)。
- 成果物:
 - docs/storyboard.md
 - docs/copydeck.md
 - docs/icon-map.json(例: "warning": "triangle-exclamation", "tip": "lightbulb", "check": "circle-check")
 - docs/ui-checkpoints.json(主要シーンの代表フレーム/期待テキスト/期待アイコン)

2) 技術アーキテクト担当(Remotion実装・検証基盤・アイコン実装の責任者)
- Remotionプロジェクトを作成し、Composition/コンポーネントを実装してレンダ可能にする。
- Font Awesomeを導入し、アイコンは必ず `icon-map.json` 経由で描画する(テキストに混ぜない)。
- “Playwrightが安定して検証できる検証用レビューページ” を実装する(重要)。
- 成果物:
 - 実装コード(Remotion)
 - docs/architecture.md / docs/render.md
 - tests/ui/(Playwrightテスト)
 - out/draft.mp4 → 修正後 out/final.mp4

3) 悪魔の代弁者(反証・リスク・品質ゲート)
- 仕様の穴、誤字/数字ミス、レイアウト崩れ、背景未適用、権利、再現性などのリスクを洗い出す。
- 「絵文字が混入していないか」「アイコンが検証可能になっているか」を監査する。
- 成果物:
 - docs/risks.md
 - docs/qa-checklist.md
 - Playwright検証要件の追加(必要なら ui-checkpoints.json へ追記提案)

---

## 【自動設定(入力欄から上部項目を埋めるルール:必須実装)】
チームは必ず以下を実施し、docs/auto-config.md に「決定値 + 根拠」を残す。

1) 動画の型(構成テンプレ)を推定
- “手順/やり方/操作” が主 → チュートリアル型(Step/番号/強調)
- “なぜ/設計/理由” が主 → ロジック型(課題→方針→根拠→結論)
- “注意点/リスク/落とし穴” が主 → チェックリスト型(重要度/カテゴリ)

2) 尺を自動決定
- トピック数×10〜15秒を基準に 30〜90秒へ丸める
- 収まりきらない場合は要約してMVP尺に合わせる(勝手に増尺しない)

3) 画面比を自動決定
- 指定がなければ 16:9
- “縦/ショート/SNS/リール” 等が含まれれば 9:16

4) タイポグラフィ/余白/トーンを自動決定
- 初学者/非技術者 → 文字大きめ・余白多め・行長制限強め
- 技術者 → 情報密度は上げても可。ただし可読性優先(行間・最大幅を守る)

5) 背景を必ず自動選択(“背景が決まらない” を禁止)
- 背景指定がない場合、以下の優先順で自動決定し、背景IDを必ず出力する:
 A) ロゴ/参考画像がある → 主要色抽出→グラデーション背景を生成(推奨)
 B) テーマ語(テック/和風/ポップ/ビジネス等) → 背景プリセットから選択
 C) 何も材料がない → デフォルトの落ち着いたグラデーション + 微ノイズ
- 実装上、背景レイヤに data-testid="bg" を付け、背景IDをDOM属性等で露出させる(Playwright検証用)

6) アイコン方針を必ず自動決定(絵文字禁止の代替)
- 入力欄やコピー案に絵文字が含まれていたら、絵文字はcopydeckに入れず、semanticへ変換する:
 - 例: 警告系→"warning"、ヒント→"tip"、チェック→"check"、情報→"info"
- semantic→Font Awesomeアイコン名への割当を docs/icon-map.json に確定し、全シーンで共通利用する。
- 実装側は `data-testid="icon-<semantic>"` を付け、Playwrightで存在確認できるようにする。

7) レイアウト自動安全化(レイアウト崩れ防止の必須仕様)
- safe-area(上下左右の固定マージン)を設け、重要要素は必ずsafe-area内に収める
- 長文時は自動で font-size を縮小 or 行数制限 + 要約(はみ出し禁止)
- 背景画像はcover前提。重要情報は中央寄せ(トリミング耐性)

---

## 【Playwright UIベース検証(必須・証跡必須)】
- “目視で確認した” は不可。PlaywrightでUI操作し、スクショ/レポートを残す。
- 検証用レビューページ要件(技術アーキテクトが実装):
 - composition / frame(またはtime) / props をURL等で固定できる
 - 主要要素に data-testid を付与(title/subtitle/body/cta/bg/safe-area)
 - アイコン要素にも data-testid(icon-<semantic>)を付与する
- テスト最低要件:
 1) レビューページがエラーなく描画できる(白画面/console errorなし)
 2) docs/ui-checkpoints.json の各チェックポイントでスクショ保存(artifacts/ui-screenshots/)
 3) copydeck由来の文言が data-testid 単位で一致(誤字検出)
 4) はみ出し検出:各要素のbounding boxがsafe-area内に収まる
 5) 背景検出:bgの背景IDがauto-configの選定と一致
 6) アイコン検出:期待semanticのアイコンが存在し、icon-map.jsonに沿っている

---

## 【進め方(標準フロー)】
1) まず docs/user-input.md を作成し、末尾の【入力欄】を“そのまま”保存(単一入力源)
2) 入力欄を解析して docs/generated-brief.md / docs/auto-config.md / https://t.co/9CiesrBgZu / docs/icon-map.json を生成
3) UX担当:docs/storyboard.md / docs/copydeck.md / docs/ui-checkpoints.json を確定
4) 悪魔の代弁者:早期に risks/qa を作り、Playwright要件と絵文字混入ゼロを監査
5) 技術アーキテクト:Remotion実装 + レビューページ + Font Awesome導入 + Playwrightテスト
6) out/draft.mp4 を生成 → Playwright検証 → 修正 → out/final.mp4 → Playwright再実行で完了

---

# 【入力欄】(ユーザーが書くのはここだけ)
【最後に:解説してほしい内容(必須入力欄)】
- 解説してほしい内容(箇条書き・必須):
 - <トピック1>
 - <トピック2>
 - <トピック3>

- 重点を置いてほしい観点(任意):
 - <例: 初学者向け/設計判断/落とし穴中心/実装手順中心>

- 想定読者(任意):
 - <例: エンジニア/非技術者/混在>

- 望む尺の雰囲気(任意):
 - <例: 30秒で要点だけ/60秒で実務手順/90秒で背景も含めて>

- 出したい雰囲気(任意):
 - <例: ミニマル/テック/ポップ/和風/ビジネス>

- 参考(任意):
 - <URL/参考デザイン/ロゴ/素材パス等があれば>

以上に従って、エージェントチームを作成し、共有タスクリストを作って担当を割り当て、作業を開始してください。

ソース文脈

出典

• primary post: 2020149187011305659
• published at: 2026-02-07 23:54:33 JST
• archive doc: 2020149187011305659