画面設計書の作成ポイントとは?よくある課題と解決方法まで解説!

 2021.04.19  株式会社システムインテグレータ

画面設計書とはどのようなものかご存知でしょうか。システム開発をする上で、画面設計書はほぼ間違いなく必要になります。これからシステム開発に関わるという方や、社内の業務効率化のために新しいシステム導入を提案をする方は、必ず画面設計書について理解しておく必要があります。

この記事では、画面設計書について詳しく解説をしていきます。画面設計書の内容や作成するためのポイント、業務効率化の方法についてもご紹介していますので、ぜひ参考にしてください。

画面設計書とは?

Woman engineer working on blueprint in office with colleagues on background

画面設計書とは、いわば画面レイアウトのことで、システム構築においてどんな画面が表示されるのかを設計したものです。システムを運用する際には、それを操作、管理する画面が必要になります。必要な機能や画面を文字だけで表現しても、おそらく読む人によって解釈が異なることは少なくありません。要件を文字でまとめるだけでなく、画面上のどの位置にどのような操作をする部品を配置するのかを決めるために必要なのが画面設計書です。

システムを要求してくる部門やクライアントは、画面上の配置まで細かく指示してくることはありません。。ですが、このような操作がしたいという漠然としたイメージは持っているため、画面設計書を作成し完成後のイメージを共有しておかなくてはいけないのです。
システムを構成するエンジニアが直接システムを運用することはほぼありません。そのため、実際にシステムを運用する人と作る人では感覚が違うことがあります。システム開発者にとっての操作しやすさが現場にとっての操作のしやすさになるとは限らないのです。

完成後にトラブルが起こることは避けたいので、あらかじめ画面レイアウトを構成要素、項目、機能レベルで共有しておくための画面設計書は必要です。

画面設計書の内容

Young design team working at desk in creative office

画面設計書はユーザーにとってより利用しやすいシステムを作るために欠かせないものです。そんな画面設計書ですが、どのような内容を記載すればいいのでしょうか。ここでは画面設計書の内容について詳しく解説をしていきます。

2.1 共通情報

共通情報とは画面設計書を管理するための情報です。誰が、何のために作った、何の画面設計書なのかの情報を指しています。

具体的な内容としては、プロジェクト名、工程名、システム名、ドキュメント名、バージョン情報、作成した日、作成者、更新した日、更新者などが管理情報に該当します。

画面設計書に限らず、設計書は一度作って終わりということはなく、レビューを経て変更したり、その後の追加開発や改修の際にも必要になってきます。共通情報がきちんと記載され、メンテナンスされていないと、どの画面設計書が正しい最新のものかわからなくなってしまいますので、しっかり記載する必要があります。

2.2 書誌情報

書誌情報とは、該当画面を管理し、区別するための情報です。基本的にシステムにおける画面は複数用意されます。画面ごとに画面設計書を作成するため、どの画面設計書がどの画面のものかがわからなくなってしまうのです。

そのようなトラブルを避けるために、書誌情報を記載します。画面IDや画面名、画面の概要などを記載し、誰が見てもどの画面設計書がどの画面に対応しているかがわかるようにしておかなくてはいけません。

2.3 画面レイアウトの構成要素

画面レイアウトの構成要素とは、実際の画面レイアウトとして記載する要素のことです。

どのような画面デザインで、どのような動きをするのかを具体的に記載します。システムを作成するうえで必要な情報としては、レイアウト図、識別ID、ラベル、画面部品の種類、表示範囲、画面部品の説明、処理内容、表示範囲、操作手順などです。

これらが記載してあれば、システムの画面をおおよそ作成することが可能になります。設計上この画面設計書通りに作ることができないという可能性もあるので、開発部と相談しながら作成するとよいでしょう。

また、修正が起こる場合もあるので、なるべく早めに作成しておくことがプロジェクト全体を遅らせないために必要です。

2.4 画面部品の種類

IPA(独立行政法人 情報処理推進機構)の資料では、以下のように定義されいます。

・テキストボックス
文字列(漢字、かな、英数字、記号など)入力用の部品

・リストボックス
幾つかの文字列リストの中から選択肢を選ぶ部品

・コンボボックス
幾つかの文字列リストの中から選択肢を選ぶか、文字列リストになり場合には文字列を入力出来る部品

・チェックボックス
文字列をチェックして選択する部品(複数選択可)

・ラジオボタン
文字列をチェックして選択する部品(単一選択)

・ボタン
クリックすることでアクションが発生する部品
-登録ボタン、キャンセルボタン、戻るボタンなど

・ラベル
文字列で表示される部品
-画面タイトル、入力項目名称など

・罫線
罫線の部品

・表
表組みされている部品

・画像
表示用の画像、または押下できる設定の画像

これらの部品も画面設計書を構成する大事な要素の一つです。

「入力項目」ひとつとっても、それがテキストボックスなのか、チェックボックスなのかでは大きな違いがあります。項目を記載する際は必ずその部品の種類を明確にしておきましょう。


新規CTA
新規CTA

画面設計書の作成ポイント

how-to-create-design-documents

ここでは、システムとして操作しやすい画面レイアウトを作成するためのポイントについてご紹介していきます。

3.1 共通ルールとその対応について明記する

画面設計を行う際には、画面レイアウトと画面遷移をなるべく共通化し、共通ルールをドキュメントにまとめて記述しておくことが必要です。画面レイアウトと画面遷移を共通化することで、個別の工程成果物の記述量を減らせるのでレビューを大幅に効率化できるほか、設計の品質や生産性が上がります。

3.2 入力項目を補足資料で説明する

画面の入力項目や出力情報は、ユーザビリティ(UX、操作性・利便性)に大きく影響します。しかし、これも「画面レイアウト」だけでは伝わらないため、入力項目や出力情報についての補足資料を作成しておくべきです。また、工程成果物の一つである「入出力項目」を作成する際のチェックにも使用することができます。

補足資料には、ユーザーが入力するのはどの項目か、入力の際に注意すべきこと、データベースから出力される情報がどこに表示されるのかといったことを、画面レイアウトと対応付けて詳しく記述します。分かりやすい画面レイアウトと対応付けることで、開発者も説明しやすくなりますし、クライアント側もイメージしやすくなります。

3.3 ボタンの形状、文字列のタイプ

すべての画面部品を長方形などで表すと、ボタンとテキストボックスとの区別が付かなくなる場合があります。これでは、クライアントは、画面部品の種類を即座に把握することができません。このため、ボタンについては、ほかの画面部品には似ていない、実際の仕上がりイメージに近い大きさや形状で表現する必要があります。

また、画面に表示される文字列には様々なタイプがあります。

しかし、こうした文字列のタイプは「画面レイアウト」を見ただけでは分かりません。このため、文字列のタイプが明確に分かるような補足資料を、別途作成する必要があります。

認識違いを避けるためにも、文字列のタイプについては、補足資料を使って詳しく説明し、クライアントにきちんと確認する必要があります。

こちらのポイントは、経験豊富な開発担当者にとってはごく基本的なことかもしれませんが、ついつい忘れがちなポイントです。すべての画面に対して適用する必要はありませんが、クライアントに対して注意を促す必要のある画面などに、ぜひ適用してみてください。

画面設計書でよくある課題

frustrated with problems young business man working on laptop computer at home

ここでは、画面設計書でよくある課題について詳しく解説をしていきます。あくまでも一例ではありますが、非常によくあるケースなのでぜひ参考にしてください。

4.1 フォーマットが統一されていない

画面設計書にはフォーマットがあります。いわば先ほどご紹介した表記ルールと同様に、画面設計書を記載する際のルールのことです。社内で制作するシステムは、同じルールに則っていることが望ましいです。

電化製品や機械などの取扱説明書をメーカーごとに比べてみると、同じメーカーは同じような取扱説明書の書き方をしています。これはメーカー側が同じフォーマットで取扱説明書を作成しているからです。

社内でルールを設けたとしても、個人個人が画面設計書を作成するとなると完全なフォーマットの一致が難しくなります。どうしても人による画面設計書の書き方の癖が生じるからです。

しかし、社内で取り扱う書類のフォーマットがバラバラというのはあまり望ましくありません。第三者が画面設計書を見たとき、わかりづらいと感じてしまいます。これが画面設計書の抱えている大きな課題の1つです。

4.2 設計書の管理が難しい

個人が画面設計書を作成すると、作成途中の画面設計書は誰も見ることができません。また、何かトラブルがあったときに画面設計書の元データがほしいと思っても、作成した本人でなければ開くことができないといった事態も起こり得ます。

社内の書類ですから、好きなタイミングで社内の人間なら誰でも閲覧できることが望ましいものです。しかし、個人で作成している以上、それは難しいでしょう。また、画面設計書の変更が生じた場合に、変更履歴を確認しづらいというのも大きな課題の1つといえます。

画面設計書の作成・管理なら「SI Object Browser Designer」

obdz
先ほど挙げた課題を解決には「SI Object Browser Designer」がおすすめです。

SI Object Browser Designerでは、設計情報をデータベースで一括管理することが可能です。

設計情報を一括管理しているため、個人個人で画面設計書のフォーマットに差が出る心配がありません。また、専用のフォームで画面設計書を作成できるので、誰でも制作途中の画面設計書にアクセスできるようになります。

設計情報に変更があった場合も、連動して他の設計情報もまとめて変更されるので、修正漏れがありません。

画面レイアウトを作るとコントロール定義表を自動で作成できたり、テーブル列を直すと参照するロジックが同時修正されたりします。このような細かい要素の変化に伴う修正は漏れがちなのですが、ツール上で自動に行うことでそれを防いでいるのです。

SI Object Browser Designerは管理が非常にしやすい点も特長として挙げられます。設計フォーム上で画面設計表を作成することにより、制作途中の画面設計書を管理しやすいのはもちろん、変更履歴に関してもデータベース上で管理されるのです。

そのため、いつ、誰が、何を修正したのかがすぐにわかります。自分が知っているときとは、システムの設計内容に大きな変更がある場合もあります。その場合でも、情報が漏れることなく確実に伝わるのでヒューマンエラーの防止にも効果的です。

人間が行う作業というのは、どうしてもミスが起こりがちになります。自動で行える作業は自動で行なってしまったほうが、ヒューマンエラーの防止にもつながるのでおすすめです。それに役立つのがこのSI Object Browser Designerなのです。

まとめ

Group of joyful excited business people throwing papers and having fun in office

画面設計書について詳しく解説をしてきました。システムにおいて画面という存在は欠かせません。画面上で操作をすることで、システムは稼働します。画面レイアウトによっては、操作ミスが起こりやすくもなりますし、無駄に時間がかかったりもします。

操作のしやすさを判断できるのは、実際にシステムを運用している人たちです。その人たちと意見を共有するために必要なのが画面設計書です。

裏を返すと、画面設計書を作っている段階は、いくらでも後戻りができるということです。実際にシステム開発が進んでしまうと、後戻りも難しくなってきます。しかし、画面設計書を作成している段階では、システム開発は進んでいません。

画面設計書に大きなミスがあったとしても、実際にシステムに取り入れる前であれば、やり直すことが可能です。初めてシステム開発に携わるという方は、まずはこの記事を参考に画面設計書を作成してみましょう。

CTA

RECENT POST「コラム」の最新記事


コラム

【基本設計書の内容】ポイントや効果的な作成方法を解説!

コラム

外部設計書と内部設計書の違いとは?作成ポイントまで解説!

コラム

【画面定義書とは?】内容や作成パターン、ポイントを解説!

コラム

【内部設計について徹底解説!】設計要素やポイントは?

画面設計書の作成ポイントとは?よくある課題と解決方法まで解説!