イチから全部作ってみよう（24）設計フェーズの入り口「画面設計書」は紙芝居!?：山浦恒央の“くみこみ”な話（193）（3/3 ページ）

ソフトウェア開発の全工程を学ぶ新シリーズ「イチから全部作ってみよう」。第24回からは設計フェーズに入る。基本設計書と詳細設計書の例を示した後、ECサイトを事例にして設計フェーズの入り口に当たる「画面設計書」を作成する手順を紹介する。

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

4．画面設計書の例

　作成する画面ができたので、具体的な画面設計書を作りましょう。画面設計書には、以下の内容を記述します。

• 画面の大まかな処理内容
• 画面の遷移元／遷移先
• 画面レイアウト
• 表示項目

　ここでは、トップページを参考にして記述方法を示します。

4.1 トップページ画面

4.1.1 画面情報

• 画面名：トップページ画面
• 概要：トップページの画面で、ユーザーが商品を閲覧／表示する

4.1.2 遷移元／遷移先

• 遷移元：サイトにアクセスした際にトップページとして表示する
• 遷移先：商品画像をクリックすると、カート画面に遷移する

4.1.3 画面レイアウト

　画面レイアウトを下記に示す（図4）。

図4　ECサイトのトップページの画面レイアウト［クリックで拡大］

4.1.4 表示項目

　表示項目を表3に示す^※1）。

項目名	種別	入力形式・表示	入力範囲	エラー処理
商品画像	画像	クリック	-	-
商品名	テキスト	表示	-	-
商品価格	テキスト	表示	-	-
本数	入力フォーム	数値入力	1〜100	範囲外とならないように入力を制限する
表3　表示項目

※1）一般的なECサイトでは、商品画像をクリックすると、商品詳細画面に遷移すると思います。今回は、簡易的なECサイトを例としたいため、商品画像をクリックすると、いきなりカート画面に遷移することとしました。

5．おわりに

　今回は、設計フェーズの概要と、トップページの画面設計書の作成方法について解説しました。画面設計書は、紙芝居のように処理の流れを可視化する文書です。画面を紙芝居のように説明して、発注側の要求をより引き出せるといいですね。

　画面は、ユーザーの使用しやすさに直結する重要な機能です。おそらく、細かい注文を多く受けることになるでしょうが、フィードバックを取り入れ、ユーザーにとって「手触りがよく、使いやすい」ソフトウェアを目指しましょう。（次回に続く）

山浦先生執筆の書籍が販売中です！

　本連載で取り上げた「ソフトウェア技術者のためのバグ百科事典」を大幅に加筆、修正した山浦恒央先生の書籍「ソフトウェア技術者のためのバグ検出テキスト」が日科技連出版から好評発売中です。連載でも取り上げた、「要求仕様書のバグ」「実装抜けのバグ」「テスト業務のバグ」など、バグを36種類に分類して解説しています。囲碁や将棋であれば、「相掛かり」「矢倉」「四間飛車」「藤井システム」のような戦法を網羅した内容になっています。

　前著「ソフトウェア技術者のためのバグ検出ドリル」（2019年11月刊行）も好評発売中です。実際にバグを含む要求仕様書、設計書、コーディング、デバッグ、保守を具体的に取り上げ、練習問題として31問を出題しました。同書は、囲碁や将棋における「次の一手」的な問題であり、ピンポイントの場面を取り上げ、実践力を鍛えることを目的としています。

画像クリックで出版社のWebサイトへ

　両書とも興味のある方は、Amazon.comや書店でチェックしてください！

【 筆者紹介 】

山浦 恒央（やまうら つねお）

人間環境大学 環境情報学科 教授（工学博士）

1977年、日立ソフトウェアエンジニアリングに入社、2006年より、東海大学情報理工学部ソフトウェア開発工学科助教授、2007年より、同大学大学院組込み技術研究科准教授、2016年より非常勤講師。2025年4月より、人間環境大学環境情報学科教授。

主な著書・訳書は、「Advances in Computers」 （Academic Press社、共著）、「ピープルウエア 第2版」「ソフトウェアテスト技法」「実践的プログラムテスト入門」「デスマーチ 第2版」「ソフトウエア開発プロフェッショナル」（以上、日経BP社、共訳）、「ソフトウエア開発 55の真実と10のウソ」「初めて学ぶソフトウエアメトリクス」（以上、日経BP社、翻訳）。