画面設計書とは？書くべき項目と作り方のポイント

画面設計書とは

画面設計書とは、システムやアプリの画面ごとに、何をどこに表示し、利用者が何を入力でき、操作するとどうなるかを定めた設計資料です。基本設計（外部設計）の中心となる成果物の一つです。

平易に言えば、「完成した画面の取扱説明書を、作る前に書いたもの」です。見た目のデザインだけでなく、入力欄の桁数や必須かどうか、エラー時のメッセージ、ボタンを押したときの動きまでを含みます。

会社によって画面仕様書、UI設計書、画面定義書などと呼び方が異なりますが、指している内容はほぼ同じです。

画面設計書に書く主な項目

1つの画面について、一般的に次の情報を記載します。

レイアウトは、FigmaなどのデザインツールやExcel、プレゼンテーションソフトで作られることが多く、項目定義は表形式でまとめるのが一般的です。デザインツール上の画面と項目定義を同じ画面IDで結び付けておくと、修正の漏れが減ります。

実務での使い方・具体例

ある会社が、取引先からの見積依頼を受け付ける管理画面を外注するとします。「見積依頼一覧画面」の画面設計書には、たとえば次のような内容が入ります。

• 表示項目：依頼日、取引先名、件名、担当者、ステータス、回答期限
• 並び順：初期表示は回答期限の近い順
• 絞り込み：ステータス、担当者、依頼日の期間
• 操作：行をクリックすると詳細画面へ移動、CSV出力ボタンで表示中の一覧を出力
• 権限：営業担当は自分の担当分のみ表示、管理者は全件表示
• 例外：該当データが0件の場合は「条件に一致する依頼はありません」と表示

この粒度まで書かれていると、発注側は「回答期限を過ぎたものを赤く表示してほしい」「担当者未割り当ての依頼を最初に見たい」といった要望を開発前に出せます。実装後に気づくと修正のコストが上がるため、画面設計書のレビューで現場担当者に「明日の業務でこの画面を使う」つもりで確認してもらうのが効果的です。

作成を進める順番としては、次の流れが手戻りを減らします。

1. 機能一覧と画面一覧で、必要な画面を洗い出す
2. 画面遷移図で、画面同士のつながりを確認する
3. 主要画面のワイヤーフレームを作り、業務担当者と操作の流れを確認する
4. 項目定義、入力チェック、権限を詰める
5. 例外時やエラー時の表示を追加する

レビューの際は、画面ごとに「この画面で利用者が最終的に達成したいことは何か」を一言で書いておくと、項目の要不要を判断しやすくなります。目的に関係しない項目は、表示しない、あるいは詳細画面に回すといった整理ができ、画面がシンプルになります。

よくある誤解と注意点

デザインが決まれば画面設計は終わりだと思う。 見た目が整っていても、入力チェックや権限、0件時の表示が抜けていると、開発者がその場で判断することになり、意図と違う挙動になりやすくなります。

すべての画面を同じ密度で書こうとする。 似た構造の一覧画面や設定画面は、共通ルールを1か所にまとめ、差分だけを書けば十分です。密度は、業務上重要で複雑な画面に集中させます。

発注側がゼロから書かなければならないと思い込む。 画面設計書は通常、開発会社が作成し、発注側はレビューと業務ルールの提供を担います。ただし、発注前に主要画面の手書きスケッチや既存の帳票・Excelのサンプルを渡しておくと、見積もりの精度が上がり、設計の初稿も業務の実態に近づきます。

作ったあと更新されない。 開発中の仕様変更が画面設計書に反映されないと、テストや保守の段階で「どれが正しいのか」分からなくなります。変更の都度、誰がどこを更新するかを決めておきましょう。

関連用語

• 画面遷移図：画面同士のつながりを図示し、画面設計書と対で使う資料
• 基本設計（外部設計）：画面設計書を含む、利用者から見える仕様を決める工程
• 仕様書：システムの仕様を文書化した資料の総称
• レスポンシブデザイン：画面サイズに応じてレイアウトを変える設計手法

機能の洗い出し方は「機能一覧表の作り方」も参考になります。

Otsumuに相談できること

Otsumuは、業務の流れと目的から逆算して必要な画面に絞り込み、ワイヤーフレームを使って早い段階で現場の方に確認していただく進め方を取っています。管理画面のように業務に直結する画面づくりは管理画面開発のページでも紹介しています。

「画面設計書をどこまで作ればよいか分からない」といった段階からでも、30分の無料相談でご相談ください。

執筆：Otsumu株式会社 ／ 編集日 2026.10.01