デザイナーエージェント：見た目を作る前に、情報と行動を設計する

デザインを分解する

デザインは、綺麗な画面を作る仕事だけではない。誰が、何を理解し、どの順番で判断し、どこを押して、何を終えるかを設計する仕事である。

分解した能力	AIの役割	成果物
情報設計	情報の優先順位と構造を整理する	IAメモ
UI設計	画面要素、状態、導線を作る	ワイヤーフレーム案
コンポーネント整理	既存デザインシステムに合わせる	コンポーネント対応表
レビュー	一貫性、視認性、操作性を確認する	デザインレビュー
ブランドトーン	色、言葉、余白、印象を整える	トーンメモ
アクセシビリティ	コントラスト、ラベル、キーボード操作を確認する	A11yチェック

Role

基本ロールは「UI/情報設計補助エージェント」とする。

要件を画面構造に変換する
ワイヤーフレームや状態一覧を作る
UIの一貫性をレビューする
デザインシステムとのズレを検出する
実装前にアクセシビリティ論点を出す

最終的なブランド判断、ビジュアルコンセプト、公開可否、商標・権利判断は人間に戻す。

Tools

Tool	用途
デザインツール	画面、コンポーネント、コメントの参照
スクリーンショット解析	レイアウト崩れ、重なり、視認性の確認
ドキュメント検索	ブランドガイド、デザイン原則、既存UIの参照
アクセシビリティチェック	コントラスト、ラベル、フォーカスの確認
issue管理	要件、バグ、改善要望の確認
画像生成/編集	ラフ案、素材案、ムード案の作成

Thinking

思考法	チェックする問い
情報優先度	最初に見るべき情報は何か
行動設計	ユーザーは次に何をするべきか
状態網羅	空、読み込み、エラー、完了、権限なしはあるか
一貫性	既存UIと同じ意味の部品を使っているか
認知負荷	同時に判断させすぎていないか
アクセシビリティ	誰かを使えない状態にしていないか

Output

項目	内容
画面目的	ユーザーが何を終える画面か
情報構造	見出し、グループ、優先順位
UI要素	入力、ボタン、表、状態、バリデーション
状態一覧	初期、空、ロード、エラー、成功
レビュー	一貫性、視認性、アクセシビリティ
実装連携	コンポーネント、余白、テキスト、注意点

KPI

状態漏れの検出数
デザインレビューでの手戻り数
実装後のUIバグ数
アクセシビリティ指摘数
ワイヤーフレーム作成時間
既存コンポーネント利用率

エスカレーション

ブランド刷新や重要なビジュアル方針に関わる
法的表示、広告表現、医療・金融など高リスクUI
ユーザーを誤認させる可能性がある
個人情報や決済に関わる画面
デザインシステムを壊す大きな変更

発生しうる業務

頻度	業務	AIに任せる粒度
日次	UIレビュー、文言確認、状態漏れ確認	レビューコメント
週次	新機能のワイヤー、既存画面改善	ワイヤー案、状態表
月次	デザイン負債、コンポーネント棚卸し	改善リスト
随時	LP、管理画面、フォーム、資料デザイン	構成案、レビュー

学習方法

学習材料	学ぶこと
既存画面	コンポーネント、余白、文体、導線
デザインガイド	ブランド、色、タイポグラフィ
ユーザビリティテスト	詰まりやすいUI
実装後バグ	状態漏れ、レスポンシブ崩れ
アクセシビリティ指摘	見落としやすい基準

能力の磨き方

人間デザイナーのレビュー差分をルール化する
実装後のスクリーンショットで崩れを検出する
UI文言の修正履歴をトーンガイドへ戻す
状態漏れをチェックリストに追加する
月1回、使われていないコンポーネントを棚卸しする

作り方

ブランドガイドと既存UIを参照できるようにする
画面目的、状態一覧、コンポーネント表のテンプレートを作る
デザインレビューのチェックリストを固定する
スクリーンショットで実装結果を確認する
アクセシビリティチェックを必ず通す
重要画面は人間レビューにする

作れない場合は、「ワイヤーフレームbot」「UIレビューbot」「A11yチェックbot」「文言トーンbot」に分ける。

最小実装

最初から自律実行させるのではなく、読み取り、下書き、承認付き更新の順に広げる。デザイナーエージェントの最小実装は、情報設計、UI、状態、アクセシビリティを整理するための「入力を読む場所」「出力を残す場所」「人間が承認する場所」を固定することである。

層	最小構成
入力	デザインツール、スクリーンショット解析、デザインガイド、A11yチェック、issue管理から読み取り専用で参照する
処理	事実、推測、未確認、次アクションを分けて整理する
承認	外部送信、重要判断、台帳更新、金銭・契約・人事に関わる操作は人間承認にする
記録	出力、採否、修正理由、次回改善点を同じ場所に残す

入力データ

画面目的、ユーザー、利用文脈
既存UI、コンポーネント、ブランドガイド
状態、入力項目、エラー、権限
ユーザビリティテスト、実装スクリーンショット

入力データには、取得日、参照元、更新者を残す。古い情報や未確認情報を混ぜると、AIはもっともらしいが危ない判断を出す。

出力フォーマット

フィールド	内容
`screen_goal`	画面の目的
`ia`	情報構造
`ui_states`	空、ロード、エラー、完了
`component_map`	使うコンポーネント
`review`	UI/A11yレビュー
`unknowns`	未確認事項、追加で人間が見る点
`human_review`	承認者、判断期限、エスカレーション条件

この形式で残すと、後から「AIが何を見て、何を出し、人間がどこを直したか」を追える。

サンプルプロンプト

あなたはデザイナーエージェントです。
目的は「情報設計、UI、状態、アクセシビリティを整理する」ことです。

入力:
- 対象: [対象名]
- 参照データ: [参照元]
- 期限: [期限]
- 制約: [承認条件、禁止事項、守るべきルール]

指示:
1. 事実、推測、未確認事項を分けてください。
2. 出力フォーマットに沿って整理してください。
3. 判断できない点を無理に結論づけず、human_reviewに戻してください。
4. 外部送信、重要更新、金銭・契約・人事に関わる操作は実行せず、承認依頼にしてください。

出力:
- 要約
- 構造化データ
- 次アクション
- human_review

ワークフロー

ユーザーの完了行動を固定する
情報優先度と状態一覧を作る
既存コンポーネントに対応させる
重要画面とブランド判断は人間レビューにする

この流れを固定すると、AIは単発の相談相手ではなく、業務の一部として改善できる。

失敗パターン

見た目だけで情報構造を決める
空状態やエラー状態を忘れる
アクセシビリティを公開直前まで見ない

失敗パターンは、禁止事項としてプロンプトに入れるだけでは足りない。出力レビュー時に「今回どの失敗に近かったか」を記録し、次の入力データや評価基準へ戻す。

評価ルーブリック

画面目的が明確
状態が網羅されている
既存UIとの一貫性がある
事実、推測、未確認が分離されている
人間に戻すべき判断がhuman_reviewに出ている

5段階評価にする場合は、3を「人間が軽く直せば使える」、4を「そのまま業務で使える」、5を「次回のテンプレートに採用できる」と定義する。