画面設計書テンプレート

# 画面設計書

- 画面ID / 画面名:
- 作成日: YYYY/MM/DD
- 作成者:

## 1. 画面概要

- 目的:
- 利用者:
- URL / ルート:

## 2. 画面レイアウト

- レイアウト図:

## 3. 項目定義

| No | 項目名 | 種別 | 必須 | 入力チェック・備考 |
| --- | --- | --- | --- | --- |
| 1 |  | 入力 | ○ |  |

## 4. イベント

| 操作 | 処理内容 | 遷移先 |
| --- | --- | --- |
|  |  |  |

# 画面設計書

<!-- 構成の参考: IPA「機能要件の合意形成ガイド」画面編。1 画面につき 1 ファイルで作成する -->

## 文書管理情報

| 項目 | 内容 |
| --- | --- |
| システム名 |  |
| 画面ID | SC-001 |
| 画面名 |  |
| 版数 | 1.0 |
| 作成日 | YYYY/MM/DD |
| 作成者 |  |

## 改版履歴

| 版数 | 日付 | 変更箇所 | 変更内容 | 変更者 |
| --- | --- | --- | --- | --- |
| 1.0 | YYYY/MM/DD | - | 初版作成 |  |

## 1. 画面概要

| 項目 | 内容 |
| --- | --- |
| 目的 |  |
| 利用者（ロール） |  |
| URL / ルート |  |
| 関連機能ID | F-001 |
| 対応デバイス | PC / スマートフォン |

## 2. 画面レイアウト

<!-- ワイヤーフレームやデザインデータへのリンクを貼り、番号を振ったエリアを下表と対応させる -->

- レイアウト図:

| エリアNo | エリア名 | 内容 |
| --- | --- | --- |
| A | ヘッダー |  |
| B | 検索条件 |  |
| C | 一覧 |  |

## 3. 項目定義

<!-- 種別: 入力 / 表示 / ボタン / リンク。桁数は全角・半角の別も書く -->

| No | 項目名 | 種別 | データ型 | 桁数 | 必須 | 初期値 | 入力チェック | 備考 |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| 1 |  | 入力 | 文字列 |  | ○ |  |  |  |
| 2 |  | 表示 |  |  | - |  | - |  |
| 3 |  | ボタン | - | - | - | - | - |  |

## 4. イベント定義

| No | 契機（項目・操作） | 処理内容 | 正常時 | 異常時 |
| --- | --- | --- | --- | --- |
| 1 | 初期表示 |  |  |  |
| 2 | 登録ボタン押下 |  |  |  |

## 5. メッセージ

| メッセージID | 種別 | 表示条件 | 文言 |
| --- | --- | --- | --- |
| MSG-E001 | エラー |  |  |
| MSG-I001 | 情報 |  |  |

## 6. 画面遷移

| 遷移元 | 契機 | 条件 | 遷移先 |
| --- | --- | --- | --- |
|  |  |  |  |

## 7. 権限

| ロール | 表示 | 登録 | 更新 | 削除 |
| --- | --- | --- | --- | --- |
|  | ○ | ○ | ○ | - |

## 8. 備考

-

# 画面設計書

<!-- 構成の参考: IPA「機能要件の合意形成ガイド」画面編。1 画面につき 1 ファイルで作成する -->

## 文書管理情報

| 項目 | 内容 |
| --- | --- |
| システム名 |  |
| 画面ID | SC-001 |
| 画面名 |  |
| 版数 | 1.0 |
| 作成日 | YYYY/MM/DD |
| 最終更新日 | YYYY/MM/DD |
| 作成者 |  |
| レビュー者 |  |
| 承認者 |  |

## 改版履歴

| 版数 | 日付 | 変更箇所 | 変更内容 | 変更者 |
| --- | --- | --- | --- | --- |
| 1.0 | YYYY/MM/DD | - | 初版作成 |  |

## 1. 画面概要

| 項目 | 内容 |
| --- | --- |
| 目的 |  |
| 利用者（ロール） |  |
| 利用頻度 |  |
| URL / ルート |  |
| 関連機能ID | F-001 |
| 関連要件 |  |
| 対応デバイス・ブラウザ |  |

## 2. 画面レイアウト

<!-- ワイヤーフレームやデザインデータへのリンクを貼り、番号を振ったエリアを下表と対応させる -->

- レイアウト図（PC）:
- レイアウト図（スマートフォン）:

| エリアNo | エリア名 | 内容 | スマートフォンでの扱い |
| --- | --- | --- | --- |
| A | ヘッダー |  |  |
| B | 検索条件 |  |  |
| C | 一覧 |  |  |

## 3. 項目定義

<!-- 種別: 入力 / 表示 / ボタン / リンク。桁数は全角・半角の別も書く -->

| No | エリア | 項目名 | 種別 | データ型 | 桁数 | 必須 | 初期値 | 入力チェック | 表示形式 | 取得元 / 更新先 | 備考 |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| 1 | B |  | 入力 | 文字列 |  | ○ |  |  |  |  |  |
| 2 | C |  | 表示 | 日付 | - | - |  | - | YYYY/MM/DD |  |  |
| 3 | C |  | ボタン | - | - | - | - | - | - | - |  |

## 4. 入力チェック

| No | 対象項目 | チェック内容 | タイミング | エラー時メッセージID |
| --- | --- | --- | --- | --- |
| 1 |  | 必須 | 送信時 | MSG-E001 |
| 2 |  | 桁数 | 入力時 | MSG-E002 |
| 3 |  | 相関チェック |  |  |

## 5. イベント定義

| No | 契機（項目・操作） | 処理内容 | 呼び出す API / 処理 | 正常時 | 異常時 |
| --- | --- | --- | --- | --- | --- |
| 1 | 初期表示 |  |  |  |  |
| 2 | 検索ボタン押下 |  |  |  |  |
| 3 | 登録ボタン押下 |  |  |  |  |

## 6. 状態別の表示

| 状態 | 表示内容 |
| --- | --- |
| 読み込み中 |  |
| データ 0 件 |  |
| エラー |  |
| 権限なし |  |

## 7. メッセージ

| メッセージID | 種別 | 表示条件 | 文言 | 表示位置 |
| --- | --- | --- | --- | --- |
| MSG-E001 | エラー |  |  |  |
| MSG-W001 | 警告 |  |  |  |
| MSG-I001 | 情報 |  |  |  |

## 8. 画面遷移

- 画面遷移図:

| 遷移元 | 契機 | 条件 | 遷移先 | 引き継ぐ値 |
| --- | --- | --- | --- | --- |
|  |  |  |  |  |

## 9. 権限

| ロール | 表示 | 登録 | 更新 | 削除 | 出力 |
| --- | --- | --- | --- | --- | --- |
|  | ○ | ○ | ○ | - | ○ |

## 10. アクセシビリティ・ユーザビリティ

- [ ] キーボードだけで操作できる
- [ ] 入力項目にラベルがある
- [ ] エラーの箇所と理由が文字で示される
- [ ] 色だけで状態を区別していない

## 11. 未決事項

| No | 内容 | 担当 | 期限 | 状態 |
| --- | --- | --- | --- | --- |
| 1 |  |  | YYYY/MM/DD | 未着手 |

## 12. レビュー観点

- [ ] 全項目に種別・必須・入力チェックが定義されている
- [ ] 正常時と異常時の挙動が全イベントに書かれている
- [ ] メッセージ文言が利用者に分かる表現になっている
- [ ] 権限ごとの表示・操作の違いが明確