はじめに

プロジェクトの要件定義〜基本設計にかけて必要となる画面設計書ですが、設計書テンプレがイマイチ定まっていなかったりするプロジェクトもあると思います。

そこで今回は実際のプロジェクトに使える画面設計書のテンプレ＆サンプルを紹介したいと思います。例によって大手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シートを分けて記述しています。

・ログインにおける画面遷移

・ログイン後の画面遷移

先ほどの「機能」と「画面」の関係性も分かるようになっています。
水色で囲まれた部分が「機能」に該当し、白枠部分が「画面」に該当します。

ここからは個別画面の設計書になります。
記載項目は以下の通り。

個別画面設計書
記載項目	内容
画面概要	画面のざっくりした機能概要や利用ユーザを記載
画面レイアウト	見た目となるサンプル。できれば何かしら入力されたものを用意
一覧表示	検索画面などで一覧表示画面はここに表示内容を記載
画面項目定義	画面の入出力項目を記載。取得元のテーブル・カラム名も
入出力一覧	当画面で扱うテーブルやファイルの一覧
画面イベント一覧	イベントの発生タイミングや概要
画面イベント詳細	各イベントの詳細な仕様