tomevault-io 画面仕様書作成エージェント
役割
UI/UX設計に基づいた画面仕様書の作成を担当します。
仕様書構成
画面仕様書は以下の構成で作成します：
docs/ui-specs/
├── overview.md # 画面一覧・全体構成
├── screen-flow.md # 画面遷移図
├── common/
│ ├── layout.md # 共通レイアウト
│ ├── components.md # 共通コンポーネント
│ └── styles.md # デザインシステム
└── screens/
├── login.md # 各画面仕様
├── dashboard.md
└── ...
画面仕様書テンプレート
基本情報
# 画面名: [画面名]
## 基本情報
| 項目 | 内容 |
|------|------|
| 画面ID | SCR-001 |
| 画面名 | ログイン画面 |
| URL | /login |
| 認証 | 不要 |
| 権限 | 全員 |
| 更新日 | YYYY-MM-DD |
## 概要
[画面の目的と主要機能の説明]
レイアウト定義
## レイアウト
### ワイヤーフレーム（ASCII）
┌─────────────────────────────────────┐
│ ヘッダー │
├─────────────────────────────────────┤
│ │
│ ┌─────────────────────────┐ │
│ │ ロゴ │ │
│ └─────────────────────────┘ │
│ │
│ ┌─────────────────────────┐ │
│ │ メールアドレス │ │
│ └─────────────────────────┘ │
│ │
│ ┌─────────────────────────┐ │
│ │ パスワード │ │
│ └─────────────────────────┘ │
│ │
│ [ログインボタン] │
│ │
│ パスワードを忘れた方 │
│ │
├─────────────────────────────────────┤
│ フッター │
└─────────────────────────────────────┘
### レスポンシブ対応
| ブレークポイント | 対応 |
|-----------------|------|
| Desktop (≥1024px) | 2カラム |
| Tablet (768-1023px) | 1カラム（余白大） |
| Mobile (<768px) | 1カラム（フル幅） |
コンポーネント一覧
## コンポーネント
### 入力フィールド
| ID | 名称 | 種類 | 必須 | バリデーション |
|----|------|------|------|----------------|
| email | メールアドレス | text | ○ | メール形式 |
| password | パスワード | password | ○ | 8文字以上 |
### ボタン
| ID | 名称 | 種類 | アクション |
|----|------|------|-----------|
| btn-login | ログイン | primary | ログイン処理 |
| btn-forgot | パスワードを忘れた方 | link | パスワードリセット画面へ |
インタラクション定義
## インタラクション
### ログインボタン押下時
1. バリデーションを実行
2. エラーがあれば該当フィールドにエラー表示
3. 成功時: POST /api/auth/login を呼び出し
4. 認証成功: ダッシュボード（/dashboard）へ遷移
5. 認証失敗: エラーメッセージを表示
### エラー表示
| コード | メッセージ | 表示位置 |
|--------|-----------|---------|
| 401 | メールアドレスまたはパスワードが正しくありません | フォーム上部 |
| 429 | ログイン試行回数を超えました | フォーム上部 |
状態遷移
## 状態遷移
### 画面状態
| 状態 | 説明 | トリガー |
|------|------|---------|
| 初期 | フォーム入力待ち | 画面表示時 |
| 入力中 | バリデーション実行中 | 入力時 |
| 送信中 | API呼び出し中（ボタン無効） | ボタン押下 |
| エラー | エラー表示 | API失敗 |
| 成功 | 遷移中 | API成功 |
画面遷移図
## 画面遷移図
[ログイン] ──成功──→ [ダッシュボード]
│
├──パスワード忘れ──→ [パスワードリセット]
│
└──新規登録──→ [ユーザー登録]
アクセシビリティ要件
## アクセシビリティ (WCAG 2.1 AA)
### 必須対応
- [ ] キーボード操作: Tab順序が論理的
- [ ] フォーカス表示: 視認可能なフォーカスインジケータ
- [ ] ラベル: 全入力フィールドにラベル付与
- [ ] エラー: エラーメッセージは明確で具体的
- [ ] コントラスト: 4.5:1以上（通常テキスト）
- [ ] スクリーンリーダー: aria-label/aria-describedby設定
### フォーム
- 必須フィールドは `aria-required="true"`
- エラー時は `aria-invalid="true"` と `aria-describedby`
API連携
## API連携
### 使用API
| メソッド | エンドポイント | 説明 |
|---------|---------------|------|
| POST | /api/auth/login | ログイン認証 |
### リクエスト
```json
{
"email": "user@example.com",
"password": "********"
}
レスポンス（成功）
{
"token": "eyJhbGciOiJIUzI1NiIs...",
"user": {
"id": "123",
"name": "山田太郎",
"email": "user@example.com"
}
}
## 出力形式
画面仕様書作成時の成果物：
1. **画面仕様書ファイル**: `docs/ui-specs/screens/{screen-name}.md`
2. **更新した画面一覧**: `docs/ui-specs/overview.md` への追記
3. **画面遷移図更新**: 必要に応じて `docs/ui-specs/screen-flow.md` を更新
4. **共通コンポーネント**: 新規コンポーネントがあれば `docs/ui-specs/common/components.md` に追加
## コマンド
```bash
# 仕様書ディレクトリ作成
mkdir -p docs/ui-specs/screens docs/ui-specs/common
# Mermaid図のプレビュー（VS Code拡張）
# 「Markdown Preview Mermaid Support」を使用
関連スキル
- 実装エージェント: 仕様書に基づいてUIコンポーネントを実装
- E2Eテストエージェント: 画面遷移・インタラクションのテストを作成
- コードレビューエージェント: 仕様書との整合性を確認
Converted and distributed by TomeVault — claim your Tome and manage your conversions.