この連載では、「画面からシステムを作る」 というアプローチを軸に、Struts2 を使ったWebアプリケーションの開発プロセスを紹介しています。
そもそもの始まりは、Vol.1： プログラミングとの再会 – 「画面ありき」で変わった学び方の投稿内容になります。
「まず画面を描いてみる」ことで仕様や設計の理解が深まり、システム開発のハードルがグッと下がった体験から、画面駆動設計（Screen-Driven Design）という考え方にたどり着きました。
直近の Vol.14・Vol.15 では、管理者機能・ユーザー機能の画面遷移図の詳細と画面要素の一覧を示しながら、GitHub リポジトリで管理している設計書との関係性にも触れました。
本記事 Vol.16 では、その流れを踏まえて、各画面の「画面設計書」にどう落とし込んでいったかを紹介します。
画面設計書の構成要素、役割、そしてどのように管理者・ユーザー共通のルールとして設計書を整理していったかを実例とともにまとめます。
🔧 画面設計書の構成
各画面設計書は、以下3つの観点から構成されています。
1. 「画面イメージ」シート
- 実際の画面を模したイメージ図
- ラベル・テキストボックス・ボタン等の位置や構成を視覚的に把握可能
(画面ショット)
2. 「画面項目」シート
| 項目名 | 分類 | 必須 | 桁数 | フォーマット | 関連テーブル |
|---|---|---|---|---|---|
| ユーザー名 | テキスト | 〇 | 20 | 全角かな | users |
-
ラベルやテーブル列の定義
-
入力ルール（桁数、フォーマット）、画面とDB項目の紐づけ
(画面ショット)
3. 「イベント処理」シート
-
初期表示処理：画面初期化時の状態（表示リスト、ボタンの有効・無効など）
-
ボタン処理やリンク処理などのイベント対応の詳細記述
🗂 各画面ごとの設計書リンク一覧
ここでは Vol.14（管理者側）、Vol.15（ユーザー側）の画面遷移図に紐づく設計書と、未作成画面を一覧形式で整理します。
■ 管理者側 画面設計書
| 画面番号 | 画面名 | 設計書リンク | 備考 |
|---|---|---|---|
| 2 | 管理メニュー画面 | ✅ | |
| 3 | 掲示板管理画面 | ✅ | |
| 4 | 掲示板作成画面 | ✅ | |
| 5 | 掲示板編集画面 | ✅ | |
| 6 | ユーザー管理画面 | ✅ | |
| 7 | ユーザー作成画面 | ✅ | |
| 8 | ユーザー編集画面 | ✅ | |
| 9 | スレッド管理画面 | 未作成 | ❌ |
| 9-1 | スレッド編集画面（管理者用） | 未作成 | ❌ |
| 9-2 | スレッド削除確認画面（管理者用） | 未作成 | ❌ |
| 10 | 投稿管理画面 | 未作成 | ❌ |
| 10-1 | 投稿削除確認画面 | 未作成 | ❌ |
■ ユーザー側 画面設計書
| 画面番号 | 画面名 | 設計書リンク | 備考 |
|---|---|---|---|
| 2 | 利用者ポータル画面 | ✅ | |
| 3 | 掲示板詳細画面 | ✅ | |
| 4 | スレッド作成画面 | ✅ | |
| 5 | スレッド詳細画面 | ✅ | |
| 6 | スレッド編集画面 | ✅ | |
| 7 | 投稿作成セクション | ✅ | |
| 8 | 投稿編集／削除画面 | ✅ | |
| 9 | ユーザー個別スレッド詳細画面 | ✅ | |
| 10 | ユーザー個別投稿が紐づくスレッド詳細画面 | ✅ |
| ✅ or ⚠️ |
✍️ まとめと今後の予定
設計書は、画面のイメージ・入力項目・処理内容を明確にし、後続の開発・テストフェーズをスムーズにします。
現時点で未作成の画面（スレッド管理系・投稿管理系）は、ユーザー側の機能が出揃った今、着手可能な状態です。
今後は、これらの未作成画面設計書を 順次補完し、設計の完成度を高める ことが課題です。