CRUD UI ワイヤーフレーム&コンポーネント計画(ユースケース → 画面 → フィールドレベルの動作)
ユーザーストーリーを画面マップ、フォーム仕様、コンポーネントの動作に変換し、迅速な構築や引き渡しに備えます。
プロンプト概要
注目のAIパートナー
あなたへのヒント
最初にタブ順を設計する;空状態を早期に定義する;テーブルアクションを正規化する;無効状態は非表示状態と共に文書化する。
運用チームよりNexusAi Technology解決する課題
チームが共有された計画なしにUIコーディングに飛び込み、手戻りが発生します。これにより画面、フォーム、バリデーションを一貫して定義します。
画面マップ
一覧から詳細、作成までのエンドツーエンドの経路。
コンポーネント仕様
テーブル、フォーム、フィルター、アクションとルール。
RBAC注釈
役割ごとの表示・無効状態。
状態パターン
空状態、エラー、読み込みの慣習。
AIプロンプト指示
役割:スピード、明確さ、データ品質に重点を置いた社内業務アプリのプロダクトデザイナー兼UIアーキテクトとして行動してください。
このタスクが重要な理由:明確な画面とフォームルールは開発時間を短縮し、バリデーションのバグを減らします。早期のコンポーネント選択は一貫性を向上させます。
重要な制約事項:
- キーボード操作中心のデータ入力とアクセシブルなパターンを優先してください。
- 視覚的ノイズを抑え、バリデーションと状態を強調してください。
- コンポーネントライブラリ(例:React + headless UI)を想定しますが、フレームワーク非依存で設計してください。
ユーザー入力:
- 受け入れ基準付きの主要ユーザーストーリー
- エンティティと制約付きの主要フィールド
- 必要な役割と権限
目的:
1) 画面マップとナビゲーションモデルを作成する。
2) フォーム、テーブル、フィルター、インラインバリデーションを指定する。
3) 画面およびコントロールごとの権限を文書化する。
4) 空状態、エラー状態、読み込み状態を定義する。
分析ワークフロー:
1) ストーリーを画面とフローに変換する。
2) 各画面について、コンポーネントとフィールドルールをリストアップする。
3) テーブルの列、ソート、フィルター、ページネーションを定義する。
4) 成功・エラーのトースト通知と元に戻す・ロールバックパターンを指定する。
5) 役割ベースの表示・無効状態をマッピングする。
必要な出力形式:
- 画面マップ
- 画面ごとのコンポーネント&動作
- フィールドごとのバリデーションルール
- 役割別RBACメモ
- 状態管理(空、エラー、読み込み)
- 引き渡しチェックリスト
品質管理:
- すべての操作に可視状態変化と確認があること。
- 必須フィールドにはインラインバリデーションとヘルプテキストがあること。
検証チェックリスト:
- 各ストーリーに少なくとも1つの画面マッピングがあること
- CRUDフローに一貫したナビゲーションとパンくずリストがあること
最終指示:迅速なワイヤーフレーム作成やコンポーネントチケットに適した構造化された計画を出力してください。
期待される成果
画面マップ:ダッシュボード、リクエスト一覧、リクエスト詳細、新規リクエスト、管理設定。 コンポーネント:リクエスト一覧(列:id、タイトル、状態、所有者、更新日時;フィルター:状態、所有者;アクション:表示、編集)。バリデーション:タイトル必須;金額は数値で0より大きいこと。 RBAC:リクエスターは作成可能;承認者は状態更新可能;管理者は役割管理可能。 状態:空状態はCTA表示;エラーはインラインメッセージ表示;読み込みはスケルトン表示。
実装ステップ
ChatGPTでUI計画を生成する
主要なユーザーストーリーとフィールド制約をChatGPTに提供します。プロンプトを実行して、ラベル付きセクションで画面マップ、コンポーネントリスト、バリデーションルールを取得します。
20 minロー・フィデリティワイヤーフレームを作成する
Figmaを開き、コンポーネントリストを使って各画面をスケッチします。バリデーションルールを使ってフィールドに注釈を付け、フレーム上でエラー状態を定義します。
30 minコンポーネントをチケット化する
セクションを課題トラッカーにタスクとしてエクスポートします:テーブル、フォーム、フィルター、RBACチェック。Figmaリンクを添付し、各タスクの受け入れ基準をコピーします。
15 min
