画面設計とは？Webアプリの画面設計書・画面遷移図の書き方を具体例で解説｜確認問題の回答例
画面設計とは？Webアプリの画面設計書・画面遷移図の書き方を具体例で解説の確認問題の回答例です。画面案だけでは決まらない条件を、仕様表と遷移に書き足してみましょう。
問題1：例示値と初期値を分ける
画面案の学習時間に「30」と書かれています。実装担当者は初期値だと考えました。設計書のどこに何を書けば、入力例と初期値を区別できますか。
画面案には「入力済みの例」と付記し、画面設計書の初期表示と項目4の初期値に「学習時間は空」と書きます。「30分」は利用者が入力した例だと明記します。画面案と初期値の表を照合できれば、値を固定表示する誤解を防げます。
問題2：操作と処理結果を分ける
「登録ボタンを押すと完了画面へ」とだけ書かれています。ログイン済みの場合について、入力不備と保存成功を区別した2行の遷移仕様を書いてください。
| 移動前・条件 | 処理と移動後 |
|---|---|
| S-03：登録、全入力が有効で保存成功 | ログイン中の利用者の記録を1件保存し、S-04へ。完了メッセージを表示。 |
| S-03：登録、入力不備 | 保存せずS-06へ。項目と理由を表示。 |
同じ「登録」操作でも結果は分かれます。さらに保存処理に失敗した場合はS-07とし、入力不備とも保存成功とも区別します。
問題3：戻り先と状態を決める
S-06の「戻る」の行き先も、戻ったあとの入力欄も決まっていません。この記事の条件に合わせて、ボタン名・遷移先・入力欄の状態を書いてください。
ボタン名を「登録画面へ戻る」、遷移先を「S-03」、戻った状態を「全入力欄は空、カテゴリは未選択」と書きます。この例では入力を保持しません。保持する方式が常に間違いなのではなく、合意済みの仕様と食い違わないことが重要です。
問題4：0件と取得失敗を混同しない
一覧画面の設計に、記録がある場合の表しかありません。記録が0件のときと、DBから一覧を取得できなかったときの表示を、それぞれどう書きますか。
取得に成功して0件なら「学習記録はまだありません」と表示し、「登録画面へ」を操作できるようにします。一方、取得処理に失敗したなら「一覧を取得できませんでした」など、取得できていない旨を知らせます。件数を確認できないのに0件と表示してはいけません。内部のSQLや接続情報も表示しません。
問題5：関連する記録を一緒に更新する
エラー後に入力内容を残す仕様へ変更したいと言われました。画面のイラスト以外に、どの設計記録と確認例を直す必要がありますか。
まず変更内容を確認して合意します。「入力エラー画面から戻ったときだけ保持し、一覧から新規に開く場合は空」のように、対象経路を区別します。要件の入力保持の条件、S-03の初期表示、S-06からの遷移仕様、画面遷移図の戻り線の注記、版・変更理由を更新します。実装設計では入力値の保持と受け渡し方法も決め直します。
確認例は、0分で入力エラーにしたあと戻ると、学習日・カテゴリ・内容・時間・メモが保持されていること、その場で30分へ修正して登録できること、一覧から新規に登録画面を開くと空であることを分けて書きます。図だけを書き換えて本文や確認例を残すと矛盾します。