イチから全部作ってみよう（25）脳内シミュレーションを駆使し画面設計書を完成させる：山浦恒央の“くみこみ”な話（194）（2/3 ページ）

ソフトウェア開発の全工程を学ぶ新シリーズ「イチから全部作ってみよう」。第25回は、前回作成したECサイトのトップページに続き、カート画面、顧客情報＆支払情報入力画面、購入確認画面、購入完了画面画面設計書の画面設計書を作成する。

[山浦恒央 人間環境大学 環境情報学科 教授（工学博士），MONOist]

3.2 顧客情報＆支払情報入力画面

3.2.1 画面情報

• 画面名：顧客情報&支払情報入力画面
• 概要：顧客の住所と支払方法を取得する

3.2.2 遷移元／遷移先

• 遷移元：戻るボタンをクリックすると、カート画面へ遷移する
• 遷移先：次へボタンをクリックすると、購入確認画面へ遷移する

3.2.3 画面レイアウト

　画面レイアウトを図2に示す。

図2　顧客情報&支払情報入力画面［クリックで拡大］

3.2.4 表示項目

　表示項目を表2に示す。

項目名	種別	入力範囲	エラー処理
住所フォーム	入力フォーム	入力必須 1〜200文字以内	200文字を超えないように入力を制限する
支払方法	ラジオボタン	選択必須	-
次へボタン	ボタン	-	入力異常がある場合は、この画面を再表示する
戻るボタン	ボタン	-	-
表2　顧客情報&支払情報入力画面の表示項目

3.3 購入確認画面

3.3.1 画面情報

• 画面名：購入確認画面
• 概要：購入する商品と、顧客情報&支払情報を表示する

3.3.2 遷移元／遷移先

• 遷移元：戻るボタンをクリックすると、顧客情報&支払情報入力画面を表示する
• 遷移先：確定ボタンをクリックすると、購入完了画面に遷移する

3.3.3 画面レイアウト

　画面レイアウトを図3に示す。

図3　購入確認画面［クリックで拡大］

3.3.4 表示項目

　表示項目を表3に示す。

項目名	種別	入力範囲	エラー処理
カート	表	-	-
住所	ラベル	-	-
支払方法	ラベル	-	-
確定ボタン	ボタン	-	-
戻るボタン	ボタン	-	-
表3　購入確認画面の表示項目