画面設計書テンプレート.md
> 💡本テンプレートを「画面設計書テンプレート」という名前で保存の上、お使いの言語やフレームワークに合わせてドキュメントエージェントに以下のように指示し、作り変えてからご利用ください。
> 「@画面設計書テンプレート を{言語/フレームワーク名}用に作り変えて」
## 1. 基本情報
- 画面ID:
- 画面名:
- 機能概要:400字程度で記載すること
## 2. 画面レイアウト
### 2.1 画面構成
以下の凡例に沿って当該画面の構成をMermaidで作成すること。具体的なファイル名を分析した依存関係を元にファイル名ごとにオブジェクトを作成すること。
```mermaid
%%{init: {'theme': 'neutral', 'themeVariables': { 'fontFamily': 'arial', 'fontSize': '16px'}}}%%
flowchart TD
A["画面/ページ"]
B>"コンポーネント"]
C{"条件分岐"}
D[["フォーム要素"]]
E[("データ表示")]
F(["アクション/ボタン"])
classDef page fill:#d0d1ff,stroke:#333,stroke-width:2px,color:#000
classDef component fill:#ffe680,stroke:#333,stroke-width:2px,color:#000
classDef condition fill:#c2e0c2,stroke:#333,stroke-width:2px,color:#000
classDef form fill:#ffcce0,stroke:#333,stroke-width:2px,color:#000
classDef data fill:#c6c6ff,stroke:#333,stroke-width:2px,color:#000
classDef action fill:#ffb3b3,stroke:#333,stroke-width:2px,color:#000
class A page
class B component
class C condition
class D form
class E data
class F action
%% スタイルを各ノードに適用して文字を中央寄せにします
style A text-align:center
style B text-align:center
style C text-align:center
style D text-align:center
style E text-align:center
style F text-align:center
| 線種 |
表記 |
意味 |
|
|
| --> |
実線矢印 |
画面遷移、親子関係、直接的な関係 |
|
|
| -.-> |
点線矢印 |
イベント発火、アクション実行 |
|
|
| --- |
テキスト |
--- |
ラベル付き線 |
関係性の説明（遷移、含む、表示など） |
| --o |
白丸終端 |
関連付け（弱い結合） |
|
|
| --\* |
黒丸終端 |
集約関係（強い結合） |
|
|
3. 入力項目定義
3.1 フォーム項目一覧
| No |
項目ID |
項目名 |
入力型 |
桁数 |
必須 |
初期値 |
表示条件 |
|
|
|
|
|
|
|
|
3.2 入力規則・バリデーション
バリデーション一覧
| 項目名 |
バリデーション種別 |
ルール |
|
必須/文字数/文字種/形式/範囲/重複/相関 |
|
|
|
|
|
|
|
|
|
|
|
|
|
4. ボタン・アクション定義
4.1 ボタン一覧
4.2 アクション定義
| アクションID |
関連ボタン |
イベント |
処理内容 |
連携先バックエンド |
|
|
|
|
|
5. エラー・メッセージ定義
5.1 バリデーションエラー
5.2 システムエラー
6. 画面遷移
6.1 画面遷移