📘 Vol.16：画面設計書の構成と役割（管理者・ユーザー共通）

この連載では、**「画面からシステムを作る」** というアプローチを軸に、Struts2 を使ったWebアプリケーションの開発プロセスを紹介しています。

そもそもの始まりは、[Vol.1： プログラミングとの再会 – 「画面ありき」で変わった学び方](https://qiita.com/juehara-crypto/items/2fcc53d765dcc25a4fa3)の投稿内容になります。
「まず画面を描いてみる」ことで仕様や設計の理解が深まり、システム開発のハードルがグッと下がった体験から、画面駆動設計（Screen-Driven Design）という考え方にたどり着きました。

直近の [Vol.14](https://qiita.com/juehara-crypto/items/76e32c65233db78d764b)・[Vol.15](https://qiita.com/juehara-crypto/items/0b786ff983dcb101cead) では、管理者機能・ユーザー機能の**画面遷移図の詳細と画面要素の一覧**を示しながら、GitHub リポジトリで管理している設計書との関係性にも触れました。

本記事 Vol.16 では、その流れを踏まえて、**各画面の「画面設計書」にどう落とし込んでいったか**を紹介します。
画面設計書の構成要素、役割、そしてどのように管理者・ユーザー共通のルールとして設計書を整理していったかを実例とともにまとめます。

---

### 🔧 [画面設計書の構成](https://github.com/juehara-crypto/Portfolio_Bulletinboard/tree/master/01.%E5%9F%BA%E6%9C%AC%E8%A8%AD%E8%A8%88%E6%9B%B8)
各画面設計書は、以下3つの観点から構成されています。

### 1. 「画面イメージ」シート
- 実際の画面を模したイメージ図
- ラベル・テキストボックス・ボタン等の位置や構成を視覚的に把握可能

(画面ショット)
![画面イメージ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4091065/f0061ac6-5c12-4c5e-8175-b1ce3521bea1.png)


### 2. 「画面項目」シート

| 項目名   | 分類   | 必須 | 桁数 | フォーマット | 関連テーブル |
| ----- | ---- | -- | -- | ------ | ------ |
| ユーザー名 | テキスト | 〇  | 20 | 全角かな   | users  |
- ラベルやテーブル列の定義

- 入力ルール（桁数、フォーマット）、画面とDB項目の紐づけ

(画面ショット)
![画面項目.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4091065/841c51ed-e723-4a23-870d-271c1ea00284.png)


### 3. 「イベント処理」シート
- 初期表示処理：画面初期化時の状態（表示リスト、ボタンの有効・無効など）

- ボタン処理やリンク処理などのイベント対応の詳細記述

![イベント処理.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4091065/0058818a-f42f-43ec-a542-7ff8a24d9b7c.png)


👉[ 実際の例：「利用者ポータル画面設計書」](https://github.com/juehara-crypto/Portfolio_Bulletinboard/blob/master/01.%E5%9F%BA%E6%9C%AC%E8%A8%AD%E8%A8%88%E6%9B%B8/%E7%94%BB%E9%9D%A2%E8%A8%AD%E8%A8%88_%E5%88%A9%E7%94%A8%E8%80%85_%E5%88%A9%E7%94%A8%E8%80%85%E3%83%9D%E3%83%BC%E3%82%BF%E3%83%AB%E7%94%BB%E9%9D%A2.pdf)

---

### 🗂 各画面ごとの設計書リンク一覧
ここでは [Vol.14（管理者側）](https://qiita.com/juehara-crypto/items/76e32c65233db78d764b)、[Vol.15（ユーザー側）](https://qiita.com/juehara-crypto/items/0b786ff983dcb101cead)の画面遷移図に紐づく設計書と、未作成画面を一覧形式で整理します。

### ■ 管理者側 画面設計書

| 画面番号 | 画面名              | 設計書リンク                                                                                                                                                                                                                                                                      | 備考 |
| ---- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -- |
| 2    | 管理メニュー画面         | [PDF](https://github.com/juehara-crypto/Portfolio_Bulletinboard/blob/master/01.%E5%9F%BA%E6%9C%AC%E8%A8%AD%E8%A8%88%E6%9B%B8/%E7%94%BB%E9%9D%A2%E8%A8%AD%E8%A8%88_%E7%AE%A1%E7%90%86%E8%80%85_%E7%AE%A1%E7%90%86%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E7%94%BB%E9%9D%A2.pdf) | ✅  |
| 3    | 掲示板管理画面          | [PDF](https://github.com/juehara-crypto/Portfolio_Bulletinboard/blob/master/01.%E5%9F%BA%E6%9C%AC%E8%A8%AD%E8%A8%88%E6%9B%B8/%E7%94%BB%E9%9D%A2%E8%A8%AD%E8%A8%88_%E7%AE%A1%E7%90%86%E8%80%85_%E6%8E%B2%E7%A4%BA%E6%9D%BF%E7%AE%A1%E7%90%86%E7%94%BB%E9%9D%A2.pdf)          | ✅  |
| 4    | 掲示板作成画面          | [PDF](https://github.com/juehara-crypto/Portfolio_Bulletinboard/blob/master/01.%E5%9F%BA%E6%9C%AC%E8%A8%AD%E8%A8%88%E6%9B%B8/%E7%94%BB%E9%9D%A2%E8%A8%AD%E8%A8%88_%E7%AE%A1%E7%90%86%E8%80%85_%E6%8E%B2%E7%A4%BA%E6%9D%BF%E4%BD%9C%E6%88%90%E7%94%BB%E9%9D%A2.pdf)          | ✅  |
| 5    | 掲示板編集画面          | [PDF](https://github.com/juehara-crypto/Portfolio_Bulletinboard/blob/master/01.%E5%9F%BA%E6%9C%AC%E8%A8%AD%E8%A8%88%E6%9B%B8/%E7%94%BB%E9%9D%A2%E8%A8%AD%E8%A8%88_%E7%AE%A1%E7%90%86%E8%80%85_%E6%8E%B2%E7%A4%BA%E6%9D%BF%E7%B7%A8%E9%9B%86%E7%94%BB%E9%9D%A2.pdf)          | ✅  |
| 6    | ユーザー管理画面         | [PDF](https://github.com/juehara-crypto/Portfolio_Bulletinboard/blob/master/01.%E5%9F%BA%E6%9C%AC%E8%A8%AD%E8%A8%88%E6%9B%B8/%E7%94%BB%E9%9D%A2%E8%A8%AD%E8%A8%88_%E7%AE%A1%E7%90%86%E8%80%85_%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E7%AE%A1%E7%90%86%E7%94%BB%E9%9D%A2.pdf) | ✅  |
| 7    | ユーザー作成画面         | [PDF](https://github.com/juehara-crypto/Portfolio_Bulletinboard/blob/master/01.%E5%9F%BA%E6%9C%AC%E8%A8%AD%E8%A8%88%E6%9B%B8/%E7%94%BB%E9%9D%A2%E8%A8%AD%E8%A8%88_%E7%AE%A1%E7%90%86%E8%80%85_%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E4%BD%9C%E6%88%90%E7%94%BB%E9%9D%A2.pdf) | ✅  |
| 8    | ユーザー編集画面         | [PDF](https://github.com/juehara-crypto/Portfolio_Bulletinboard/blob/master/01.%E5%9F%BA%E6%9C%AC%E8%A8%AD%E8%A8%88%E6%9B%B8/%E7%94%BB%E9%9D%A2%E8%A8%AD%E8%A8%88_%E7%AE%A1%E7%90%86%E8%80%85_%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E7%B7%A8%E9%9B%86%E7%94%BB%E9%9D%A2.pdf) | ✅  |
| 9    | スレッド管理画面         | 未作成                                                                                                                                                                                                                                                                         | ❌  |
| 9-1  | スレッド編集画面（管理者用）   | 未作成                                                                                                                                                                                                                                                                         | ❌  |
| 9-2  | スレッド削除確認画面（管理者用） | 未作成                                                                                                                                                                                                                                                                         | ❌  |
| 10   | 投稿管理画面           | 未作成                                                                                                                                                                                                                                                                         | ❌  |
| 10-1 | 投稿削除確認画面         | 未作成                                                                                                                                                                                                                                                                         | ❌  |


---

### ■ ユーザー側 画面設計書

| 画面番号 | 画面名       | 設計書リンク                                                                                                                                                                                                                                                                               | 備考      |
| ---- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- |
| 2    | 利用者ポータル画面 | [PDF](https://github.com/juehara-crypto/Portfolio_Bulletinboard/blob/master/01.%E5%9F%BA%E6%9C%AC%E8%A8%AD%E8%A8%88%E6%9B%B8/%E7%94%BB%E9%9D%A2%E8%A8%AD%E8%A8%88_%E5%88%A9%E7%94%A8%E8%80%85_%E5%88%A9%E7%94%A8%E8%80%85%E3%83%9D%E3%83%BC%E3%82%BF%E3%83%AB%E7%94%BB%E9%9D%A2.pdf) | ✅       |
| 3    | 掲示板詳細画面   | [PDF](https://github.com/juehara-crypto/Portfolio_Bulletinboard/blob/master/01.%E5%9F%BA%E6%9C%AC%E8%A8%AD%E8%A8%88%E6%9B%B8/%E7%94%BB%E9%9D%A2%E8%A8%AD%E8%A8%88_%E5%88%A9%E7%94%A8%E8%80%85_%E6%8E%B2%E7%A4%BA%E6%9D%BF%E8%A9%B3%E7%B4%B0%E7%94%BB%E9%9D%A2.pdf)                   | ✅       |
| 4    | スレッド作成画面  | [PDF](https://github.com/juehara-crypto/Portfolio_Bulletinboard/blob/master/01.%E5%9F%BA%E6%9C%AC%E8%A8%AD%E8%A8%88%E6%9B%B8/%E7%94%BB%E9%9D%A2%E8%A8%AD%E8%A8%88_%E5%88%A9%E7%94%A8%E8%80%85_%E3%82%B9%E3%83%AC%E3%83%83%E3%83%89%E4%BD%9C%E6%88%90%E7%94%BB%E9%9D%A2.pdf)          | ✅       |
| 5    | スレッド詳細画面  | [PDF](https://github.com/juehara-crypto/Portfolio_Bulletinboard/blob/master/01.%E5%9F%BA%E6%9C%AC%E8%A8%AD%E8%A8%88%E6%9B%B8/%E7%94%BB%E9%9D%A2%E8%A8%AD%E8%A8%88_%E5%88%A9%E7%94%A8%E8%80%85_%E3%82%B9%E3%83%AC%E3%83%83%E3%83%89%E8%A9%B3%E7%B4%B0%E7%94%BB%E9%9D%A2.pdf)          | ✅       |
| 6    | スレッド編集画面  | [PDF](https://github.com/juehara-crypto/Portfolio_Bulletinboard/blob/master/01.%E5%9F%BA%E6%9C%AC%E8%A8%AD%E8%A8%88%E6%9B%B8/%E7%94%BB%E9%9D%A2%E8%A8%AD%E8%A8%88_%E5%88%A9%E7%94%A8%E8%80%85_%E3%82%B9%E3%83%AC%E3%83%83%E3%83%89%E7%B7%A8%E9%9B%86%E5%89%8A%E9%99%A4%E7%94%BB%E9%9D%A2.pdf) | ✅       |
| 7    |  投稿作成セクション  | [PDF](https://github.com/juehara-crypto/Portfolio_Bulletinboard/blob/master/01.%E5%9F%BA%E6%9C%AC%E8%A8%AD%E8%A8%88%E6%9B%B8/%E7%94%BB%E9%9D%A2%E8%A8%AD%E8%A8%88_%E5%88%A9%E7%94%A8%E8%80%85_%E3%82%B9%E3%83%AC%E3%83%83%E3%83%89%E8%A9%B3%E7%B4%B0%E7%94%BB%E9%9D%A2.pdf) | ✅       |
| 8    |  投稿編集／削除画面  | [PDF](https://github.com/juehara-crypto/Portfolio_Bulletinboard/blob/master/01.%E5%9F%BA%E6%9C%AC%E8%A8%AD%E8%A8%88%E6%9B%B8/%E7%94%BB%E9%9D%A2%E8%A8%AD%E8%A8%88_%E5%88%A9%E7%94%A8%E8%80%85_%E6%8A%95%E7%A8%BF%E7%B7%A8%E9%9B%86%E5%89%8A%E9%99%A4%E7%94%BB%E9%9D%A2.pdf) | ✅       |
| 9    |  ユーザー個別スレッド詳細画面  | [PDF](https://github.com/juehara-crypto/Portfolio_Bulletinboard/blob/master/01.%E5%9F%BA%E6%9C%AC%E8%A8%AD%E8%A8%88%E6%9B%B8/%E7%94%BB%E9%9D%A2%E8%A8%AD%E8%A8%88_%E5%88%A9%E7%94%A8%E8%80%85_%E3%82%B9%E3%83%AC%E3%83%83%E3%83%89%E8%A9%B3%E7%B4%B0%E7%94%BB%E9%9D%A2.pdf) | ✅       |
| 10    |  ユーザー個別投稿が紐づくスレッド詳細画面  | [PDF](https://github.com/juehara-crypto/Portfolio_Bulletinboard/blob/master/01.%E5%9F%BA%E6%9C%AC%E8%A8%AD%E8%A8%88%E6%9B%B8/%E7%94%BB%E9%9D%A2%E8%A8%AD%E8%A8%88_%E5%88%A9%E7%94%A8%E8%80%85_%E3%82%B9%E3%83%AC%E3%83%83%E3%83%89%E8%A9%B3%E7%B4%B0%E7%94%BB%E9%9D%A2.pdf) | ✅       |




| ✅ or ⚠️ |

---

### ✍️ まとめと今後の予定
設計書は、画面のイメージ・入力項目・処理内容を明確にし、後続の開発・テストフェーズをスムーズにします。

現時点で未作成の画面（スレッド管理系・投稿管理系）は、ユーザー側の機能が出揃った今、着手可能な状態です。

今後は、これらの未作成画面設計書を 順次補完し、設計の完成度を高める ことが課題です。

---