この記事では、要件定義・基本設計のアウトプットの一つ「画面定義書」の書き方について解説したい。
画面定義書が何か分からない人でも、この記事を読めば、一通りの作成ができるようになるはずだ。
なお、画面定義書の作成方法を学ぶには、以下のサイトが特におすすめである。本記事でも参考にさせていただている。
- 画面レイアウト-IPA-
目次
1.画面定義書とは何か
まず、始めに「画面定義書」とは何かを解説したい。
「画面定義書」とは、システムにおける画面レイアウトを定義した成果物である。
システムの画面にどのような部品を配置するのか、また、それらはどのような動きをするのかなどを定義する。
「画面定義書」を作成する目的は、システム要求部門とシステム開発者との認識の齟齬を減らすことである。
「要件定義」もしくは「基本設計」フェーズで作成されることが多いように思う。ちなみに、個人的な経験では、「要件定義」フェーズで作成するほうが良いと考える。
やはり、利用部門主体でシステムのUIを設計したほうが、実業務に適した画面設計が出来るからだ。
2.画面定義書の構成要素
画面定義書に含めるべき構成要素は以下の通りである。
● 管理情報
● 書誌情報
● 画面レイアウト情報
それぞれについて、説明したい。
2-1.管理情報
管理情報とは、成果物を管理するための情報である。
具体的には、プロジェクト名、システム名、工程名、ドキュメント名、作成者、作成日付、更新者、更新日付、バージョン情報などを記載する。
管理情報は、特に決まったルールがあるわけではないため、プロジェクトのルールに従えば良い。
2-2.書誌情報
書誌情報とは、該当画面を管理・区別するための情報である。
具体的には、画面ID、画面名、画面の概要などを記載する。
これも決まったルールがあるわけではないが、上記の情報は記載することを推奨する。
該当の画面が何のために存在するのかは、一目で判別できるほうが望ましいからである。
2-3.画面レイアウト情報
画面レイアウト情報は、画面定義書のメインとなる構成要素である。
どのような画面デザインで、また、どのような動きをするかなどを定義する。
では、具体的に、どのような情報が必要なのか。当ブログのTOPページを例に解説したい。
- レイアウト図
- 画面部品の種類
- 画面部品の説明
- 処理内容
- 表示範囲
(1)レイアウト図
対象画面のレイアウト図を表示する。
どの位置にどのような情報、部品を配置するのかを示すのがレイアウト図である。
システムの画面イメージを手書きで作り、それを成果物として落とし込めば良い。
当ブログの例で言うと、部品は以下の6つに分けられる。
- ヘッダー画像
- カテゴリーメニュー
- 広告枠
- おすすめ記事
- 管理人情報
- SNSリンクボタン
これらの部品をどのように配置するべきかを示すのが、「レイアウト図」である。
(2)画面部品の種類
システムで利用する画面部品を定義する。具体的なサンプル部品をいくつか例示する。
(3)画面部品の説明
システムで使われる画面部品を説明する。これらの説明は画面ごとに行う必要はない。画面定義書の共通部分に記載すればよい。
| 画面部品の種類 | 画面部品の説明 |
|---|---|
| テキストボックス | 文字列(漢字、かな、英数字、記号など)入力用の部品 |
| リストボックス | 複数の文字列リストの中から選択肢を選ぶ部品 |
| コンボボックス | 複数の文字列リストの中から選択肢を選ぶか、文字列リストにない場合は文る文字列を入力できる部品 |
| チェックボックス | 文字列をチェックして選択する部品(複数選択可) |
| ラジオボタン | 文字列をチェックして選択する部品(単一選択) |
| ボタン | クリックすることでアクションが発生する部品 |
| ラベル | 文字列で表示される部品 |
| 罫線 | 罫線の部品 |
| 表 | 表組みされている部品 |
| 画像 | 表示用の画像もしくは、押下できる設定の画像 |
(4)処理内容
画面レイアウト内の部品がどのような処理を行うのかを記述する。
下記の例では、処理内容はページの遷移しかないが、複雑な処理を行う場合は、詳細に記述する必要がある。
(5)表示範囲
表示範囲では、表示する桁数、表示エリアの幅の長さなどを定義する。
画面ごとに定義する必要が無ければ、共通項として定義する。
3.画面定義書の書き方のコツ
3-1.共通で定義できるものは出来る限り、共通化する
システムのフロントエンドは、可能な限り共通化するべきである。
画面の部品などを出来る限り、共通化することで、開発負担を削減出来るし、利用ユーザーにとっても操作しやすいものになる。
そのため、画面定義書においても、部品やエリアごとの幅の長さなどは共通項として定義するのが望ましい。
3-2.処理が複雑な場合は補足情報も記載する
単純な処理だけであれば、処理内容を簡単に記載すればよいが、複雑な処理を行いたい場合は、補足情報も記載するべきである。
例えば、システムの操作手順を補足することで、どのような使い方をするのかイメージが湧きやすくなる。
一般的に、システム開発者は業務の詳細までは分かっていないことが多いため、そのような前提知識が無い人でも認識齟齬が生まれないように書くことがポイントである。
4.参考動画
オンライン研修動画サービスの「Udemy」では成果物の作成方法に関する研修動画がいくつかあります。
個人的には下記の『手を動かして学ぶITプロジェクトの資料作成！システム開発のドキュメンテーション技術と成果物テンプレート』講座がおすすめですので、成果物作成に関して、勉強したい方は是非視聴してみてください。
5.【まとめ】画面定義書は、システムのフロントエンドの認識齟齬を無くすために必要
いかがだろうか。
今回は画面定義書の作り方について解説した。
画面定義書は、フロントエンドの認識齟齬を無くすために、作成したい成果物である。
特に、新しく画面を作りこむ場合には、作成は必須となる。
ぜひ、この記事で画面定義書の作成方法を習得いただければ幸いである。
↓↓このブログが少しでもお役に立ったならば、応援クリック頂けると嬉しいです！↓↓