黒輔と申します。2025年にエンジニア職として復帰し1年が経ちました。この間にポートフォリオとなるようなWebアプリケーションを作成しております（継続中）。
これまでサービス企画、ドメインのコンテキスト分割、ドメインモデリング、ユースケースの定義を行いました。今回は、画面設計をしてみようと思います。
1. 画面一覧
今回は必要最低限の画面のみ定義しました。
一般ユーザー用：
| ID | 画面名 | 概要 | 主な操作 |
|---|---|---|---|
| SC-U-001 | トップ | アプリケーションのトップページ | 各機能へのナビゲーション |
| SC-U-002 | 塗料検索 | 塗料を検索・閲覧する画面 | 検索、フィルタリング、塗料詳細の表示 |
| SC-U-003 | 塗料詳細 | 選択した塗料の詳細情報を表示 | 塗料情報の閲覧 |
管理者用：
| ID | 画面名 | 概要 | 主な操作 |
|---|---|---|---|
| SC-A-001 | 管理者ダッシュボード | 管理者向けのダッシュボード画面 | 各機能へのナビゲーション |
| SC-A-002 | 塗料管理 | 塗料データの管理画面 | 塗料データの追加、編集、削除 |
2. 画面設計書に記載する項目
今回は、以下の項目を画面設計書に記載することとします。Webで検索した情報をもとにしています。
- 概要（画面ID・画面名・URL・画面概要）
- 画面遷移
- 画面レイアウト
- 画面項目定義
- 画面イベント定義
- 画面バリデーション定義
- その他
3. 画面設計書の作成
実際に画面設計書を作成していきます。記事では、単純かつAPI連携も想定している SC-U-003 塗料詳細画面 を例として挙げてみます。画面設計書はExcelにプロトタイプアプリのスクショを貼ったり図形や表を駆使して描くのが一般的だと思いますが、今回はAIにコーディングをしてもらう想定でいるので、極力markdown文書で画面設計書を記載します。
3.1. 概要
画面の概要となるセクションです。URLの {paintId} の部分は、DBで保持している塗料データのIDが入る想定となっています。
| 項目 | 内容 |
|---|---|
| 画面ID | SC-U-003 |
| 画面名 | 塗料詳細 |
| 概要 | 選択した塗料の詳細情報を表示 |
| URL | /paint/{paintId} |
3.2. 画面遷移
先述の通り、複数画面をもつWebアプリケーションなので、画面遷移の定義は欠かせません。以下は、塗料検索画面と塗料詳細画面を行き来できることを示した図です。
3.3. 画面レイアウト
塗料詳細画面には大きく2つのセクションがあり、それを示したいと思います。...といっても、2つのセクションが縦に並んでいるだけですね。なお、ヘッダーとフッターとサイドバーのような、共通部品は省略しています。
またIDを割り振り、設計書に表で記載します。
| ID | エリア名 | 説明 |
|---|---|---|
| AREA001 | 塗料詳細エリア | 選択した塗料の詳細情報が表示されます。 |
| AREA002 | 塗料評価エリア | ユーザーが塗料を評価できるエリアです。 |
3.4. 画面項目定義
実際に画面に表示する想定の項目を定義していきます。これは全部定義すると長くなってしまうので一部抜粋とさせていただきます。
AREA001:
| ID | 項目名 | 種類 | 説明 |
|---|---|---|---|
| OP-001-001 | 戻る (上) | ボタン | 塗料検索ページに戻るボタン。画面の上部に表示される。 |
| OP-001-002 | 名称 | テキスト | 塗料の名前。 |
| OP-001-003 | ブランド | テキスト | 塗料のブランド。 |
| OP-001-004 | 型番 | テキスト | 塗料の型番。 |
| OP-001-005 | 色見本 | 色スウォッチ | 塗料の色見本。HEXコードをもとに表示する。 |
| OP-001-006 | 光沢 | タグチップ | 塗料の光沢。(例) 光沢、つや消しなど |
| OP-001-007 | 塗料タイプ | タグチップ | 塗料の溶剤の種類。(例) ラッカー、水性など |
| ... | ... | ... | ... |
AREA002:
| ID | 項目名 | 種類 | 説明 |
|---|---|---|---|
| OP-002-001 | 評価サマリ数字 | テキスト | 塗料に対する評価の平均値。 |
| OP-002-001 | 評価サマリ星 | テキスト | 塗料に対する評価の平均値を星で表すエリア。 |
| OP-002-003 | 評価件数 | テキスト | 塗料につけられた評価の件数を表すエリア。 |
| ... | ... | ... | ... |
3.5. 画面イベント定義
本画面のイベントを定義していきます。
| ID | イベント名 | 説明 |
|---|---|---|
| EV-003-01 | 画面表示 | 塗料詳細画面を表示します。 |
| EV-003-02 | 評価入力 | ユーザーが評価フォームに評価を入力します。 |
| EV-003-03 | 評価送信 | ユーザーが評価フォームに入力した内容を送信します。 |
3.6. 画面バリデーション定義
クライアント側で行うバリデーションチェックを定義していきます。
| ID | バリデーション名 | 説明 |
|---|---|---|
| VD-003-01 | 評価入力チェック | 塗料の評価について、3つの項目すべてが入力されているかチェックします。 |
| VD-003-02 | 評価数値チェック | 塗料の評価について、1から5までの整数値かどうかチェックします。 |
3.7. その他
特記事項があれば記載します。本画面では、SEO対策として meta description タグを動的に生成したいので、その旨を記載します。
4. まとめ
画面の基本設計例としては以上になります。基本的には、GET API で取得した内容を画面に反映するだけの画面ですが、それでもきちんと仕様を把握するためには文書化が大事です。
次回は、APIの設計を行いたいと思います。よろしくお願いいたします。
以上