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

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

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

1．はじめに

　山浦恒央の“くみこみ”な話の連載第170回から、入門者をターゲットとして、「イチから全部作ってみよう」というシリーズを始めました。このシリーズでは、多岐にわたるソフトウェア開発の最初から最後まで、すなわち、要求仕様の定義、設計書の作成、コーディング、デバッグ、テスト、保守までの「開発フェーズ」の全プロセスを具体的に理解、経験することを目的にしています。

　興味がある方は、連載第170回からのバックナンバーをご覧ください。

2．前回の振り返り

※画像はイメージです

　前回から、テーマを設計フェーズに移し、具体的なシステム設計の検討に入っています。設計フェーズの目的は、要求仕様書をより具体化し、「これがあればプログラムが作れる」という状態にすることが目標です。つまり、抽象的な要望から開発者が実際に手を動かせるレベルまで落とし込むことがゴールとなります。

　ECサイトは、画面を中心に動作することから、画面を切り口として話を進めるとよいと考え、トップページの画面設計書の作成まで行いました。

　画面設計書とは、画面ごとの表示レイアウトや画面間の遷移を定義する文書です。画面設計書を作成することで、開発者と発注側が同じ完成イメージを共有でき、細かいすり合わせが行えます。

　今回は、前回に引き続き以下の4つの画面を作成します。

• カート画面
• 顧客情報＆支払情報入力画面
• 購入確認画面
• 購入完了画面

3．続・画面設計書の作成

　画面設計書を下記に示します。

3.1 カート画面

3.1.1 画面情報

• 画面名：カート画面
• 概要：トップページで選択した商品の一覧を表示する。一覧には、商品名、数量、金額を表示する

3.1.2 遷移元／遷移先

• 遷移元：トップページ
• 遷移先：
  • （1）購入ボタンをクリックした場合は、顧客情報&支払情報入力画面へ遷移する
  • （2）戻るボタンをクリックした場合は、トップページへ遷移する

3.1.3 画面レイアウト

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

図1　カート画面［クリックで拡大］

3.1.4 表示項目

　表示項目を表1に示す。

項目名	種別	入力範囲	エラー処理
カート 　商品名 　数量 　金額	表	-	-
購入ボタン	ボタン	-	-
戻るボタン	ボタン	-	-
表1　カート画面の表示項目