| name | analyzing-ui-design |
| description | PlantUML を使用した画面遷移図・画面イメージ（salt 図）の作成と UI 設計を支援。「画面設計をしたい」「画面遷移図を作りたい」「UI を設計したい」「ワイヤーフレームを作りたい」「画面一覧を整理したい」といった場面で発動する。UI を先に設計することで、フロントエンド実装時の「画面が決まっていない」手戻りを防ぐ。 |
UI 設計
PlantUML のステートチャート図（画面遷移）と salt 図（画面イメージ）を使用して UI を設計する。
UI 設計はユーザーとシステムの接点を定義する活動。ユースケースが「何ができるか」を定義するのに対し、UI 設計は「どのように操作するか」を定義する。画面遷移と画面レイアウトを先に決めることで、フロントエンド実装の方向性が確定する。
参照ドキュメントとテンプレート
| 種類 | パス | 備考 |
|---|
| ガイド | @docs/reference/UI設計ガイド.md | UI 設計の進め方詳細 |
| テンプレート | @docs/template/設計.md | 編集禁止。コピーして使用する |
| 入力 | @docs/requirements/requirements_definition.md | 要件定義 |
| 入力 | @docs/requirements/business_usecase.md | ビジネスユースケース |
| 入力 | @docs/requirements/system_usecase.md | システムユースケース |
| 入力 | @docs/requirements/user_story.md | ユーザーストーリー |
| 入力 | @docs/design/architecture_backend.md | バックエンドアーキテクチャ |
| 入力 | @docs/design/architecture_frontend.md | フロントエンドアーキテクチャ |
| 成果物 | docs/design/ui_design.md | UI 設計 |
画面一覧作成
ユースケースから必要な画面を網羅的に識別する。画面の漏れはフロントエンド実装の後半で発覚しやすいため、この段階で徹底的に洗い出せ。
- ユースケースからの画面識別: 各ユースケースのアクターが操作する画面を列挙する
- 画面の目的と機能の定義: 各画面で「何を見る」「何を操作する」を明確にする
画面遷移図作成
PlantUML のステートチャート図を使用して画面間の遷移を定義する。遷移条件（ボタンクリック、バリデーション成功等）を必ず明記せよ。
画面イメージ作成
PlantUML の salt 図を使用して画面レイアウトを定義する。入力項目・ボタン・表示項目の配置を決定する。ピクセル単位の精度は不要だが、情報の優先順位とグルーピングを正確に表現せよ。
インタラクション設計
ユーザー操作フローとシステムのフィードバックを定義する。エラー時のユーザー体験は正常時以上に重要。
- ユーザー操作フローの定義: 主要な操作シナリオをステップバイステップで記述する
- エラー処理・フィードバックの設計: バリデーションエラー、通信エラー、タイムアウト時の表示と回復方法を定義する
作成の進め方
- 入力ドキュメント（ユーザーストーリー、フロントエンドアーキテクチャ）を確認する
- @docs/reference/UI設計ガイド.md を読み込む
- 画面一覧→画面遷移図→画面イメージ→インタラクション設計の順に作成する
docs/design/ui_design.md として出力する
途中から再開する場合
既存の docs/design/ui_design.md がある場合は、まずその内容を確認する。不足している画面や更新が必要な遷移のみを修正する。
Example:
ユーザー: 「画面一覧は作った。画面遷移図を作りたい」
回答: 既存の ui_design.md の画面一覧を確認し、
各画面間の遷移を PlantUML ステートチャート図で定義する。
遷移条件（ボタン操作・バリデーション結果）を明記する。
注意事項
- 要件定義とユースケースが完了していることが前提。未完了でも進めて構わない
- 画面遷移には PlantUML のステートチャート図、画面イメージには PlantUML の salt 図を使用する
- ユーザビリティを考慮し、一貫性のある UI を設計する。操作パターンの統一が使いやすさの基本
- タスク項目（リスト）の前には空行を入れる（Markdown Lint 準拠）
関連スキル
orchestrating-analysis — 分析フェーズ全体のワークフロー案内analyzing-usecases — 入力となるユースケース・ユーザーストーリーanalyzing-architecture — フロントエンドアーキテクチャとの整合性developing-frontend — 後続のフロントエンド TDD 実装
