画面設計とは？Webアプリの画面設計書・画面遷移図の書き方を具体例で解説

登録画面に入力欄とボタンを描いても、それだけでは同じ動きのアプリを作れません。最初に何を表示するのか、何を入力できるのか、エラーのあとにどこへ戻るのか。画面設計では、見た目と一緒に、このような操作の決め事を具体化します。

この記事では「学習記録を登録して、自分の記録を一覧で見るWebアプリ」を例に、画面一覧・画面案・項目の仕様・操作ごとの遷移を作ります。書類の見出しだけでなく、そのまま書き方の見本にできる記入例を示します。

本記事は、Schoo「Java入門 中級」第9回「Webアプリケーション設計演習」を学んだあとに理解を深めるステップアップ学習記事です。受講や配布ファイルを前提とせず、画面設計が初めての方にも読める内容にしています。今回はHTMLやJavaを書く前の設計を扱います。

画面設計とは？配色だけでなく「操作した結果」を決める

作るもの	何を決めるか
画面一覧	必要な画面と、それぞれの役割。
画面案（ワイヤーフレーム）	見出し、表示情報、入力欄、ボタンの配置。細かな装飾より、何が見えて何を操作できるかを優先する。
画面設計書	初期表示、入力条件、メッセージ、操作時の処理と結果。図だけでは伝わらない動作を記録する。
画面遷移図	どの画面から、どの操作・結果で、どの画面へ進むか。

これらを別々のファイルにする必要はありません。小さなアプリなら、1つの文書にまとめても構いません。大切なのは、読み手が操作をたどったとき、実装者によって解釈が分かれないことです。

たとえば「戻る」だけでは、一覧へ戻るのか、入力画面へ戻るのかが不明です。「登録画面へ戻る」「戻ったら入力欄は空」と書けば、表示も動作も具体的になります。

例題：学習記録アプリで決まっていること

• ログイン済みの利用者が、自分の学習記録を登録・閲覧する。
• 学習日・カテゴリ・学習内容・学習時間は必須。メモは任意。
• 学習時間は分単位の整数で1〜480。入力不備があれば保存しない。
• 登録成功時は完了画面、入力不備の場合は入力エラー画面へ進む。
• 入力エラー画面から登録画面へ戻ると、今回は全入力欄を空にする。

この条件は、前回の要件定義とは？Webアプリの具体例で学ぶ、要求の整理と要件の書き方とそろえています。文字数の上限、選択肢、エラー時の入力保持などは、この記事の例で合意した仕様であり、すべてのアプリに共通する決まりではありません。

特に、エラー時に入力を消す方式は再入力の負担があります。今回は前回の要件に合わせますが、実際の案件では、入力画面にエラーを表示して値を残す方式なども比較して決めます。

1．利用者の操作から、必要な画面を洗い出す

まず、「ログインする」「記録を見る」「登録する」という操作を並べます。そのあと、成功しなかった場合に利用者へ何を見せるかも加えます。S-01などはこの記事で画面を識別する番号で、URLやJSPのファイル名ではありません。

画面ID・画面名	役割と主な操作
S-01 ログイン	ログインIDとパスワードを入力し、「ログイン」を選ぶ。
S-02 一覧	自分の記録を見る。「登録画面へ」「ログアウト」を選べる。
S-03 登録	学習記録を入力する。「登録」「一覧へ戻る」を選べる。
S-04 登録完了	保存成功を知らせる。「一覧へ」で登録結果を確認する。
S-05 ログインエラー	認証できなかったことを知らせる。「ログイン画面へ戻る」を選べる。
S-06 入力エラー	入力不備の項目と理由を知らせる。「登録画面へ戻る」を選べる。
S-07 処理エラー	保存処理などに失敗したことを知らせる。成功とは表示せず、「一覧へ」で記録の状態を確認できる。

S-07は、前回の「保存に失敗した場合も成功と表示しない」という条件を具体化するため、この記入例に追加した画面です。ログイン・登録のエラーと障害を同じ意味にしません。また、ログアウトは操作であり、専用画面を増やす必要はありません。ログアウト後はS-01を表示します。

画面数が正解として決まっているわけではありません。エラーを入力画面内に出す方式なら、独立したエラー画面は不要です。機能が1つだから画面も1つ、画面が1つだからServletも1つ、と機械的に対応させないようにします。

2．具体的な入力値を置いて、画面案を描く

登録画面を、空の四角だけで描くと「時間の単位」「長い文字が入るか」「何が任意か」を見落とします。いったん日付・文章・数値を入れた状態で描き、操作する人と確認します。下の番号は設計書と照合するための注釈で、実際の画面に表示する必須要素ではありません。

「30」は初期値ではなく、利用者が入力した例です。図の値がそのまま初期表示になると誤解されないように、入力例と初期値を分けて書くことが重要です。

3．画面設計書に、初期表示と入力条件を書く

最初に画面の基本情報を書き、次に図の番号ごとに仕様を書きます。読み手が対応を見つけやすいように、画面案と表を離しすぎないようにします。

基本情報	S-03の記入例
目的・対応する要件	ログイン中の利用者が学習記録を登録する。前回のR-03（登録）、R-04（入力エラー）、R-05（未ログイン時）に対応。
表示する条件	ログイン済みで、一覧の「登録画面へ」または入力エラーの「登録画面へ戻る」から開く。未ログインならS-01へ案内する。
初期表示	画面タイトルは「学習記録の登録」。入力欄は空、カテゴリは「選択してください」の未選択状態。エラーメッセージは表示しない。
所有者	画面で利用者IDを入力・選択させない。保存対象はログイン中の利用者。
版・変更理由	例：第1版。初回合意。以後、変更日・変更者・理由と、関連する要件IDを記録する。

図の番号・項目	入力・表示の仕様
1 学習日	日付入力。必須、初期値は空。実在する日付で操作日以前。2026-09-28に操作する場合、2026-09-28は可、2026-09-29は不可。
2 カテゴリ	選択式。必須、初期表示は「選択してください」。「Java」「SQL」「その他」から選ぶ。未選択や選択肢にない送信値は不可。
3 学習内容	文字入力。必須、初期値は空。1〜200文字。空文字・空白だけは不可。長文でも欄の外へはみ出さず、入力内容を確認できるようにする。
4 学習時間	数値を入力する欄。必須、初期値は空。単位は分、1〜480の整数。欄の近くに「1〜480の整数」と表示する。0・481・小数・数値でない値は不可。
5 メモ	複数行の文字入力。任意、初期値は空。500文字以内。未入力でも登録可。
6 登録	入力内容をサーバーへ送る。ログイン状態と入力条件を確認してから保存する。結果別の遷移は次の表に記録する。
7 一覧へ戻る	入力内容を保存せずS-02へ戻る。この例では破棄の確認画面は出さない。再びS-03を開くと入力欄は空。

ブラウザ側で入力を制限しても、サーバー側の確認は必要です。画面に「1〜480」と表示しただけでは、範囲外の送信を防げません。設計書には、表示上の案内と、送信後に必ず確認する条件の両方を書きます。

文字数の数え方、操作日の基準となるタイムゾーンなど、結果が変わる細部も実装前にそろえます。ここで挙げた200文字・500文字は例の上限であり、画面担当者が自由に変更してよい値ではありません。

4．ボタンごとに、処理・結果・遷移先を決める

「登録ボタンを押したら完了画面へ」とだけ書くと、入力不備や保存失敗でも完了画面へ進んでしまいます。押した操作と、処理の結果を分けて記録します。

操作・条件	処理結果と画面
登録：ログイン済み・全入力が有効・保存成功	ログイン中の利用者の記録を1件保存し、S-04へ。「学習記録を登録しました。」と表示する。
登録：入力不備	1件も保存せずS-06へ。項目と理由を表示する。
登録：ログインが切れている	保存せずS-01へ案内する。画面を開いたときだけでなく、登録時点でも確認する。
登録：保存処理に失敗	S-04へ進めずS-07へ。SQLや接続情報などの内部情報は表示しない。
一覧へ戻る	登録処理を行わずS-02へ。入力内容は引き継がない。

保存処理中の通信切断などでは、利用者から保存の成否を判断できないこともあります。そのときに「絶対に未保存」と断定して何度も再送させるのは危険です。この例のS-07では結果を確認できなかったことを伝えます。再送・二重登録への対策は、前回の未決事項Q-03として別途決定が必要です。

図解：登録の成功・入力不備・戻る操作をつなぐ

矢印は、値のコピーやプログラムの実行順すべてを表すものではなく、利用者に表示する画面が切り替わる方向を示します。「登録」という同じ操作でも、結果によって進む先は変わります。二つの画面を同時に表示するという意味ではありません。

入力エラーから戻る矢印も重要です。エラー画面へ行く線だけでは、利用者がどう修正して操作を続けるのかが分かりません。この図では項目の一部を省略し、遷移と関係する学習時間を代表として描いています。

5．画面遷移図は「画面・矢印・きっかけ」の順に描く

1. 画面一覧と同じID・画面名で、画面を配置する。
2. 利用者の操作を1つ選び、移動前と移動後を矢印で結ぶ。
3. 矢印に「登録：保存成功」など、操作と分岐条件を書く。
4. 成功経路に加え、失敗・取り消し・戻る・未ログイン時の経路を確認する。

全画面を1枚に押し込んで線が交差するなら、ログイン、登録などのまとまりで図を分けます。その場合も画面IDを共通にし、別の図へ移る先が分かるようにします。

移動前と操作・条件	移動後
S-01：ログイン成功	S-02 一覧
S-01：ログイン失敗	S-05 ログインエラー
S-05：「ログイン画面へ戻る」	S-01。ログインID・パスワードとも空で表示する。
S-02：「登録画面へ」	S-03。全入力欄を空で表示する。
S-02：「ログアウト」	ログイン状態を終了しS-01へ。
S-03：「登録」・保存成功	S-04 登録完了
S-03：「登録」・入力不備	S-06 入力エラー。保存しない。
S-03：「登録」・保存処理失敗	S-07 処理エラー。成功と表示しない。
S-03：「一覧へ戻る」	S-02。保存しない。
S-04：「一覧へ」	S-02。登録後の一覧を取得して表示する。
S-06：「登録画面へ戻る」	S-03。全入力欄を空で表示する。
S-07：「一覧へ」	S-02。記録の状態を確認する。障害が続いて一覧も取得できない場合は、取得できない旨を知らせる。
保護された画面の表示・登録処理：未ログイン	S-01。記録を表示・保存しない。

ここでいう「戻る」はアプリ内のボタンです。ブラウザの戻る操作と同じとは限りません。履歴やキャッシュによって表示が残る可能性もあるため、画面遷移図だけでアクセス制御が完成するわけではありません。

6．一覧0件・長い文字・エラーメッセージも設計する

データが1件入ったきれいな画面だけでは、実装時に決め事が増えます。少なくとも次の状態を、画面案または仕様表で用意します。

画面・状態	記入する表示仕様
S-02：記録あり	ログイン中の利用者名と、その利用者の学習日・カテゴリ・内容・時間・メモを表示。学習日が新しい順、同日なら登録が新しい順。
S-02：0件	「学習記録はまだありません」と表示する。「登録画面へ」は操作できる。取得失敗を0件として表示しない。
S-02：メモが空	メモ欄に「メモはありません」と表示する。
S-02：長い学習内容・メモ	本文を折り返して表示する。狭い画面では項目名と値を縦に並べ、内容を欠けさせない。
S-06：時間が0分	「学習時間は1〜480の整数で入力してください。」と表示する。「登録画面へ戻る」を表示する。
S-06：複数の入力不備	この記入例では、該当する項目と理由を入力欄の順番で一覧表示する。
S-07：登録結果を確認できない	「登録結果を確認できませんでした。一覧で記録を確認してください。」と表示する。技術的な例外情報をそのまま表示しない。

画面を作るときは、項目名を入力欄の外にも表示し、何を入れる欄かが入力後も分かるようにします。エラーは赤色だけで伝えず、どの項目をどう直せばよいかを文章で示します。

スマートフォンでは、ラベルと入力欄を縦に並べる、ボタンが画面外へ出ないようにするなど、狭い幅での配置も決めます。PC用の画面全体を小さく縮めるだけでは、文字や操作部分が小さくなってしまいます。

7．設計書を「操作して」読み、食い違いを見つける

実装前でも、画面案を指しながら「ここに0を入れて登録すると？」とたどれます。答えが仕様表と違えば、コードではなく設計を先に直します。

確認する操作	設計上の期待結果
初めてS-03を開く	図の例示値30が自動入力されるのではなく、時間欄は空。カテゴリは未選択。
他の必須項目を有効にして30分・空のメモで登録	1件保存してS-04へ。「一覧へ」でS-02に登録内容が表示される。
他の項目を有効にして0分で登録	S-06へ。保存されない。戻ったS-03は全入力欄が空。
入力途中に「一覧へ戻る」を選ぶ	保存せずS-02へ。再度S-03を開いても入力は復元されない。
記録がない利用者で一覧を開く	0件の案内と「登録画面へ」を表示する。
登録前にログインが切れる	保存せずS-01へ案内する。入力が正しくても完了画面には進まない。

これらは画面設計の確認例であり、すべてのテストではありません。実装後には、表示だけでなく実際の保存結果、利用者ごとのデータ分離、二重登録、障害時の挙動なども確認します。

画面設計とServlet・JSPの設計は、つなげて考える

画面の動きが整理できたら、Servletがリクエストを受け取り、Modelへ処理を依頼し、結果に応じた画面をJSPで表示する構成へつなげます。ただし画面遷移図に、すべてのクラス・メソッド・SQLを書き込む必要はありません。

画面設計で決めること	後続の実装設計で決めること
登録で何を送り、成功・失敗時に何を表示するか	送信先URL、HTTPメソッド、リクエストパラメータ名、担当Servlet。
一覧に誰のどの情報を、どの順番で表示するか	Model・DAOの呼び出し、取得条件、DTOやリクエスト属性、JSPへの受け渡し。
エラーからどこへ戻り、入力を残すか	画面の表示方法、必要なデータの保持場所、遷移方法。

最初からJSPのファイル名だけを並べるより、利用者が何をする画面かを先に整理すると、処理の役割を考えやすくなります。検討中に実現方法の問題が見つかったら、画面案と要件へ戻って相談します。

確認問題

1. 画面案の学習時間に「30」と書かれています。実装担当者は初期値だと考えました。設計書のどこに何を書けば、入力例と初期値を区別できますか。
2. 「登録ボタンを押すと完了画面へ」とだけ書かれています。ログイン済みの場合について、入力不備と保存成功を区別した2行の遷移仕様を書いてください。
3. S-06の「戻る」の行き先も、戻ったあとの入力欄も決まっていません。この記事の条件に合わせて、ボタン名・遷移先・入力欄の状態を書いてください。
4. 一覧画面の設計に、記録がある場合の表しかありません。記録が0件のときと、DBから一覧を取得できなかったときの表示を、それぞれどう書きますか。
5. エラー後に入力内容を残す仕様へ変更したいと言われました。画面のイラスト以外に、どの設計記録と確認例を直す必要がありますか。

演習後の確認：こちらのページを使って、自分で考えた内容を見直せます。

まとめ

• 画面設計では、見た目と一緒に初期表示・入力条件・操作結果を決める。
• 画面案の番号と設計書の項目をそろえ、例示値と初期値を区別する。
• 画面遷移図の矢印には、操作と分岐条件を書く。戻る経路も省かない。
• 0件・長文・入力不備・未ログイン・障害を、正常表示と混同しない。
• 画面案、要件、仕様表、確認例を同じ条件にそろえる。

関連記事

• 要件定義とは？Webアプリの具体例で学ぶ、要求の整理と要件の書き方
• JavaのWebアプリは何から作る？要件から画面・処理・クラスを考える手順
• JavaのMVCモデルとは？Servlet・Model・JSPに処理を分ける理由