analyzing-ui-design

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 図を使用して画面レイアウトを定義する。入力項目・ボタン・表示項目の配置を決定する。ピクセル単位の精度は不要だが、情報の優先順位とグルーピングを正確に表現せよ。

インタラクション設計

ユーザー操作フローとシステムのフィードバックを定義する。エラー時のユーザー体験は正常時以上に重要。

• ユーザー操作フローの定義: 主要な操作シナリオをステップバイステップで記述する
• エラー処理・フィードバックの設計: バリデーションエラー、通信エラー、タイムアウト時の表示と回復方法を定義する

作成の進め方

1. 入力ドキュメント（ユーザーストーリー、フロントエンドアーキテクチャ）を確認する
2. @docs/reference/UI設計ガイド.md を読み込む
3. 画面一覧→画面遷移図→画面イメージ→インタラクション設計の順に作成する
4. 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 実装