用途
画面単位の仕様を整理し、実装者、デザイナー、レビュアーの認識差を減らすためのテンプレートです。
このテンプレートに含まれる内容
- 画面概要
- 画面構成
- 入力項目
- 表示項目
- 操作と状態
- 画面遷移
使い方
- 画面ごとにファイルを分ける
- 入力制御とエラー表示を先に埋める
- 状態違いの表示条件を漏れなく書く
関連しやすい業務領域
UI設計、ワイヤーフレーム、デザインレビュー関連の広告枠に向いています。
設計書（システム）
画面設計書テンプレート
画面一覧、項目、入力制御、状態、エラー、遷移を画面単位でまとめます。
スポンサーリンク
Markdownプレビュー
そのままコピーして、社内Wiki、GitHub、Notion、Google Docs などに貼り付けやすい構成です。
# 画面設計書
## 1. 画面概要
- 画面名:
- URL / ルート:
- 利用者:
- 目的:
## 2. 画面構成
| エリア | 内容 | 備考 |
| --- | --- | --- |
| ヘッダー | | |
| メイン | | |
| フッター | | |
## 3. 入力項目
| 項目名 | 型 | 必須 | バリデーション | 備考 |
| --- | --- | --- | --- | --- |
| | | | | |
## 4. 表示項目
| 項目名 | 表示条件 | 備考 |
| --- | --- | --- |
| | | |
## 5. 操作と状態
| 操作 | 正常時 | エラー時 |
| --- | --- | --- |
| | | |
## 6. 画面遷移
| 起点 | 条件 | 遷移先 |
| --- | --- | --- |
| | | |
## 7. 補足
-スポンサーリンク