画面設計書・画面仕様書の書き方｜項目一覧と画面遷移図

当サイトの記事は編集部が国土交通省・IPA・デジタル庁などの公的機関の情報、規格や業界団体の公開情報を調べて独自に執筆しています。記事内にIT・Webエンジニアの転職サービスへの案内（広告）を含みます。

画面設計書とは？画面仕様書との違い

画面設計書は、利用者が目にする画面の見た目と動きを、開発する人・テストする人・発注した人が同じように理解するための文書です。

デジタル庁のデジタル・ガバメント推進標準ガイドライン（DS-100）では、「画面、帳票等の利用者にとって直接的に理解することができる基本設計を行った後に、機能を実現するための詳細設計を行う」としています。つまり画面は、基本設計で先に決める物なんですね。

呼び方の違いはどう考える？

『画面設計書と画面仕様書、どっちが正しいの？』と迷う方もいますよね。実は、決まった使い分けはありません。

会社や案件のひな形がある時は、その呼び方に合わせておけば十分です。基本設計書全体の書き方は基本設計書とは？書く項目と書き方（外部設計）で紹介しています。

画面1枚は4点で書けば伝わる

画面設計書でよくあるのが、きれいなレイアウト図だけで終わってしまうパターンです。見た目はそろっても、『この欄は何文字まで？』『空のまま押したら？』と、作る人から質問が山ほど来るんですよね。

そこで編集部では、画面1枚を4点に分けて書く記入表を作ってみました。

レイアウトは手描きでもいい

レイアウトは、最初から作り込まなくて大丈夫です。表計算ソフトのマス目や、作図ツールの四角を並べた簡単な図で十分伝わります。

大事なのは、見た目の美しさより「どこに何があるか」が分かることです。項目に番号を振っておき、項目一覧の番号と対応させると、読む人が迷いません。

画面の種類ごとに重点を変える

4点のうち、どこを厚く書くかは画面の種類で変わります。全部の画面を同じ細かさで書こうとすると、時間がいくらあっても足りませんよね。

例えば一覧画面なら、「該当が0件の時に何と出すか」「並び順は新しい順か」を書いておくだけで、作る人からの質問がぐっと減ります。

設計書の画面一覧と画面遷移図の作り方

『いきなりログイン画面から細かく書き始めたら、途中で画面が足りないことに気づいた』という失敗はよくあります。先に全体を見渡しておくと、こうした抜けが減りますよ。

画面一覧の記入例

画面一覧は、表にするのが一番見やすい形です。ここでは、社内の備品貸出システムを例にした、編集部の架空の記入例を載せますね。

画面遷移図は「矢印の行き先」を全部書く

画面遷移図では、ボタンやリンクごとに行き先の線を引きます。戻るボタン、キャンセル、エラーの時の行き先まで書いておくのがポイントです。

例えば「申し込みの確認」画面なら、確定で完了画面へ、修正で申し込み画面へ戻る、と2本の線が出ますよね。こうした分かれ道を書き漏らすと、作る人が自分で決めることになってしまいます。

要件定義書の「画面」の欄から引き継ぐ

画面一覧の元になるのは、要件定義書です。デジタル庁のDS-100では、要件定義書の機能要件として、機能・画面・帳票・データ・外部インタフェースに関する事項を定めるとしています。

つまり、要件定義の段階で「どんな画面が要るか」はある程度決まっているはずなんです。画面設計書では、それを1枚ずつの具体的な形に落としていきます。

要件定義書に書いていない画面が増えた時は、勝手に足さずに発注側へ確かめておきましょう。

項目一覧と動きの書き方の記入例

ここからは、先ほどの「貸出の申し込み」画面を例に、項目一覧と動きの書き方を見ていきます。どれも編集部の架空の記入例です。

項目一覧の記入例

桁数や文字の種類は、データベースの項目と合わせておく所です。テーブル定義書との合わせ方はテーブル定義書・データベース設計書の書き方を見てみてください。

動きの記入例

エラーの文言まで書いておくと、テスト仕様書を作る人がそのまま確かめる項目にできます。画面の裏で動く処理の細かい決めごとは、機能仕様書とは？書く項目と書き方・サンプルの考え方で書く項目を紹介しています。

画面設計書でよくある相談

よく見かける相談を、内容をまとめた形で紹介します。

相談1：画面設計書と画面遷移図は何が違う？

画面設計書と画面遷移図の違いを知りたい、という相談です。

画面遷移図は、画面どうしのつながりだけを1枚で見せる地図です。画面設計書は、その中の画面1枚ずつの中身を書いた説明書、と考えると分かりやすいですよ。遷移図は画面設計書の一部として最初に綴じておくことが多いです。

相談2：インターフェース設計書には何を書く？

外部設計で、インターフェース設計書に書く内容が分からない、という相談も閲覧数が多く寄せられています。

インターフェースには、人が使う画面のほかに、ほかのシステムとのデータのやり取りも含まれます。画面は画面設計書に書き、システムどうしのやり取りは、受け渡す項目と形式、タイミングを別の文書にまとめるのが一般的です。システムどうしのやり取りの書き方は、API仕様書の書き方も参考になります。

相談3：Excel設計書って何？

『Excelの設計書って、設計図じゃないの？』という素朴な疑問もあります。

日本の開発現場では、画面設計書をExcelのシートで作ることがよくあります。マス目にレイアウトを描き、別のシートに項目一覧を表で書く形です。道具がExcelなだけで、書く中身はこの記事の4点と同じですよ。

画面設計の経験を次の仕事につなげる

画面設計書を書く仕事は、利用者の使い方を想像して、開発する人に正しく伝える仕事です。この力は、要件定義や基本設計を任される職場で評価されやすいものです。

今の職場で設計の範囲を少しずつ広げていくのも、立派な道です。そのうえで、上流工程を担当できる職場を探してみたい方は、求人の仕事内容を比べてみると道が見えてきますよ。

スマホやWebのアプリ全体の仕様のまとめ方は、アプリの仕様書の書き方で紹介しています。

よくある質問

まとめ

あわせて読みたい

仕様書とは？意味と目的、設計書・要件定義書との違い

基本設計書とは？書く項目と書き方（外部設計）

機能仕様書とは？書く項目と書き方・サンプルの考え方