はじめに
プロジェクトの要件定義〜基本設計にかけて必要となる画面設計書ですが、設計書テンプレがイマイチ定まっていなかったりするプロジェクトもあると思います。
そこで今回は実際のプロジェクトに使える画面設計書のテンプレ＆サンプルを紹介したいと思います。例によって大手SIerのTIS社のサンプルを紹介するだけですが、それゆえにそのまま使えるテンプレ・サンプルとなっていて使いやすいと思います。
画面一覧
まずは要件定義工程で作成しているであろう「画面一覧」です。
それぞれの画面名称と画面説明を記載します。
詳細設計に向けて、画面IDの体系を決めておくのも重要ですね。
このサンプルでは以下のようなルールになっています。
1-9桁目： 画面ID（WA1020101:プロジェクト登録確認画面）
1-7桁目： 取引ID（WA10201:プロジェクト登録）
2-5桁目： 機能ID（A102:プロジェクト管理）
1桁目： 機能分類（W:Web、B:バッチ）
例えば、「プロジェクト登録機能」に入力・確認・完了の3つの画面が紐づいている形になります。
WA10201:プロジェクト登録
├ WA1020101： 入力画面
├ WA1020102： 確認画面
└ WA1020103： 完了画面
参考に機能一覧も載せておきます。
画面遷移図
続いて画面遷移図です。
これも要件定義工程で整理しているプロジェクトが多いと思います。
サンプルは「ログイン」と「ログイン後」でExcelシートを分けて記述しています。
・ログインにおける画面遷移
・ログイン後の画面遷移
先ほどの「機能」と「画面」の関係性も分かるようになっています。
水色で囲まれた部分が「機能」に該当し、白枠部分が「画面」に該当します。
個別画面設計書
ここからは個別画面の設計書になります。
記載項目は以下の通り。
| 記載項目 | 内容 |
|---|---|
| 画面概要 | 画面のざっくりした機能概要や利用ユーザを記載 |
| 画面レイアウト | 見た目となるサンプル。できれば何かしら入力されたものを用意 |
| 一覧表示 | 検索画面などで一覧表示画面はここに表示内容を記載 |
| 画面項目定義 | 画面の入出力項目を記載。取得元のテーブル・カラム名も |
| 入出力一覧 | 当画面で扱うテーブルやファイルの一覧 |
| 画面イベント一覧 | イベントの発生タイミングや概要 |
| 画面イベント詳細 | 各イベントの詳細な仕様 |
画面概要
細かい画面の仕様の説明資料に入る前に、この画面がどういった機能を持つ画面なのかが、ざっくり・簡単に分かるような記載があると、はじめて設計書を見る人でも分かりやすくなります。
このサンプルはプロジェクトの照会機能（検索→詳細画面表示）なので、こういった説明がなくても理解はできますが、複雑な画面になればなるほど「この画面機能を一言で言うと？」という説明が重要になってきます。
画面レイアウト
画面モックを作成していた場合はそれがそのままレイアウトに使えます。
プロジェクトによってはExcelで整理する場合もあると思いますが、その場合でもレイアウトが固まった後は具体的なWeb画面上で見た目を張り付けておくようにします。
なお、ヘッダー部分や、左側のメニューは画面共通レイアウトして用意されると思いますが、個別画面の資料でもイメージしやすいように張り付けておきます。
一覧表示
画面で何かしら一覧表示をする機能をぱっと見で分かるように記載します。
画面項目定義
画面で入力あるいは出力を行う項目の詳細を記載します。
入出力一覧
画面で入力あるいは出力を行うテーブルやファイルを記載します。
画面イベント一覧
画面上で発生するイベントについて、発生タイミングやイベントの内容、画面遷移先やサーバ通信有無を記載します。
画面イベント詳細
前述の画面イベントについて、入力チェック（バリデーション）や、テーブル操作、画面表示などの詳細な処理を記載します。
各種資料へのリンク
今回紹介した資料のリンク一式を以下に記載します。
実際に資料を見てみるとイメージしやすいと思います。
おわりに
今回も大手SIerのTIS社のテックブログから役立ちそうなドキュメントを紹介しました。
またいろいろ漁ってみて良さげなドキュメントがあったら共有したいと思います。
関連記事
TISの単体テスト仕様書テンプレ＆サンプルが役立ちそうなので共有しておく
TISのテスト種別＆テスト観点カタログが有用すぎるので紹介しておく