Comments
Transcript
発注者ビューガイドライン (画面編) - IPA 独立行政法人 情報処理推進機構
発注者ビューガイドライン (画面編) ver. 1.0 ２００８年７月 独立行政法人 情報処理推進機構 ソフトウェア・エンジニアリング・センター Copyright ©2008 IPA 表紙 使用条件 <ガイドラインをご使用になる前にお読みください> 発注者ビューガイドライン（以下、「本ガイドライン」といいます。）を利用することをもって、以下に記載する使用条件（以下、「本使用条件」といいます。）に同意したものとさせていただきます。 本ガイドラインの著作権は、独立行政法人 情報処理推進機構が保有しています。 以下の利用可能な行為を除き、本ガイドラインの一部または全部を著作権法の定める範囲を超え、許可なく改変、公衆送信、販売、出版、翻訳、翻案等をすることは営利、非営利など目的の いかんに関わらず禁じられています。 ＜本ガイドラインの目的＞ 本ガイドラインは、外部設計工程における、発注者にわかりやすい仕様の記述方法及び合意方法を世の中に広く普及することを目的としています。 ＜利用可能な行為＞ 本ガイドラインは、以下の著作権表示を明記した上で、 著作権表示 ： Copyright©2008 IPA 情報システム開発に携わる方が本目的のために ・本ガイドラインの全部または一部を無償で複製すること、 ・本使用条件を配布先に遵守させることを条件に本ガイドラインの複製物を無償で再配布すること、 により利用することができます。 独立行政法人 情報処理推進機構は、本ガイドラインが第三者の著作権、特許権、実用新案権等の知的財産権に抵触しないことを一切保証するものではなく、また、本ガイドラインの内容に 誤りがあった場合でも一切責任を負うものではありません。 独立行政法人 情報処理推進機構は、上記の利用可能な行為を除き、第三者の著作権、特許権、実用新案権等の知的財産権に基づくいかなる権利も許諾するものではありません。 独立行政法人 情報処理推進機構は、本ガイドラインのシステム開発への利用、開発したシステムの使用及びシステムの使用不能により生じるいかなる損害についても、なんら責任を負うも のではありません。 本ガイドラインを海外へ持ち出し、または外国籍の人に提供する場合には、「外国為替及び外国貿易法」の規制及び米国輸出管理規則等外国の輸出関連法規を確認の上、必要な手続きを 行ってください。 本ガイドラインへのお問い合わせについては、独立行政法人 情報処理推進機構 ソフトウェア・エンジニアリング・センターまでご連絡下さい。 ＪａｖａおよびすべてのＪａｖａ関連の商標およびロゴは、米国およびその他の国における米国 Ｓｕｎ Ｍｉｃｒｏｓｙｓｔｅｍｓ，Ｉｎｃ．の商標または登録商標です。 その他、本書に記載されている会社名、製品名などは各社の商標または登録商標です。 なお、本資料では、™ または® の表記は省略しております。 Copyright ©2008 IPA 表紙 - 2 表紙 目次（1/3） 序 第1部 表現 はじめに 第1章 画面一覧 ¾1.1 工程成果物の定義 ¾1.2 工程成果物の構成要素 ¾1.3 表記例（サンプル） ¾1.4 設計書記述のポイント ¾コラム1 第2章 画面遷移 ¾2.1 工程成果物の定義 ¾2.2 工程成果物の構成要素 ¾2.3 表記例（サンプル） ¾2.4 設計書記述のポイント ¾コラム2 第3章 画面レイアウト ¾3.1 工程成果物の定義 ¾3.2 工程成果物の構成要素 ¾3.3 表記例（サンプル） ¾3.4 設計書記述のポイント ¾コラム3 Copyright ©2008 IPA 第1部 - 3 第1部 - 4 第1部 第1部 第1部 第1部 第1部 - 5 6 8 10 32 第1部 - 35 第1部 第1部 第1部 第1部 第1部 - 36 37 39 40 49 第1部 - 54 第1部 第1部 第1部 第1部 第1部 - 55 56 58 59 75 表紙 - 3 表紙 目次（2/3） 第4章 画面遷移･レイアウト共通ルール ¾4.1 工程成果物の定義 ¾4.2 工程成果物の構成要素 ¾4.3 表記例（サンプル） ¾4.4 設計書記述のポイント ¾コラム4 第5章 入出力項目 ¾5.1 工程成果物の定義 ¾5.2 工程成果物の構成要素 ¾5.3 表記例（サンプル） ¾5.4 設計書記述のポイント ¾コラム5 第6章 アクション明細 ¾6.1 工程成果物の定義 ¾6.2 工程成果物の構成要素 ¾6.3 表記例（サンプル） ¾6.4 設計書記述のポイント ¾コラム6 第7章 工程成果物間 ¾7.1 設計書記述のポイント ¾コラム7 Copyright ©2008 IPA 第1部 - 86 第1部 第1部 第1部 第1部 第1部 - 87 91 92 102 125 第1部 - 136 第1部 第1部 第1部 第1部 第1部 - 137 138 140 141 150 第1部 - 165 第1部 第1部 第1部 第1部 第1部 - 166 168 169 170 182 第1部 - 185 第1部 - 186 第1部 - 207 表紙 - 4 表紙 目次（3/3） 第2部 記述確認 はじめに 第1章 網羅性のチェックリスト 第2章 コツのチェックリスト 第2部 - 3 第2部 - 4 第2部 - 9 第3部 レビュー はじめに 第1章 レビューの進め方 ¾1.1 合意の成熟度におけるフェーズの考え方 ¾1.2 個々のフェーズの考え方～仕掛期／充実期／完成期 第2章 設計書レビューの進め方のポイント ¾2.1 設計書レビューの進め方のコツ 第3章 工程成果物に着目したレビューのポイント ¾3.1 画面全体にわたる共通事項をレビューするコツ ¾3.2 画面の一連の動きをレビューするコツ ¾3.3 一つの画面をレビューするコツ 第3部 - 3 第3部 - 4 第3部 - 5 第3部 - 6 第3部 - 9 第3部 - 10 第3部 - 20 第3部 - 21 第3部 - 27 第3部 - 33 あとがき Copyright ©2008 IPA 表紙 - 5 序 序 Copyright ©2008 IPA 序-1 序 序 序では、発注者ビューガイドラインの位置づけや構成について説明します。 i. はじめに (1) 発注者ビューガイドラインとは (2) 発注者ビューガイドラインの利用方法 ii. 発注者ビューガイドライン作成の背景 (1) 情報システム開発における課題 (2) 課題へのアプローチ (3) 発注者ビューの位置づけ iii. 発注者ビューガイドラインの対象範囲 (1) 対象工程 (2) 想定するシステムとガイドラインとの対応 iv. 発注者ビューガイドラインの前提 (1) 工程成果物 (2) 設計書 v. 発注者ビューガイドライン（画面編）の構成 (1) 画面編における工程成果物の定義 (2) 各部の構成 (3) 発注者ビューガイドライン（画面編）の記述範囲外の事項 Copyright ©2008 IPA 序-2 序 i. はじめに (1) 発注者ビューガイドラインとは 発注者ビューガイドラインは、「画面編」「システム振舞い編」「データモデル編」の3編により構成されます。 本ガイドラインは、発注者ビューガイドライン（画面編）です。 発注者ビューガイドラインは、発注者と設計者との認識の齟齬や、互いの意図とは異なる理解をしたことに気づかないま ま開発が進んでしまう状態を防止することを目的として、発注者視点での設計書等ドキュメントの記述やレビューに関す る「コツ」を集約・整理したものです。なお、「コツ」は、次の2つの観点に絞り、開発現場の設計事例から抽出しました。 ¾誤った理解を防ぐ，あるいは見つけ出すためのポイント ¾誤った理解に誘導したり，誤りの発見を困難にするポイント 発注者ビューガイドラインは、以下に示す情報システム開発に携わる関係者を対象として書かれています。 ¾情報システム開発を請け負う側である、ＳＩベンダの従事者 ¾情報システム開発を発注する側である、ユーザ企業の情報システム部門、および業務部門の各ユーザ (2) 発注者ビューガイドラインの利用方法 発注者ビューガイドラインは、以下の利用方法が考えられます。 ① 各社の開発標準に沿った設計業務を補足するコツ集として 設計に関するドキュメントを介して、ＳＩベンダの開発担当者間、あるいは開発担当者とユーザ企業情報システム部門ユーザとの間のスムー ズな意思疎通をはかるために利用する ② 各社の教育コンテンツとしての活用に向けた素材集として ＳＩベンダやユーザ企業の情報システム部門を中心に、各社の教育コンテンツとしての活用に向けた素材集として利用する ③ レビューに臨む際の心得として 情報システム開発のステークホルダ間のコミュニケーションを円滑にするために、レビューのコツを利用する Copyright ©2008 IPA 序-3 序 ii. 発注者ビューガイドライン作成の背景 (1) 情報システム開発における課題 情報システム開発には多様な関係者が絡み合っており、誤解や仕様の抜け・誤りを防止し、開発を円滑に進めるために はこれらの関係者間における十分な意思疎通が不可欠です。設計書には標準的な記述方法も使われますが、これらは 情報システム開発における設計者の視点が主体であるために、発注者との意思疎通は必ずしも円滑であるとはいえず、 プロジェクトごとに不足事項を適宜補完しているのが現状です。 特に、設計者の説明が発注者にうまく伝わらないと、さまざまなトラブルが発生するだけでなく、情報システム開発が 失敗してしまいます。 ？ ご説明 いたします 手戻りの発生 設計書説明の ための多大な 労力 発注者 さまざまな トラブル 設計者 発注者の 不満 特に、設計者の説明が発注者にうまく伝わらないと・・・ Copyright ©2008 IPA 解釈の相違 仕様の抜けや 誤りの発覚 さまざまなトラブルが発生するだけでなく、 情報システム開発が失敗してしまいます。 序-4 序 ii. 発注者ビューガイドライン作成の背景 (2) 課題へのアプローチ 受発注者相互の合意を得るためには、目標とする情報システム像に対する認識を一致させることが必要です。しかし、 立場の違いによって、「見えるもの」「わかるもの」は異なり、設計者の書いた設計書がそのまま「発注者にとって見える もの」であるわけではなく、受発注者間における認識の齟齬が起こりやすいのが現状です。 そこで、発注者にとってわかりやすい仕様の記述方法、合意方法を検討する「実践的アプローチに基づく要求仕様の 発注者ビュー検討会」を発足させ、活動を開始しました。この検討会では、設計者の視点で書いた設計書を、発注者に とって「見えるもの」「わかるもの」とするために、情報システム開発の各現場で行われている設計書の記述やレビュー の 工夫点を集約・整理しました。 目標とする 情報システム像 発注者の視点で見る 発注者の視点で “見える”・“わかる” もの 設計者の視点で書く 認識の一致 専門用語や図が使われた設計書 Copyright ©2008 IPA 序-5 序 ii. 発注者ビューガイドライン作成の背景 (3) 発注者ビューの位置づけ 実践的アプローチに基づく要求仕様の発注者ビュー検討会では、設計者の視点で書いた設計書を発注者にとって「見 えるもの」「わかるもの」にする記述やレビューの方法を「発注者ビュー」と位置づけ、以下のとおり定義しました。 発注者ビューとは、外部設計工程における各種設計書に対する 発注者ビューとは、外部設計工程における各種設計書に対する 発注者の理解容易性に貢献する伝達手段である。 発注者の理解容易性に貢献する伝達手段である。 発注者ビューの目的は次のとおりです。 ¾ 発注者および設計者が「目標とする情報システム像」を共有すること。 ¾ 発注者における「目標とするシステム像」との相違が後工程で発見されることを未然に防ぐために、 発注者 および設計者がシステムの外部設計を理解し、業務要件との不整合を発見し、是正結果を確認することを 促進すること。 Copyright ©2008 IPA 序-6 序 iii. 発注者ビューガイドラインの対象範囲 (1) 対象工程 発注者ビューガイドラインでは、受発注者の接点が大きい外部設計の工程に着目し、これを対象工程としました。 SEC BOOKS 「経営者が参画する要求品質の確保」※1 では、「システム設計」のプロセスにおける、「画面・帳票等の 検討」「設計（外部）」の工程に該当しています。 外部設計工程の設計要素には、業務の処理や流れなどのプロセスや、データ、インターフェース等の機能要件や運 用、操作等に関する非機能要件が挙げられます。本ガイドラインでは、発注者との関わりが大きい設計要素として、 以下の3つの項目に着目しました。 ① 画面 z 画面および操作に関する外部設計要素。 ② システムの振舞い z 業務アプリケーションシステムが利用者または他システムに提供する機能および、それらの間の相互作用に関する 外部設計要素 ③ データモデル z 業務アプリケーションシステムで使用するデータに関する外部設計要素 【情報システム開発のプロセス】 【発注者ビューガイドライン】 システム化の方向性 システム化計画 データモデル データモデル システムの振舞い システムの振舞い 要件定義 外部設計 システム設計 システム開発 内部設計 画面 画面 テスト ※1 「経営者が参画する要求品質の確保～超上流から攻めるＩＴ化の勘どころ～」 独立行政法人 情報処理推進機構 ソフトウェア・エンジニアリング・センター 編 Copyright ©2008 IPA 序-7 序 iii. 発注者ビューガイドラインの対象範囲 (2) 想定するシステムとガイドラインとの対応 発注者ビューガイドラインでは、Ｗebベースのアプリケーションシステムを想定し、「画面」「システムの振舞い」「データモ デル」の3つの項目において設計書や関連する資料の表現や確認方法、レビューの方法を「コツ」として集約しました。 ■システム形態 Ｗｅｂベースの アプリケーションシステム 「データモデル」の技術検討 データベース データベース 「画面」の技術検討 「システムの振舞い」の技術検討 Webベースを中心とした サーバアプリケーション Copyright ©2008 IPA 序-8 序 iv. 発注者ビューガイドラインの前提 (1) 工程成果物 発注者ビューガイドラインでは、情報システムの開発工程において作成され、発注者へ納品される成果物のことを 「工程成果物」と称しています。 外部設計工程の「工程成果物」は、現時点では標準とされる工程成果物が存在しません。このため、発注者ビュー ガイドラインでは、 「画面編」「システム振舞い編」「データモデル編」の各編が対象とする工程成果物をそれぞれ定 義しました。また、各工程成果物の構成要素は必要と考えられる記述事項を集約しました。 (2) 設計書 要求仕様に基づき、設計したドキュメントは発注者に対し「設計書」として提示します。設計書は、受発注者間で合意 した方法や様式で作成されるため、設計書の作成単位や構成が、発注者ビューガイドラインで前提としている工程 成果物のそれと一致しないことがあります。 ¾ 例えば、発注者ビューガイドライン（画面編）では、工程成果物として「画面レイアウト」、「入出力項目」、「アクション明細」を定義して いますが、実際のプロジェクトでは、これらを合わせて 1つの「ユーザーインターフェース設計書」として作成する場合があります。 【設計書】 ユーザーインターフェース設計書 ユーザーインターフェース設計書 ユーザーインターフェース設計書 ユーザーインターフェース設計書 発注者 確認 【工程成果物】 画面レイアウト 画面レイアウト 入出力項目 入出力項目 アクション明細 アクション明細 Copyright ©2008 IPA 序-9 序 v. 発注者ビューガイドライン（画面編）の構成 (1) 画面編における工程成果物の定義 画面編では、以下の6種類の工程成果物を定義しました。 画面遷移 表示される画面と、その画面の 順序関係。画面から画面への 遷移を起こすキッカケとなるイ ベント。 条件分岐がある場合は、その 条件と対応する分岐遷移 画面一覧 システムで使用する 画面の一覧 画面遷移・レイア ウト共通ルール アクション明細 画面遷移に 画面レイアウトと画面遷 移に関する共通なルール および諸々の画面（群） が準じる 典型的なレイ アウトや遷移のポリシｰ 伴って起動 させる動作 画面レイアウト 入出力項目 項目・イベント発生オブジェクト名、 それらに対応する画面部品 （ＩＮ・ＯＵＴの区別が必要） およびその配置 Copyright ©2008 IPA 画面に入出力する 項目の入出力の 外部仕様 序 - 10 序 v. 発注者ビューガイドライン（画面編）の構成 (2) 各部の構成 ガイドラインは、「第1部 表現」「第2部 記述確認」「第3部 レビュー」の3部から構成されています。 工程成果物の構成要素の定義や、コツの具体例については、基本的に Java Pet Store の題材を用いて記述して います。 その他、説明の必要に応じて他の題材も適宜追加しています。 「第1部 表現」は、画面に関する設計書や補足資料の記述方法についてのコツをまとめたものです。 第1章から第6章では、 (1) 画面編における工程成果物の定義 で示した工程成果物ごとに章を立てました。 また、 第7章では工程成果物の関連に着目したコツを記述しています。その他の特長は次のとおりです。 ¾第1章～第6章では、工程成果物について必要と考えられる構成要素を定義しました。 ¾各章末には、コツの使い方の応用事例を、その利用状況や効果などの説明とともに示したものをコラムとして載せました。コラムでは、 実際に使用されている設計書に基づいているため、各章で定義した工程成果物の構成要素とは一致しないことがあります。 「第2部 記述確認」は、設計書の記述や表現に注意すべき事項について一覧表の形式でまとめたものです。 「第3部 レビュー」は、発注者と設計者とで実施する画面設計のレビューについてのコツをまとめたものです。 レビューによる合意形成の成熟度の観点から、レビューの時期を「仕掛期」「充実期」「完成期」の3つを想定し、設計 書レビューの進め方のポイントおよび工程成果物に着目したレビューのポイントとなる「コツ」を整理しました。 Copyright ©2008 IPA 序 - 11 序 v. 発注者ビューガイドライン（画面編）の構成 (3) 発注者ビューガイドライン（画面編）の記述範囲外の事項 本ガイドラインで定義されている工程成果物以外で、発注者と受注側企業との間で合意しておくべき内容については、 本ガイドラインでは述べていません。 ¾例：画面の名称や識別子の命名規則、変更履歴の残し方など。 発注者に対して、開発側でまとめた仕様を提示する際の、設計書の作成単位や構成には多様な組み合わせが考え られますが、本ガイドラインではこれら設計書のバリエーションを網羅していません。設計書の単位を工程成果物と 一致させるのか、および、設計書の内容構成については個々のプロジェクトにおける判断が必要です。 Copyright ©2008 IPA 序 - 12 第1部 表現 第1部 表現 Copyright ©2008 IPA 第1部 - 1 第1部 表現 目次 はじめに 第1章 画面一覧 1.1 工程成果物の定義 1.2 工程成果物の構成要素 1.3 表記例（サンプル） 1.4 設計書記述のポイント コラム1 第5章 入出力項目 5.1 工程成果物の定義 5.2 工程成果物の構成要素 5.3 表記例（サンプル） 5.4 設計書記述のポイント コラム5 第2章 画面遷移 2.1 工程成果物の定義 2.2 工程成果物の構成要素 2.3 表記例（サンプル） 2.4 設計書記述のポイント コラム2 第6章 アクション明細 6.1 工程成果物の定義 6.2 工程成果物の構成要素 6.3 表記例（サンプル） 6.4 設計書記述のポイント コラム6 第7章 工程成果物間 7.1 設計書記述のポイント コラム7 第3章 画面レイアウト 3.1 工程成果物の定義 3.2 工程成果物の構成要素 3.3 表記例（サンプル） 3.4 設計書記述のポイント コラム3 第4章 画面遷移･レイアウト共通ルール 4.1 工程成果物の定義 4.2 工程成果物の構成要素 4.3 表記例（サンプル） 4.4 設計書記述のポイント コラム4 Copyright ©2008 IPA 第1部 - 2 第1部 表現 はじめに 「第1部 表現」は、画面に関する設計書や補足資料の記述方法についてのコツをまとめた ものです。 第1章から第6章では、 序章で示した代表的な作成プロセスに沿って章を立てました。 第7章では工程成果物の関連に着目したコツを記述しています。その他、「第1部 表現」の 特長は次のとおりです。 第1章～第6章では、工程成果物について必要と考えられる構成要素を定義しました。 各章末には、コツの使い方の応用事例を、その利用状況や効果などの説明とともに示したものを コラムとして載せました。コラムでは、実際に使用されている設計書に基づいているため、各章で 定義した工程成果物の構成要素とは一致しないことがあります。 Copyright ©2008 IPA 第1部 - 3 第1部 表現 第1章 画面一覧 画面一覧 ここでは「画面一覧」とは何かを定義し、構成要素と表記例について解説する。 発注者とのレビューに備えて「画面一覧」の内容を確認するコツを解説する。 画面の重複や抜けを防止し、システムが備える画面の全体像を把握するための 「画面一覧」の効果的な書き方のコツを解説する。 Copyright ©2008 IPA 第1部 - 4 第1部 表現 1.1 工程成果物の定義 画面一覧 画面一覧は、システムで使用する画面の一覧である。 画面一覧は、画面レイアウトや入出力項目の目次の役割を持ち、 画面全体の概要や全体のボリューム感を把握するために作成する。 Copyright ©2008 IPA 第1部 - 5 第1部 表現 1.2 工程成果物の構成要素 画面一覧 画面一覧の構成要素 分類 共通情報 書誌情報 画面一覧 の構成要素 Copyright ©2008 IPA 項 番 記述内容 記述内容の説明 - プロジェクト名、システム名、工程名、ドキュメントＩＤ、ドキュメント名、作成者、作成日付、バージョン、更新者、 更新日付 1 画面一覧のID 画面一覧を一意に識別するためのコード。 2 画面一覧の名称 画面一覧の名称。 3 概要 画面一覧の範囲、目的を説明する。 4 No. 画面一覧の項目番号（行番号）。本項目によって 画面数を把握できる。 5 画面名 画面の名称。 6 画面ID 画面を一意に識別するコード。 7 分類 画面の種類。例えば、メニュー、入力フォーム、一覧覧表示等がある。後で画面の共通化 を検討するために分類を記入する。 8 階層 画面をメニュー構造などの階層構造で整理した場合の位置づけ。 9 説明 画面の利用者、利用目的、利用頻度（随時/特定時期）、画面の複雑さ（表示品目数、項目 数等）、特徴等の説明。 10 機能名 関連する機能の名称。 11 機能ID 関連する機能を一意に識別するコード。 12 備考 特徴的な動作（スクロール、リセット、入力チェック）等、特記事項。 第1部 - 6 第1部 表現 1.2 工程成果物の構成要素 画面一覧 画面一覧の使い方に応じた画面一覧の構成要素 画面一覧の用途には次のパターンが挙げられる。 画面一覧の用途に応じて、記載する構成要素を定義する。 パターン１： 画面一覧を利用して画面設計を進める使い方 画面一覧の構成要素を全て記載する。 （必要に応じ、利用目的や画面の複雑さなどの項目も含める） パターン２： 画面一覧は設計書の進捗管理表（完了、作成中等） として利用する使い方 No. 画面ID、画面名称のみの記載で良い。 Copyright ©2008 IPA 第1部 - 7 第1部 表現 1.3 表記例（サンプル） 画面一覧 画面一覧の表記例（1/2） 共通情報 プロジェクト名 システム名 工程名 ドキュメントID ドキュメント名 書誌情報 画面一覧のID 画面一覧の名称 概要 No. A社殿向けJava Pet Store開発 作成者 Java Pet Store 画面一覧担当 Java Pet Store 作成日付 2007/2/9 外部設計 バージョン 2 JPS0001 更新者 Java Pet Store 画面一覧担当 Java Pet Store 外部設計書 更新日付 2007/3/2 JPS-UILIST-0001 Java Pet Store 画面一覧 本画面一覧は、Java Pet Storeの外部設計書に含まれる画面レイアウト、入出力項目、アクション明細に記述された画面の一覧を示す。 画面名 画面ID 分類 1 ペットストアポータル画面 S-00-01 メニュー 2 ペット登録画面 S-01-01 入力フォーム 3 販売者登録画面 S-02-01 入力フォーム 4 ペット検索画面 S-03-01 条件入力フォーム 5 ペット検索結果表示画面 6 位置情報表示画面 S-03-02 検索結果一覧表 示フォーム S-04-01 地図表示フォーム 7 ユーザログイン画面 S-05-01 入力フォーム 8 ユーザ登録画面 S-05-02 入力フォーム 9 ユーザ同意書表示画面 S-05-03 情報表示フォーム 10 プライバシーポリシー表示画 S-05-04 情報表示フォーム 面 11 ユーザ登録完了画面 S-05-05 完了通知画面 12 カタログ画面 13 ショッピングカート表示画面 S-06-01 画像付情報表示 フォーム S-06-02 情報表示フォーム 14 支払い情報入力画面 S-06-03 入力フォーム 15 注文完了画面 S-06-04 完了通知画面 Copyright ©2008 IPA 表記例は Java Pet Store* を題材としています。 階層1 ペットストア 総合メニュー ペットストア 総合メニュー ペットストア 総合メニュー ペットストア 総合メニュー ペットストア 総合メニュー ペットストア 総合メニュー ペットストア 総合メニュー ペットストア 総合メニュー ペットストア 総合メニュー ペットストア 総合メニュー ペットストア 総合メニュー ペットストア 総合メニュー ペットストア 総合メニュー ペットストア 総合メニュー ペットストア 総合メニュー 階層 説明 階層2 階層3 ユーザ機能ポー ペットストアのポータル。購入、検索、カタロ － タルメニュー グ選択などのメニューを表示する。 ユーザ機能ポー ペット登録 販売者が、販売したいペットの情報（カテゴ タルメニュー リ、名前、特徴、価格、画像、タグ）を登録す る。 ユーザ機能ポー ペット登録 販売者の情報（氏名、住所等）を登録する。 タルメニュー ユーザ機能ポー ペット検索 ペットを検索するための条件を入力する。 タルメニュー ユーザ機能ポー ペット検索 ペットの検索結果を一覧表示する。 タルメニュー ユーザ機能ポー 位置検索 地図上に、選択した位置（所望のペットの居 タルメニュー （地図） 場所）を表示する。 ユーザ機能ポー ユーザ登録 ペットの売買に参加するためにシステムにロ タルメニュー グインする。 ユーザ機能ポー ユーザ登録 ペットの売買に参加するためにユーザ登録 タルメニュー を行う。 ユーザ機能ポー ユーザ登録 ユーザ登録を完了させるために、同意書を タルメニュー 表示し、同意の意志を確認する。 ユーザ機能ポー ユーザ登録 ユーザ登録を完了させるために、プライバ シーポリシーを表示し、同意の意志を確認 タルメニュー ユーザ機能ポー ユーザ登録 ユーザ登録が完了したことを通知する画 面。 タルメニュー ユーザ機能ポー カタログ 購入者が、ペットのカタログを表示する画 タルメニュー 面。 ユーザ機能ポー ペット購入 購入者が、所望のペットを選択し、ショッピン タルメニュー グカートの内容を表示する画面。 ユーザ機能ポー ペット購入 購入者が、支払いの情報を入力するための タルメニュー 画面。 ユーザ機能ポー ペット購入 ペットの購入の注文が完了したことを通知す タルメニュー る画面。 機能名 機能ID 備考 メニュー F001 ペット登録 Ｆ101 登録時に入力必須情報を チェックする。 販売者登録 F201 登録時に入力必須情報を チェックする。 ペット検索 F301 ペット検索 F301 位置検索 F401 ユーザ登録 F501 ユーザ登録 F501 ユーザ登録 F501 ユーザ登録 F501 ユーザ登録 F501 ペット購入 F601 ペット購入 F601 ペット購入 F601 ペット購入 F601 - パスワードエラーの場合の 再入力は3回までとする。 登録時に入力情報をチェッ クする。 登録時に入力情報をチェッ クする。 - 第1部 - 8 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 1.3 表記例（サンプル） 画面一覧 表記例は Java Pet Store* を題材としています。 画面一覧の表記例（2/2） 共通情報 プロジェクト名 システム名 工程名 ドキュメントID ドキュメント名 書誌情報 画面一覧のID 画面一覧の名称 概要 No. 画面名 A社殿向けJava Pet Store開発 作成者 Java Pet Store 画面一覧担当 Java Pet Store 作成日付 2007/2/9 外部設計 バージョン 2 JPS0001 更新者 Java Pet Store 画面一覧担当 Java Pet Store 外部設計書 更新日付 2007/3/2 JPS-UILIST-0001 Java Pet Store 画面一覧 本画面一覧は、Java Pet Storeの外部設計書に含まれる画面レイアウト、入出力項目、アクション明細に記述された画面の一覧を示す。 画面ID 説明 分類 1 基本情報 2 検索 3 検索結果 4 詳細情報 C-00-01 C-01-01 C-01-02 C-01-03 標準画面（上位） 標準画面（上位） 標準画面（下位） 標準画面（下位） 5 ペットストアポータル画面 S-00-01 通常画面 6 ペット登録画面 S-01-01 通常画面 7 販売者登録画面 S-02-01 通常画面 8 ペット検索画面 9 ペット検索結果表示画面 10 位置情報表示画面 S-03-01 S-03-02 S-04-01 通常画面 通常画面 ポップアップ 11 ユーザログイン画面 S-05-01 通常画面 全ての画面に共通した画面。 検索条件を入力するための共通画面。 検索結果を一覧表示するための共通画面。 検索結果の詳細情報を表示するための共 通画面。 ペットストアのポータル。購入、検索、カタロ グ選択などのメニューを表示する。 販売者が、販売したいペットの情報（カテゴ リ、名前、特徴、価格、画像、タグ）を登録す る。 販売者の情報（氏名、住所等）を登録する。 ペットを検索するための条件を入力する。 ペットの検索結果を一覧表示する。 地図上に、選択した位置（所望のペットの居 場所）を表示する。 ペットの売買に参加するためにシステムにロ グインする。 実際に動く画面プログラムを先に作成する場合、 分類として画面の表示形態を記述しておくと、 画面構成について理解がしやすい。 Copyright ©2008 IPA 機能名 機能ID 備考 共通 共通 共通 共通 F000 F000 F000 F000 メニュー F001 ペット登録 Ｆ101 登録時に入力必須情報を チェックする。 販売者登録 F201 登録時に入力必須情報を チェックする。 - ペット検索 ペット検索 位置検索 F301 F301 F401 ユーザ登録 F501 - パスワードエラーの場合の 再入力は3回までとする。 画面の分類は複数の観点で記述できるので、 それらを画面一覧表に併記する場合もある。 上記では、表示形態からの観点を記述した。 前ページの「画面一覧の表記例（1/2）」では、 画面の役割からの観点を記述した。 第1部 - 9 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 1.4 設計書記述のポイント 画面一覧 この節では、画面一覧固有の設計記述やその確認ポイントを記述する。 1.4.1 1.4.2 Copyright ©2008 IPA 書き方のコツ 確認のコツ 第1部 - 10 第1部 表現 1.4.1 書き方のコツ 画面一覧 画面一覧の書き方のコツは次のとおり。 ＩＤ 内容 FD1001 システム全体で必要とする画面の全体図が作成されている。 システム全体としての画面の抜け漏れや重複 を確認でき、作業の優先度も確認できる。システムの全体像に関する合意を得やすくする。 FD1002 画面一覧に記述する分類には、あらかじめ定義された分類を使用する。また、未定義の分類については、新 たな分類として定義した上で使用することにより、未定義の分類の使用による混乱を避けることができる。 FD1003 適切な量（機能別、分類別等）に分類され、理解しやすい順序 で記述されていると、画面の重複と抜け漏れ の排除が容易になる。 FD1004 あらかじめ管理方法を定めた項目番号を記述することによって、 画面の重複や抜け漏れの確認が容易にな り、画面一覧の完成度を向上させる。 FD1005 画面一覧に記述する各画面の仕様の概要に加えて、当該仕様が導かれた要件及びその理由を補足資料と して作成しておくと、仕様漏れの防止に有効である。 FD1006 画面の利用者や利用目的等の画面の特徴を捉えた説明を画面一覧の補足資料として記述する。これにより、 レビュー時の確認内容がより具体的になり、画面仕様の品質が妥当なレベルへ到達することを促進する。ま た、発注者が仕様を理解しやすくなる。 Copyright ©2008 IPA 第1部 - 11 第1部 表現 1.4.1 書き方のコツ 画面一覧 書き方のコツの補足(1/2) 全体像を描いてみよう FD1001：システム全体で必要とする画面の全体図が作成されている。 システム全体としての画面の抜け漏れや重複を確認でき、作業の 優先度も確認できる。システムの全体像に関する合意を得やすくする。 画面の分類を決めよう FD1002：画面一覧に記述する分類には、あらかじめ定義された分類を使用する。 また、未定義の分類については、新たな分類として定義した上で 使用することにより、未定義の分類の使用による混乱を避けることが できる。 分類して記述しよう FD1003：適切な量（機能別、分類別等）に分類され、理解しやすい順序 で記述されていると、画面の重複と抜け漏れの排除が容易になる。 Copyright ©2008 IPA 第1部 - 12 第1部 表現 1.4.1 書き方のコツ 画面一覧 書き方のコツの補足(2/2) 項目番号（No.）を記述しよう FD1004：あらかじめ管理方法を定めた項目番号を記述することによって、 画面の重複や抜け漏れの確認が容易になり、 画面一覧の完成度を向上させる。 理由や目的を補足しよう FD1005：画面一覧に記述する各画面の仕様の概要に加えて、 当該仕様が導かれた要件及びその理由を補足資料として 作成しておくと、仕様漏れの防止に有効である。 FD1006：画面の利用者や利用目的等の画面の特徴を捉えた説明を 画面一覧の補足資料として記述する。 これにより、レビュー時の確認内容がより具体的になり、画面仕様の 品質が妥当なレベルへ到達することを促進する。 また、発注者が仕様を理解しやすくなる。 Copyright ©2008 IPA 第1部 - 13 第1部 表現 1.4.1 書き方のコツ 画面一覧 表記例は Java Pet Store* を題材としています。 全体像を描いてみよう FD1001：「システム全体で必要とする画面の全体図が作成されている。 システム 全体としての画面の抜け漏れや重複を確認でき、作業の優先度も確認 できる。システムの全体像に関する合意を得やすくする。」 の具体例 ペットストア 総合メニュー 画面の全体像の例 ユーザ機能 ポータルメニュー システム管理 メニュー ユーザ登録 マスタ管理 日次集計 ペット登録 パラメータ 管理 月次集計 総合メニューからの画面の 全体像を示す。 全体は3つのメニューから 構成し、ペットストアポータ ルは、6つの画面群から 構成する。 ビジネス統計 メニュー ペット検索 統計処理 フォーム管理 カタログ 画面遷移図などに詳細化 する前に、システムの 全体像を把握しやすい。 Copyright ©2008 IPA 位置検索 （地図） ペット購入 第1部 - 14 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 1.4.1 書き方のコツ 画面一覧 表記例は Java Pet Store* を題材としています。 画面の分類を決めよう (1/2) FD1002：「画面一覧に記述する分類には、あらかじめ定義された分類を使用する。 また、未定義の分類については、新たな分類として定義した上で使用 することにより、未定義の分類の使用による混乱を避けることができる。」 の具体例 共通ルールにおいて、画面の分類を 画面の分類の例 あらかじめ定義しておく。 共通ルール※1 共通ルールを参照しながら、画面の 「分類」を定義する。 ◎画面の分類 ・メニュー ・入力フォーム ・条件入力フォーム ・検索結果一覧表示フォーム ・・・ No. 画面名 画面ID ※1： 画面遷移・レイアウト共通ルールのこと。 以下、共通ルールと略す。 画面の分類は複数の観点で記述できる ので、それらを画面一覧表に併記する 場合もある。 分類 階層 階層1 階層2 ペットストア ユーザ機能ポー 総合メニュー タルメニュー 階層3 説明 機能名 1 ペットストアポー S-00-01 タル画面 メニュー 2 ペット登録画面 S-01-01 入力フォーム ペットストア ユーザ機能ポー ペット登録 総合メニュー タルメニュー 3 販売者登録画 面 入力フォーム ペットストア ユーザ機能ポー ペット登録 総合メニュー タルメニュー ペットストアのポータル。購 メニュー 入、検索、カタログ選択など のメニューを表示する。 販売者が、販売したいペット ペット登録 の情報（カテゴリ、名前、特 徴、価格、画像、タグ）を登録 する。 販売者の情報（氏名、住所 販売者登録 等）を登録する。 条件入力フォー ム 検索結果一覧表 示フォーム ペットストア 総合メニュー ペットストア 総合メニュー ペットを検索するための条件 ペット検索 を入力する。 ペットの検索結果を一覧表 ペット検索 示する。 S-02-01 4 ペット検索画面 S-03-01 5 ペット検索結果 S-03-02 表示画面 Copyright ©2008 IPA － ユーザ機能ポー ペット検索 タルメニュー ユーザ機能ポー ペット検索 タルメニュー 機能ID 備考 F001 Ｆ101 登録時に入力必 須情報をチェック する。 F201 登録時に入力必 須情報をチェック する。 F301 F301 - 第1部 - 15 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 1.4.1 書き方のコツ 画面の分類を決めよう 画面一覧 表記例は Java Pet Store* を題材としています。 (2/2) FD1002の具体例 共通ルールに画面分類を定義する例 次の状況において①～②の手順で画面を分類する。 《状況》 •画面の分類がいろいろあり、分類ごとに利用者、利用目的、使われ方が違う。 •画面の分類を先に全て定義できないため、後から分類の候補が出てくる。 •共通ルールに対象画面に対する適切な分類がない。 《手順》 ①新たな分類を共通ルールに追加する。 ②更新した共通ルールから分類を選択する。 共通ルールを参照することにより、 「分類」がバラバラになるなどの 混乱を避けることができる。 No. 画面名 画面ID 分類 階層1 6 位置情報表示画面 S-04-01 地図表示フォーム ペットストア 総合メニュー Copyright ©2008 IPA ①新たな分類を 共通ルールに 追加する。 ②更新した共通 ルールから分類 を選択する。 共通ルール ◎画面の分類 ・メニュー ・入力フォーム ・条件入力フォーム ・検索結果一覧表示フォーム ・地図表示フォーム 階層 説明 機能名 階層2 階層3 ユーザ機能ポータ 位置検索（地図） 地図上に、選択した位置（所望 位置検索 ルメニュー のペットの居場所）を表示す る。 機能ID 備考 F401 - 第1部 - 16 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 1.4.1 書き方のコツ 分類して記述しよう 画面一覧 表記例は Java Pet Store* を題材としています。 (1/4) FD1003：「適切な量（機能別、分類別等）に分類され、理解しやすい順序 で記述されていると、画面の重複と抜け漏れの排除が容易になる。」 の具体例 機能の種類単位に画面一覧を分割する例 Java Pet Store システム（ビジネス統計）画面一覧 ※機能は画面設計に入る前に定義されているものとする。 No. 画面名 画面ID 1 ペットストアポー S-00-01 タル画面 2 ペット登録画面 S-01-01 3 販売者登録画 面 S-02-01 分類 メニュー 入力フォーム 階層1 ペットストア 総合メニュー ペットストア 総合メニュー 階層 階層2 階層3 ユーザ機能ポー － タルメニュー ユーザ機能ポー ペット登録 タルメニュー 説明 機能名 F001 ペット検索 ペットを検索するための条件を入力する。 ペット検索 F301 ペット検索 ペットの検索結果を一覧表示する。 ペット検索 F301 ペットストア ユーザ機能ポー ペット登録 総合メニュー タルメニュー 条件入力 フォーム 検索結果一覧 表示フォーム 地図表示 フォーム 入力フォーム ペットストア 総合メニュー ペットストア 総合メニュー ペットストア 総合メニュー ペットストア 総合メニュー 8 ユーザ登録画面 S-05-02 入力フォーム ペットストア ユーザ機能ポー ユーザ登録 ペットの売買に参加するためにユーザ登録を ユーザ登録 総合メニュー タルメニュー 行う。 9 ユーザ同意書表 S-05-03 示画面 10 プライバシーポ S-05-04 リシー表示画面 11 ユーザ登録完了 S-05-05 画面 12 カタログ画面 S-06-01 情報表示 フォーム 情報表示 フォーム 完了通知画面 5 ペット検索結果 S-03-02 表示画面 6 位置情報表示 S-04-01 画面 7 ユーザログイン S-05-01 画面 13 ショッピングカー S-06-02 ト表示画面 14 支払い情報入 S-06-03 力画面 15 注文完了画面 S-06-04 16 管理者ポータル S-20-01 画面 17 マスタ管理画面 S-21-01 18 カテゴリマスタ管 S-21-02 理画面 19 カテゴリ登録画 S-21-03 面 20 カテゴリ登録確 S-21-04 認画面 21 カテゴリ登録完 S-21-05 了画面 22 カテゴリ検索画 S-21-06 面 23 カテゴリ検索結 S-21-07 果表示画面 24 住所マスタ管理 S-22-01 画面 25 支払い種類マス S-23-02 タ管理 ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー 位置検索 地図上に、選択した位置（所望のペットの居 位置検索 （地図） 場所）を表示する。 ユーザ登録 ペットの売買に参加するためにシステムにロ ユーザ登録 グインする。 Ｆ101 F201 F401 F501 F501 ペットストア 総合メニュー ペットストア 総合メニュー ペットストア 総合メニュー 画像付情報表 ペットストア 示フォーム 総合メニュー 情報表示 ペットストア フォーム 総合メニュー 入力フォーム ペットストア 総合メニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ユーザ登録 ユーザ登録を完了させるために、同意書を表 ユーザ登録 示し、同意の意志を確認する。 ユーザ登録 ユーザ登録を完了させるために、プライバ ユーザ登録 シーポリシーを表示し、同意の意志を確認す ユーザ登録 ユーザ登録が完了したことを通知する画面。 ユーザ登録 F501 カタログ 購入者が、ペットのカタログを表示する画面。 ペット購入 F601 ペット購入 購入者が、所望のペットを選択し、ショッピン ペット購入 グカートの内容を表示する画面。 購入者が、支払いの情報を入力するための ペット購入 画面。 F601 完了通知画面 ペットストア 総合メニュー メニュー ペットストア 総合メニュー メニュー ペットストア 総合メニュー メニュー ペットストア 総合メニュー 入力フォーム ペットストア 総合メニュー 確認画面 ペットストア 総合メニュー 完了通知画面 ペットストア 総合メニュー 条件入力 ペットストア フォーム 総合メニュー 検索結果一覧 ペットストア 表示フォーム 総合メニュー メニュー ペットストア 総合メニュー メニュー ペットストア 総合メニュー ユーザ機能ポー タルメニュー システム管理メ ニュー システム管理メ ニュー システム管理メ ニュー システム管理メ ニュー システム管理メ ニュー システム管理メ ニュー システム管理メ ニュー システム管理メ ニュー システム管理メ ニュー システム管理メ ニュー ペット購入 ペット購入 － F501 F501 F601 ペットの購入の注文が完了したことを通知す ペット購入 F601 る画面。 管理者用ポータル画面。 システム管理 F2001 マスタ管理 管理者用マスタ管理ポータル画面。 マスタ管理 F2101 マスタ管理 カテゴリマスタ管理メニュー 画面。 マスタ管理 カテゴリの追加入力を行う画面。 マスタ管理 F2101 マスタ管理 F2101 マスタ管理 追加結果の確認画面。 マスタ管理 F2101 マスタ管理 追加結果の完了通知画面。 マスタ管理 F2101 マスタ管理 カテゴリを検索するための条件入力画面。 マスタ管理 F2101 マスタ管理 カテゴリの検索結果を一覧表示する画面。 マスタ管理 F2101 マスタ管理 住所マスタ管理メニュー。 マスタ管理 F2101 マスタ管理 支払い種類マスタ管理メニュー。 マスタ管理 F2101 一つの一覧表に全ての画面を記載。 画面数が多いと、内容を把握しにくくなる。 Copyright ©2008 IPA 備考 No. - 機能の種類単位に 一覧表を分割して記述する。 入力フォーム 4 ペット検索画面 S-03-01 機能ID ペットストアのポータル。購入、検索、カタロ メニュー グ選択などのメニューを表示する。 販売者が、販売したいペットの情報（カテゴ ペット登録 リ、名前、特徴、価格、画像、タグ）を登録す る。 販売者の情報（氏名、住所等）を登録する。 販売者登録 登録時に入力必 須情報をチェック する。 登録時に入力必 須情報をチェック する。 画面名 画面ID 分類 階層1 階層 階層2 説明 階層3 機能名 機能ID 備考 Java Pet Store システム（システム管理機能）画面一覧 - No. - 画面名 画面ID 分類 階層1 階層 階層2 説明 階層3 機能名 機能ID 備考 パスワードエラー の場合の再入力 は3回までとす 。 る 登録時に入力情 報をチェックす 。 る - Java Pet Store システム（ユーザ機能）画面一覧 No. 画面名 画面ID 分類 階層1 階層 階層2 階層3 説明 機能名 機能ID 備考 登録時に入力情 報をチェックす 。 る - 第1部 - 17 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 1.4.1 書き方のコツ 分類して記述しよう 画面一覧 表記例は Java Pet Store* を題材としています。 (2/4) FD1003の具体例 機能別に画面を定義する例 No. 画面名 画面ID 分類 1 ペットストアポー S-00-01 メニュー タル画面 2 ペット登録画面 S-01-01 入力フォーム 階層 階層1 階層2 ペットストア ユーザ機能ポー 総合メニュー タルメニュー － ペットストア ユーザ機能ポー ペット登録 総合メニュー タルメニュー 3 販売者登録画面 S-02-01 入力フォーム ペットストア 総合メニュー 4 ペット検索画面 S-03-01 条件入力フォーム ペットストア 総合メニュー 5 ペット検索結果表 S-03-02 検索結果一覧表 ペットストア 示画面 示フォーム 総合メニュー 6 位置情報表示画 S-04-01 地図表示フォーム ペットストア 面 総合メニュー 7 ユーザログイン S-05-01 入力フォーム ペットストア 画面 総合メニュー 8 ユーザ登録画面 S-05-02 入力フォーム ペットストア 総合メニュー 9 ユーザ同意書表 S-05-03 情報表示フォーム ペットストア 示画面 総合メニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー 10 プライバシーポリ S-05-04 情報表示フォーム ペットストア ユーザ機能ポー シー表示画面 総合メニュー タルメニュー 11 ユーザ登録完了 S-05-05 完了通知画面 画面 12 カタログ画面 S-06-01 画像付情報表示 フォーム 13 ショッピングカート S-06-02 情報表示フォーム 表示画面 ペットストア 総合メニュー ペットストア 総合メニュー ペットストア 総合メニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー 14 支払い情報入力 S-06-03 入力フォーム 画面 15 注文完了画面 S-06-04 完了通知画面 ペットストア 総合メニュー ペットストア 総合メニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー Copyright ©2008 IPA 階層3 ペット登録 ペット検索 ペット検索 説明 ペットストアのポータル。購入、検 索、カタログ選択などのメニューを表 示する。 販売者が、販売したいペットの情報 （カテゴリ、名前、特徴、価格、画像、 タグ）を登録する。 販売者の情報（氏名、住所等）を登 録する。 ペットを検索するための条件を入力 する。 ペットの検索結果を一覧表示する。 位置検索 地図上に、選択した位置（所望の （地図） ペットの居場所）を表示する。 ユーザ登録 ペットの売買に参加するためにシス テムにログインする。 ユーザ登録 ペットの売買に参加するためにユー ザ登録を行う。 ユーザ登録 ユーザ登録を完了させるために、同 意書を表示し、同意の意志を確認す る。 ユーザ登録 ユーザ登録を完了させるために、プ ライバシーポリシーを表示し、同意 の意志を確認する。 ユーザ登録 ユーザ登録が完了したことを通知す る画面。 カタログ 購入者が、ペットのカタログを表示す る画面。 ペット購入 購入者が、所望のペットを選択し、 ショッピングカートの内容を表示する 画面。 ペット購入 購入者が、支払いの情報を入力す るための画面。 ペット購入 ペットの購入の注文が完了したこと を通知する画面。 機能名 メニュー 機能ID 備考 F001 - ペット登録 Ｆ101 登録時に入力必須情報を チェックする。 販売者登録 F201 登録時に入力必須情報を チェックする。 ペット検索 F301 ペット検索 F301 位置検索 F401 ユーザ登録 F501 ユーザ登録 F501 パスワードエラーの場合の 再入力は3回までとする。 登録時に入力情報をチェッ クする。 ユーザ登録 F501 ユーザ登録 F501 ユーザ登録 F501 ペット購入 F601 ペット購入 F601 ペット購入 F601 ペット購入 F601 機能別に画面を記述する。 機能は、ユーザがシステ ムを利用するシナリオに 登録時に入力情報をチェッ 沿って記述するとわかり クする。 やすい。 - 第1部 - 18 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 1.4.1 書き方のコツ 分類して記述しよう 画面一覧 表記例は Java Pet Store* を題材としています。 (3/4) FD1003の具体例 画面の分類別に並べ替える例 No. 画面名 画面ID 分類 1 ペットストアポー S-00-01 メニュー タル画面 2 ペット登録画面 S-01-01 入力フォーム 階層 階層1 階層2 ペットストア ユーザ機能ポー 総合メニュー タルメニュー ペットストア 総合メニュー 7 ユーザログイン S-05-01 入力フォーム ペットストア 画面 総合メニュー 8 ユーザ登録画面 S-05-02 入力フォーム ペットストア 総合メニュー 14 支払い情報入力 S-06-03 入力フォーム ペットストア 画面 総合メニュー 4 ペット検索画面 S-03-01 条件入力フォーム ペットストア 総合メニュー 5 ペット検索結果表 S-03-02 検索結果一覧表 ペットストア 示画面 示フォーム 総合メニュー 9 ユーザ同意書表 S-05-03 情報表示フォーム ペットストア 示画面 総合メニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー 10 プライバシーポリ S-05-04 情報表示フォーム ペットストア ユーザ機能ポー シー表示画面 総合メニュー タルメニュー 13 ショッピングカート S-06-02 情報表示フォーム ペットストア ユーザ機能ポー 表示画面 総合メニュー タルメニュー S-06-01 画像付情報表示 ペットストア フォーム 総合メニュー 6 位置情報表示画 S-04-01 地図表示フォーム ペットストア 面 総合メニュー 11 ユーザ登録完了 S-05-05 完了通知画面 ペットストア 画面 総合メニュー 15 注文完了画面 S-06-04 完了通知画面 ペットストア 総合メニュー Copyright ©2008 IPA － ペットストア ユーザ機能ポー ペット登録 総合メニュー タルメニュー 3 販売者登録画面 S-02-01 入力フォーム 12 カタログ画面 階層3 ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ペット登録 ユーザ登録 ユーザ登録 ペット購入 ペット検索 ペット検索 説明 ペットストアのポータル。購入、検 索、カタログ選択などのメニューを表 示する。 販売者が、販売したいペットの情報 （カテゴリ、名前、特徴、価格、画像、 タグ）を登録する。 販売者の情報（氏名、住所等）を登 録する。 ペットの売買に参加するためにシス テムにログインする。 ペットの売買に参加するためにユー ザ登録を行う。 購入者が、支払いの情報を入力す るための画面。 ペットを検索するための条件を入力 する。 ペットの検索結果を一覧表示する。 機能名 メニュー 機能ID 備考 F001 - ペット登録 Ｆ101 販売者登録 F201 ユーザ登録 F501 ユーザ登録 F501 ペット購入 F601 ペット検索 F301 ペット検索 F301 登録時に入力必須情報を チェックする。 登録時に入力必須情報を チェックする。 パスワードエラーの場合の 再入力は3回までとする。 登録時に入力情報をチェッ クする。 登録時に入力情報をチェッ クする。 - ユーザ登録 ユーザ登録を完了させるために、同 ユーザ登録 F501 意書を表示し、同意の意志を確認す 画面の分類別に、並べ替えを行った例。 る。 ユーザ登録 ユーザ登録を完了させるために、プ このようにすると、不足している画面を ユーザ登録 F501 ライバシーポリシーを表示し、同意 発見できるようになる。 の意志を確認する。 ペット購入 購入者が、所望のペットを選択し、 例えば、ユーザ登録、ペット購入には、 ペット購入 F601 ショッピングカートの内容を表示する 画面。 完了通知画面が定義されているが、 カタログ 購入者が、ペットのカタログを表示す ペット購入 F601 販売者登録には、完了通知画面が る画面。 位置検索 F401 位置検索 地図上に、選択した位置（所望の 定義されていないので、仕様の抜けの （地図） ペットの居場所）を表示する。 ユーザ登録 ユーザ登録が完了したことを通知す 可能性があることを発見できる。 ユーザ登録 F501 る画面。 ペット購入 ペットの購入の注文が完了したこと ペット購入 F601 を通知する画面。 第1部 - 19 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 1.4.1 書き方のコツ 画面一覧 表記例は Java Pet Store* を題材としています。 分類して記述しよう (4/4) FD1003の具体例 ランダムに記述すると抜け漏れの原因になる例 No. 機能別、分類別の区別を せず画面名の昇順で並べ た例。 この例では、下記の仕様 ミスがある。 ①「住所マスタ管理画面 （No.11)」と「連絡先マスタ 管理画面（No.13）」が重複 している。 ②「支払い種類マスタ管理 画面」を定義していない。 関連機能や分類に 関連機能や分類に限定 して確認できないため、 限定して確認できな 重複や抜けの発見が いため、重複や抜け 困難である。 の発見が困難である。 Copyright ©2008 IPA 画面名 1 位置情報表示画面 説明 地図上に、選択した位置（所望のペットの居場所）を表示す る。 2 カタログ画面 購入者が、ペットのカタログを表示する画面。 3 カテゴリ検索画面 カテゴリを検索するための条件入力画面。 4 カテゴリ検索結果表示画面 カテゴリの検索結果を一覧表示する画面。 5 カテゴリ登録確認画面 追加結果の確認画面。 6 カテゴリ登録画面 カテゴリの追加入力を行う画面。 7 カテゴリ登録完了画面 追加結果の完了通知画面。 8 カテゴリマスタ管理画面 カテゴリマスタ管理メニュー画面。 9 管理者ポータル画面 管理者用ポータル画面。 10 支払い情報入力画面 購入者が、支払いの情報を入力するための画面。 11 住所マスタ管理 住所マスタ管理メニュー。 12 ショッピングカート表示画面 購入者が、所望のペットを選択し、ショッピングカートの内容を 表示する画面。 13 連絡先マスタ管理画面 連絡先マスタ管理メニュー。 14 注文完了画面 ペットの購入の注文が完了したことを通知する画面。 15 販売者登録画面 販売者の情報（氏名、住所等）を登録する。 16 プライバシーポリシー表示画面 ユーザ登録を完了させるために、プライバシーポリシーを表示 し、同意の意志を確認する。 17 ペット検索画面 ペットを検索するための条件を入力する。 18 ペット検索結果表示画面 ペットの検索結果を一覧表示する。 19 ペットストアポータル画面 ペットストアのポータル。購入、検索、カタログ選択などのメ ニューを表示する。 20 ペット登録画面 販売者が、販売したいペットの情報（カテゴリ、名前、特徴、価 格、画像、タグ）を登録する。 21 マスタ管理 管理者用マスタ管理ポータル画面。 22 ユーザ同意書表示画面 ユーザ登録を完了させるために、同意書を表示し、同意の意 志を確認する。 23 ユーザ登録画面 ペットの売買に参加するためにユーザ登録を行う。 24 ユーザ登録完了画面 ユーザ登録が完了したことを通知する画面。 25 ユーザログイン画面 ペットの売買に参加するためにシステムにログインする。 備考 登録時に入力情報をチェックする。 登録時に入力必須情報をチェックする。 登録時に入力必須情報をチェックする。 登録時に入力情報をチェックする。 パスワードエラーの場合の再入力は3回 までとする。 第1部 - 20 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 1.4.1 書き方のコツ 画面一覧 表記例は Java Pet Store* を題材としています。 項目番号（No.）を記述しよう FD1004：「あらかじめ管理方法を定めた項目番号を記述することによって、 画面の重複や抜け漏れの確認が容易になり、画面一覧の完成度を向上させる。」 の具体例 画面への変更、修正が起きた時の 項目番号（No.）の記述方法の例 項目番号の管理方式も決めておくとよい。 ×望ましくない例 ○望ましい例 画面名と機能名を同じ列に記述している。 画面名/機能名 メニュー ペットストアポータル画面 ペット検索 ペット検索画面 ペット検索結果表示画面 ペット購入 カタログ画面 画面ID 分類 S-00-01 メニュー S-03-01 条件入力 フォーム S-03-02 検索結果一覧 表示フォーム S-06-01 画像付情報表 示フォーム ショッピングカート表示画面 S-06-02 情報表示 フォーム 支払い情報入力画面 S-06-03 入力フォーム 注文完了画面 S-06-04 完了通知画面 1行に1画面を記述し、項目番号を連番で管理している。 ・・・ ・・・ ・・・ ・・・ ・・・ 備考 - ・・・ - ・・・ ・・・ - ・・・ - ・・・ ・・・ - 項目番号の管理方式を決めておかないと、 画面と機能が混在し、画面の数が分かり にくいなどの混乱に陥る。 Copyright ©2008 IPA No. 画面名 画面ID 分類 1 ペ ッ ト ス ト ア S-00-01 メニュー ポータル画面 2 ペット検索画面 S-03-01 条件入力 フォーム 3 ペット検索結果 S-03-02 検索結果一覧 表示画面 表示フォーム 4 カタログ画面 S-06-01 画像付情報表 示フォーム S-06-02 情報表示 5 ショッピング フォーム カート表示画 6 支払い情報入 S-06-03 入力フォーム 力画面 7 注文完了画面 S-06-04 完了通知画面 ・・・ ・・・ 機能名 メニュー 機能ID F001 ・・・ ペット検索 F301 ・・・ ペット検索 F301 ・・・ ペット購入 F601 ・・・ ペット購入 F601 ・・・ ペット購入 F601 ・・・ ペット購入 F601 備考 - 項目番号の管理方式を決めておくと、画面の 重複や抜け漏れの確認が容易になり、画面 一覧の完成度を向上させることができる。 第1部 - 21 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 1.4.1 書き方のコツ 画面一覧 表記例は Java Pet Store* を題材としています。 理由や目的を補足しよう FD1005：「画面一覧に記述する各画面の仕様の概要に加えて、当該仕様が導かれた要件 及びその理由を補足資料として作成しておくと、仕様漏れの防止に有効である。」 の具体例 要件と理由の記述例 画面一覧のNo.6「位置情報表示画面」の画面仕様が導かれた要件及びその理由を補足資料に記述した例。 対応する要件（要件定義における要件ID）とその理由を 補足資料として記述することによって、画面の役割や 位置付けを把握できる。 ※画面仕様が導かれた要件や理由に 特別な意図がある場合に実施する。 画面一覧 No. 画面名 画面ID … 説明 … 画面一覧の補足資料 … … … … … 6 位置情報表示画 S-04-01 地図上に、選択した位置（所望の 面 … ペットの居場所）を表示する。 … 【画面】 S-04-01 ： 位置情報表示画面 … 【要件】 RE-001 ： ペットの位置情報（居場所）をビジュアルに表示する。 … … 【理由】 ペット購入希望者への情報提供のため。所望のペットの居場所が受取りに 便利な場所かどうかを、購入の際に考慮できるように、地図情報を提供す る。 … … … … ペットの居場所を把握できる情報を 表示する必要があることがわかり、 路線が記述されていない地図を 表示してしまうなどの、仕様漏れを防ぐ。 … … 【利用者及び利用目的】 (1)ペット購入希望者 ペットの受取り場所を確認する。 受取り場所への経路を確認する。 (2)マーケティング担当者 ペットの受取り場所の分布を調査し、マーケティングの活動に 活用する。 Copyright ©2008 IPA 第1部 - 22 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 1.4.1 書き方のコツ 画面一覧 表記例は Java Pet Store* を題材としています。 理由や目的を補足しよう FD1006：「画面の利用者や利用目的等の画面の特徴を捉えた説明を画面一覧の補足資料として記述する。 これにより、レビュー時の確認内容がより具体的になり、画面仕様の品質が妥当なレベルへ 到達することを促進する。また、発注者が仕様を理解しやすくなる。 」 の具体例 利用者や利用目的を補足する例 No.6「位置情報表示画面」の利用者及び利用目的を補足資料に記述した例。 ※利用者や利用目的に特別な意図がある場合に実施する。 画面一覧の補足資料（前ページの「画面一覧の補足資料」と同じ資料） 画面一覧 No. 利用者や利用目的を補足資料として記述 することによって、画面仕様を理解・確認 しやすくなる。 画面名 画面ID … 説明 … … … … … … 6 位置情報表示画 S-04-01 地図上に、選択した位置（所望の 面 … ペットの居場所）を表示する。 … … … … … … … 本画面は、ペット購入希望者とマーケティング 担当者が利用し、ペットの受取り場所の確認や 分布の調査に用いることを確認できる。 【画面】 S-04-01 ： 位置情報表示画面 【要件】 RE-001 ： ペットの位置情報（居場所）をビジュアルに表示する。 … 【理由】 ペット購入希望者への情報提供のため。所望のペットの居場所が受取りに 便利な場所かどうかを、購入の際に考慮できるように、地図情報を提供す る。 … … 【利用者及び利用目的】 (1)ペット購入希望者 ペットの受取り場所を確認する。 受取り場所への経路を確認する。 (2)マーケティング担当者 ペットの受取り場所の分布を調査し、マーケティングの活動に 活用する。 Copyright ©2008 IPA 第1部 - 23 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 1.4.2 確認のコツ 画面一覧 画面一覧の確認のコツは次のとおり。 ＩＤ 内容 FD1007 あらかじめ定義された機能または分類に抜け漏れがある場合、画面一覧の画面の抜け漏れは、さらに増加 する可能性がある。これを防止するために、設計が進み、機能や画面の分類が定義された段階で、機能や分 類に抜け漏れがないことを確認する。 FD1008 画面一覧に付与したシーケンシャル番号を利用することで、画面の特定や、画面の全体量の把握ができ、レ ビューを効率的に行うことができる。 Copyright ©2008 IPA 第1部 - 24 第1部 表現 1.4.2 確認のコツ 画面一覧 確認のコツの補足 画面の分類や機能を確認しよう FD1007：あらかじめ定義された機能または分類に抜け漏れがある場合、 画面一覧の画面の抜け漏れは、さらに増加する可能性がある。 これを防止するために、設計が進み、機能や画面の分類が 定義された段階で、機能や分類に抜け漏れがないことを確認する。 項目番号を活用しよう FD1008：画面一覧に付与したシーケンシャル番号を利用することで、 画面の特定や、画面の全体量の把握ができ、レビューを効率的に 行うことができる。 Copyright ©2008 IPA 第1部 - 25 第1部 表現 1.4.2 確認のコツ 画面一覧 表記例は Java Pet Store* を題材としています。 画面の分類や機能を確認しよう（1/2） FD1007：「あらかじめ定義された機能または分類に抜け漏れがある場合、画面一覧の画面の抜け漏れは、 さらに増加する可能性がある。これを防止するために、設計が進み、機能や画面の分類が 定義された段階で、機能や分類に抜け漏れがないことを確認する。」 の具体例 画面の分類や機能を確認する例（1/2） 設計が進み、機能や画面の分類が定義された段階で①～②を実施する。 ① 「機能一覧」、共通ルールに定義された「画面の分類」に抜け漏れや重複がないことを確認する。 機能一覧 共通ルール ◎画面の分類 本システムでは、以下の 画面分類を使用する。 ・メニュー ・入力フォーム ・条件入力フォーム ・・・ 抜け漏れや 重複がない ことを確認する。 F001：メニュー F101：ペット登録 F201：販売者登録 F301：ペット検索 ・・・ ② ①の確認後、「画面一覧」の「分類」、「機能名」を記述する。（次のページに続く） Copyright ©2008 IPA 第1部 - 26 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 1.4.2 確認のコツ 画面一覧 表記例は Java Pet Store* を題材としています。 画面の分類や機能を確認しよう（2/2） FD1007の具体例 画面の分類や機能を確認する例（2/2） （前ページからの続き） 前ページで確認した共通ルール、機能一覧 抜け漏れや重複がな いことを確認した後で、 画面一覧を記述する。 共通ルール 機能一覧 ◎画面の分類 本システムでは、以下の 画面分類を使用する。 ・メニュー ・入力フォーム ・条件入力フォーム ・・・ No. 画面名 画面ID 分類 1 ペットストア S-00-01 メニュー ポータル画面 ・・・ ・・・ 2 ペット登録画面 S-01-01 入力フォーム ・・・ 3 販売者登録画 S-02-01 入力フォーム 面 4 ペット検索画面 S-03-01 条件入力フォーム ・・・ Copyright ©2008 IPA ・・・ F001：メニュー F101：ペット登録 F201：販売者登録 F301：ペット検索 ・・・ 説明 ペットストアのポータル。購入、 検索、カタログ選択などのメ ニューを表示する。 販売者が、販売したいペットの 情報（カテゴリ、名前、特徴、価 格、画像、タグ）を登録する。 販売者の情報（氏名、住所等） を登録する。 ペットを検索するための条件を 入力する。 例えば、機能一覧に 抜けがあると、 全ての機能に対して 画面が定義されない 可能性がある。 機能名 メニュー 機能ID F001 備考 - ペット登録 Ｆ101 登録時に入力必須情 報をチェックする。 販売者登録 F201 登録時に入力必須情 報をチェックする。 ペット検索 F301 - 第1部 - 27 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 1.4.2 確認のコツ 画面一覧 項目番号を活用しよう (1/4) 表記例は Java Pet Store* を題材としています。 FD1008：「画面一覧に付与したシーケンシャル番号を利用することで、 画面の特定や、画面の全体量の 把握ができ、レビューを効率的に行うことができる。 」 の具体例 項目番号の記述例 項目番号を付与して画面一覧を記述した例。画面数が多い場合に、画面の特定や画面の全体量の把握に有効である。 No. 画面名 画面ID 分類 1 ペットストアポー S-00-01 メニュー タル画面 階層 階層1 階層2 ペットストア ユーザ機能ポー 総合メニュー タルメニュー 階層3 － 2 ペット登録画面 S-01-01 入力フォーム 説明 機能名 ペットストアのポータル。 メニュー 購入、検索、カタログ選 択などのメニューを表示 する。 ペットストア ユーザ機能ポー ペット登録 販売者が、販売したい ペット登録 総合メニュー タルメニュー ペットの情報（カテゴリ、 名前、特徴、価格、画 像、タグ）を登録する。 ペット登録 販売者の情報（氏名、住 販売者登録 所等）を登録する。 ペット検索 ペットを検索するための ペット検索 条件を入力する。 ペット検索 ペットの検索結果を一覧 ペット検索 表示する。 位置検索 地図上に、選択した位置 位置検索 （地図） （所望のペットの居場所） を表示する。 7 ユーザログイン S-05-01 入力フォーム ペットストア ユーザ機能ポー ユーザ登録 ペットの売買に参加する ユーザ登録 画面 総合メニュー タルメニュー ためにシステムにログイ ンする。 シーケンシャルな番号を利用する 8 ユーザ登録画面 S-05-02 入力フォーム ペットストア ユーザ機能ポー ユーザ登録 ペットの売買に参加する ユーザ登録 ことで、レビュー時に画面の特定や 総合メニュー タルメニュー ためにユーザ登録を行 う。 全体量を把握しやすくなる。 3 販売者登録画面 S-02-01 入力フォーム ペットストア 総合メニュー 4 ペット検索画面 S-03-01 条件入力フォー ペットストア ム 総合メニュー 5 ペット検索結果表 S-03-02 検索結果一覧 ペットストア 示画面 表示フォーム 総合メニュー 6 位置情報表示画 S-04-01 地図表示フォー ペットストア 面 ム 総合メニュー Copyright ©2008 IPA ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー 機能ID 備考 F001 Ｆ101 登録時に入力必 須情報をチェック する。 F201 登録時に入力必 須情報をチェック F301 F301 - F401 F501 F501 パスワードエラー の場合の再入力 は3回までとする。 登録時に入力情 報をチェックする。 第1部 - 28 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 1.4.2 確認のコツ 画面一覧 表記例は Java Pet Store* を題材としています。 項目番号を活用しよう (2/4) FD1008の具体例 項目番号の記述例 「画面ID」を省略して画面一覧を記述した例。 画面名から画面を一意に識別できれば、「画面ID」の構成要素を省略してもよい。 No. 画面名 分類 1 ペットストアポー メニュー タル画面 2 ペット登録画面 入力フォーム 3 販売者登録画面 入力フォーム 階層 階層1 階層2 ペットストア ユーザ機能ポー 総合メニュー タルメニュー 入力フォーム 8 ユーザ登録画面 入力フォーム Copyright ©2008 IPA － 説明 機能名 ペットストアのポータル。 メニュー 購入、検索、カタログ選 択などのメニューを表示 する。 機能ID 備考 F001 - ペットストア ユーザ機能ポー ペット登録 販売者が、販売したい ペット登録 総合メニュー タルメニュー ペットの情報（カテゴリ、 名前、特徴、価格、画 像、タグ）を登録する。 Ｆ101 登録時に入力必 須情報をチェック する。 ペット登録 販売者の情報（氏名、住 販売者登録 所等）を登録する。 ペット検索 ペットを検索するための ペット検索 条件を入力する。 ペット検索 ペットの検索結果を一覧 ペット検索 表示する。 位置検索 地図上に、選択した位置 位置検索 （地図） （所望のペットの居場所） を表示する。 ペットストア ユーザ機能ポー ユーザ登録 ペットの売買に参加する ユーザ登録 総合メニュー タルメニュー ためにシステムにログイ ンする。 ペットストア ユーザ機能ポー ユーザ登録 ペットの売買に参加する ユーザ登録 総合メニュー タルメニュー ためにユーザ登録を行 う。 F201 登録時に入力必 須情報をチェック ペットストア 総合メニュー 4 ペット検索画面 条件入力フォー ペットストア ム 総合メニュー 5 ペット検索結果表 検索結果一覧 ペットストア 示画面 表示フォーム 総合メニュー 6 位置情報表示画 地図表示フォー ペットストア 面 ム 総合メニュー 7 ユーザログイン 画面 階層3 ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー F301 F301 - F401 F501 F501 パスワードエラー の場合の再入力 は3回までとする。 登録時に入力情 報をチェックする。 第1部 - 29 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 1.4.2 確認のコツ 画面一覧 表記例は Java Pet Store* を題材としています。 項目番号を活用しよう (3/4) FD1008の具体例 項目番号により画面数を把握する例 画面数が多いため、画面一覧をサブシステム単位に分割して記述した例 画面一覧 Java Pet Store システム（ビジネス統計）画面一覧 No. 画面名 画面ID 分類 階層1 階層 階層2 説明 階層3 機能名 機能ID サブシステム単位でシーケンシャル 番号を付与した場合の例。 サブシステム単位の画面数の把握 には、画面一覧の「No.」列を用いる。 下記のように補足資料を作成して 確認するとよい。 備考 Java Pet Store システム（システム管理機能）画面一覧 No. 画面名 画面ID 分類 階層1 階層 階層2 階層3 説明 機能名 機能ID 画面一覧の補足資料 備考 サブシステム別画面一覧 Java Pet Store システム（ユーザ機能）画面一覧 No. 画面名 画面ID 分類 階層1 階層 階層2 階層3 説明 機能名 機能ID 備考 ユーザ機能画面一覧 41 システム管理機能画面一覧 32 ビジネス統計画面一覧 25 合計 Copyright ©2008 IPA 画面数 98 第1部 - 30 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 1.4.2 確認のコツ 画面一覧 表記例は Java Pet Store* を題材としています。 項目番号を活用しよう (4/4) FD1008の具体例 項目番号との対応を明確にするためのポイント 項目番号との対応は明確に記述し、項目番号を活用しやすくする。 ×望ましくない例 ○望ましい例 項目番号との対応が分かりやすい 項目番号との対応が分かり難い Java Pet Store システム画面一覧 Java Pet Store システム画面一覧 No. 分類 1 入力フォーム 画面名 ペット登録画面 画面ID S-01-01 2 販売者登録画面 S-02-01 3 ユーザログイン画面 S-05-01 4 メニュー ペットストアポータル S-00-01 画面 管理者ポータル画面 S-20-01 5 … … … … … … … … … … … 「分類」の項目の一部が統合した形で表現されているため、 「No.」と「画面名」との対応がわかりにくい。 Copyright ©2008 IPA No. 分類 1 入力フォーム 画面名 ペット登録画面 画面ID S-01-01 2 入力フォーム 販売者登録画面 S-02-01 3 入力フォーム ユーザログイン画面 S-05-01 4 メニュー ペットストアポータル S-00-01 画面 管理者ポータル画面 S-20-01 5 メニュー … … … … … … … … … … … 「No.」と、「分類」、「画面名」、「画面ID」の 画面一覧の各項目が1対１に対応している。 第1部 - 31 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 コラム1 画面一覧 画面の使われ方のシーンを明確にする Copyright ©2008 IPA 第1部 - 32 第1部 表現 コラム1 画面一覧 画面の使われ方のシーンを明確にする（1/2） 状況 利用者の違いにより、利用のタイミングやアクセス頻度がいろいろある。 関連するコツ FD1006 補足 画面一覧にタイミング、ピーク時件数、想定利用者を記述した。 これらの項目を記述するために、1.2に示す画面一覧の構成要素に対し、 新たに記述項目欄（タイミング、ピーク時件数、想定利用者）を追加した。 ピーク時のアクセス性能などが漏れなく確認できるようになった。 この画面一覧を利用すると、実運用を想定した画面レイアウトのレビューが しやすくなった。 Copyright ©2008 IPA 第1部 - 33 第1部 表現 コラム1 画面一覧 表記例は Java Pet Store* を題材としています。 画面の使われ方のシーンを明確にする（2/2） 具体例 タイミング、ピーク時件数、想定利用者を画面一覧に補足している。 画面の使われ方を明確にするために追加した列 No. 画面名 画面ID 1 ペットストアポー S-00-01 タル画面 2 ペット登録画面 S-01-01 3 販売者登録画面 S-02-01 4 ペット検索画面 S-03-01 説明 随時 ピーク時 想定利用者 件数 5件/分 全ユーザ 随時 3件/分 販売者 随時 随時 3件/分 10件/分 販売者 購入者 タイミング ペットストアのポータル。購入、検索、カタロ グ選択などのメニューを表示する。 販売者が、販売したいペットの情報（カテゴ リ、名前、特徴、価格、画像、タグ）を登録す る。 販売者の情報（氏名、住所等）を登録する。 ペットを検索するための条件を入力する。 タイミング、ピーク時件数、想定利用者を 個別の項目に記述する。 仕様の理解がしやすくなり、利用者を 意識したレビューを行うことができる。 Copyright ©2008 IPA 第1部 - 34 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 第2章 画面遷移 画面遷移 ここでは、「画面遷移」とは何かを定義し、構成要素と表記例について解説する。 発注者とのコミュニケーションを促進するための、「画面遷移」の効果的な書き方 のコツを解説する。 発注者とのレビューに備えて「画面遷移」の内容を確認するコツを解説する。 Copyright ©2008 IPA 第1部 - 35 第1部 表現 2.1 工程成果物の定義 画面遷移 画面遷移では、アプリケーションを実現する画面の流れを表す設計書であり、次 の情報を記述する。 表示される画面と、その画面の順序関係。 画面から画面への遷移を起こすきっかけとなるイベント。 条件分岐がある場合は、その条件と条件に対応する分岐遷移。 Copyright ©2008 IPA 第1部 - 36 第1部 表現 2.2 工程成果物の構成要素 分類 共通情報 書誌情報 画面遷移 の構成要 素 項 番 記述内容 画面遷移 記述内容の説明 凡例 - プロジェクト名、システム名、工程名、ドキュメントＩＤ、ドキュメント名、作成者、作成日付、バージョン、 更新者、更新日付 1 画面遷移ID ひとまとまりの画面遷移図を一意に識別する識別子 2 画面遷移の名称 ひとまとまりの画面遷移図を一意に識別する名称 3 概要 画面遷移図の概要を記述する。 4 画面 遷移元、遷移先の個々の画面を表す。画面レイアウトを一意に識別できる名前を記述す る。画面イメージがある場合には、そのイメージを用いてもよい。 5 遷移矢線 実現される画面の順序関係を矢線で記述する。 6 アクション 画面遷移に伴って起動される動作 7 イベント 画面の遷移を引き起こすきっかけとなるもの。 8 条件分岐/合流 条件により遷移が分岐する場合に記述する。合流は分岐した複数の遷移が単一の遷移 に集約されることを表す。 9 開始点 画面遷移図の開始画面を明示する。 《開始点》 10 終了点 画面遷移図の終了画面を明示する。 《終了点》 11 他画面遷移図へ の接続 画面遷移を複数の図に分割して記述する場合に、他画面遷移図への接続点を明示する。 接続する画面遷移を一意に識別できるように記述する。 Copyright ©2008 IPA アクショ ン名 [イベント名] ID ID 第1部 - 37 第1部 表現 2.2 工程成果物の構成要素 分類 画面遷移の 構成要素 項 番 記述内容 12 下位画面 画面遷移 記述内容の説明 部品化された遷移が存在することを表すための記号。画面記号やイメージに《下位遷移》 を付加する。 13 遷移動作 遷移時に起こる動作の名称を記述する。構成要素６のアクションを示す記号を用いる代わ りにこの記法でアクションを記述してもよい。 14 異常系 例外処理等の正常系処理を実行できない場合の処理方法を記述する。 15 注釈 遷移図だけでは表現できない場合、設計情報として必要なものを記述する。 Copyright ©2008 IPA 凡例 《下位遷移》 /動作名 （遷移矢線に付随する形 式） 《異常系》 注釈 第1部 - 38 第1部 表現 2.3 表記例（サンプル） 画面遷移 表記例は Java Pet Store* を題材としています。 画面遷移定義 プロジェクト名 Ａ社殿向けJava Pet Store開発 ドキュメントＩＤ JPS0001 ドキュメント名 Java Pet Store 外部設計書 バージョン 1 システム名 Java Pet Store 作成者 佐藤一郎 更新者 工程名 外部設計 作成日付 2007/1/12 更新日付 画面遷移ＩＤ 画面遷移の名称 概要 《開始点》 【開始点】 自明の場合は不要 注2：イベントの発生条件が複雑な場合は、イベントの発生条 件とイベント、アクションの対応関係を補足資料に記述する。 スタートアップ画面 【遷移矢線】 （必須） 画面と画面（遷移動作）間の関 連を矢線で示す。遷移矢線は交 錯しないように描画する。 【イベント】 画面遷移を起こすきっかけとなる 事象（できごと）を記述する。 例えば、検索ボタンが押されたと きは“検索”というイベントが発生 する。 内部イベント等の実装よりのイベ ントは記述しない。 終了処理 終了処理 条件入力画面 【条件分岐】 業務要件として表れる用語も用 いて条件を記述する。 Copyright ©2008 IPA ［終了］ ［戻る］ 注1：本ガイドラン中では、必須入力となっているものも、説明上、 必要のないものは省略している。 【画面名】 （必須） 画面レイアウトを特 定する画面名を記 述する。 ［次ﾍﾟｰｼﾞ］ [検索] 検索結果表示画面 名前を検索 後ページ 後ページ 検索処理 検索処理 次を検索 《終了点》 【一覧性】 １０の画面遷移となるようにする。 階層化等を考慮して、構造化を 行う。 【終了点】 自明の場合は不要 【遷移動作】 アクション明細を特定する名前を 記述する。要件確認のために必要 な場合に記述。 実装よりの動作記述は行わない。 第1部 - 39 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 2.4 設計書記述のポイント 画面遷移 この節では、画面遷移固有の設計記述やその確認ポイントを記述する。 2.4.1 2.4.2 Copyright ©2008 IPA 書き方のコツ 確認のコツ 第1部 - 40 第1部 表現 2.4.1 書き方のコツ 画面遷移 画面遷移の書き方のコツは次のとおり。 ＩＤ 内容 FD2001 一覧性があると、全体像を把握するのに役立ち、開発者が説明しやすく、かつユーザにも理 解されやすい。 FD2002 画面名が、業務的に意味のある識別名になっていないと、画面遷移上で実際の画面が想起し にくく確認しずらい。 FD2003 画面遷移の遷移線が錯綜していると、処理の流れが煩雑となり、ユーザを混乱させる。 FD2004 画面遷移が上から下、左から右に遷移するように配置する。 FD2005 実装寄りのイベントや条件分岐の条件になっていると、画面遷移図上で実際の業務的な処理 が想起できず、読み手を混乱させる。 Copyright ©2008 IPA 第1部 - 41 第1部 表現 2.4.1 書き方のコツ 画面遷移 FD2001：一覧性があると、全体像を把握するのに役立ち、開発者が説明しやすく、かつユーザにも理解されや すい。 《開始点》 表記例は Java Pet Store* を題材としています。 《下位遷移》 １印刷ページは、１つの完結した業務（たとえば、受注、発注等）となるように記述し、それは最大１０画面遷移となるようにする。 （内部遷移の単位で分割する、同一画面の状態変化等の精査を行い、不必要に別画面としない。） それ以上の場合は、可能な限り階層化し一覧性を図り、接続子による分割は極力使用しない。特に、流れの途中で分断しないように記述する。 また、この場合、下位の遷移を持つところには“《下位遷移》”とﾗﾍﾞﾙをつける。 Copyright ©2008 IPA 第1部 - 42 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 2.4.1 書き方のコツ 画面遷移 FD2002：画面名が、業務的に意味のある識別名になっていないと、画面遷移上で実際の画面が想起しにくく確認し ずらい。 表記例は Java Pet Store* を題材としています。 望ましくない例 ペット登録画面１ ペット登録画面２ 望ましい例 ペット登録 【ヘッダ入力モード】 ペット登録 【詳細入力モード】 同一機能を果たす画面が複数で構成される場合でも、XXX１、XXX2のような名称とすると理解が困難となる場合がある。 例えば、“機能名”＋【“状態”】として、意味がわかる名称として記述する。 なお、この【】による表記は、同一画面ではあるが、モードが異なる場合に用いると便利である。 Copyright ©2008 IPA 第1部 - 43 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 2.4.1 書き方のコツ 画面遷移 FD2003：画面遷移の遷移矢線が錯綜していると、処理の流れが煩雑となり、ユーザを混乱させる。 FD2004：画面遷移が上から下、左から右に遷移するように配置する。 表記例は Java Pet Store* を題材としています。 交差して複雑 になっている。 望ましくない例 望ましい例 無秩序に配置して いるために 整然としていない。 可能な限り、遷移線が錯綜しないようにする。 たとえば、主要な流れと分岐は分離し、遷移矢線が交錯しないよう位置関係を決める。 繰り返しがある場合は、繰り返し部分と逐次的に流れる部分が交差しないようにして制御構造が単純にわかるようにする。 異常系を同時に表している場合には、正常系と異常系が明確に分離できるように、配置する。異常系を同時に表している場合には、（たとえば、正常系は 左半分もしくは中央に直線的に記述し、異常系はその正常系パスから分岐するように記述する。異常系の部分については“《異常系》”などのようにラベル付けして 明示することが望ましい。） そのために、上から下、左から右となるように記述し、遷移矢線が交差しないようにする。 本質的な流れが上から下に並ぶように配置する。 無秩序に配置しないようにする。 Copyright ©2008 IPA 第1部 - 44 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 2.4.1 書き方のコツ 画面遷移 FD2005：実装寄りのイベントや条件分岐の条件になっていると、画面遷移図上で実際の業務的な処理が想起 できず、読み手を混乱させる。 表記例は Java Pet Store* を題材としています。 望ましくない例 望ましい例 【イベントの場合】 [InvocationEvent 発生] [“入力”ボタン押下] イベントは、業務的な用語（たとえば、「在庫不足になった」など）や外部的に認識可能な操作（「入力ボタンを押す」）という表現をする。ミドルウェア/ プログラミング言語を意識した用語は用いない。 【条件分岐の場合】 Windows.getForcus(e) = True Windows.getEvent(e) = True [“受注データ入力”ボタン 押下] 在庫数量 < 最低在庫量 内部変数や、低レベルのプログラムレベルの操作を使用した分岐条件は記述しない。 業務レベルのエンティティ(たとえば、“商品”、“在庫”などのように業務で扱う対象物のようなもの）/属性（エンティティを構成し、エンティティの性質を表すための 各データ綱目。例えば“商品名”、“商品コード”、“数量”などである）を用いた条件文や、画面部品の名称を用いて記述する。 Copyright ©2008 IPA 第1部 - 45 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 2.4.1 書き方のコツ 画面遷移 表記例は Java Pet Store* を題材としています。 【例外処理の場合】 望ましい例 望ましくない例 [欠品] [IOexception] メニュー画面へ メニュー画面へ [正常] [正常] 異常系への遷移する例外条件は、業務的に理解可能な表現でなくてはならない。たとえば、“欠品”や“在庫引当不可”などである。 これらの用語は、曖昧でなくユーザ間、ユーザ/開発者間で共通の理解が得られるものでなくてはならない。 “IOException”などのミドルウェアやプログラム言語で登場する用語などのように実装レベルの用語は使用しない。 Copyright ©2008 IPA 第1部 - 46 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 2.4.2 確認のコツ 画面遷移 画面遷移の確認のコツは次のとおり。 ＩＤ 内容 FD2006 画面レイアウトと画面遷移上の遷移が過不足なく記述されていることを確認する。 Copyright ©2008 IPA 第1部 - 47 第1部 表現 2.4.2 確認のコツ 画面遷移 FD2006：画面レイアウトと画面遷移上の遷移が過不足なく記述されていることを確認する。 注）このコツはレビューにおける合意形成が大幅に成熟する充実期以降に確認するポイントであ り、様々な修正結果の反映が的確に行われているかを確認することである。充実期等は「第3部 表記例は Java Pet Store* を題材としています。 レビュー」参照。 ［Pet照会］ ログイン 登録 画面のボタンから 判断すると“Pet照会” は存在しない。 対応する画面が 設計されてない。 ［ユーザ照会］ ﾕｰｻﾞ照会 画面上のボタンやフィールドの操作等から判断して、起こりえない遷移が記述してないことを確認する。 また、記述した遷移によって、表示される画面については、その存在を確認する。 Copyright ©2008 IPA 第1部 - 48 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 コラム2 画面遷移 正常系と異常系を区別して示す 利用者タイプ別に画面遷移を記述する Copyright ©2008 IPA 第1部 - 49 第1部 表現 コラム2 画面遷移 正常系と異常系を区別して示す。（1/2） 状況 正常系と異常系の遷移を明確に区分する必要がある。 関連するコツ なし 補足 正常系と異常系を明確に分離することで、本質的な処理の内容を理解しや すくなった。 正常系と異常系を区画（図上の位置で分離）する記述の代替方法。 Copyright ©2008 IPA 第1部 - 50 第1部 表現 コラム2 画面遷移 正常系と異常系を区別して示す。（2/2） 表記例は Java Pet Store* を題材としています。 本来の処理の内容と、例外処理 が明確になり、処理内容が把握 しやすくなる。 具体例 正常系と異常系を線種で区別して示す。 １．トップ画面 ２．ログイン画面 ３．ユーザ登録画面 ４．ユーザトップ画面 ログアウト ５．ユーザ登録画面入力エラー 正常の流れ 異常の流れ Copyright ©2008 IPA 初回のログオン時の流れのみ を切り出して通常系と異常系で 分けて遷移を書いている。 再入力 第1部 - 51 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 コラム2 画面遷移 利用者タイプ別に画面遷移を記述する。（1/2） 状況 利用者権限等によって、画面遷移が異なることを明確にする必要がある。 関連するコツ FD7004 補足 利用者の視点で画面遷移を把握しやすくなった。 Copyright ©2008 IPA 第1部 - 52 第1部 表現 コラム2 画面遷移 利用者タイプ別に画面遷移を記述する。（2/2） 具体例 利用者のタイプ毎（管理者、一般ユーザ等）に記述する。 利用者の分類別に画面 遷移を示す。 利用者の視点で画面の 遷移を把握しやすくなる。 一般ユーザの画面遷移 部門管理者の画面遷移 業務管理者の画面遷移 《開始点》 ｽﾀｰﾄｱｯﾌﾟ 画面 ログイン 画面 《終了点》 メニュー 画面 Copyright ©2008 IPA 書籍検索 画面 検索結果 表示画面 第1部 - 53 第1部 表現 第3章 画面レイアウト 画面レイアウト ここでは「画面レイアウト」とは何かを定義し、構成要素と表記例について解説す る。 発注者とのコミュニケーションを促進するための、 「画面レイアウト」の効果的な 書き方のコツを解説する。 発注者とのレビューに備えて「画面レイアウト」の内容を確認するコツを解説する。 Copyright ©2008 IPA 第1部 - 54 第1部 表現 3.1 工程成果物の定義 画面レイアウト 画面レイアウトでは、次の情報を記述範囲とする。 項目・イベント発生オブジェクト名、それらに対応する画面部品（ＩＮ・ＯＵＴの区別が必要） およびその配置 画面に配置する画面部品のスタイルの定義、フレーム分割などにも対応 画面部品の操作によって発生する処理およびそのタイミングとの対応付け（イベントと処 理内容） Copyright ©2008 IPA 第1部 - 55 第1部 表現 3.2 工程成果物の構成要素 画面レイアウト 工程成果物の構成要素 分類 共通情報 書誌情報 画面レイアウトの 構成要素 項 番 記述内容の説明 - プロジェクト名、システム名、工程名、ドキュメントＩＤ、ドキュメント名、作成者、作成日付、バージョン、 更新者、更新日付 1 画面ID 画面を区別するための番号。画面遷移に関するＩＤは一覧表があるものとして 省略した。 2 画面の名称 画面の名称。 3 概要 何のための画面なのかを説明する。 4 レイアウト図 図にてレイアウト案を提示。 5 識別ID 設計書内で識別するため、画面部品ごとにIDを振る。画面遷移や入出力項目、 アクション明細などと連携して用いる。 6 ラベル 画面に表示される時の名称。 7 画面部品の種類 どのような画面部品を用いるのかの画面部品名。他にボタンなどがある。 8 表示範囲 表示する桁数や、テーブルのカラムの幅などを提示。 9 画面部品の説明 その画面部品がどのような役割を果たすのか、の意味や説明を記述する。入 出力が絡む場合はこちらに説明をつける。項目の細かい定義や処理内容は別 扱い。 操作手順 入力してボタンを押すなど、操作のイメージが掴めるような操作手順を記述す る。 10 Copyright ©2008 IPA 記述内容 第1部 - 56 第1部 表現 3.2 工程成果物の構成要素 画面レイアウト 画面に配置する部品の種類 項 番 画面部品の種類 画面部品の説明 1 テキストボックス 文字列（漢字、かな、英数字、記号など）入力用の部品 2 リストボックス 幾つかの文字列リストの中から選択肢を選ぶ部品 3 コンボボックス 幾つかの文字列リストの中から選択肢を選ぶか、文字列リストにない場合には文字列を入力で きる部品 4 チェックボックス 文字列をチェックして選択する部品（複数選択可） 5 ラジオボタン 文字列をチェックして選択する部品（単一選択） 6 ボタン クリックすることでアクションが発生する部品 ・登録ボタン、キャンセルボタン、戻るボタンなど 7 ラベル 文字列で表示される部品 ・画面タイトル、入力項目名称など 8 罫線 罫線の部品 9 表 表組みされている部品 画像 表示用の画像、または押下できる設定の画像 10 Copyright ©2008 IPA 第1部 - 57 第1部 表現 3.3 表記例（サンプル） 画面レイアウト 表記例は Java Pet Store* を題材としています。 画面レイアウトの表記例を示す。 画面レイアウトには、矩形で表記する場 合と、出来上がりイメージに近い画面を 貼り付ける場合がある。 ここでは、矩形で表記する場合について サンプルを表した。 注：イベントの発生条件が複雑な場合は、イベントの発生条 件とイベント、アクションの対応関係を注記する。 Copyright ©2008 IPA 第1部 - 58 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 3.4 設計書記述のポイント 画面レイアウト この節では、画面レイアウト固有の設計書記述やその確認のポイントを記述する。 3.4.1 3.4.2 Copyright ©2008 IPA 書き方のコツ 確認のコツ 第1部 - 59 第1部 表現 3.4.1 書き方のコツ 画面レイアウト 画面レイアウトの書き方のコツは次のとおり。 ID 内容 FD3001 全体を軽くレビューする際に、表現（見た目）がわかりやすく、見ただけで 画面部品の状態や種類などを把握しやすい表記にすると、説明の手間が 省け、画面部品の状態や種類の違いを明確に認識することができる。（特 に、入出力項目や可変長の表を対象とする） FD3002 操作手順に加えて、操作に対応するシステムのリアクションを記述する。 これにより、発注者とシステムの境界が明確になり、発注者が使う場面を 想定して、操作手順をより詳細まで確認しやすくなる。 FD3003 画面部品の説明や見た目で、入出力が発生するか否かを明確に伝える と、入出力事項の意識付けができた状態で入出力項目の説明を受けるこ とができる。 Copyright ©2008 IPA 第1部 - 60 第1部 表現 3.4.1 書き方のコツ 画面レイアウト FD3001 ： 全体を軽くレビューする際に、表現（見た目）がわかりやすく、見ただけで画面部品の 状態や種類などを把握しやすい表記にすると、説明の手間が省け、画面部品の状 態や種類の違いを明確に認識することができる。（特に、入出力項目や可変長の 表を対象とする） わかり易くするために主に注意する箇所は次の5つ。 画面構成要素の配置 ・画面要素の配置方法は統一する。 - 操作ボタンの配置箇所 - 情報の表示箇所 -説明文の配置箇所 など ・タイトルは画面の構成内容に合わせる 入力項目 表 ・可変長/固定長の視覚的な区別がついて いる。 ・アクションの出力結果を表示するのか、 ページ固定の表なのか補足説明されて いると尚良い ボタン ・入力種類が認識できるか - 選択肢を選ぶのか - 文字列を入力するのか ・他の画面要素と視覚的な区別をつける - 単純なテキスト表示との区別 - 別画面に遷移するリンク表示との区別 ・入力条件が示されている - 排他/非排他入力 - 必須入力の有無 ・ボタン押下によって起こるアクションの 種類や概要がわかると尚良い Copyright ©2008 IPA 文字列 ・ページ固定なのか、出力の結果なのか、 リンク文字なのか、その文字列の機能や所 属を明らかにする 第1部 - 61 第1部 表現 3.4.1 書き方のコツ 画面レイアウト 表記例は Java Pet Store* を題材としています。 画面構成要素の配置 配置方法の記述例 ・画面要素の配置方法は統一する。 ・画面要素の配置方法は統一する。 -- 操作ボタンの配置箇所 操作ボタンの配置箇所 -- 情報の表示箇所 情報の表示箇所 -- 説明文の配置箇所 説明文の配置箇所 など など ・タイトルは画面の構成内容に合わせる ・タイトルは画面の構成内容に合わせる ただ画面を貼り付けるだけだと、 どこに何が配置されるのか不明瞭 レイアウト図 ※エリアの配置ルールは、共通ルールに基づく。 レイアウト図 コンテンツの基本配置について ヘッダエリア ナビゲーション エリア ユーティリティ エリア コンテンツ エリア (sub1) コンテンツエリア (main) コンテンツエリア (sub2) フッタエリア Copyright ©2008 IPA 第1部 - 62 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 3.4.1 書き方のコツ 表 画面レイアウト 表記例は Java Pet Store* を題材としています。 表示特性を明らかにする。 ・可変長/固定長の視覚的な区別がついている。 ・可変長/固定長の視覚的な区別がついている。 ・アクションの出力結果を表示するのか、ページ固定の表なのか補足説明されていると尚良い。 ・アクションの出力結果を表示するのか、ページ固定の表なのか補足説明されていると尚良い。 入出力項目が作成されていない時期に、 画面レイアウトに対するユーザの理解を 促進するため、補足説明資料を 作成する。 補足説明資料の記述例（固定長） 補足説明資料の記述例（可変長） 同ペット内ペット種別ページについてのご説明 検索結果表示ページについてのご説明 ④ ４件表示 ① ④ ② ４件まで表示 ③ ① ② ③ 同ペット内ペット種別表示の概要 検索結果表示の概要 ① 他の動物へジャンプボタンを表示する。 ① 「ホームページ内検索」の検索結果を一覧で表示する。 ② ペットの名称（大見出し）を表示する。 ② 一覧表には、枠を表示する。 ③ 一覧表には、枠を表示する。 1ページには最大４件まで表示する。 1ページは常に４件の表示ができるように実際の数に関係なく枠を表 示する。 検索結果をペット種別IDの昇順に付番する。 ペット種別IDの昇順に表示する。 行の高さは一定とする。このため、検索結果が４件よりも少ないときは 画面縦幅が短く表示される。 行の高さは一定とする。このため、表示するペットの種類が4件よりも 少ないときでも画面縦幅は変わらずに、表示される。 ４件表示された際の表の大きさはタテ555px×ヨコ575pxとする。 表の大きさはタテ100px×ヨコ最大250pxとする。 ④ 「トップへ」ボタンを表示する。 Copyright ©2008 IPA ③ 次ページ・前ページがある場合、「次の4件へ>」「<前の4件へ」ボタンを 表示する。 ④ 「トップへ」ボタンを表示する。 第1部 - 63 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 3.4.1 書き方のコツ 画面レイアウト 表記例は Java Pet Store* を題材としています。 入力項目 設計書では表のみでの説明のため、それをわか り易くするためにレイアウト図の補足をする例 補足説明資料の記述例 ・その表記が何の画面部品を表している ・その表記が何の画面部品を表している のか補足してもよい。 のか補足してもよい。 ・入力種類は、選択肢を選ぶのか、 ・入力種類は、選択肢を選ぶのか、 文字 文字 列を入力するのかがわかるように示す。 列を入力するのかがわかるように示す。 ・入力条件が示されている ・入力条件が示されている -- 排他/非排他入力 排他/非排他入力 -- 必須入力の有無 必須入力の有無 入力いただく情報について ユーザ情報 (署名 ユーザ名を表示) ユーザ名： 新パスワード： （必須入力） パスワード確認： ・マニュアルなどを書き起こすときの注意 ・マニュアルなどを書き起こすときの注意 情報ともなる 情報ともなる 入出力項目が作成されていない 時期に、画面レイアウトに対する ユーザの理解を促進するため、 補足説明資料を作成する。 ユーザ基本情報 氏名 ： 住所 ： （必須入力） （任意入力） ﾒｰﾙｱﾄﾞﾚｽ ： 選択入力項目 （選択肢は別紙） 利用環境情報 言語選択： 選択入力項目 （選択肢は別紙） お気に入りの種類： マイリスト表示： ﾘｽﾄ1 ﾘｽﾄ2 マイバナー： オン オフ 登録 Copyright ©2008 IPA ﾘｽﾄ3 複数選択可能 どちらか一つを選択 キャンセル 第1部 - 64 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 3.4.1 書き方のコツ 画面レイアウト 表記例は Java Pet Store* を題材としています。 ボタン ・他の画面要素と視覚的な区別をつける ・他の画面要素と視覚的な区別をつける -- 単純なテキスト表示との区別 単純なテキスト表示との区別 -- 別画面に遷移するリンク表示との区別 別画面に遷移するリンク表示との区別 画面イメージを設計する上での工夫点 ユーザ基本情報 (署名 ユーザ名を表示) ・説明の際は、ボタン押下によって起こる ・説明の際は、ボタン押下によって起こる アクションの種類や概要を添えると尚良い アクションの種類や概要を添えると尚良い ユーザ名： ・補足資料と画面レイアウトの両方に言える。 ・補足資料と画面レイアウトの両方に言える。 パスワード確認： 新パスワード： 戻る 登録 キャンセル 入力域とボタンの両方に類似した 矩形を画面部品の近くで使用しない。 画面イメージの見た目上の工夫点 ユーザ基本情報 (署名 ユーザ名を表示) ユーザ名： 新パスワード： パスワード確認： 戻る 登録 キャンセル ・ボタンを表す矩形の形状は統一する。 ・実際の仕上がりイメージに近い形状を選ぶ。 Copyright ©2008 IPA 第1部 - 65 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 3.4.1 書き方のコツ 画面レイアウト 表記例は Java Pet Store* を題材としています。 文字列 ・ページ固定なのか、出力の結果なのか、 ・ページ固定なのか、出力の結果なのか、 リンク文字なのか、その文字列の機能や リンク文字なのか、その文字列の機能や 所属を明らかにする 所属を明らかにする 設計書には、文字列の種類の違いが わかるようにしておく。 - テンプレートとして設計書を起こす - 画面部品番号をはっきり示す 設計書の記述例 リンク文字 メニューに戻る ページ共通の 固定文字列 リンク文字 検索結果を表示します。 犬 商品 ID 商品名 値段 abc-01 ゴールデンレトリバ 2000 カートに入れる abc-02 ラブラドールレトリバ 3000 カートに入れる 検索結果の出力 Copyright ©2008 IPA 第1部 - 66 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 3.4.1 書き方のコツ 画面レイアウト FD3002 ： 操作手順に加えて、操作に対応するシステムのリアクションを記述する。これによ り、発注者とシステムの境界が明確になり、発注者が使う場面を想定して、操作手 順をより詳細まで確認しやすくなる。 操作手順 操作手順 （画面の例） お客様ID: 1234-5689 条件を入力してください グレード ： （選択してください） タイプ （選択してください） ： 高速利用： 用途 ： する しない 街乗り ロングドライブ 寒冷地 その他 検索 Copyright ©2008 IPA ユーザの操作 （１）グレードの入力 ・ドロップダウンリストから、グレードを選択する - 選択したグレードを元に、グレードに属するタイプを検索する 検索結果が、タイプのドロップダウンリストの選択肢に設定される。 （２）タイプの入力 システムの ・ドロップダウンリストから、タイプを選択する リアクション （３）高速利用の有無の入力 ・当てはまるラジオボタンをクリックする（どちらか１つ） （４）用途の入力 ・当てはまる用途をクリックする。複数選択可とする。 （５）該当する在庫の検索 ・検索ボタンをクリックする - グレード、タイプ、高速利用、用途の情報を元に、在庫ＤＢから レンタカー情報が検索される。 - 用途はお客様管理簿に登録される。 - 検索結果画面が表示される。 システムのリアクションを記述する場合はユーザの操作 とは視覚的に分け、ユーザの操作は能動態、システムの リアクションは受動態の文章で記述すると良い。 第1部 - 67 第1部 表現 3.4.1 書き方のコツ 画面レイアウト FD3003 ：画面部品の説明や見た目で、入出力が発生するか否かを明確に伝えると、入出力 事項の意識付けができた状態で入出力項目の説明を受けることができる。 明確に伝えるためのポイント 表記例は Java Pet Store* を題材としています。 画面レイアウト説明項目に入出力の有無を明記する。 部品定義表に入出力の 有無を示す欄を作る。 画面レイアウト ユーザ名とパスワードを入力してください！ 1 ユーザ名： パスワード： 識別ID ラベル 画面部品の種類 入出力 1 ユーザ名 テキストボックス IN 2 パスワード テキストボックス IN 3 ログイン ボタン - ﾛｸﾞｲﾝ 2 3 Copyright ©2008 IPA 第1部 - 68 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 3.4.2 確認のコツ 画面レイアウト 画面レイアウトの確認のコツは次のとおり。 ID 内容 FD3004 画面レイアウトに、構成要素の配置やボタン押下時の簡単な動作だけを 記述している。このことにより、本来画面レイアウトで明らかにすべき仕様 が確認できず、不完全な仕様となるリスクがある。 FD3005 画面レイアウトの定義に必要な入力情報が明確になっており、画面レイ アウトの仕様の妥当性を、検証するための根拠の候補が整う（本質的な 議論ができるようになる）。根拠の候補とは、同じフェーズの工程成果物 （データモデル等）との整合性だけでなく、抽象度の異なる工程成果物 （要件定義書）との整合性を保持することを裏付けるための議論の材料 のこと。 FD3006 あるまとまった情報項目群（複数の同類のものが集まっている様子）があ れば、それらを対象とした機能概要を記述する。 （”「顧客情報」を登録・変更する”など、「」内があるまとまった情報項目群 であるとし、”『氏名』を登録・変更する”など、『』内があるまとまった情報項 目群の中にある単項目であるとした場合。） Copyright ©2008 IPA 第1部 - 69 第1部 表現 3.4.2 確認のコツ 画面レイアウト FD3004 ： 画面レイアウトに、構成要素の配置やボタン押下時の簡単な動作だけを記述して いる。このことにより、本来画面レイアウトで明らかにすべき仕様が確認できず、 不完全な仕様となるリスクがある。 表記例は Java Pet Store* を題材としています。 不明瞭や漠然とした記述の例 このような書き方の資料で確認 するのはやめましょう。 カート ロゴ 魚類 犬 検索 爬虫類 猫 鳥 この設計書の記述の中心がどこにあるのかが不明瞭 ・共通部分はあるのか ・この画面の設計書で記述する範囲はカートや検索 の部分まで含まれるのか ・入力情報の種類や数 ・制約条件 などが不明瞭 ユーザ名： パスワード： ログイン ロゴ ・ユーザー名とパスワードを入力して、ログインボタンを押下する ・検索ボタンを押下すると、ペット情報が検索される どこに何を入力するのか、サーバ等処理が 発生するのかどうかが不明瞭 （具体化の余地がある） 制約条件が記述されていない 仕様の段階に合わせて「成熟期」に書く Copyright ©2008 IPA 第1部 - 70 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 3.4.2 確認のコツ 望ましい記述例（１） 画面レイアウト 矩形を用いた 記述例 出来上がりイメージ を用いた記述例 表記例は Java Pet Store* を題材としています。 望ましい記述例（２） このように具体的に 書いた資料で確認し ましょう。 具体的に矩形の形式で領域や 配置が書かれていて明瞭 ・使用する画面部品 ・入力情報の種類や数 ・制約条件 などが明瞭 出来上がりに近いイメージを 貼り付けた例 どこに何を入力するのか が明瞭 Copyright ©2008 IPA 色などの細かい仕様まで確認できる ため、早い時期に仕様を確定できる。 （但し、開発対象のシステムに対し て発注者と開発者との間で大きな認 識のずれはない時期に作成する） 第1部 - 71 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 3.4.2 確認のコツ 画面レイアウト FD3005 ：画面レイアウトの定義に必要な入力情報が明確になっており、画面レイアウトの 仕様の妥当性を、検証するための根拠の候補が整う（本質的な議論ができるように なる）。 根拠の候補とは、同じフェーズの工程成果物（データモデル等）との整合性だけでなく、抽象度の異なる工程成果物 （要件定義書）との整合性を保持することを裏付けるための議論の材料のこと。 表記例は Java Pet Store* を題材としています。 ①画面レイアウトの説明をする前に、画面レイアウト設計をするにあたり、根拠となる 入力情報としたものを整理しておく。 画面レイアウトに「備考」欄を 追加して、根拠となる要件定 義書などへの参照情報を 記述する 根拠となる入力情報 の例 概要 要件定義書 発注者の要求が記されているもの 業務フロー 業務運用の為のワークフローや運用タイミング、入力情報、出力情 報、人間系・システム系の切り分けなど、業務の姿を表すもの データ項目情報 現行業務で使用されている情報や帳票をまとめたもの。 イベントプロセス情報 １回のアクションで処理する内容（サービス機能）やその情報を整 理したもの ②画面レイアウトの画面部品の配置や画面構成について、根拠となる入力情報の どの情報と対応づいているかを、画面レイアウトに備考欄の追加や補足資料の 作成などを行って、明らかにしておく。 要件定義書 業務フロー Copyright ©2008 IPA データ項目情報 イベントプロセス 情報 第1部 - 72 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 3.4.2 確認のコツ 画面レイアウト 表記例は Java Pet Store* を題材としています。 FD3006 ： 画面レイアウトの概要に書くときは、あるまとまった情報項目群（複数の同類のものが集まっ ている様子）があれば、それらを対象とした機能概要を記述する。 （”「顧客情報」を登録・変更する”など、「」内があるまとまった情報項目群であるとし、 ” 『氏名』を登録・変更する”など、『』内があるまとまった情報項目群の中にある単項目であるとした場合。） 記述例 画面ＩＤ S-40-01 画面の名称 利用者環境情報入力画面 概要 「ユーザ情報」および「利用環境情報」を登 録・変更する。 ユーザ情報 これは、利用者環境を設定するための情報入力画面であり、 「ユーザ」に関する情報のまとまりと「利用環境」に関する 情報のまとまりが存在する。 そこで、画面レイアウト工程成果物の「概要」の箇所には、 (署名 ユーザ名を表示) ユーザ名： 新パスワード： パスワードの確認： 氏名 ： 住所 ： 電話番号 ： ﾒｰﾙｱﾄﾞﾚｽ： 「ユーザ情報」および「利用環境情報」を登録・変更する。 という説明を、概要の１つとして記述する。 利用環境情報 言語選択： お気に入りの種類： マイリスト表示： ﾘｽﾄ1 ﾘｽﾄ2 マイバナー： オン オフ 登録 Copyright ©2008 IPA ﾘｽﾄ3 キャンセル 第1部 - 73 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 3.4.2 確認のコツ 画面レイアウト 表記例は Java Pet Store* を題材としています。 混乱を招く例 画面ＩＤ S-40-01 画面の名称 利用者環境情報入力画面 概要 「氏名」「住所」「電話番号」「ﾒｰﾙｱﾄﾞﾚｽ」を登 録・変更し、言語やリストについても設定する。 これは、利用者環境を設定するための情報入力画面であり、 「ユーザ」に関する情報のまとまりと「利用環境」に関する 情報のまとまりが存在するが、 ユーザ情報 (署名 ユーザ名を表示) ユーザ名： 新パスワード： パスワードの確認： 氏名 住所 ： ： 「氏名」「住所」「電話番号」「ﾒｰﾙｱﾄﾞﾚｽ」を登録・変更し、 言語やリストについても設定する。 電話番号 ： ﾒｰﾙｱﾄﾞﾚｽ： という個々の項目について、その処理動作を概要として記述 すると、情報の整理が煩雑となり、混乱する原因になる。 利用環境情報 言語選択： お気に入りの種類： マイリスト表示： ﾘｽﾄ1 ﾘｽﾄ2 マイバナー： オン オフ 登録 Copyright ©2008 IPA ﾘｽﾄ3 キャンセル 第1部 - 74 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 コラム3 画面レイアウト アクション実行後に画面表示が変更される箇所を明示する 画面項目の入力例を示す 可変長や繰り返し表示する画面部品は、長い場合を基準に設計書を作成する 操作手順記述時に、入出力やアクションの詳細な説明を記述する 画面の名称や識別IDが他の設計書と一致していることを確認しやすいように記述 する Copyright ©2008 IPA 第1部 - 75 第1部 表現 コラム3 画面レイアウト アクション実行後に画面表示が変更される箇所を明示する（1/2） 状況 アクション実行時に画面の表示内容が変化する画面がある。 関連するコツ なし 補足 アクション時の画面表示変更箇所を明確に判別できるため誤解を防ぐこと ができた。なお、詳細な画面レイアウトの仕様は別の設計書に記述してあり、 補足資料として事例の資料を作成。 Copyright ©2008 IPA 第1部 - 76 第1部 表現 コラム3 画面レイアウト アクション実行後に画面表示が変更される箇所を明示する（2/2） 具体例 アクション実行時に画面が変更される場合、対象箇所を枠で括って明示している。 画面レイアウトの補足資料の事例 顧客データシステムプラットフォーム ﾌｧｲﾙ(F) 編集(E) 表示(V) お気に入り(A) ツール(T) ヘルプ(H) ■「検索」ボタン押下時の画 面表示説明 顧客情報一覧 検索 新規登録 氏名 都市 ▼ 前の10件 太枠で囲んで明示して いるため、特定のボタン 押下（アクション実行）に て表示が変化するエリア が明確になる。 Copyright ©2008 IPA ・押下した際、太枠で囲んだ エリアの表示が変化する。 ・表示内容と表示条件の詳 細な仕様は○○の設計書を 参照。 氏名（カナ） 郵便場号 1124件中41～50件表示 次の10件 選 択 氏名 氏名（カナ） 郵便 番号 都市 住所 電話 番号 ﾒｰﾙ ｱﾄﾞﾚｽ ○ 山田 やまだ １００ 東京 XXXXXXXXX XXXX XXX 備考 表示内容と表示条件は、別の設計書 に記述している。詳細な仕様はこの 補足資料には記述しない。 第1部 - 77 第1部 表現 コラム3 画面レイアウト 画面項目の入力例を示す（1/2） 状況 入力制約を伴う入力用の画面部品がある。 関連するコツ なし 補足 発注者が設計書の読み方に精通していなかったため、入力制約を直接確 認するのではなく、画面レイアウト部品説明の箇所に入力例を記述して確 認を行った。なお、設計書ではなく設計書を補足資料化したものをベースに 発注者と打合せを実施した。 Copyright ©2008 IPA 第1部 - 78 第1部 表現 コラム3 画面レイアウト 画面項目の入力例を示す（2/2） 具体例 画面レイアウト上で、画面項目の実際の入力例（氏名を入力するテキスト欄であれば 「山田花子」など）を示している。 画面レイアウトの補足資料の事例 画面イメージ 定義した入力制約に従った 入力例を記述しているため、 発注者が理解しやすく、 イメージしやすい。 項目 動作 桁数 内容 ① 地域ﾘｽﾄﾎﾞｯｸｽ 選択 － 都道府県を表示する ② 氏名ﾃｷｽﾄ 入力 20 氏名を入力する ③ 年齢ﾃｷｽﾄ 入力 2 年齢を入力する 項目名 半角/全角 内容 備考 氏名ﾃｷｽﾄ 全角 氏名を入力する [入力例]山田 花子 Copyright ©2008 IPA 詳細な制約の仕様は 入出力項目相当の 設計書に記述している。 入出力項目の例 表示用の ラベル 入力制約 氏名ﾃｷｽﾄ 全角のひらがな、カタカナ、漢 字、スペースのみ。 第1部 - 79 第1部 表現 コラム3 画面レイアウト 可変長や繰り返し表示する画面部品は、長い場合を基準に設計書を作成する （1/2） 状況 可変長の表を含んだ画面がある。 関連するコツ なし 補足 最大の長さの状態の表をレイアウト図に記述することで、実際のイメージが 明確に伝わった。 Copyright ©2008 IPA 第1部 - 80 第1部 表現 コラム3 画面レイアウト 可変長や繰り返し表示する画面部品は、長い場合を基準に設計書を作成する （2/2） 具体例 レイアウト図において、可変長の表を、表示可能な最大行数の状態で記述している。ま た、表が2ページ以上に渡る場合にのみ表示される「次ページに続く」といったリンクも 記述している。 表が2ページ以上に 渡る場合にのみ表示 されるリンクをレイア ウト図に記述。 レイアウト図の事例 画面ID ： AAAA010 （AAAA010） 国内出張情報入力 リンクの表示・非表示条件 等の詳細な仕様は、画面レ イアウトの画面部品の説明 箇所に記述されている。 画面部品の説明の例 識別ID ラベル 画面部品の説明 ⑤ 検索結果が8件以上の ヘルプ 場合のみ表示する。 Copyright ©2008 IPA メニュー 氏名 社員番号 部門コード 部署コード 精算区分 承認者 山田花子 111111 101 101 仮払い 海川太郎 期日 次ページ に続く 最大の長さでの表示状態 が明確になる。 □ 出張先 MM/D D 出張目的 ▼ （ ） ▼ □ ▼ ▼ □ ▼ ▼ □ ▼ ▼ □ ▼ ▼ □ ▼ ▼ □ ▼ ▼ 次ページに続く 出発 （ ） 到着 金額 1ページに表示される 最大行数の表（ここで は、7行）の状態でレイ アウト図を記述。表の 枠を記述することが ポイントであるため、 表内は空白のままの 箇所もある。 各行に表示される項目の詳細 な仕様は入出力項目相当の設 計書に記述されている。 行数が7行より短い場合の表示 仕様は、画面レイアウトの画面 部品の説明箇所に記述されて いる。 第1部 - 81 第1部 表現 コラム3 画面レイアウト 操作手順記述時に、入出力やアクションの詳細な説明を記述する（1/2） 状況 複数の機能により構成された画面がある。 入出力項目及びアクション明細相当の設計書は作成せず、画面レイアウトの設 計書に入出力やアクション明細相当の内容を含めて記述している。追加開発で あるため発注者に元の仕様についての理解があり、外部設計工程では画面レイ アウトだけでシステムの仕様の合意が可能であったためである。 関連するコツ なし 補足 画面上の画面部品の配置及び操作の確認を行う際に、入出力項目やアクション に関する説明をレイアウト図と並列して確認できるため、発注者に理解していた だきやすかった。 画面レイアウト相当の設計書は、本ガイドラインで想定しているものと異なってお り、画面部品の説明が自由記述欄になっている。操作手順も同じ欄に記述する。 Copyright ©2008 IPA 第1部 - 82 第1部 表現 コラム3 画面レイアウト 表記例は Java Pet Store* を題材としています。 操作手順記述時に、入出力やアクションの詳細な説明を記述する（2/2） 具体例 画面レイアウトにおいて、操作手順を記述する際、入出力を伴う画面部品やボタンの詳 細な説明を記述している。”問い合わせ番号は新規作成時に自動採番される”など。入 出力項目及びアクション明細相当の設計書を作成せず、画面レイアウトを使用して発 注者と合意を行っている。 画面レイアウト上のボタン や入出力等の画面部品の 概要が説明がされている ため、画面部品のレイアウ 無指定 トについての確認が容易 である。 システム名 ペット販売購入システム ファイル名 ペット販売購入システム要件定義書（ヘルプ).xls 文書名 画面レイアウト仕様書 設計者 XXX開発担当 機能名 ヘルプ機能 画面名 ヘルプ入力画面 概要 ユーザの問い合わせを入力し、ヘルプセンターやシステム管理者が対応を行うための画 面。 画面サイズ 幅 無指定 ヘルプ入力画面 対応者：システム管理者 ヘルプ入力画面 新規作成 メニュー 対応状況報告 対応状況確認 回答閲覧 未解決 問合せ情報 氏名 ▲ ▼ 問合せ内容 受付No Copyright ©2008 IPA 取消 ヘルプ受付時 対応開始 ▼ ▲ 対応内容 差戻し情報 差戻日 100 ＞ 削除 基本情報 対応者 戻る ＜ １ ヘルプ入力時 変更登録 問合せ番号 受付日 ログアウト 解決済 ▼ 差戻し 対応依頼 対応回答 理由 ▼ 高さ 画面表示位置 無指定 [ヘルプ入力画面] ・新規作成ボタンを押すと、新規問合せ情報入力画面になる。 ・メニューボタンを押すと、メインポータルメニューに戻る。 ・ログアウトボタンを押すと、ペット販売購入システムを閉じる。 ・対応状況報告ボタンを押すと、[基本情報]の入力が可能になる。 （ヘルプセンター担当者かシステム管理者のみ） ・対応状況確認ボタンを押すと、現在の対応状況が閲覧できる。 ・回答閲覧ボタンを押すと、問合せに対する回答が閲覧できる。 ・未解決ボタンを押すと、未解決の問合せのみが表示される。 ・解決済ボタンを押すと、解決済の問合せのみが表示される。 ・戻るボタンを押すと前画面へ戻る。 [問合せ情報] ・問合せをするためのエリア。 ・氏名と問合せ内容を入力する。 ･問合せ番号は、新規作成時に自動採番される。 [基本情報] ・ヘルプセンターの担当者が主に入力するエリア。 ・受付No.は自動採番、受付日は当日日付が表示される。 ･対応者に氏名を入力し、対応内容を記入する。 [差戻し情報] ・差戻しを下場合に表示されるエリア。 ・差戻し日と、理由をプルダウンより選択入力する。 以下の説明欄 ・画面部品 （入出力、ボタン） ・操作手順 第1部 - 83 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 コラム3 画面レイアウト 画面の名称や識別IDが他の設計書と一致していることを確認しやすいように記述 する（1/2） 状況 複数の工程成果物にまたがって画面の仕様を記述しており、画面レイアウ ト以外の設計書においても画面ID、画面項目ID等の識別IDを記述している。 関連するコツ なし 補足 設計書の構成は、本ガイドラインで想定しているものとは異なるが、「画面レ イアウト（内容説明）」は画面レイアウト相当、「画面レイアウト（画面項目）」 は入出力項目相当の設計書である。 Copyright ©2008 IPA 第1部 - 84 第1部 表現 コラム3 画面レイアウト 画面の名称や識別IDが他の設計書と一致していることを確認しやすいように記述 する（2/2） 具体例 画面の名称、画面ID及び画面項目IDは、視認しやすいよう別の設計書と同じような位置に記述している。また、同一 の値であることを認識しやすいよう、IDの命名規則が決まっている。 画面レイアウト （ 内容説明） の事例 画面レイアウト (内容説明) Ｎ ｏ． 画面項目名 システム 名 業務支援システム 業務名 メンテナンス 画面項目ＩＤ Ｉ ／ Ｏ 組み枚数 1／1 画面ＩＤ 機能名 部 タスクNo. 作成年月日 列種別 種 ｵﾌﾟｼｮ 別 ﾝ 品 画面の名称 事務所名メンテナンス 文字種 列幅 種 ｵﾌﾟｼｮ 別 ﾝ タイプ ◆フレーム1 1 1-1 事務所名 ZIMUSYO_NAME I 入力ﾌｨｰﾙﾄﾞ ・・・ 全 角 ・・・ ・・・ 1-2 事務所名(カナ) ZIMUSYO_KANA I 入力ﾌｨｰﾙﾄﾞ ・・・ 全 角 ・・・ ・・・ 画面レイアウト （ 画面項目） の事例 画面レイアウト (画面項目) Ｎｏ． 1 画面項目名 「英字の大文字をアンダース コアで区切る」など、IDの命名 規則が決まっている。 システ ム名 業務支援システム 業務名 メンテナンス 画面項目ＩＤ 機能名 テーブル名 列名 事務所名メンテナンス 文 字 文字 ｿｰﾄ 揃 数 え 備考 異なる設計書でも、 size= 左 15 画面の名称、画面IDを同じ size= 左 ような位置に記述する。 15 タスクNo. 組み枚数 作成年月日 1／1 画面ＩＤ 事務所名メンテナンス 対象データ op03M02 画面の名称 op03M02 事務所名メンテナンス 入力チェック仕様 ◆フレーム1 1-1 事務所名 ZIMUSYO_NAME ・・・ ・・・ 検索条件が1つ以上指定されているかチェック 1-2 事務所名(カナ) ZIMUSYO_KANA ・・・ ・・・ 検索条件が1つ以上指定されているかチェック 1-3 事務所種別 ZIMUSYO_SYUBETSU ・・・ ・・・ 検索条件が1つ以上指定されているかチェック Copyright ©2008 IPA 第1部 - 85 第1部 表現 第4章 画面遷移・レイアウト共通ルール 共通ルール ここでは「画面遷移・レイアウト共通ルール」とは何かを定義し、構成要素 と表記例について解説する。 発注者とのコミュニケーションを促進するための、 「画面遷移・レイアウト 共通ルール」の効果的な書き方のコツを解説する。 発注者とのレビューに備えて「画面遷移・レイアウト共通ルール」の内容 を確認するコツを解説する。 Copyright ©2008 IPA 第1部 - 86 第1部 表現 4.1 工程成果物の定義 共通ルール 役割 画面レイアウトと画面遷移について共通ルールを規定する 諸々の画面（群）が準じる典型的なレイアウトや遷移のパターンを整 理する Copyright ©2008 IPA 第1部 - 87 第1部 表現 4.1 工程成果物の定義 共通ルール 画面設計書個別の合意事項を絞り込もう 共通ルールが対象とするもの、個別の画面で自由に決めることがで きるものを区別することができる。画面設計書の作成やレビューの ポイントを絞り込み、品質のばらつきや合意の困難さを取り除くこと ができる。 共通ルールに従うよう設計すると、確認のボリュームが減少する。 Copyright ©2008 IPA 第1部 - 88 第1部 表現 4.1 工程成果物の定義 共通ルール 各工程成果物の品質･生産性･保守性の向上に寄与しよう 各画面レイアウトおよび画面遷移を作成するときに守るべきルール が示される。個別の画面設計書の作成とチェックの観点がまとめら れることにより、仕様の品質と生産性の向上を図ることができる。 画面遷移で個別に記述されなければならない仕様記述量を削減す ることができる。画面設計書の作成やレビューのポイントを絞り込み、 品質のばらつきや合意の困難さを取り除くことができる。 Copyright ©2008 IPA 第1部 - 89 第1部 表現 4.1 工程成果物の定義 共通ルール 合意の困難さを軽減しよう 基準や標準を意識せず、独自の表記を行うと、発注者に表記の理解 を強いてしまい、内容確認を阻害してしまう。 上流からの要件、ルールや制約事項の根拠、発注者にとっての基 準や業界標準、等に対する共通ルールの矛盾を精査しておく。その ためには、各ルールと要件や制約等との対応付けを管理しておき、 それによって発注者にとってルールの適切性を判断しやすくする。 画面共通に持つ画面遷移を示す設計書が別途必要となる。（ログオ フやナビゲーションなど）共通ルールの記述だけで不充分な点は、 該当事項に特化した画面設計書や設計書サンプルなど、具体例を 示さないと発注者の理解が困難な場合がある。 Copyright ©2008 IPA 第1部 - 90 第1部 表現 4.2 工程成果物の構成要素 共通ルール 画面遷移・レイアウト共通ルールの構成要素 分類 共通情報 書誌情報 画面遷移・レイ アウト共通ルー ルの構成要素 Copyright ©2008 IPA 項 番 記述内容 記述内容の説明 - プロジェクト名、システム名、工程名、ドキュメントＩＤ、ドキュメント名、作成者、作成日付、バージョン、更新者、更新日付 1 共通ルールID ルールを記述するドキュメントを一意に特定するためのID 2 共通ルールの名称 ルールを記述するドキュメントに与える名称 3 概要 何のためのルールなのかを説明する 4 ページの構成要素 ひとつの画面を複数のエリアに分割する場合のレイアウト図、エリアに与える名称、エリアが使用され る用途、例 5 配色 キーカラーの指定、アクセントカラーの指定、エリアごとの基本配色、フォントカラーの指定 6 文字フォント・サイズ 画面に表示する文字フォントの指定、サイズの指定、行間の指定 7 全体構造とナビゲー ション 画面のもつ階層構造、メニュー構造、分類方法の基準、ナビゲーション表示方法や表示変更方法を 示す説明、および図 8 画面遷移パターン 単一ブラウザ/複数ブラウザの使用可否の定義、フレームにまたがる遷移の有無、そのコントロール 方法の定義、自らブラウザを閉じる画面の有無と遷移への影響 9 エラー表示方法、 エラーメッセージ 画面内のエラーメッセージ表示、エラーメッセージダイアログの要否、エラー画面レイアウト図、エラー メッセージへのアクセントカラー使用、エラー固有の書式、メッセージの可変部と固定部の配置 10 ユーザの定義 アクセス可能範囲のユーザ分類と命名、説明 11 制約事項 性能要件、セキュリティ要件、その他による制約事項 第1部 - 91 第1部 表現 4.3 表記例（サンプル） 共通ルール 表記例は Java Pet Store* を題材としています。 構成要素：共通情報、書誌情報 共通ルールID、共通ルールの名称を明記する バージョン管理できるようにしておく 概要にはドキュメントの目的や、追従すべき要件や業界標準を明らかにする 共通ルールの整備にあたり、準拠すべき社内の基準、公的な基準を示すことにより、 共通ルールの適用基準が明確になる。 プロジェクト名： A社殿向けJava Pet Store開発 ドキュメントＩＤ： JPS0001 システム名： Java Pet Store ドキュメント名： Java Pet Store 外部設計書 バージョン： 1 工程名：外部設計 作成者： 佐藤一郎 作成日付： 2007/5/29 更新者： 更新日付： 共通ルールID：JPS-UIRULE-0001-01 共通ルールの名称：Java PetStore 画面遷移・レイアウト共通ルール 概要 Java PetStoreの画面を設計するにあたり、設計上の制約や統制について、本ドキュメントで示す。 各画面の工程成果物は原則、本ドキュメントに記載するルールに従うものとする。 本ドキュメントに記す各ルールは以下に記す要件に対応することを前提とする。 ・Web クライアントからの注文を処理する役割を担う。 ・インターネットを介して利用する利用者の情報を管理する。 ・対応する言語については「英語」「日本語」「中国語」の３ヶ国語を想定している。 ただし、エラーメッセージの一部、画像内文字について、多国語対応しない範囲を許容する。 ・サービス可能なペットについて注文を受け、カードによる決済を行う。 ・利用者は自己の個人情報および注文情報を登録する。 他者の情報に対してはアクセスを許可しない。 ・商品であるペットの価値は画像によって伝える。画像の印象を損なわないよう配色はシンプルにする。 Copyright ©2008 IPA 第1部 - 92 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 4.3 表記例（サンプル） 共通ルール 表記例は Java Pet Store* を題材としています。 構成要素：ページの構成要素（1） 画面をどういった区画（エリア）に分割するのかを示す 1 ページの構成要素 ページ構成要素を以下のように定義する。 なお、原則としてフレームを使用しないこととする。 余白 （ﾋﾟｸｾﾙ値は目安） ナビゲーションエリア 20ﾋﾟｸｾﾙ 80 ﾋﾟｸｾﾙ ヘッダーエリア ユーティリティエリア コンテンツエリア （main） コンテンツエリア （sub2） 60 ﾋﾟｸｾﾙ コンテンツエリア （sub1） フッターエリア 20% Copyright ©2008 IPA 60% 80 ﾋﾟｸｾﾙ 20% 第1部 - 93 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 4.3 表記例（サンプル） 共通ルール 表記例は Java Pet Store* を題材としています。 構成要素：ページの構成要素（2） 分割した区画（エリア）の各々の用途を明らかにする。画面を使う人がヘッダー領 域から何を読み取れるようにするか、を明確にすることで、ルールの記述の意図を 顧客に伝えやすくする。 各ページ構成要素には、主として以下の用途に用いられる。 用途 項番 要素 サイトロゴ（タイトル、カバー画像）を常に表示し、Java PetStoreのサービス 1 ヘッダーエリア であることを利用者に明らかにする。 ※すべての画面で表示するものとする。 2 ユーティリティエリア 利用頻度の高い機能（商品検索）を常に利用可能にしておく。 ※すべての画面で表示するものとする。 主要コンテンツへのリンク（顧客情報、カート、ログイン/ログアウト）を常に 利用可能にし、任意にログイン/ログアウトができるようにする。 ※すべての画面で表示するものとする。 コンテンツエリア(sub1) ペットメニューのサービス（共通ペットカテゴリ）を常に表示する。 ※すべての画面で表示するものとする。 コンテンツエリア(main) サービス別の詳細コンテンツを表示する。エラーメッセージを画面上に表示 する場合にはここに表示する。 コンテンツエリア(sub2) ログインしている顧客に対して、ペットメニューのサービス（ログイン顧客の 好きなペットカテゴリ）を常に表示する。 ※ログイン中のすべての画面で表示するものとする。 クレジット表記、コピーライト表記、問合せ先 フッターエリア ※すべての画面で表示するものとする。 余白 余白 3 ナビゲーションエリア 4 5 6 7 8 Copyright ©2008 IPA 第1部 - 94 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 4.3 表記例（サンプル） 共通ルール 表記例は Java Pet Store* を題材としています。 構成要素：ページの構成要素（3） ページの構成要素が組み合わさったときの表示イメージを伝える 2 ページの表示イメージ ページの構成要素を組み合わせた場合の表示イメージを以下に示す。 コンテンツエリア （main） Copyright ©2008 IPA 第1部 - 95 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 4.3 表記例（サンプル） 構成要素：配色 共通ルール 表記例は Java Pet Store* を題材としています。 色彩の使われ方に対するルールを定める 色に持たせる意味を明確にする 3 配色 （１）キーカラー 背景色は□白(“#FFFFFF”）を基調とする。 （２）ページ構成要素への基本配色 項番 要素 配色（バックグラウンド） 1 ヘッダーエリア □白(“#FFFFFF”） 2 ユーティリティエリア □白(“#FFFFFF”） 3 ナビゲーションエリア □白(“#FFFFFF”） 4 コンテンツエリア(sub) □白(“#FFFFFF”） 5 コンテンツエリア(main) □白(“#FFFFFF”） 6 フッターエリア □白(“#FFFFFF”） 7 余白 □白(“#FFFFFF”） （３）アクセントカラー アクセントカラーは■赤（“#FF0000”）とする。 （４）フォントカラー 基本色は■黒（“#000000”）とする。 Copyright ©2008 IPA カラーの表示イメージ（“■”など）や、 別途色見本を用意して色への認識を 共有する。 第1部 - 96 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 4.3 表記例（サンプル） 共通ルール 表記例は Java Pet Store* を題材としています。 構成要素：文字フォント・サイズ 文字フォント・サイズの使われ方に対するルールを定める 文字フォント・サイズの表示イメージを明確にする 4 文字フォント・サイズ （１）文字フォント 書体はシンプルな書体を適用する。 欧文部分は一般的な Helvetica または Arial 、sans-serifとする。 和文、漢文部分は指定せず、ブラウザのフォント指定に従う表示とする。 [参考]sans-serif表示イメージ sans-serifです。 （２）文字サイズ ページの主題や項目、重要な内容を示す文字サイズはブラウザの標準サイズとする。 詳細内容を示す文字サイズはやや小さめ（x-small;）とする。 ユーティリティーエリアとナビゲーションエリアは小さめ（small;）とする。 x-small です smaｌｌです 標準サイズ です （３）行間サイズ 行間サイズは指定しないこととする。 各画面で指定することは許可しない。 [表示イメージ]文字フォント例（コンテンツエリア） 標準かつbold x-small small Copyright ©2008 IPA x-small 第1部 - 97 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 4.3 表記例（サンプル） 共通ルール 表記例は Java Pet Store* を題材としています。 構成要素：全体構造とナビゲーション 画面の全体構造・階層構造・メニュー構造を明確にし、命名する ナビゲーションの表示パターンを明確にする ※ナビゲーションの表示パターンは、「構成要素：ページの構成要素（1）」で示している「ナビゲーションエリア」に適用される。 5 全体構造とナビゲーション （１）階層構造、メニュー構造 ペットストア総合メニュー └ ユーザ機能ポータルメニュー ├ ペット登録 ├ ペット検索 ├ 位置検索（地図） ├ ユーザ登録 ├ カタログ ├ ペット購入 └ その他画面グループ（ログイン画面など） （２）ナビゲーションの表示パターン ナビゲーション 表示パターン 1 顧客情報 表示固定 2 カート 表示固定 3 ログイン/ログアウト ユーザのログイン状態により表示を切り替え 別途、画面レイアウトおよびアクション明細を記す。 Copyright ©2008 IPA 第1部 - 98 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 4.3 表記例（サンプル） 共通ルール 表記例は Java Pet Store* を題材としています。 構成要素：画面遷移パターン エリア別に画面遷移パターンを明確にする 共通化できる画面遷移パターンの範囲を明確にする 6 画面遷移パターン （１）画面遷移パターンの定義 エリア種別 1 ヘッダエリア イベントアイテム、操作 「タイトルロゴ」イメージをクリック 2 3 「検索」ボタンを押下 「顧客情報」リンクを押下 4 「カート」リンクを押下 5 「ログイン」リンクを押下 6 「ログアウト」リンクを押下 7 コンテンツエリア 8 フッタエリア 基本的に画面遷移による遷移に従う 各種リンクを押下 Copyright ©2008 IPA 遷移パターン ペットストアポータル画面へ遷 移する ペット検索画面へ遷移する。 未ログインのユーザはログイン 画面へ遷移する。ログイン済 みのユーザはユーザ更新画面 へ遷移する。 ショッピングカート表示画面へ 遷移する。 ユーザログイン画面へ遷移す る。 御礼画面へ遷移する。 表記しているサイトへ遷移す る。 第1部 - 99 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 4.3 表記例（サンプル） 共通ルール 表記例は Java Pet Store* を題材としています。 構成要素：エラー表示方法、エラーメッセージ エラー表示方法、エラーメッセージの使われ方のルールを明確にする 7 エラー表示方法、エラーメッセージ （１）エラー表示方法分類 エラー表示方法の分類を次の表のとおりとする。 種別 概要 1 簡易な入力エラー クライアント側でチェック可能な簡単な入力 エラー 2 サーバ送信後のエラーサーバ側のリクエストに対する処理でエ ラー検知 エラー表示方法 ダイアログによる英語メッセー ジ 画面遷移したのち、各国語に よるメッセージをコンテンツエリ ア（main）に表示する。 3 上記以外の致命的エ 何らかの不具合により処理が続行できない 共通のエラー画面に遷移し、 ラー メッセージを表示する。 入力エラー通知に用いるメッセージは理解容易な英語にできることから、英語メッセージに統一する。 サーバ側で処理した結果のエラーはユーザへの通知を明確にするために、各国語によるメッセージとする。 （２）エラー画面レイアウト図 特に定めない。個別の画面レイアウトに従う。 （３）エラーメッセージ書式定義 コンテンツエリア内に示す主たるメッセージ部分にはアクセントカラーを用いる。 Copyright ©2008 IPA 第1部 - 100 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 4.3 表記例（サンプル） 共通ルール 表記例は Java Pet Store* を題材としています。 構成要素：ユーザの定義、制約事項 利用者の分類を具体的に想定し、各々に命名する。 性能やセキュリティといった非機能要件に基づく制約事項を明確にする 8 ユーザの定義 （１）アクセス可能範囲のユーザ分類 ユーザ分析より英語圏、日本語圏、中国語圏のユーザを対象とする。 （２）ユーザ分類の説明 分類 未ログイン時のユーザ分類名称 1 英語圏ユーザ 未ログイン英語ユーザ 2 日本語圏ユーザ 未ログイン日本語ユーザ 3 中国語圏ユーザ 未ログイン中国語ユーザ ログイン時のユーザ分類名称 ログイン英語ユーザ ログイン日本語ユーザ ログイン中国語ユーザ 9 制約事項 （１）画像・動画の制限 インターネットを介して利用することを想定して、通信量を極力避ける。 画像の多用、画像ファイルの肥大化を抑制する。 画像ファイルはGIFを使用する。 １ファイルあたりのファイルサイズは特別な場合を除き、10KBを越えないこととする。 特別な場合とは、初期表示画面のアピールといった、固有の目的のために 必要な大きな画像を用いる場合をいう。 動画ファイルは使用しない。動画GIFも同様である。 （２）スクリプトファイルの制限 スクリプトの制限事項については別途定める。 (３）画面レイアウトの制限 フレームを使わない。 画面を快適に使用できるモニタサイズについては、1024×768ピクセルとする。 縦スクロールによる操作は許容し、横スクロールが必要となる操作は排除する。 （４）ブラウザ制御の制限 シングルウィンドウ内の操作で完結する制御に留める。 別のブラウザを立ち上げることが必要なアクションは使用しない。 ブラウザのアドレス欄の隠蔽・非表示を伴う制御は行なってはならない。 Copyright ©2008 IPA 第1部 - 101 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 4.4 設計書記述のポイント 共通ルール この節では、画面遷移・レイアウト共通ルールの設計書記述やその確認のポイン トを記述する。 4.4.1 4.4.2 Copyright ©2008 IPA 書き方のコツ 確認のコツ 第1部 - 102 第1部 表現 4.4.1 書き方のコツ 共通ルール 画面遷移・レイアウト共通ルールの書き方のコツは次のとおり。 ＩＤ 内容 FD4001 共通ルールの整備にあたり、準拠すべき社内の基準、公的な基準を示すことにより、共通 ルールの適用基準が明確になる。 FD4002 画面レイアウト共通ルールに「画面遷移パターンの定義」や「エラー表示方法」を記載すること によって、各画面ごとのアクション明細での記述を省け、確認ポイントが絞られる。 FD4003 表示をさかのぼるボタンの押下など、共通的なアクションの場合、画面毎に記述していくと記 述量も増え、確認ポイントが増える。「共通のアクション明細」を作るなどの工夫が必要。 FD4004 共通ルールの記述が少ないと、個々の画面や機能でばらばらなつくりとなってしまう。あとから 共通化するのは困難を伴う。 FD4005 画面の見出し、データ入出力領域、エラーメッセージ等の表示領域を標準化する。 FD4006 画面共通のエリアのアクションを示す設計書が別途必要となる。（ナビゲーションなど）共通 ルールの記述だけで不充分な点は、該当事項に特化した画面設計書や設計書サンプルなど、 具体例を示さないと発注者の理解が困難な場合がある。 FD4007 複数の画面で表示される一組の入出力項目がある場合、そのレイアウトを共通ルールとして パターン化する。 FD4008 数値化できるルール、特に制限を示す項目は可能なかぎり数値化しておくことにより判断の 曖昧さを排除することができる。 Copyright ©2008 IPA 第1部 - 103 第1部 表現 4.4.1 書き方のコツ 共通ルール 書き方のコツ補足（1/2） 共通ルールが準拠する基準を明らかにする。 FD4001：共通ルールの整備にあたり、準拠すべき社内の基準、公的な基準 を示すことにより、共通ルールの適用基準が明確になる。 共通の画面遷移、エラー表示の記述を局所化する。 FD4002：画面レイアウト共通ルールに「画面遷移パターンの定義」や「エラー 表示方法」を記載することによって、各画面ごとのアクション明細で の記述を省け、確認ポイントが絞られる。 FD4003：表示をさかのぼるボタンの押下など、共通的なアクションの場合、 画面毎に記述していくと記述量も増え、確認ポイントが増える。「共 通のアクション明細」を作るなどの工夫が必要。 共通ルールの記述不足による設計のばらつきを抑える FD4004：共通ルールの記述が少ないと、個々の画面や機能でばらばらなつ くりとなってしまう。あとから共通化するのは困難を伴う。 Copyright ©2008 IPA 第1部 - 104 第1部 表現 4.4.1 書き方のコツ 共通ルール 書き方のコツ補足（2/2） 画面のエリアごとに表示領域を標準化する。 FD4005：画面の見出し、データ入出力領域、エラーメッセージ等の表示領域 を標準化する。 FD4006：画面共通のエリアのアクションを示す設計書が別途必要となる。 （ナビゲーションなど）共通ルールの記述だけで不充分な点は、該 当事項に特化した画面設計書や設計書サンプルなど、具体例を示 さないと発注者の理解が困難な場合がある。 FD4007：複数の画面で表示される一組の入出力項目がある場合、その レイアウトを共通ルールとしてパターン化する。 制限事項に関する共通ルールは数値化されているか FD4008：数値化できるルール、特に制限を示す項目は可能なかぎり数値化 しておくことにより判断の曖昧さを排除することができる。 Copyright ©2008 IPA 第1部 - 105 第1部 表現 4.4.1 書き方のコツ(1) 共通ルール 共通ルールが準拠する基準を明らかにする。 表記例は Java Pet Store* を題材としています。 FD4001：共通ルールの整備にあたり、準拠すべき社内の基準、公的な基準 を示すことにより、共通ルールの適用基準が明確になる。 概要 Java PetStoreの画面を設計するにあたり、設計上の制約や統制について、本ドキュメントで示す。 各画面の工程成果物は原則、本ドキュメントに記載するルールに従うものとする。 本ドキュメントに記す各ルールは以下に記す要件に対応することを前提とする。 ・Web クライアントからの注文を処理する役割を担う。 ・インターネットを介して利用する利用者の情報を管理する。 ・対応する言語については「英語」「日本語」「中国語」の３ヶ国語を想定している。 ただし、エラーメッセージの一部、画像内文字について、多国語対応しない範囲を許容する。 ・サービス可能なペットについて注文を受け、カードによる決済を行う。 ・利用者は自己の個人情報および注文情報を登録する。 他者の情報に対してはアクセスを許可しない。 ・商品であるペットの価値は画像によって伝える。画像の印象を損なわないよう配色はシンプルにする。 ・作業の流れと全体の中での位置がわかるように明示する。 ・いつでも中断してトップ又は前画面に戻れるようにする。 共通ルールが従うべき基準、業界標準、ガイドライン、特筆すべき要件、 開発コンセプト等があるのであれば、明記しておく。 Copyright ©2008 IPA 第1部 - 106 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 4.4.1 書き方のコツ(2) 共通ルール 表記例は Java Pet Store* を題材としています。 共通の画面遷移、エラー表示の記述を局所化する。(1/3) FD4002：画面レイアウト共通ルールに「画面遷移パターンの定義」や「エラー 表示方法」を記載することによって、各画面ごとの工程成果物での記 述を省け、確認ポイントが絞られる。 画面レイアウト 各ページ構成要素には、主として以下の用途に用いられる。 ヘッダエリア 項番 要素 1 ヘッダーエリア 2 ユーティリティエリア 主要コンテンツへのリンク（顧客情報、カート、ログイン/ログアウト）を常に 利用可能にし、任意にログイン/ログアウトができるようにする。 ※すべての画面で表示するものとする。 コンテンツエリア(sub1) ペットメニューのサービス（共通ペットカテゴリ）を常に表示する。 ※すべての画面で表示するものとする。 コンテンツエリア(main) サービス別の詳細コンテンツを表示する。エラーメッセージを画面上に表示 する場合にはここに表示する。 コンテンツエリア(sub2) ログインしている顧客に対して、ペットメニューのサービス（ログイン顧客の 好きなペットカテゴリ）を常に表示する。 ※ログイン中のすべての画面で表示するものとする。 各画面で共通に使われるエリアには共通の画面遷移がある。 フッタエリア クレジット表記、コピーライト表記、問合せ先 これらを個別の設計書で記す必要が無い様にする。 ※すべての画面で表示するものとする。 余白 余白 3 ナビゲーションエリア 4 5 6 7 8 用途 サイトロゴ（タイトル、カバー画像）を常に表示し、Java PetStoreのサービス であることを利用者に明らかにする。 ※すべての画面で表示するものとする。 利用頻度の高い機能（商品検索）を常に利用可能にしておく。 ※すべての画面で表示するものとする。 Copyright ©2008 IPA アクション明細 ナビゲーションエリア 画面レイアウト ナビゲーションエリア 第1部 - 107 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 4.4.1 書き方のコツ(2) 共通ルール 表記例は Java Pet Store* を題材としています。 共通の画面遷移、エラー表示の記述を局所化する。(2/3) 6 画面遷移パターン （１）画面遷移パターンの定義 エリア種別 1 ヘッダエリア 2 ユーティリティエリア 3 ナビゲーションエリア イベントアイテム、操作 「タイトルロゴ」イメージをクリック 「検索」ボタンを押下 「顧客情報」リンクを押下 遷移パターン ペットストアポータル画面へ遷移する。 ペット検索画面へ遷移する。 未ログインのユーザはログイン画面へ 遷移する。ログイン済みのユーザは ユーザ更新画面へ遷移する。 4 「カート」リンクを押下 5 「ログイン」リンクを押下 ショッピングカート表示画面へ遷移す る。 ユーザログイン画面へ遷移する。 6 「ログアウト」リンクを押下 御礼画面へ遷移する。 7 コンテンツエリア 8 フッタエリア 基本的に画面遷移による遷移に従う 各種リンクを押下 表記しているサイトへ遷移する。 エラーが発生したときの遷移 パターン・表示パターンを定義 しておくと、個別の画面設計時に 記述する必要がなくなる。 （２）エラー発生時の画面遷移パターンの定義 （ⅰ）ヘッダエリア （ⅱ）ユーティリティエリア 入力文字チェックでエラーが発生した場合のユーティリティエリアでの画面遷移パターンは下記のように統一する。 ＄％＆ 検索 [不正な文を入力して “検索”押下］ 入力文字エラーです。 検索 ［入力文字を消して ”検索”押下］ Copyright ©2008 IPA 第1部 - 108 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 4.4.1 書き方のコツ(2) 共通ルール 表記例は Java Pet Store* を題材としています。 共通の画面遷移、エラー表示の記述を局所化する。(3/3) FD4003：表示をさかのぼるボタンの押下など、共通的なアクションの場合、画 面毎に記述していくと記述量も増え、確認ポイントが増える。「共通の アクション明細」を作るなどの工夫が必要。 7 エラー表示方法、エラーメッセージルール （１）エラー表示方法分類 エラー表示方法の分類を次の表のとおりとする。 種別 概要 1 簡易な入力エラー クライアント側でチェック可能な簡単な入力 エラー 2 サーバ送信後のエラー サーバ側のリクエストに対する処理でエ ラー検知 エラー表示方法 ダイアログによる英語メッセー ジ 画面遷移したのち、各国語に よるメッセージをコンテンツエリ ア（main）に表示する。 3 上記以外の致命的エ 何らかの不具合により処理が続行できない 共通のエラー画面に遷移し、 ラー メッセージを表示する。 入力エラー通知に用いるメッセージは理解容易な英語にできることから、英語メッセージに統一する。 サーバ側で処理した結果のエラーはユーザへの通知を明確にするために、各国語によるメッセージとする。 （２）エラー画面レイアウト図 特に定めない。個別の画面レイアウトに従う。 （３）エラーメッセージ書式定義 コンテンツエリア内に示す主たるメッセージ部分にはアクセントカラーを用いる。 エラーの表示方法はエラーの種別によって異なり、表示方法も異なる。共通ルールとして 統制するものと、画面個別の表示に任せるところを明確にする。 Copyright ©2008 IPA 第1部 - 109 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 4.4.1 書き方のコツ(3) 共通ルール 表記例は Java Pet Store* を題材としています。 共通ルールの記述不足による設計のばらつきを抑える FD4004：共通ルールの記述が少ないと、個々の画面や機能でばらばらなつく りとなってしまう。あとから共通化するのは困難を伴う。 JavaTM 顧客情報 ｜カート ｜ ログイン 【English】【日本語】 【中国語】 Pet Store J2EETM BluePrints Sample Application ■■ ペット検索 ■■ ■■■■■■■■■ イヌ ネコ 名前 説明 Long Haired Cat 長い毛が柔ら かく肌触りが よい。 ¥60,000 2 Saber Cat おとなしく、し つけも完璧。 ¥45,000 3 Snappy Cat 4 Alley Cat 1 鳥 魚 爬虫類 ■■■■■■■■■ カートに追加 価格 J2EETM BluePrints Sample Application ¥30,000 血統書付。 JavaTM Pet Store ¥150,000 Javaペット屋さんデモは Java BluePrints for the Enterpriseのサンプルアプリケーションです。 画面毎に個別に設計が進んでしまうと、 後から画面全体の共通化を図ることは難しくなる。 VS 顧客情報 ｜カート ｜ ログイン イヌ ｜ ネコ ｜ 鳥 ｜ 魚 ｜ 爬虫類 ペットの検索 名前 説明 カートに追加 価格 1 雄 子犬プード ル キュートなフランス産の犬。 ¥1,100 2 毒なしガラガラ 蛇 番犬代わりにどうぞ。 ¥1,330 3 ゴールデン＝ レトリーバ 飼い犬に最適。 ¥10,000 4 ダルマシアン かわいい模様。勇敢な犬。 ¥15,000 Javaペット屋さんデモは Java BluePrints for the Enterpriseのサンプルアプリケーションです。 【English】【日本語】 【中国語】 Copyright ©2008 IPA 第1部 - 110 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 4.4.1 書き方のコツ(4) 共通ルール 画面のエリアごとに表示領域を標準化する。 表記例は Java Pet Store* を題材としています。 FD4005：画面の見出し、データ入出力領域、エラーメッセージ等の表示領域を 標準化する。エリア別に果たす役割を定め、個別の画面レイアウトや 画面遷移図他を準備する。このことにより、画面項目や画面遷移等に フォーカスすることが可能になり、レビューと理解が加速できる。 ナビゲーションエリア •各サービスへのリンク •表示言語切替 [参考] 各エリア表示イメージ コンテンツエリア （main） ヘッダエリア •画面の見出し コンテンツエリア（sub1） •ペットメニュー コンテンツエリア(main) •データ入出力 •エラーメッセージ Copyright ©2008 IPA 第1部 - 111 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 4.4.1 書き方のコツ(4) 共通ルール 画面のエリアごとに表示領域を標準化する。 表記例は Java Pet Store* を題材としています。 FD4006：画面共通のエリアのアクションを示す設計書が別途必要となる。（ナ ビゲーションなど）共通ルールの記述だけで不充分な点は、該当事 項に特化した画面設計書や設計書サンプルなど、具体例を示さない と発注者の理解が困難な場合がある。 1 ページの構成要素 ページ構成要素を以下のように定義する。 なお、原則としてフレームを使用しないこととする。 余白 （ﾋﾟｸｾﾙ値は目安） ナビゲーションエリア 20ﾋﾟｸｾﾙ 80 ﾋﾟｸｾﾙ ヘッダーエリア ユーティリティエリア コンテンツエリア （main） コンテンツエリア （sub2） 画面レイアウト ナビゲーションエリア コンテンツエリア （sub1） フッターエリア 20% 60% アクション明細 ナビゲーションエリア 80 ﾋﾟｸｾﾙ 20% 共通のエリアには独立して各工程成果物とすることで、 個々の設計書の記述量を減らす。 Copyright ©2008 IPA 第1部 - 112 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 4.4.1 書き方のコツ(4) 共通ルール 表記例は Java Pet Store* を題材としています。 画面のエリアごとに表示領域を標準化する。 FD4007：複数の画面で表示される一組の入出力項目がある場合、その レイアウトを共通ルールとしてパターン化する。 （1/2） 住所地に関する一組の入出力項目は、共通ルールで表示順序を定めておくの 住所地に関する一組の入出力項目は、共通ルールで表示順序を定めておくのがよい。 がよい。 画面例1 画面例2 住所 郵便番号 都道府県名 市町村名 町名番地 住所 郵便番号 都道府県名 市町村名 町名番地 国名 電話番号 国名 電話番号 Copyright ©2008 IPA 第1部 - 113 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 4.4.1 書き方のコツ(4) 共通ルール 画面のエリアごとに表示領域を標準化する。 表記例は Java Pet Store* を題材としています。 FD4007：複数の画面で表示される一組の入出力項目がある場合、その レイアウトを共通ルールとしてパターン化する。 （2/2） 住所地の表示順序は日本語圏と英語圏で異なるため、 ２カ国語をサポートする場合には、 住所地の表示順序は日本語圏と英語圏で異なる。 ２カ国語をサポートする場合には、 共通ルールで日本語圏と英語圏の双方について表示順序を定めておく必要がある。 日本語圏の住所地の表示例 住所 英語圏の住所地の表示例 郵便番号 都道府県名 市町村名 Address Street Address 町名番地 City 国名 電話番号 Copyright ©2008 IPA State/Province Country Telephone Number Postal Code 第1部 - 114 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 4.4.1 書き方のコツ(5) 共通ルール 制限事項に関する共通ルールは数値化されているか。 表記例は Java Pet Store* を題材としています。 FD4008：数値化できるルール、特に制限を示す項目は可能なかぎり数値化し ておくことにより判断の曖昧さを排除することができる。例えば以下の ような項目である。 ¾ 解像度の上限と下限 ¾ 画面構成物のファイルサイズ上限 ¾ 画像の表示サイズ上限 共通ルールに対する合否判定に曖昧さが無くなり、検証可能性が明らかになる。 PetStore画面設計共通ルール PetStore画面設計共通ルール PetStore画面設計共通ルール PetStore画面設計共通ルール 99 制約事項 制約事項 （１）画像・動画の制限 （１）画像・動画の制限 ファイルサイズの大きい画像・動 ファイルサイズの大きい画像・動 画ファイルを多用してはならない。 画ファイルを多用してはならない。 （２）ディスプレイの規定 （２）ディスプレイの規定 ①高解像度 ①高解像度 ②基本カラー ②基本カラー 基準が曖昧で 99 制約事項 制約事項 （１）画像・動画の制限 （１）画像・動画の制限 １ファイルあたりのファイルサイズは特別な １ファイルあたりのファイルサイズは特別な 目的を除き、 目的を除き、10KB 10KBを越えないこととする。 を越えないこととする。 （２）ディスプレイの規定 （２）ディスプレイの規定 ①モニタサイズ：1024×768 ①モニタサイズ：1024×768 ピクセル以上。 ピクセル以上。 ②色数：256色以上 ②色数：256色以上 制約事項やルールは ？ 判断に迷う。 Copyright ©2008 IPA 数値化しておくこと。 第1部 - 115 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 4.4.2 確認のコツ 共通ルール 画面遷移・レイアウト共通ルールの確認のコツは次のとおり。 ＩＤ 内容 FD4009 画面を使う人がヘッダー領域から何を読み取れるようにするか、を明確にすることで、ルール の記述の意図を顧客に伝えやすくする。 FD4010 共通ルールによる各エリアの配色やレイアウト例を施した状態の見た目の全体表示イメージ を用意して、各エリアの配色やエリア同士の配色の組合せに問題がないかを確認できるよう にする。 FD4011 色の表現を“赤”といった記述をしている場合、厳密に（“#FF0000”）というように示してあって も、色の認識は共有しにくい。実際に色やフォントを表示して見せる必要がある。色の例を示 さないと、顧客との認識の相違を生じさせることになり得る。 FD4012 使用できるカラーの範囲、基本的な配色が指定されている。色彩の使われ方に一定の法則が あると、例えば「赤色系表示箇所は注意や重要事項」など、画面操作方法の習熟に効果的で あるほか、個別画面の仕様への理解もスムーズになる。 FD4013 フォント名を共通ルールで示すだけでは、開発者にはわかりやすいが、発注者にはどのような フォントで表示されるのかわからなくなってしまうので、フォント表示の具体例を示せるようにし ておくべきである。 FD4014 共通的な項目が複数画面にある場合、共通的な表示用方法（ラベル名やフォント、色、など） にすべき範囲を明確にしているか。 Copyright ©2008 IPA 第1部 - 116 第1部 表現 4.4.2 確認のコツ 共通ルール 確認のコツ補足（1/2） 共通ルールの狙いが明記されているか。 FD4009：画面を使う人がヘッダー領域から何を読み取れるようにするか、を 明確にすることで、ルールの記述の意図を顧客に伝えやすくする。 画面の見た目全体のイメージを示しているか。 FD4010：共通ルールによる各エリアの配色やレイアウト例を施した状態の 見た目の全体表示イメージを用意して、各エリアの配色やエリア同 士の配色の組合せに問題がないかを確認できるようにする。 色の共通ルールには、表示例を示しているか。 FD4011：色の表現を“赤”といった記述をしている場合、厳密に（“#FF0000”） というように示してあっても、色の認識は共有しにくい。実際に色や フォントを表示して見せる必要がある。色の例を示さないと、顧客と の認識の相違を生じさせることになり得る。 色の使われ方に法則があるか。 FD4012：使用できるカラーの範囲、基本的な配色が指定されている。色彩 の使われ方に一定の法則があると、例えば「赤色系表示箇所は 注意や重要事項」など、画面操作方法の習熟に効果的であるほか、 個別画面の仕様への理解もスムーズになる。 Copyright ©2008 IPA 第1部 - 117 第1部 表現 4.4.2 確認のコツ 共通ルール 確認のコツ補足（2/2） フォントの共通ルールには、表示例を示しているか。 FD4013：フォント名を共通ルールで示すだけでは、開発者にはわかりやすい が、発注者にはどのようなフォントで表示されるのかわからなくなっ てしまうので、フォント表示の具体例を示せるようにしておくべきで ある。 共通な項目について表示が統一されているか。 FD4014：共通的な項目が複数画面にある場合、共通的な表示用方法（ラ ベル名やフォント、色、など）にすべき範囲を明確にしているか。 Copyright ©2008 IPA 第1部 - 118 第1部 表現 4.4.2 確認のコツ(1) 共通ルール ヘッダーエリアが担う役割が明記されているか。 表記例は Java Pet Store* を題材としています。 FD4009：画面を使う人がヘッダーエリアから何を読み取れるようにするか、を 明確にすることで、ルールの記述の意図を顧客に伝えやすくする。 PetStore画面設計共通ルール PetStore画面設計共通ルール PetStore画面設計共通ルール PetStore画面設計共通ルール 11 ページの構成要素 ページの構成要素 ••ページ構成要素を以下のように ページ構成要素を以下のように 定義する。 定義する。 11 ページの構成要素 ページの構成要素 ••ページ構成要素を以下のように定 ページ構成要素を以下のように定 義する。 義する。 ヘッダー ヘッダー コンテンツ フッター ヘッダー領域から、画面の利用者に どのような情報を得てもらうのか、意 図がわからない。 Copyright ©2008 IPA ？ 各エリアは役割がある。 コンテンツ それが伝わる記述を補足しよう。 フッター ••ヘッダーエリア ヘッダーエリア ••サイトロゴ（タイトル、カバー画 サイトロゴ（タイトル、カバー画 像）を常に表示し、Java 像）を常に表示し、Java PetStoreのサービスであること PetStoreのサービスであること を利用者に明らかにする。 を利用者に明らかにする。 第1部 - 119 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 4.4.2 確認のコツ(2) 共通ルール 画面の見た目全体のイメージを示しているか。 表記例は Java Pet Store* を題材としています。 FD4010：共通ルールによる各エリアの配色やレイアウト例を施した状態の見 た目の全体表示イメージを用意して、各エリアの配色やエリア同士の 配色の組合せに問題がないかを確認できるようにする。 PetStore画面設計共通ルール PetStore画面設計共通ルール PetStore画面設計共通ルール PetStore画面設計共通ルール 11 ページの構成要素 ページの構成要素 11 ページの構成要素 ページの構成要素 余白 ナビゲーションエリア ヘッダーエリア ユーティリティエリア コンテンツエリア （main） コンテンツエリア （sub2） コンテンツエリア （sub1） フッターエリア 20% 60% 画面イメージがいまいち伝わらない。 Copyright ©2008 IPA 20% ？ 手書きでもよいから、画面イメージを 具体的に伝えよう。 第1部 - 120 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 4.4.2 確認のコツ(3) 共通ルール 色の共通ルールには、表示例を示しているか。 表記例は Java Pet Store* を題材としています。 FD4011：色の表現を“赤”といった記述をしている場合、厳密に（“#FF0000”） というように示してあっても、色の認識は共有しにくい。実際に色や フォントを表示して見せる必要がある。色の例を示さないと、顧客と の認識の相違を生じさせることになり得る。 PetStore画面設計共通ルール PetStore画面設計共通ルール PetStore画面設計共通ルール PetStore画面設計共通ルール 33 配色 配色 33 配色 配色 （３）アクセントカラー （３）アクセントカラー 赤とする。 赤とする。 （４）フォントカラー （４）フォントカラー 黒とする。 黒とする。 （３）アクセントカラー （３）アクセントカラー ■赤（“#FF0000”）とする。 ■赤（“#FF0000”）とする。 （４）フォントカラー （４）フォントカラー ■黒（“#000000”）とする。 ■黒（“#000000”）とする。 ？ 色の名称だけでは、どんな色が 表示されるのか、わからない。 Copyright ©2008 IPA カラーの表示イメージ（“■”など）や、 別途色見本を用意して色への認識を 共有する。 第1部 - 121 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 4.4.2 確認のコツ(4) 色の使われ方に法則があるか。 共通ルール 表記例は Java Pet Store* を題材としています。 FD4012：使用できるカラーの範囲、基本的な配色が指定されているか。色彩の 使われ方に一定の法則があるか。例えば「赤色系表示箇所は注意や 重要事項を示すために使う」といった色の使われ方は、画面操作方法 の習熟に効果的であるほか、個別画面の仕様への理解もスムーズに なる。 PetStore画面設計共通ルール PetStore画面設計共通ルール PetStore画面設計共通ルール PetStore画面設計共通ルール 33 配色 配色 背景色：白 背景色：白 フォント：黒 フォント：黒 33 配色 配色 （１）背景色：白 （１）背景色：白 （ペットの写真を目立たせるため、 （ペットの写真を目立たせるため、 全てのエリアは白を基調とする） 全てのエリアは白を基調とする） （２）フォント：黒 （２）フォント：黒 （３）アクセントカラー：赤 （３）アクセントカラー：赤 利用者の注意を惹く目的（エラーメッセージ等）の 利用者の注意を惹く目的（エラーメッセージ等）の 色は 色は ■赤（“#FF0000”）とする。 ■赤（“#FF0000”）とする。 （４）避けるべき組み合わせ：赤と緑と茶 （４）避けるべき組み合わせ：赤と緑と茶 色の判別に不自由な人を考慮し、 色の判別に不自由な人を考慮し、 上記組み合わせは極力避けて下さい。 上記組み合わせは極力避けて下さい。 （５）使用可能上限：4色 （５）使用可能上限：4色 ？ 他の色は自由に使って、画面 個別に使ってもいいのかな。 Copyright ©2008 IPA アクセントカラーを決めよう。 組み合わせの制約も決めよう。 面個別の用途で乱用されない ためにも。 第1部 - 122 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 4.4.2 確認のコツ(5) 共通ルール フォントの共通ルールには、表示例を示しているか。 表記例は Java Pet Store* を題材としています。 FD4013：フォント名を共通ルールで示すだけでは、開発者にはわかりやすいが、 発注者にはどのようなフォントで表示されるのかわからなくなってしまう ので、フォント表示の具体例を示せるようにしておくべきである。 PetStore画面設計共通ルール PetStore画面設計共通ルール PetStore画面設計共通ルール PetStore画面設計共通ルール （１）文字フォント （１）文字フォント ••書体はシンプルな書体を適用 書体はシンプルな書体を適用 する。 する。 ••欧文部分は一般的で装飾のな 欧文部分は一般的で装飾のな い い Helvetica Helvetica または または Arial Arial 、 、 sans-serifとする。 sans-serifとする。 ••和文、漢文部分は指定せず、ブ 和文、漢文部分は指定せず、ブ ラウザのフォント指定に従う表 ラウザのフォント指定に従う表 示とする。 示とする。 （１）文字フォント （１）文字フォント ••書体はシンプルな書体を適用 書体はシンプルな書体を適用 する。 する。 ••欧文部分は一般的で装飾のな 欧文部分は一般的で装飾のな い い Helvetica Helvetica または または Arial Arial 、 、 sans-serifとする。 sans-serifとする。 ••和文、漢文部分は指定せず、ブ 和文、漢文部分は指定せず、ブ ラウザのフォント指定に従う表 ラウザのフォント指定に従う表 示とする。 示とする。 ？ フォントの種別の名称だけでは、 どんな文字が表示されるのか、 わからない。 Copyright ©2008 IPA ••[参考]sans-serif表示イメージ [参考]sans-serif表示イメージ sans-serifです。 第1部 - 123 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 4.4.2 確認のコツ(6) 共通ルール 表記例は Java Pet Store* を題材としています。 共通な項目について表示が統一されているか。 FD4014：共通的な項目が複数画面にある場合、共通的な表示用方法（ラベ ル名やフォント、色、など）にすべき範囲を明確にしているか。 検索の結果： 名前 説明 カートに追加 価格 1 雄 子犬プード ル キュートなフランス産の犬 ¥1,100 2 毒なしガラガラ 蛇 番犬代わりにどうぞ ¥1,330 「検索の結果」画面では表示されるのに、 「このカテゴリの商品」画面では表示され ない項目がある。 統一するべきであるのなら、表示統一 すべき事項を共通ルールとして記す 必要がある。 カテゴリ「魚」の商品 商品の「名前」と「説明」が表示される 別々の画面では表示方法を統一す べきである。 Copyright ©2008 IPA ペットID 名前 説明 FI-FW-01 鯉 模様が美しい鯉。 FI-FW-02 金魚 かわいらしく美しい。 FI-SW-01 エンゼルフィッシュ 見ているだけで心が和み ます。 ？ 第1部 - 124 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 コラム4 共通ルール ボタンの配置基準を定義する 共通的に利用するボタンの規定を作る 使用可能なフォントを定義する 画面の見出し、データ入出力領域、エラーメッセージ等の表示領域を標準化する 使用できるカラーの範囲、基本的な配色を指定する Copyright ©2008 IPA 第1部 - 125 第1部 表現 コラム4 共通ルール ボタンの配置基準を定義する（1/2） 状況 画面ごとに使用されるボタンの種類や数が異なり、ボタン配置が変化する が、配置に統一感を持たせることを求められている。 関連するコツ なし 補足 システム全体の統一性を高め、使用者の操作性を向上させるために実施。 ボタンの配置基準が定義されていることで、開発者が守るべき基準が明確 になると共に、レビュー時においても観点が明確になった。 Copyright ©2008 IPA 第1部 - 126 第1部 表現 コラム4 共通ルール ボタンの配置基準を定義する（2/2） 具体例 ボタンの配置基準が定義されている。（共通ルールの構成要素では「11.制約事項」に該当） 共通ルールの事例 画面共通で使用されるボタン、画面個別で 使用されるボタンの両方をカバー。 3. 画面遷移基準 3.11 ボタンの配置 [1] ログアウト メニュー、サブメニュー画面の右上端に配置する [2] ヘルプ 「ログアウト」がある場合はその左に、ない場合は画面の右上端に配置する [3] メニューへ戻る 一番左端に配置する [4] 戻る 「メニューへ戻る」がある場合はその右に、ない場合は一番左端に配置する [5] 新規登録、更新、参照、削除 新規登録、更新、参照、削除の順で右から順番に配置する 配置例（イメージ）： 戻る 削除 参照 [6] 検索、登録、確認、印刷、その他 使用頻度の高いものを右から順番に配置する Copyright ©2008 IPA 更新 新規登録 システム全体の統一性を高め、開発者が 守るべき基準が明確になる。 第1部 - 127 第1部 表現 コラム4 共通ルール 共通的に利用するボタンの規定を作る（1/2） 状況 複数画面で共通的に利用されるボタンが存在する。 関連するコツ FD4003 補足 共通的に利用されるボタンの仕様を処理内容まで含めて規定することで、画面 レイアウトやアクション明細での、ボタンに関する記述を大幅に減らすことができ た。ただし、規定外の使われ方をする箇所は、その都度補足が必要となる。 Copyright ©2008 IPA 第1部 - 128 第1部 表現 コラム4 共通ルール 共通的に利用するボタンの規定を作る（2/2） 具体例 共通的に利用されるボタンを標準仕様として規定（ボタン名、種類、サイズ、色、処理内容など） しており、押下時のアクションも同時に定義している。 共通ルールの事例 （４）ボタンの規定 ①種類 本システムで共通的に使用するボタンは以下のとおりとする。 表１．１－３ 本システムで共通的に使用するボタン 項番 Copyright ©2008 IPA ボタン名 サイズ 色 繰り返し用いられるボタンについて、 各画面での確認が不要になる。 ボタン押下による処理の内容 処理内容・使用例 画面遷移 入力デー タの保持 １ メニュー 60×30 灰色 メインメニューを表示す る 現在の画面を閉じ、メインメ ニュー画面へ遷移する 無 ２ ヘルプ 60×30 灰色 オ ン ラ イ ン ヘルプを表 示する 業務画面とは別の画面を表示 し、ここにヘルプを表示する 有 ３ 次ページ 60×30 橙色 次ページを表示する 該当業務の次の画面へ遷移 有 ４ 前ページ 60×30 橙色 前ページを表示する 該当業務の前の画面へ遷移 有 ５ 実行 90×30 灰色 画面内容を登録する 該当業務の画面の内容を登録 する。 有 ６ リセット 90×30 灰色 画面内容をリセットする 該当業務の画面の内容を廃棄 し、初期表示に戻す 無 ７ 画面印刷 90×30 灰色 画面を印刷する 該当行布画面の内容を印刷す る 有 第1部 - 129 第1部 表現 コラム4 共通ルール 使用可能なフォントと文字を定義する（1/2） 状況 発注者による厳密な文字指定は無いが、フォントに統一感を持たせることを求 められている。 関連するコツ なし 補足 使用を許されるフォントの種類・サイズ、及び文字種を規定することで、統一感 が生まれた。発注者側と開発者側とで統一の理解が可能となり、理解のバラツ キを抑えることができた。 Copyright ©2008 IPA 第1部 - 130 第1部 表現 コラム4 共通ルール 使用可能なフォントと文字を定義する（2/2） 具体例 システムで使用可能なフォント（書式のタイプ・サイズ）と、使用可能文字（英字・数字・ひらがな 等）を標準化している。（共通ルールの構成要素では「6.文字フォント・サイズ」に該当） 共通ルールの事例 （５）使用可能文字 ②表示用（デザイン性の高いものは除きます） 表示に使用する文字フォントを下記に記載します。 フォント 使用可能な範囲が明確になるため、 理解が統一される。 使用可能文字 備考 タイプ サイズ 英字 数字 ひらがな MS ゴシック 最低：22p ○ ○ ○ 推奨：24p MS Pゴシック 最低：22p ○ ○ ○ 推奨：24p MS UI Gothic 最低：22p ○ ○ ○ 推奨：24p MS 明朝 最低：22p ○ ○ ○ 推奨：24p MS P明朝 最低：22p ○ ○ ○ 推奨：24p Tahorna ○：使用可能 ×：使用不可 －：該当せず 最低：22p × ○ - カタカナ 漢字 全半角記号 ○ ○ ○ 原則全角のみ JIS第1、JIS第2 ○ ○ 原則全角のみ JIS第1、JIS第2 ○ ○ 原則全角のみ JIS第1、JIS第2 ○ ○ 原則全角のみ JIS第1、JIS第2 ○ ○ 原則全角のみ JIS第1、JIS第2 - - ○ ○ ○ ○ - 推奨：26p Copyright ©2008 IPA 第1部 - 131 第1部 表現 コラム4 共通ルール 画面の見出し、データ入出力領域、エラーメッセージ等の表示領域を標準化する。 （1/2） 状況 複数の画面種別が存在し、画面種別毎に各エリアをパターン化する必要が ある。 関連するコツ FD4005 補足 画面を構成する各エリアの役割を規定し、レイアウトを定型化した。 各エリアがパターン化されているので、共通の認識を得やすくなった。 Copyright ©2008 IPA 第1部 - 132 第1部 表現 コラム4 共通ルール 画面の見出し、データ入出力領域、エラーメッセージ等表示領域を標準化する。 （2/2） 具体例 凡例 提供画面 画面の見出しや各エリアの標準化をする。 画面名 メニュー画面 トップメニュー画面 説明 １番最初に表示されるﾒﾆｭｰ画面 作成画面 提供制御画面 エリア構成 共通ヘッダエリア ﾒﾆｭｰｴﾘｱ サブメニュー画面 プロモーション画面 サービスAP画面 ﾄｯﾌﾟﾒﾆｭｰ画面のﾒﾆｭｰﾎﾞﾀﾝをﾀｯﾁ すると表示される。 ﾄｯﾌﾟﾒﾆｭｰ画面で一定時間経過す ると表示される画面 ｻｰﾋﾞｽ固有画面 ｻｰﾋﾞｽﾄｯﾌﾟ画面を含む、固有の画 面 ｴﾘｱ 共通ﾌｯﾀｴﾘｱ （画面全体） 共通ヘッダエリア コンテンツ ｴﾘｱ 共通部品画面 Copyright ©2008 IPA 提供する共通部品を表示した画 面 共通ﾌｯﾀｴﾘｱ 第1部 - 133 第1部 表現 コラム4 共通ルール 使用できるカラーの範囲、基本的な配色を指定する（1/2） 状況 発注者による色の指定は無いが、配色には最低限の配慮を行い、統一感 を持たせることが求められている。 関連するコツ FD4012 補足 使用できる色の種類、範囲、組み合わせ、配色等を規定することで、統一感 が生まれ、個別の画面仕様への理解がスムーズになった。 Copyright ©2008 IPA 第1部 - 134 第1部 表現 コラム4 共通ルール 使用できるカラーの範囲、基本的な配色を指定する（2/2） 具体例 色の種類、組み合わせ、配色等を指定しており、その理由まで記載している。（共通ルールの 構成要素では「5.配色」に該当） 共通ルールの事例 色の使用方法が明確になるため、 理解が統一される。 5.3 色 （1）人間が一度に追従できる色の個数は文字表示で4色、画面全体で7色だと言われているため色は控えめに使用する。 また、1画面中に青系、赤系など系列色は4色までとする。但し、警告（黄）、エラー（赤）などは、この4色には 含めない。 （2）警告を表す文字、絵は黄色系の色を使用する。 （3）エラーを表す文字、絵は赤系の色を使用する。 （4）警告・エラーを表す色が背景色と同系色の場合は、例外を認める。 （5）色の判別に不自由な人を考慮し、できるだけ色だけで情報を伝える表現は避け以下のような工夫をする。 ①原則として、形状だけで識別できるものとする。 ②ボタンは凸形状とする。 ③単一選択は、「○／◎」を表示する。 ④複数選択は、「□／■」を表示する。 ⑤ソートボタンは、「▽／▼」、「△／▲」を表示する。 （6）色の判別に不自由な人を考慮し、以下の色の組み合わせは極力避ける。 ①赤と緑と茶 ②緑とオレンジ ③ピンクと水色と白（灰色） ④赤紫と灰色（黒）と緑 ⑤赤と灰色（黒）と青緑 Copyright ©2008 IPA 第1部 - 135 第1部 表現 第5章 入出力項目 入出力項目 ここでは「入出力項目」について、構成要素と表記例について解説する。 発注者とのコミュニケーションを促進するための、「入出力項目」の効果的な書き 方のコツを解説する。 発注者とのレビューに備えて「入出力項目」の内容を確認するコツを解説する。 Copyright ©2008 IPA 第1部 - 136 第1部 表現 5.1 工程成果物の定義 入出力項目 画面に入出力する項目の入出力の外部仕様を定義したもの。 入力制約は、単一項目の外部仕様までを記述範囲とする。 データ構造との関連など、ユーザ操作の観点からみた外部仕様以外の内容は記 述範囲外とする。 Copyright ©2008 IPA 第1部 - 137 第1部 表現 5.2 工程成果物の構成要素 分類 共通情報 書誌情報 入出力項目の構成要 素 項 番 記述内容の説明 - プロジェクト名、システム名、工程名、ドキュメントＩＤ、ドキュメント名、作成者、作成日付、バージョン、更新 者、更新日付 1 画面ID 画面を区別するための番号。画面遷移に関するＩＤは一覧表があるものとして 省略した。 2 画面の名称 画面の名称。 3 概要 何のための画面なのかを説明する。 4 識別ID 設計書内で識別するため、部品ごとにIDを振る。画面遷移や画面レイアウト、 アクション明細などと連携して用いる。 5 表示用のラベル 画面に表示される時の名称。 6 部品の種類 どのような部品を用いるのかの部品名。テキストボックス、ボタンなどがある。 7 8 Copyright ©2008 IPA 記述内容 入出力項目 有効 入力 部品を有効とするかどうかを記述。 ○：常に有効 △：条件つきで入力可 ×：常に無効 部品が入力、選択可かどうかを記述。 ○：常に入力、選択可 △：条件つきで入力、選択可 ×：常に読取専用 第1部 - 138 第1部 表現 5.2 工程成果物の構成要素 分類 入出力項目の構成要 素 Copyright ©2008 IPA 入出力項目 項 番 記述内容 記述内容の説明 9 表示桁数 部品の表示桁数を記述。 10 入力桁数 部品に入力可能な最大桁数を記述。 11 データ型 データ型を記述。 文字列/数値 12 文字種 文字種を記述。 全角/半角 13 入力制約 該当部品に対する単一制御内容を記述。 （値範囲や入力文字制約等） 14 初期表示有無 初期表示の有無を記述 ○：常に記述した初期表示を表示 △：条件により初期表示の有無や内容が異なる -：初期表示なし 15 初期表示内容 初期表示の値を記述 16 出力仕様 出力時の仕様を記述。 （計算方法、数値の丸め方法、出力フォーマット等） 17 必須 必須入力となる項目かどうかを記述。 ○：常に必須 △：条件つき必須 -：必須ではない 18 補足 項目に関する補足的な説明を記述。 第1部 - 139 第1部 表現 5.3 表記例（サンプル） 入出力項目 表記例は Java Pet Store* を題材としています。 プロジェクト名 システム名 共通情報 工程名 ドキュメントID ドキュメント名 画面ＩＤ 概要 識別 ID 表示用のラベル A社殿向けJava Pet Store開発 Java Pet Store 外部設計 JSP0001 Java Pet Store 外部設計書 S-05-02 ペットの売買に参加するためにユーザ登録を行う。 部品の種類 有効 入力 表示 入力 桁数 桁数 作成者 作成日付 バージョン 更新者 更新日付 画面の名称 データ型 文字種 Java Pet Store 入出力項目担当 2007/5/29 2 Java Pet Store 入出力項目担当 2007/5/31 ユーザ登録画面 初期表示 入力制約 出力仕様 必須 補足 ・取得済みのユー ザ名を表示する 1 ユーザ名 ラベル - × 18 - 文字列 半角 - ○ ユーザ名値 - - 2 新しいパスワード テキストボックス ○ △ 18 10 文字列 半角 パスワード入力パター ン × - パスワード出力パターン - 3 再入力パスワード テキストボックス ○ △ 18 10 文字列 半角 パスワード入力パター ン × - パスワード出力パターン - 4 名前（姓） テキストボックス ○ △ 19 18 文字列 全角 × - - - 5 名前（名） テキストボックス ○ △ 19 18 文字列 全角 - × - - - 6 Ｅメールアドレス テキストボックス ○ ○ 39 38 文字列 半角 Eメール入力パターン × - - - 7 電話 テキストボックス ○ ○ 19 18 文字列 半角 電話番号入力パターン × - - - 8 住所１ テキストボックス ○ ○ 39 38 文字列 全角 - × - - - 9 住所２ テキストボックス ○ ○ 39 38 文字列 全角 - × - - - 10 市 テキストボックス ○ ○ 19 18 文字列 全角 - × - - - 11 県 テキストボックス ○ ○ 3 3 文字列 全角 - × - - - 12 郵便番号 テキストボックス ○ ○ 9 9 文字列 半角 数字もしくは“-”のみ “-”は4文字目のみ × - - - 13 国 テキストボックス ○ ○ 14 14 文字列 全角 - × - - - 14 言語 コンボボックス ○ ○ - - - - - ○ 国項目に“日本”が入力された ら“日本語”を初期表示とする。 “日本”以外が入力されたら“英 語”を初期表示とする。 - ○ 15 好きなカテゴリ コンボボックス ○ ○ - - - - - ○ “犬” - ○ 16 個人リスト可能 チェックボックス ○ ○ - - - - - ○ チェック有り - - 17 個人バナー可能 チェックボックス ○ ○ - - - - - ○ チェック有り - - Copyright ©2008 IPA 第1部 - 140 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 5.4 設計書記述のポイント 入出力項目 この節では、入出力項目固有の設計記述やその確認ポイントを記述する。 5.4.1 5.4.2 Copyright ©2008 IPA 書き方のコツ 確認のコツ 第1部 - 141 第1部 表現 5.4.1 書き方のコツ 入出力項目 入出力項目の書き方のコツは次のとおり。 ＩＤ 内容 FD5001 入力制約や出力仕様がパターン化されて記述されていると、余計な説明が不要と なる。さらに仕様のばらつきを抑えることができる。 FD5002 画面の入出力項目について、それぞれ取得方法が明確であり、発注者が入力する データとそれ以外から取得するデータとの区別が明確である。このことにより、必要 な機能及びその内容が明確になり、要件の抜け漏れを防止しやすい。また、入出 力項目の取得方法が明確であるため、画面の操作性の議論や開発範囲を明確化 しやすい。 FD5003 ラベル名の命名規則、画面部品の種類の適用ルール（コンボボックスとラジオボタ ンのどちらを用いるかの定義等）が定義されており、その定義チェックが容易にでき る工夫がされていると、余計な説明が不要となる。さらに仕様のばらつきを抑えるこ とができる。 FD5004 アクション明細や画面遷移が発生する入出力項目に対して記載があると、アクショ ン明細や画面遷移と連動して仕様を把握し易い。 Copyright ©2008 IPA 第1部 - 142 第1部 表現 5.4.1 書き方のコツ 入出力項目 FD5001：「入力制約や出力仕様がパターン化されて記述されていると、余計な説 明が不要となる。さらに仕様のばらつきを抑えることができる。 」の具体例 表記例は Java Pet Store* を題材としています。 識別 ID 表示用のラベル 部品の種類 有効 入力 表示 桁数 入力 桁数 データ型 文字種 1 ユーザ名 ラベル - × 18 - 文字列 半角 2 新しいパスワード テキストボックス ○ △ 18 10 文字列 半角 3 再入力パスワード テキストボックス ○ △ 18 10 文字列 半角 4 5 6 7 8 9 10 11 名前（姓） 名前（名） Ｅメールアドレス 電話 住所１ 住所２ 市 県 テキストボックス テキストボックス テキストボックス テキストボックス テキストボックス テキストボックス テキストボックス テキストボックス ○ ○ ○ ○ ○ ○ ○ ○ △ △ ○ ○ ○ ○ ○ ○ 19 19 39 19 39 39 19 3 18 18 38 18 38 38 18 3 文字列 文字列 文字列 文字列 文字列 文字列 文字列 文字列 全角 全角 半角 半角 全角 全角 全角 全角 12 郵便番号 テキストボックス ○ ○ 9 9 文字列 半角 13 国 テキストボックス ○ ○ 14 14 文字列 全角 入力制約 - 出力仕様 - パスワード入力パター パスワード出力パターン ン パスワード入力パター パスワード出力パターン ン Eメール入力パターン 電話番号入力パターン 数字もしくは"-"のみ 共通的な入力制約、 "-"は4文字目のみ 出力仕様はパターン化 - して、パターン名を 記述すると良い。 ＜入力制約の共通仕様のサンプルイメージ＞ パスワード入力パターン：英数字のみ、6桁以上 Eメール入力パターン：英数字、および“.”、“-”、“_”、“@”のみ、 “@”は必ず1文字入力必要 電話番号入力パターン：数字、および“-”のみ Copyright ©2008 IPA 第1部 - 143 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 5.4.1 書き方のコツ 入出力項目 FD5002：「画面の入出力項目について、それぞれ取得方法が明確であり、発注 者が入力するデータとそれ以外から取得するデータとの区別が明確である。このこ とにより、必要な機能及びその内容が明確になり、要件の抜け漏れを防止しやすい。 また、入出力項目の取得方法が明確であるため、画面の操作性の議論や開発範囲 を明確化しやすい。 」の具体例 例えばログイン後の画面が前画面（ログイン画面）で入力したユーザIDからDBを検索して、 ユーザ名を表示する仕様であった場合、入出力項目では次のように記述すると良い 表記例は Java Pet Store* を題材としています。 識別 ID 表示用のラベル 部品の種類 有効 入力 表示 桁数 初期表示 出力仕様 必須 補足 ・取得済みのユー ザ名を表示する 1 ユーザ名 ラベル - × 18 ○ ユーザ名値 - - 2 住所 テキストボックス ○ ○ 39 × - - - この欄には、○、△、×を記入することができる。 ○は常に入力ができる △は利用者権限等、状態によって入力ができる。 ×は常に入力ができない。 Copyright ©2008 IPA 既に前画面でデータベースより取得 済みの内容を出力することが読み 取れる。 第1部 - 144 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 5.4.1 書き方のコツ 入出力項目 FD5003：「ラベル名の命名規則、画面部品の種類の適用ルール（コンボボックス とラジオボタンのどちらを用いるかの定義等）が定義されており、その定義チェックが 容易にできる工夫がされていると、余計な説明が不要となる。さらに仕様のばらつき を抑えることができる。 」の具体例 表記例は Java Pet Store* を題材としています。 ＜画面部品適用ルールのサンプルイメージ＞ 仮に『「言語選択」はコンボボックスを 利用する。』という共通的な画面部品の 適用ルールがあると、入出力仕様個別の 確認が不要となる。 選択候補数 複数選択 画面部品 固定 可能 チェックボックス 不可 ラジオボタン 可能／不可 コンボボックス 変動 Copyright ©2008 IPA 第1部 - 145 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 5.4.1 書き方のコツ 入出力項目 FD5004：「アクション明細や画面遷移が発生する入出力項目に対して記載がある と、アクション明細や画面遷移と連動して仕様を把握し易い。 」の具体例 表記例は Java Pet Store* を題材としています。 識別 表示用のラベル ID 1 ユーザー名 部品の種類 有効 入力 必須 テキストボックス ○ △ ○ 2 パスワード テキストボックス ○ △ ○ 3 ログイン ボタン ○ － － 補足 ・押下後、ペットストアポータル画面 に遷移する。【ログイン】 アクション内容を簡単に記述し、アクション名を記述することで 容易にアクション明細と連動させることができる。 アクション名 関連するアクション明細や画面遷移がある場合、その対応がとれていることを 確認する。 Copyright ©2008 IPA 第1部 - 146 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 5.4.2 確認のコツ 入出力項目 入出力項目の確認のコツは次のとおり。 ＩＤ 内容 FD5005 文章のみの資料となっていると、誤解を招く可能性が高い。視覚的に伝えると直 感的に伝わる。 FD5006 ある軸で分類した業務の流れや権限 等 ごとに仕様が違う場合は、個別に記述 されていると、仕様の抜け漏れがない。 Copyright ©2008 IPA 第1部 - 147 第1部 表現 5.4.2 確認のコツ 入出力項目 FD5005：「文章のみの資料となっていると、誤解を招く可能性が高い。視覚的に 伝えると直感的に伝わる。」の具体例 表記例は Java Pet Store* を題材としています。 イメージを視覚的に表現 して説明すると良い。 識別 表示用のラベル ID 4 名前（姓） 5 名前（名） Copyright ©2008 IPA 更新モードの場合 照会モードの場合 部品の種類 テキストボックス テキストボックス 有効 入力 ○ ○ △ △ 第1部 - 148 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 5.4.2 確認のコツ 入出力項目 FD5006：「ある軸で分類した業務の流れや権限 等 ごとに仕様が違う場合は、個 別に記述されていると、仕様の抜け漏れがない。 」の具体例 表記例は Java Pet Store* を題材としています。 識別 ID 13 国 14 言語 表示用のラベル 部品の種類 テキストボックス コンボボックス 初期表示 有効 入力 ○ ○ × ○ 国項目に“日本”が入力されたら“日 本語”を初期表示とする。“日本”以 ○ 外が入力されたら“英語”を初期表示 とする。 ○ - 条件毎に仕様を記述すると良い。 Copyright ©2008 IPA 第1部 - 149 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 コラム5 入出力項目 入出力チェックのパターンをあらかじめ決めておく 文字入出力フィールドの文字揃えを規定する 入力形式のパターンをあらかじめ決めておく 入出力項目のデータ元を表示する 入出力項目に画面遷移やアクション明細との関連を記述する 入出力項目と画面レイアウトで画面部品の識別IDを一致させる Copyright ©2008 IPA 第1部 - 150 第1部 表現 コラム5 入出力項目 入出力チェックのパターンをあらかじめ決めておく（1/4） 状況 画面から入力する項目がいろいろある。 項目に応じてチェックを行う必要がある。 関連するコツ FD5001 補足 複数画面に共通する標準チェックと、特定画面に固有のその他チェックの2系統 に分けた。 標準チェックのパターンをあらかじめ決めておくことで、入力チェックの確認を効 率的に行え、仕様のばらつきを抑えることができた。 Copyright ©2008 IPA 第1部 - 151 第1部 表現 コラム5 入出力項目 入出力チェックのパターンをあらかじめ決めておく（2/4） 具体例 標準チェックのパターンをあらかじめ決めている。 標準チェックの方式を あらかじめ決めておく 標準チェックの例 チェックID チェック名 SC001 必須入力チェック SC002 必須選択チェック SC003 文字列長チェック SC004 SC005 SC006 チェックの種類 － － － 説明 入力が必須な入力フィールドに対し、入力が無い場合エラーとする。 選択が必要な選択フィールドに対し、選択が無い場合エラーとする。 入力値のバイト数をチェックする。入力値のバイト数がDBのカラムサ イズを超える場合エラーとする。 入力値の中に禁止文字が入力されている場合エラーとする。 禁止文字チェック － 指定文字列チェック 半角文字チェック 入力された文字列が半角文字のみかチェックする。 全角文字チェック 入力された文字列が全角文字のみかチェックする。 数値(金額)チェック 入力された文字列が「-」、「,」、半角数値のみかチェックする。 数値(個数)チェック 入力された文字列が半角数値かチェックする。 入力された文字列が「YYYY/MM/DD形式」かチェックする。 日付チェック 入力値が数値または、日付の場合、指定された範囲内で入力されて 範囲チェック － いるかチェックする。範囲外の入力がある場合、エラーとする。 指定文字列チェックには、 具体的なチェック方法が複数ある。 Copyright ©2008 IPA 第1部 - 152 第1部 表現 コラム5 入出力項目 入出力チェックのパターンをあらかじめ決めておく（3/4） 表記例は Java Pet Store* を題材としています。 具体例 あらかじめ決めた入力チェックパターンに基づき、入出力項目を定義している。 チェックを次の2系統に分けている。 •標準チェック：あらかじめ決めたチェック方式について、 該当箇所に実施の有無を記述する。 •その他チェック：画面に固有なチェックを別に定義し、 該当するチェックルールをIDで指定する。 標準チェック 入出力項目 識別 ID 表示用のラベル 1 ユーザ名 2 新しいパスワード 3 再入力パスワード 4 名前 5 Ｅメールアドレス 6 電話 7国 8 生年月日 ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ 入力チェック 指定文字列 必須入力 必須選択 文字列長 禁止文字 SC005 SC001 SC002 SC003 SC004 半角 全角 ・・・ ○ － ○ ○ ○ － ・・・ ○ － ○ ○ ○ － ・・・ ○ － ○ ○ ○ － ・・・ ○ － ○ － － ○ ・・・ ○ － ○ － ○ － ・・・ － － － ○ ○ － ・・・ － ○ － － － － ・・・ ○ － － － － － ・・・ ○ 実施する － 実施しない Copyright ©2008 IPA その他チェック 範囲 SC006 － － － － － － － ○ その他 － chk001,chk002 chk001,chk002 － － － － － その他チェックの定義は次ページに示す 第1部 - 153 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 コラム5 入出力項目 入出力チェックのパターンをあらかじめ決めておく（4/4） 表記例は Java Pet Store* を題材としています。 具体例 あらかじめ決めた入力チェックパターンに基づき、入出力項目を定義している。 前ページの入出力項目 識別 ID 表示用のラベル 1 ユーザ名 2 新しいパスワード 3 再入力パスワード 4 名前 5 Ｅメールアドレス 6 電話 7国 8 生年月日 ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ 入力チェック 指定文字列 必須入力 必須選択 文字列長 禁止文字 SC005 SC001 SC002 SC003 SC004 半角 全角 ・・・ ○ － ○ ○ ○ － ・・・ ○ － ○ ○ ○ － ・・・ ○ － ○ ○ ○ － ・・・ ○ － ○ － － ○ ・・・ ○ － ○ － ○ － ・・・ － － － ○ ○ － ・・・ － ○ － － － － ・・・ ○ － － － － － ・・・ チェックID チェック名 chk001 パスワード一致チェック chk002 Copyright ©2008 IPA パスワード強度チェック 範囲 SC006 － － － － － － － ○ その他 － chk001,chk002 chk001,chk002 － － － － － その他チェックに記載した chk001とchk002の チェック内容について 別の表で定義する チェック内容 新しいパスワードと再入力パスワードが一致していることを確認 する。条件を満たしていない場合、エラーとする。 パスワードに英字、数字、記号の3種類が含まれていることを確 認する。条件を満たしていない場合、警告を出す。 第1部 - 154 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 コラム5 入出力項目 文字入出力フィールドの文字揃えを規定する。（1/2） 状況 入出力項目一覧において、文字揃え(右寄せ、中央、左寄せ、折り返し）が 混在している。 関連するコツ なし 補足 文字揃えに関し、その配置を明示的に表すことにより、発注者／開発者間 において誤解をなくすことが可能となる。 なお、文字揃えについては、工程成果物の構成要素としては記述されてい ない。 Copyright ©2008 IPA 第1部 - 155 第1部 表現 コラム5 入出力項目 文字入出力フィールドの文字揃えを規定する。（2/2） 具体例 入出力項目の領域内表示方法 I No 画面項目名 画面項目ID / 部品 O 列種別 文字種 種別 ｵﾌﾟｼｮﾝ 列幅 タイプ 文字数 文字配列 ソート 1 事務所名 … … … … … … … … 左寄せ … 2 事務所種別 … … … … … … … … 中央 … 3 賃料 … … … … … … … … 右寄せ … 文字揃えを記述することで画面レイアウトで わかりにくい文字の配置が明確にできる Copyright ©2008 IPA 第1部 - 156 第1部 表現 コラム5 入出力項目 入力形式のパターンをあらかじめ決めておく（1/2） 状況 マウス選択、キーボード入力など、画面から入力する方法がいろいろある。 関連するコツ なし 補足 入力形式のパターンをあらかじめ定義した。 入力形式のパターンをあらかじめ決めておくことで、入力形式の確認を効率的に 行え、仕様のばらつきを抑えることができた。 入力形式とは、使う人の視点から、情報の入力の仕方を整理したものである。 入力形式は、部品の種類（コンボボックス、ラジオボタンなど）と重複する場合もあ る。なお、本事例では、部品の種類は省略した。 Copyright ©2008 IPA 第1部 - 157 第1部 表現 コラム5 入出力項目 表記例は Java Pet Store* を題材としています。 入力形式のパターンをあらかじめ決めておく（2/2） 具体例 入力形式のパターンをあらかじめ決めている。 入力形式をあらかじめ定義し、 入出力項目の補足資料とする あらかじめ定義した入力形式 入力形式名 入力形式記号 説明 表示 STR 取得したデータや情報を表示のみ行います。 1行テキストフィールド TXT テキスト入力が可能です。金額、名称等を入力します。 複数テキストフィールド TXA 複数行のテキスト入力が可能です。説明文などを入力します。 ボタン BTN ボタンです。それぞれ固有の処理を行います。 アイコン ICN 処理を表すイメージです。それぞれ固有の処理を行います。 ラジオボタン RDO 複数の内、どれかひとつがチェック可能です。 チェックボックス CHK オン・オフの値を持つためのチェックが可能です。 コンボボックス CNB 選択肢から一つ選択することが可能です。 タブ TAB 画面を切り替えることが可能です。 動的選択肢 DAL 入力された内容を元に動的に選択肢を変更します。 入出力項目 識別 表示用のラベル ID 1 ユーザ名 2 新しいパスワード 3 再入力パスワード 4 名前 5 Ｅメールアドレス 6国 7 生年月日 8 登録 Copyright ©2008 IPA ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ 入力形式 STR TXT TXT TXT TXT CNB TXT BTN ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ ・・・ 入力形式の項目を追加し、 あらかじめ定義した 入力形式を参照する。 確認を効率的に行え、 仕様のばらつきを抑える ことができる。 第1部 - 158 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 コラム5 入出力項目 入出力項目のデータ元を表示する。（1/2） 状況 利用者が入力する項目なのか、システムの処理によって設定される項目な のかを区別することにより、利用者の操作イメージを明確にする必要がある。 関連するコツ FD5002 補足 画面からの入力データを区別することによって発注者側の操作イメージを明 確にできた。 工程成果物の構成要素には、データ元に対応するカラムは定義されていな かった。 Copyright ©2008 IPA 第1部 - 159 第1部 表現 コラム5 入出力項目 表記例は Java Pet Store* を題材としています。 入出力項目のデータ元を表示する。（2/2） 具体例 入出力項目の一覧表で発生源を表示する。 画面項目 項 番 項目名 種別 幅 最大 型 １ ログインユーザ I/O １０ １０ ２ パスワード I ２０ ３ 新パスワード I ４ パスワード確 認 ５ IME 必 須 フォー マット チェッ ク 半角英数 無効 ○ ○ １ ２０ 半角英数 無効 ○ ○ ２ ２０ ２０ 半角英数 無効 ○ ○ ３ I ２０ ２０ 半角英数 無効 ○ ○ ４ 氏名 I/O ２０ ２０ 全角 ６ 氏名（カナ） I/O １０ １０ 全角カナ 有効 ○ ○ ６ 氏名（カナ）を表示す る ７ 生年月日 I/O １０ ８ 半角英数 無効 ○ ○ ７ 生年月日を表示する ８ 住所 I/O ４０ ４０ 全角 有効 ○ ○ ８ 住所を表示する ９ 電話番号 I/O １２ １２ 半角英数 無効 ○ ○ ９ 電話番号を表示する Copyright ©2008 IPA デ フ ォ ル ト 値 表 示 フォー マット タ ブ 順 データ元 備考 値：ユーザマスタ、ユーザID 表示：ユーザマスタ、ユーザ 名 ログインユーザを表 示する データ元の欄を設けている。 データ元の項目の書き方も良い。 ５ 氏名を表示する 第1部 - 160 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 コラム5 入出力項目 入出力項目に画面遷移やアクション明細との関連を記述する（1/2） 状況 旧システムからのリプレース開発である。 旧システムと新システムの共通部分と差分部分を確認する必要がある。 関連するコツ FD5004 補足 入出力項目に対して遷移先、アクション明細のIDを記述した。 入出力項目と遷移先、アクション明細との関連が明確になった。 旧システムとの対応付けをしやすくなった。 Copyright ©2008 IPA 第1部 - 161 第1部 表現 コラム5 入出力項目 入出力項目に画面遷移やアクション明細との関連を記述する（2/2） 具体例 遷移先やアクション明細のIDを記述し、画面遷移、アクション明細との関連を明確にす る。 画面遷移、アクション明細の確認用に追加した列 識別ID 表示用ラベル 部品の種類 遷移先 アクションID 1 変更 ボタン 自画面 事務所名変更画面出力 op03M04_02 2 削除 ボタン なし 事務所名削除 op03M04_03 3 終了 ボタン なし 事務所名閲覧終了 op03M04_04 遷移先が明確に 記述されている Copyright ©2008 IPA アクション名 アクション明細のIDが記述されており、 アクション明細との関連が明確である。 第1部 - 162 第1部 表現 コラム5 入出力項目 入出力項目と画面レイアウトで画面部品の識別IDを一致させる（1/2） 状況 入出力項目と、画面レイアウトの両方で同一の画面部品の定義を行ってい る。 関連するコツ なし 補足 入出力項目で定義している画面部品が、画面レイアウトのどの画面部品に 相当するのか説明を省いても、発注者に理解してもらうことができた。 Copyright ©2008 IPA 第1部 - 163 第1部 表現 コラム5 入出力項目 入出力項目と画面レイアウトで画面部品の識別IDを一致させる（2/2） 具体例 入出力項目において、画面レイアウトで定義している画面部品の定義を行う場合、画 面レイアウトの画面部品と同じ識別IDを記述している。 表記例は Java Pet Store* を題材としています。 識別IDを合致させて、特定を容易に すると良い。特に複雑なレイアウトや ラベルのない画面部品の場合に有効。 名前 姓 名 ふりがな 姓 名 メールアドレス 住所 郵便番号 都道府県名 市町村名 識別ID＝8 町名番地 識別ID＝9 識別 項目名 ID 8 町名番地１ 9 町名番地２ Copyright ©2008 IPA 部品の種類 テキストボックス テキストボックス 有効 入力 ○ ○ ○ ○ 表示 桁数 39 39 入力 桁数 38 38 第1部 - 164 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 第6章 アクション明細 アクション明細 ここでは「アクション明細」とは何かを定義し、構成要素と表現例について解説す る。 発注者とのコミュニケーションを促進するための、「アクション明細」の効果的な書 き方のコツを解説する。 発注者とのレビューに備えて「アクション明細」の内容を確認するコツを解説する。 Copyright ©2008 IPA 第1部 - 165 第1部 表現 6.1 工程成果物の定義(1/2) アクション明細 アクション明細では、次の情報を記述範囲とする。 画面単位にボタンを押すなどのそれぞれのイベントに対して発生するアクションの動作を 説明する。 ¾アクションとは、画面遷移に伴って起動される動作 メニューやボタンなど画面上で実行することのできる機能単位 （キーボードでの入力、マウスでの操作、 など） ¾アクション明細とは、画面遷移に伴って起動させる動作を具体的に説明した工程成果物 zアクション及び、アクションの処理内容と入出力および条件 z複数の入力制約に関する動作・イベント zユーザ操作の観点からみた処理の具体的な内容（DB検索、DB登録、絞込み など） 入力制約について単一項目の外部仕様は対象外とする （参考「5．入出力項目」） Copyright ©2008 IPA 第1部 - 166 第1部 表現 6.1 工程成果物の定義(2/2) アクション明細 表記例は Java Pet Store* を題材としています。 イベントとアクション ¾イベント：画面の遷移を引き起こすきっかけとなるもの ¾アクション：画面遷移に伴って起動される動作 ※イベントとアクションは”第2章画面遷移 2.2工程成果物の構成要素” にて定義済 例 検索結果表示画面 検索画面 [検索ボタン押下] 検索処理 検索ボタンを押す [検索ボタン押下] イベント発生 検索処理 アクションが開始 検索結果表示 画面に遷移 例 検索画面 検索結果表示画面 [30秒無応答] エラー画面 表示処理 ［30秒間無応答］ イベント発生 Copyright ©2008 IPA エラー画面表示 処理が開始 ERROR： もう一度操作を やり直してください エラー画面に遷移 第1部 - 167 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 6.2 工程成果物の構成要素 分類 共通情報 書誌情報 項 記述内容 記述内容の説明 番 プロジェクト名、システム名、工程名、ドキュメントID、ドキュメント名、作者名、作成日付、バージョン、更新者、更 新日付 1 画面ID 対象となる画面のID 2 画面の名称 対象となる画面の名称 3 概要 画面の機能の概要を説明する アクションを識別する名称 4 アクション名 ・検索1、検索2、戻る1 ・ダウンロード1 など 5 イベント名 アクションの構 成要素 アクションの処理 概要 7 入力 6 8 アクションの処理 詳細 遷移先画面名称 (ID) 10 出力 9 Copyright ©2008 IPA アクション明細 画面の遷移を引き起こすきっかけとなるものの名称 ・検索ボタン押下 ・検索 ・○○リンク押下 ・30秒間無応答 など アクションの処理概要をわかりやすい日本語の表現で記述する アクションの処理について入力となる情報を記述する （検索するテーブル名 など） アクションの処理の詳細について記述する 以下の内容を盛り込む ①画面の項目の入力値など、条件に応じてアクションが変わる場合の具体的な条件を表 現する ②検索するテーブル 処理後に遷移する画面の名称 アクションの処理によって出力する情報を記述する 第1部 - 168 第1部 表現 6.3 表記例（サンプル） アクション明細 表記例は Java Pet Store* を題材としています。 アクション明細の表記例を示す。 プロジェクト名 ドキュメントID ドキュメント名 画面ＩＤ 概要 ID A-05-001 A-05-002 A社殿向けJava Pet Store開発 システム名 JPS0001 作成者 Java Pet Store外部設計書 更新者 S-05-01 画面の名称 ペット購入システムを利用するために必要なログイン画面 アクション名 イベント名 ログイン ログインボタン 入力されたUsername Username とPasswordをもとに顧 押下 Password 客データを検索し、 ユーザ情報画面を表 顧客情報テーブル 示する。 ユーザ登録 アクションの処理概要 入力 「Register ユーザ登録画面を表 Now!」リンク押 示する。 下 工程 作成日付 更新日付 バージョン 外部設計 2007/1/12 遷移先画面名称（Ｉ 出力 Ｄ） ①UsernameとPasswordの入力チェック - ②検索処理 顧客情報テーブルから該当するユーザを検 索する ③-1 合致するデータが存在した場合 ペットストアポータル画面に遷移する - ③-2 合致するデータが存在しなかった場合 エラーメッセージを表示する - - - - ペットストアポータ ル画面(S-00-01) 顧客情報テーブ ル エラーメッセージ - ①ユーザ登録画面を初期化する - 分類テーブル - Copyright ©2008 IPA ユーザログイン画面 アクションの処理詳細 言語テーブル 【アクションＩＤ】（任意） アクションに対してＩＤをつけることもよい （アクション名が長くなる などの場合） Java Pet Store 佐藤一郎 - ②利用環境情報の設定 言語と分類をリスト選択できるようにする ③-1 言語と分類がリストより選択された場 合 ユーザ登録画面を表示する ③-2 リストから選択されなかった場合 エラーメッセージを表示する - - - - ユーザ登録画面 (S-05-02) エラーメッセージ - 第1部 - 169 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 6.4 設計書記述のポイント アクション明細 この節では、アクション明細固有の設計書記述やその確認のポイントを記述する。 6.4.1 6.4.2 Copyright ©2008 IPA 書き方のコツ 確認のコツ 第1部 - 170 第1部 表現 6.4.1 書き方のコツ アクション明細 アクション明細の書き方のコツは次のとおり。 ＩＤ 内容 FD6001 あるまとまった情報項目群があれば、それらを対象としたアクションの概要を記述する。 FD6002 アクションの処理概要と処理詳細を分けることにより、何の処理をするのか理解しやすい。 FD6003 条件による場合わけが多い場合やアクションの処理が複雑な場合は「アクションの詳細」欄に 大量に記述が必要になってしまい、確認ポイントがぼやける。 FD6004 場合わけが発生する場合は階層的に示し、どこで処理が分岐しているのかを明確に示すと、 場合わけの全体像が想起されるため、過不足や問題点の気づきを促すことが出来る。 FD6005 あいまいな表現(処理単位，タイミング等)があり処理内容が不明だと、混乱する。設計意図を 正しく伝えられずに誤解を招く。 FD6006 実装よりの表現(手続き的な詳細の仕様)となっていると、実際の業務仕様を想起できない。理 解できない。 Copyright ©2008 IPA 第1部 - 171 第1部 表現 6.4.1 書き方のコツ アクション明細 FD6001：｢あるまとまった情報項目群があれば、それら対象としたアクションの概 要を記述する」 （“｢顧客情報｣を登録する”など。｢｣内があるまとまった情報項目群を示す場合。）（但し、処 理単位が情報項目群である場合のみ） 表記例は Java Pet Store* を題材としています。 画面レイアウト 望ましくない例 書誌情報 新規ユーザ登録 氏名 ① 郵便番号 ② ③ 住所 ID アクション名 イベント名 アクションの処理概要 A-001 顧客情報登 録 登録ボタン押 下 入 力され た情 報をもとに「氏 名」、「郵便番号」、「住所」、 「 電 話 番 号 」 、 「 FAX 番 号 」 、 「メールアドレス」を登録する FAX番号 ④ ⑤ あるまとまった情報項目群があるにもかかわらず、 単項目を列挙して概要を記述しているため、 一見してわかりずらい。 メールアドレス ⑥ 望ましい例 電話番号 顧客情報 まとまった情報の例 「顧客情報」 Copyright ©2008 IPA 登録 ID アクション名 イベント名 アクションの処理概要 A-001 顧客情報登 録 登 録ボタン 押 下 入 力され た情 報をもとに 「顧客情報」を登録する あるまとまった情報項目群で概要を 記述しているためすっきりして見える。 第1部 - 172 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 6.4.1 書き方のコツ アクション明細 FD6002：｢アクションの処理概要と処理詳細を分けることにより、何の処理をする のか理解しやすい。｣ わかりやすくするためには、次の点に注意する。 ¾アクションの処理を概要と詳細に分け、ひとまとめにして記述しない 表記例は Java Pet Store* を題材としています。 望ましい例 望ましくない例 アクションの処理概要 入力された顧客情報の入力チェック を行い、次に入力された情報をもと に顧客情報テーブルを検索。データ が存在しない場合には顧客情報を 登録し顧客登録画面を初期表示す る 。 デ ー タ が 存 在 する 場合に は エ ラーメッセージを表示する。 アクションの処理概要 アクションの処理詳細 入力された情報をもとに 顧客情報を登録する ①顧客情報の入力チェック ②検索処理 入力された情報をもとに顧客情報テーブル を検索する 概要と詳細に分ける ことで分かり易くなる ③-1 合致するデータが存在しない場合 顧客情報を登録し、顧客登録画面を初期 表示する ③-2 合致するデータが存在した場合 エラーメッセージを表示する 処理の漏れがないことを確認すること にも有効。【FD6004参照】 Copyright ©2008 IPA 第1部 - 173 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 6.4.1 書き方のコツ アクション明細 FD6003：｢条件による場合分けが多い場合やアクションの処理が複雑な場合は ｢アクションの詳細｣欄に大量に記述が必要になってしまい、確認ポイントがぼやけ る。｣ わかりやすくするためには、次の点に注意する。 ¾記述内容が大量になる場合は１つの「アクション明細定義」に無理に書かずに「アクション明細 定義」とは別の補足資料に分けて条件や処理を整理すること 望ましくない例① アクション明細定義 望ましくない例② 表記例は Java Pet Store* を題材としています。 アクション明細定義 アクション名 アクションの処理詳細 アクション名 アクションの処理詳細 出力 ペットの在庫 管理 ゴールデンレトリバーの注文が１匹で、在 庫が２匹以下なら発注Ａをかけ、もっと在庫 があれば出荷と発注Ｂを行う。また、注文 が2匹で、在庫が2匹以下なら発注Ｃをかけ、 それ以外なら出荷と発注Ｂを行う。さらに、 注文が2匹より多くなると性別を指定するこ とが出来、牝を指定して在庫が2匹以下な ら発注Ｄをかけ、在庫が5匹以下なら出荷 と発注Ｅをかける。一方で、指定が牡の場 合、在庫が2匹以下なら発注Ｆをかけ、在 庫が5匹以下なら出荷と発注Ｇをかける。 なお、性別を問わず、在庫が5匹を超えて いる場合は出荷する。 ペットの在庫 管理 ①ゴールデンレトリバーの注文数が１匹で、かつ、在庫数が２匹以下の場合 発注A ②ゴールデンレトリバーの注文数が１匹で、かつ、在庫数が２匹を超える場合 出荷・発注B ③ゴールデンレトリバーの注文数が２匹で、かつ、在庫数が２匹以下の場合 発注C ④ゴールデンレトリバーの注文数が２匹で、かつ、在庫数が２匹を超える場合 出荷・発注B ⑤ゴールデンレトリバーの注文数が２匹を超え、かつ、性別指定が牝で、在庫数が２匹以下の場合 発注D ⑥ゴールデンレトリバーの注文数が２匹を超え、かつ、性別指定が牝で、在庫数が５匹以下の場合 出荷・発注E ⑦ゴールデンレトリバーの注文数が２匹を超え、かつ、性別指定が牡で、在庫数が２匹以下の場合 発注F ⑧ゴールデンレトリバーの注文数が２匹を超え、かつ、性別指定が牡で、在庫数が５匹以下の場合 出荷・発注G ⑨ゴールデンレトリバーの注文数が２匹を超え、かつ、在庫数が５匹を超える場合 出荷 記述が大量でポイントがぼやける。 Copyright ©2008 IPA 条件分けが整理しきれていなくて、ポイントがぼやける。 次へ続く 第1部 - 174 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 6.4.1 書き方のコツ アクション明細 望ましい例① 望ましい例② アクション明細定義 アクション明細定義 「出力」はアクションの処理によって 出力される情報を明記する。 「アクション」と混同しないように注意。 アクション 名 アクションの処理詳細 アクション 名 アクションの処理詳細 出力 ペットの 在庫管 理 ①ゴールデンレトリバーの注文数、性 別指定、在庫数の別に指示する ペットの在 庫管理 ①ゴールデンレトリバーの注文数が１匹の場合で、 発注A 在庫数が２匹以下の場合 在庫数が２匹を超える場合 （補足資料を参照のこと） 出荷・発注B ②ゴールデンレトリバーの注文数が２匹の場合で、 アクション明細定義（補足資料） 注文数 性別指定 在庫数 ≦ ２匹 発注A － ＞ ２匹 出荷・発注B － ≦ ２匹 発注C － ＞ ２匹 出荷・発注B ≦ ２匹 発注D ≦ ５匹 出荷・発注E ≦ ２匹 発注F ≦ ５匹 出荷・発注G ＞ ５匹 出荷 ③ゴールデンレトリバーの注文数が２匹を超え、 在庫数が２匹以下 在庫数が５匹以下 性別指定が牡である場合で ２匹 在庫数が２匹以下 在庫数が５匹以下 牡 － 続き Copyright ©2008 IPA 発注D 性別指定が牝である場合で １匹 ＞ ２匹 出荷・発注B 在庫数が２匹を超える場合 出力 － 牝 発注C 在庫数が２匹以下の場合 在庫数が５匹を超える場合 出荷・発注E 発注F 出荷・発注G 出荷 図表（望ましい例①）にしたり、 詳細を分ける（望ましい例②）などの 工夫が必要。 論理式で表現すると 網羅性の確認もしやすい。 表記例は Java Pet Store* を題材としています。 第1部 - 175 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 6.4.1 書き方のコツ アクション明細 FD6004：｢場合分けが発生する場合は階層的に示し、どこで処理が分岐している のかを明確に示すと、場合わけの全体像を想起されるため、過不足や問題点の気 づきを促すことができる。｣ わかりやすくするためには、次の点に注意する。 ¾「場合」分けは枝番号をつけて表記する 表記例は Java Pet Store* を題材としています。 望ましい例 望ましくない例 アクションの処理概要 アクションの処理詳細 アクションの処理概要 アクションの処理詳細 入力された情報をもとに 顧客情報を登録する ①顧客情報の入力チェック 入力された情報をもとに 顧客情報を登録する ①顧客情報の入力チェック ②検索処理 ②検索処理 入力された情報をもとに顧客情報テーブル を検索し 入力された情報をもとに顧客情報テーブル を検索し ③ 合致するデータが存在しない場合 ③-1 合致するデータが存在しない場合 顧客情報を登録し、顧客登録画面を初期 表示する 顧客情報を登録し、顧客登録画面を初期 表示する ④ 合致するデータが存在した場合 ③-2 合致するデータが存在した場合 エラーメッセージを表示する エラーメッセージを表示する 枝番をつけることで、 場合わけを表現する。 Copyright ©2008 IPA 第1部 - 176 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 6.4.1 書き方のコツ アクション明細 FD6005：｢曖昧な表現（処理単位，タイミング等）があり処理内容が不明だと、混 乱する。設計意図を正しく伝えられずに誤解を招く。｣ わかりやすくするためには、次の点に注意する。 表記例は Java Pet Store* を題材としています。 ¾処理内容、処理の順序、タイミング・条件 などは明確に記述すること 遷移先を特定するため、 遷移先画面名称を 明記する。 「チェック」が「顧客情報」の単位 （処理単位）で行うことを明記する。 望ましい例 処理の順序を番号をつけて明記する。 （場合分けは【FD6004】を参照） 入力された情報をもとに 顧客情報を登録する 望ましくない例 アクションの処理概要 入力された情報をもとに 顧客情報を登録する アクションの処理概要 アクションの処理詳細 情報の入力チェック 検索処理 入力された情報をもとに顧客情報テーブルを検索し 合致する顧客情報が存在しない場合 顧客情報を登録し、顧客登録画面を元に戻す アクションの処理詳細 遷移先画面名称 (ID) ① 顧客情報の入力チェック ― ② 検索処理 入力された情報をもとに顧客情報テーブルを検索 し ③-1 合致する顧客情報が存在しない場合 ユーザ登録画面 顧客情報を登録し、顧客登録画面を初期表示する （S-05-02） ③-2 合致する顧客情報が存在した場合 エラーメッセージを表示する ④ 例外が発生した場合は初期表示する 上記以外の場合、エラーメッセージを表示する ― ユーザ登録画面 （S-05-02） 例外が発生した場合は元に戻す 「元に戻す」は「初期表示する」と いう具体的な処理内容を明記する。 Copyright ©2008 IPA ― 「合致する顧客情報が存在 した場合」と条件・タイミン グを明記する。 第1部 - 177 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 6.4.1 書き方のコツ アクション明細 FD6006：｢実装よりの表現（手続き的な詳細の仕様）となっていると、実際の業務 仕様を想起できない。理解できない。｣ わかりやすくするためには、次の点に注意する。 ¾表現・用語などはベンダと事前に規定および確認しておくこと 表記例は Java Pet Store* を題材としています。 望ましい例（業務上の表現） 望ましくない例（実装よりの表現） アクションの処理概要 アクションの処理詳細 アクションの処理概要 アクションの処理詳細 入力されたデータをもと に顧客情報テーブルに Updateする ①入力データの入力チェック 入力された情報をもとに 顧客情報を登録する ①顧客情報の入力チェック ② Search処理 入力されたデータをもとに顧客情報テー ブルをSearchする 入力された情報をもとに顧客情報テーブルを 検索する ③アンマッチの場合 ③合致する顧客情報が存在しない場合 データをUpdateし、顧客登録画面をクリア 表示する 顧客情報を登録し、顧客登録画面を初期表 示する ④Matchするデータが存在した場合 ④合致する顧客情報が存在した場合 ⑤ Exception が 発 生 し た 場 合 は ロ ー ル バックする ⑤例外が発生した場合は初期表示する。 上記のほかの表現例 Copyright ©2008 IPA ②検索処理 望ましくない例 望ましい例 トランザクション 処理 コミット 確定、決定 クリック （ボタンを）押す、選択 第1部 - 178 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 6.4.2 確認のコツ アクション明細 アクション明細の確認のコツは次のとおり。 ＩＤ 内容 FD6007 条件による場合分けが多い場合でも全て記載することで、機能の曖昧な部分を残さず確認で きる。 FD6008 画面遷移のイベントと名称を統一することで、遷移にまつわるアクションの抜け漏れをチェック しやすい。 Copyright ©2008 IPA 第1部 - 179 第1部 表現 6.4.2 確認のコツ アクション明細 FD6007：｢条件による場合分けが多い場合でも全て記載することで、機能の曖昧 な部分を残さず確認できる。｣ わかりやすくするためには、次の点に注意する。 ¾発生しうるパターンを想定して確認を行うこと ¾ 図表にすると漏れに気づきやすくなり、全てを記載することに有効 場合分けが多い場合、補足資料として整理する。 《参考：FD6003》 アクション明細定義 アクション 名 アクションの処理詳細 ペットの 在庫管 理 ①ゴールデンレトリバーの注文数、性 別指定、在庫数の別に指示する アクション明細定義（補足資料） 注文数 性別指定 在庫数 表記例は Java Pet Store* を題材としています。 出力 － ≦ ２匹 発注A － ＞ ２匹 出荷・発注B － ≦ ２匹 発注C － ＞ ２匹 出荷・発注B ≦ ２匹 発注D ≦ ５匹 出荷・発注E ≦ ２匹 発注F ≦ ５匹 出荷・発注G － ＞ ５匹 出荷 － － １匹 （補足資料を参照のこと） ２匹 牝 ＞ ２匹 異常なパターンも発生しうる ことを想定しておくことが必要。 0 （未入力） Copyright ©2008 IPA 牡 エラーメッ セージ 第1部 - 180 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 6.4.2 確認のコツ アクション明細 FD6008：｢画面遷移のイベントの名称を対応させることで、遷移にまつわるアク ションの抜け漏れをチェックしやすい。｣ わかりやすくするためには、次の点に注意する。 ¾画面遷移図のアクション、イベントとアクション明細のアクション名、イベント名を対応付けて表 示する。 画面遷移図 【イベント】と名称を統一 しておくと抜け漏れが チェックしやすい 書誌情報 表記例は Java Pet Store* を題材としています。 《開始点》 アクション明細 初期化 初期化 《終了点》 [終了] [戻る] アクション名 イベント名 A-001 検索処理 検索 A-002 後ページ検 索処理 次ページ A-003 前ページ検 索処理 前ページ 処理終了 処理終了 ペット検索画面 アクションの 処理概要 一致しているか？ [検索] 検索処理 検索処理 [次ページ] ペット検索結果表示画面 後ページ 後ページ 検索処理 検索処理 一致しているか？ 次を検索 一致しているか？ [前ページ] ID 前ページ 前ページ 検索処理 検索処理 前を検索 Copyright ©2008 IPA 第1部 - 181 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 コラム6 アクション明細 アクションとイベントを対応させて記述する。 Copyright ©2008 IPA 第1部 - 182 第1部 表現 コラム6 アクション明細 アクションとイベントを対応させて記述する。（1/2） 状況 画面遷移と合わせてアクション明細を記述する場合。 関連するコツ FD6008 補足 アクションの発生源となるイベントを明確にすることで、抜け漏れなどを発見 しやすくなる。 Copyright ©2008 IPA 第1部 - 183 第1部 表現 コラム6 アクション明細 アクションとイベントを対応させて記述する。 （2/2） 具体例 アクション明細にイベント名とアクション名を合わせて記述する。 アクションとイベントを区別して並べることで、 動作内容とその発生源を明確にしている。 アクション明細 項 番 １ アクション名 住所検索 イベント名 住所検索ボタン押下 アクションの処理概要 郵便番号に該当する住所を検索し、該当がある場合は住所欄に結 果を表示。 イベントは通常ユーザの操作等によって発生する。 例えば画面の検索ボタンを押す操作を行うと[検索ボタン押下]というイベントが発生する。 イベントの発生条件が複雑な場合は イベントの発生する条件とそれによるイベントやアクションの関係を対応する画面レイアウトや画面遷移の補足資料に明記する。 イベントは人間の操作以外にも、ある時間が来ることによって（例えば決まった日時など）発生するものがある。 Copyright ©2008 IPA 第1部 - 184 第1部 表現 第7章 工程成果物間の関連 工程成果物の関連 ここでは「工程成果物間の関連」について解説する。 発注者とのコミュニケーションを促進するための、 「工程成果物間の関連」の効 果的な書き方のコツを解説する。 発注者とのレビューに備えて「工程成果物間の関連」の内容を確認するコツを解 説する。 Copyright ©2008 IPA 第1部 - 185 第1部 表現 7.1 設計書記述のポイント 工程成果物の関連 この節では、工程成果物間の関連した設計書記述やその確認のポイントを記述 する。 遷移は発注者にわかりやすい書き方とし、アクション明細はより詳細な記述をす ることを前提とする。 7.1.1 7.1.2 Copyright ©2008 IPA 書き方のコツ 確認のコツ 第1部 - 186 第1部 表現 7.1.1 書き方のコツ 工程成果物の関連 工程成果物間に関連する書き方のコツは次のとおり。 ID 内容 FD7001 例えばどのような値を入力するのか、具体例を示し、画面レイアウトと入出力項目 の間で同期が取れていることを確認することで、制約条件の抜け漏れを防げる。 FD7002 画面レイアウトとアクション明細の間で記載する定義内容が明確に切り分けられて いない場合、重複などにより、確認ポイント（発注者に確認してもらう主要な内容） がぼやける。 FD7003 適切な量（機能別、分類別等）に分類され、理解しやすい順序で記述されていると、 画面仕様の重複や抜け漏れの確認や、画面仕様の理解が容易になる。これによ り、発注者が画面仕様を理解しやすくなり、レビューにおいてより本質的な確認を 行うことができる。また、機能別、分類別等 の区別もなく、ランダムに画 面一覧が記述されていると、画面の抜け漏れや重複の確認が困難となる。 FD7004 業務の流れや権限等ごと仕様が違う場合は、個別に記述されていると、仕様の抜 け漏れがない。 Copyright ©2008 IPA 第1部 - 187 第1部 表現 7.1.1 書き方のコツ 工程成果物の関連 FD7001：「例えばどのような値を入力するのか、具体例を示し、画面レイアウトと 入出力項目の間で同期が取れていることを確認することで、制約条件の抜け漏 れを防げる。」 1. 画面レイアウトと入出力項目にて、成功例・失敗例を提示する。 Copyright ©2008 IPA 第1部 - 188 第1部 表現 7.1.1 書き方のコツ 工程成果物の関連 表記例は Java Pet Store* を題材としています。 成功例・失敗例を提示する 成功する例を示す場合 ※入力したデータの内容によって、次に進む画面や、メッセージ表示等の動作が変わる場合があり、そう した仕様を確認する必要がある場合には、成功例、失敗例のデータ例を記載しておくと確認しやすい。 画面レイアウト ユーザ名とパスワードを入力してください！ 1 ユーザ名： 値 パスワード： ﾛｸﾞｲﾝ 2 3 入出力項目 Copyright ©2008 IPA は 一 致 して い る 「例」の列を追加する等の 工夫をする。 識別ID ラベル 部品の種類 文字種 例 1 ユーザ名 テキストボックス 半角 j2ee 2 パスワード テキストボックス 半角 j2ee 3 ログイン ボタン 第1部 - 189 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 7.1.1 書き方のコツ 工程成果物の関連 表記例は Java Pet Store* を題材としています。 成功例・失敗例を提示する 失敗する例を示す場合 ※入力したデータの内容によって、次に進む画面や、メッセージ表示等の動作が変わる場合があり、そう した仕様を確認する必要がある場合には、成功例、失敗例のデータ例を記載しておくと確認しやすい。 画面レイアウト ×を付けるなど、その入力が間違って いることを示す。 ユーザ名とパスワードを入力してください！ 1 ユーザ名： エンタープライズ 値は パスワード： 一致 ﾛｸﾞｲﾝ 2 して いる 文字の種類や、 長さを確認する。 「例」の列を追加す る等の工夫をする。 3 入出力項目 Copyright ©2008 IPA 識別ID ラベル 部品の種類 文字種 例 1 ユーザ名 テキストボックス 半角 エンタープライズ 2 パスワード テキストボックス 半角 j2ee 3 ログイン ボタン （半角なので全角を 入 れ る と エ ラ ー が発 生します） 第1部 - 190 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 7.1.1 書き方のコツ 工程成果物の関連 FD7002：「画面レイアウトとアクション明細の間で記載する定義内容が明確に切り 分けられていない場合、重複などにより、確認ポイント（発注者に確認してもらう 主要な内容）がぼやける。」 1. 詳細内容を記載する決めがないため、定義内容が重複したり漏れが 生じる。 詳細内容を記載するための 共通ルールを作る。 Copyright ©2008 IPA 第1部 - 191 第1部 表現 7.1.1 書き方のコツ 工程成果物の関連 表記例は Java Pet Store* を題材としています。 記載内容が決まっている場合 画面レイアウト 1 ユーザ名とパスワードを入力してください！ ユーザ名： パスワード： 識別ID ラベル 画面部品の種類 1 ユーザ名 テキストボックス 2 パスワード テキストボックス 3 ログイン ボタン ログイン処理（A1）を起動するボ タン ﾛｸﾞｲﾝ 2 画面部品の説明 3 決めがある場合、アクション名（ID）を 明記するだけにとどめる アクション明細 ID アクション名 アクションの内容 アクション後の処理概要 入力 出力 A-1 ログイン ログインボタン押下 入力されたユーザ名, パ スワードをもとに、ログイ ン処理を実施する。 ユーザ情報 テーブル メニュー エラーメッセージ Copyright ©2008 IPA 第1部 - 192 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 7.1.1 書き方のコツ 工程成果物の関連 表記例は Java Pet Store* を題材としています。 記載内容が決まっていないため、情報が重複する 画面レイアウト ユーザ名とパスワードを入力してください！ 1 識別ID ラベル 画面部品の種類 1 ユーザ名 テキストボックス 2 パスワード テキストボックス 3 ログイン ボタン ユーザ名： パスワード： 画面部品の説明 入 力 さ れ た ユー ザ名, パスワード をもとに、ログイ ン処理を実施 す る ﾛｸﾞｲﾝ 2 3 アクション明細 る い して 複 重 どっちにどれだけの 説明を記載するか 決められていない。 アクション名 イベント名 アクションの処理概要 入力 ログイン ログインボタン押 下 入力されたユーザ名, パ スワードをもとに、ログイ ン処理を実施する。 ユ ー ザ 情 報 テーブル Copyright ©2008 IPA 画面レイアウトとアクション 明細に重複する内容が 書かれている場合、内容の 出力 不整合を引き起こしたり、 メニュー 重複による作業コストが発生 するなどの弊害が発生する ため、画面レイアウトは概要 を記し、アクション明細では エラーメッセージ 詳細に記述するなどのルー ルを予め定めておくと良い。 第1部 - 193 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 7.1.1 書き方のコツ 工程成果物の関連 FD7003：「適切な量（機能別、分類別等）に分類され、理解しやすい順序で記述さ れていると、画面仕様の重複や抜け漏れの確認や、画面仕様の理解が容易にな る。これにより、発注者が画面仕様を理解しやすくなり、レビューにおいてより本 質的な確認を行うことができる。また、機能別、分類別等の区別もなく、ランダム に画面一覧、画面レイアウト、入出力項目、アクション明細、画面遷移が記述され ていると、画面の抜け漏れや重複の確認が困難となる。」 やってはいけない事 1. 機能毎に章を分けず、ランダムに設計書を記述すると混乱する 理解し易くするためのポイント 2. 画面遷移に従った順に画面レイアウトを並べる 3. 画面遷移に従った順にアクション明細を並べる 4. 画面群と機能との対応リストを作成する Copyright ©2008 IPA 第1部 - 194 第1部 表現 7.1.1 書き方のコツ 工程成果物の関連 外部設計書の目次構成 ・・・・・ 3.ユーザ登録機能 3.1画面一覧 3.2画面遷移図 3.3画面仕様 3.3.1ユーザログイン画面 3.3.1.1画面レイアウト 3.3.1.2入出力項目 3.3.1.3アクション明細 3.3.2ユーザ登録画面 3.3.2.1画面レイアウト 3.3.2.2入出力項目 3.3.2.3アクション明細 3.3.3ユーザ登録完了画面 3.3.3.1画面レイアウト 3.3.3.2入出力項目 3.3.3.3アクション明細 4.ペット購入機能 ・・・・・ Copyright ©2008 IPA 第1部 - 195 第1部 表現 7.1.1 書き方のコツ 工程成果物の関連 表記例は Java Pet Store* を題材としています。 機能毎に章を分けて設計書を記載する ユーザ登録機能 画面遷移 機能名 サインイン機能 初期化 初期化 画面一覧 機能名 サインイン機能 《開始点》 画面レイアウト 画面ID S-05-01 画面の名称 ユーザログイン画面 入出力項目 画面ID S-05-01 画面の名称 ユーザログイン画面 アクション明細 画面ID S-05-01 画面の名称 ユーザログイン画面 ユーザログイン画面 [ログイン] ログイン ログイン 処理 処理 画面レイアウト 画面ID S-05-02 画面の名称 ユーザ登録画面 入出力項目 画面ID S-05-02 画面の名称 ユーザ登録画面 アクション明細 画面ID S-05-02 画面の名称 ユーザ登録画面 ユーザ登録画面 [登録] 登録処理 登録処理 画面レイアウト 画面ID S-05-03 画面の名称 ユーザ登録完了画面 ユーザ登録完了画面 [終了] 終了処理 終了処理 Copyright ©2008 IPA 入出力項目 画面ID S-05-03 画面の名称 ユーザ登録完了画面 アクション明細 画面ID S-05-03 画面の名称 ユーザ登録完了画面 《終了点》 第1部 - 196 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 7.1.1 書き方のコツ 工程成果物の関連 表記例は Java Pet Store* を題材としています。 ランダムに設計書を記載すると混乱する。 ユーザ登録機能 画面遷移 機能名 サインイン機能 初期化 初期化 画面一覧 機能名 サインイン機能 《開始点》 画面レイアウト 画面ID S-05-01 画面の名称 ユーザログイン画面 入出力項目 画面ID S-05-01 画面の名称 ユーザログイン画面 アクション明細 画面ID S-05-01 画面の名称 ユーザログイン画面 ユーザログイン画面 [ログイン] ログイン ログイン 処理 処理 画面レイアウト 画面ID S-05-03 画面の名称 ユーザ登録完了画面 入出力項目 画面ID S-05-03 画面の名称 ユーザ登録完了画面 アクション明細 画面ID S-05-03 画面の名称 ユーザ登録完了画面 ユーザ登録画面 [登録] 登録処理 登録処理 画面レイアウト 画面ID S-05-02 画面の名称 ユーザ登録画面 ユーザ登録完了画面 [終了] 終了処理 終了処理 Copyright ©2008 IPA 入出力項目 画面ID S-05-02 画面の名称 ユーザ登録画面 アクション明細 画面ID S-05-02 画面の名称 ユーザ登録画面 《終了点》 第1部 - 197 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 7.1.1 書き方のコツ 工程成果物の関連 表記例は Java Pet Store* を題材としています。 画面遷移に従った順に画面レイアウトを並べる 《開始点》 画面レイアウト 画面ID S-05-01 画面の名称 ユーザログイン画面 ユーザログイン画面 [ログイン] 画面レイアウト 画面ID S-05-02 画面の名称 ユーザ登録画面 ユーザ登録画面 [登録] 《終了点》 画面レイアウト 画面ID S-05-03 画面の名称 ユーザ登録完了画面 ユーザ登録完了画面 画面遷移図の例 Copyright ©2008 IPA 画面レイアウトの例 第1部 - 198 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 7.1.1 書き方のコツ 工程成果物の関連 表記例は Java Pet Store* を題材としています。 画面遷移に従った順にアクション明細を並べる 《開始点》 アクション明細 画面ID S-05-01 画面の名称 ユーザログイン画面 ユーザログイン画面 [ログイン] アクション明細 画面ID S-05-02 画面の名称 ユーザ登録画面 ユーザ登録画面 [登録] 《終了点》 アクション明細 画面ID S-05-03 画面の名称 ユーザ登録完了画面 ユーザ登録完了画面 画面遷移図の例 Copyright ©2008 IPA アクション明細の例 第1部 - 199 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 7.1.1 書き方のコツ 工程成果物の関連 画面群と機能との対応リストを作成する 画面群と機能の対応リストの例 No. 機能名 機能ID 画面遷移図名 1 サインイン機能 F001 サインイン(ユーザ編)画面遷移図 備考 サインイン(管理者編)画面遷移図 サインイン(サプライヤ編)画面遷移図 2 商品一覧機能 F002 商品一覧(ユーザ編)画面遷移図 商品一覧(管理者編)画面遷移図 商品一覧(サプライヤ編)画面遷移図 3 Copyright ©2008 IPA 第1部 - 200 第1部 表現 7.1.1 書き方のコツ 工程成果物の関連 FD7004：「業務の流れや権限等ごと仕様が違う場合は、個別に記述されていると、 仕様の抜け漏れがない。」 設計書の品揃えのコツ 1. 業務の流れ、権限毎に記述を分ける。 2. 画面群と利用権限の対応リストを作成する。 Copyright ©2008 IPA 第1部 - 201 第1部 表現 7.1.1 書き方のコツ 工程成果物の関連 業務の流れ、権限毎に記述を分ける。 商品一覧(ユーザ編)画面遷移図 商品一覧(管理者編)画面遷移図 《開始点》 ログイン画面 [ログイン] 《開始点》 ログイン画面 [ログイン] トップページ [メニュー選択] メニュー画面 [業務種類選択] 商品一覧画面（ユーザ） ログイン画面 サプライヤトップページ [メニュー選択] 管理者メニュー画面 [業務種類選択] 《終了点》 《開始点》 [ログイン] 管理者トップページ [メニュー選択] 商品一覧(サプライヤ編)画面遷移図 サプライヤメニュー画面 [業務種類選択] 《終了点》 商品一覧画面（管理者） 《終了点》 商品一覧画面（サプライヤ） 画面遷移図の例 Copyright ©2008 IPA 第1部 - 202 第1部 表現 7.1.1 書き方のコツ 工程成果物の関連 画面群と利用権限の対応リストを作成する 画面群と利用権限の対応リストの例 No. 画面遷移図名 利用者権限 備考 ユーザ 管理者 サプライヤ 1 サインイン(ユーザ編)画面遷移図 ○ － － 2 サインイン(管理者編)画面遷移図 － ○ － 3 サインイン(サプライヤ編)画面遷移図 － － ○ 4 商品一覧(ユーザ編)画面遷移図 ○ － － 5 商品一覧(管理者編)画面遷移図 － ○ － 6 商品一覧(サプライヤ編)画面遷移図 － － ○ 補足資料として付け足す Copyright ©2008 IPA 第1部 - 203 第1部 表現 7.1.2 確認のコツ 工程成果物の関連 工程成果物間に関連する確認のコツは次のとおり。 ID FD7005 Copyright ©2008 IPA 内容 画面遷移で予期している動作とアクション明細で定義されたアクションの処理内容 が異なる、もしくは、アクション明細で定義された内容が曖昧で適切なアクションを 表現しているか不明だと、論点や説明が曖昧になる。誤解を招く。 第1部 - 204 第1部 表現 7.1.2 確認のコツ 工程成果物の関連 FD7005：「画面遷移で予期している動作とアクション明細で定義されたアクション の処理内容が異なる、もしくは、アクション明細で定義された内容が曖昧で適切 なアクションを表現しているか不明だと、論点や説明が曖昧になる。誤解を招く。」 1. 画面遷移の条件分岐とアクション明細が一致していることを確認する Copyright ©2008 IPA 第1部 - 205 第1部 表現 7.1.2 確認のコツ 工程成果物の関連 画面遷移の条件分岐とアクション明細が一致していることを確認する 表記例は Java Pet Store* を題材としています。 画面遷移 書誌情報 アクション明細 書誌情報 アクション 名 アクショ ンの内容 アクション後の処理詳細 ペット在庫 管理 注文ボタ ンを押下 ①在庫数のチェック 遷移先画面名 称（ID) ②在庫数が２匹以上の場合 注文確認画面 注文確認画面へ遷移する。 （T-002) 在庫発注画面 在庫発注画面へ遷移する。 （H-001) ③在庫数が１匹以下の場合 Copyright ©2008 IPA 第1部 - 206 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 コラム7 工程成果物の関連 画面の名称や画面ID、識別IDを、他の工程成果物と一致させる Copyright ©2008 IPA 第1部 - 207 第1部 表現 コラム7 工程成果物の関連 画面の名称や画面ID、識別IDを、他の工程成果物と一致させる（1/4） 状況 複数の工程成果物で画面ID等の同一のIDを記述している。 関連するコツ なし 補足 設計書同士の関連付けができ、認識の齟齬の誘発を防ぐことができた。 Copyright ©2008 IPA 第1部 - 208 第1部 表現 コラム7 工程成果物の関連 画面の名称や画面ID、識別IDを、他の工程成果物と一致させる（2/4） 具体例 複数の工程成果物にて、同じ画面を参照する画面の名称、画面IDは、同じ値を記述し ている。 画面ＩＤに関する事例 書い させて 致 一 ている 一致させて書いている 一致させて 書 ・レビュー前には、それぞれの工程成果物 の画面ＩＤが一致していることを確認した。 ・画面一覧にない画面は先行して起こさない方が、 整合性をとりやすくてよかった。 そのため、画面一覧表を使用して随時確認した。 Copyright ©2008 IPA いている 表記例は Java Pet Store* を題材としています。 第1部 - 209 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 コラム7 工程成果物の関連 画面の名称や画面ID、識別IDを、他の工程成果物と一致させる（3/4） 画面の名称に関する事例 表記例は Java Pet Store* を題材としています。 画面レイアウトと画面遷移についても、対象としている画面が一致するよう書いている。 【画面遷移】 【画面レイアウト】 画面ＩＤ 書誌情報 S-03-01 画面の名称 《開始点》 ペット検索画面 概要 初期化 初期化 ペット検索 《終了点》 画面ＩＤ S-03-02 画面の名称 検索文字列 [終了] 処理終了 処理終了 ペット検索結果表示画面 [戻る] 概要 ペット検索画面 [検索] 検索 検索 ペット検索結果表示 画像 終了 終了 ペット名称 ペット 種別ID 検索処理 検索処理 ペ ッ ト 種別名 [次ページ] [前ページ] ペット検索結果表示画面 後ページ 後ページ 検索処理 検索処理 次を検索 前ページ 前ページ 検索処理 検索処理 前を検索 Copyright ©2008 IPA 第1部 - 210 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第1部 表現 コラム7 工程成果物の関連 画面の名称や画面ID、識別IDを、他の工程成果物と一致させる（4/4） 識別ＩＤに関する事例 表記例は Java Pet Store* を題材としています。 【入出力項目】 【画面レイアウト】 一 致 させ て 書いている ・識別IDとラベルを一致させて書いている Copyright ©2008 IPA 第1部 - 211 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第2部 記述確認 第2部 記述確認 Copyright ©2008 IPA 第2部 - 1 第2部 記述確認 目次 はじめに 第1章 網羅性のチェックリスト 第2章 コツのチェックリスト Copyright ©2008 IPA 第2部 - 2 第2部 記述確認 はじめに 第2部 記述確認編では、設計書の記述や表現に注意すべき事項について、次 の2つの章に確認事項の一覧表としてまとめました。 第1章 網羅性のチェックリスト ¾ 設計書を作成する上で積極的に確認すべき観点を一覧表にまとめました。プロジェクトの 進捗状況により適宜参考にしてください。 第2章 コツのチェックリスト ¾ 第1部 表現 の各章に記した「書き方のコツ」「確認のコツ」を一覧表にまとめました。 Copyright ©2008 IPA 第2部 - 3 第2部 記述確認 第1章 網羅性のチェックリスト 網羅性のチェックリストは、設計書を作成する上で積極的に確認すべき観点を一覧表に まとめたものである。 主に、 「第1部 表現」の検討過程において、“コツには至らないが、 重要な観点である”と判断 した事項を集約したものである。このため、各チェック項目内容にはばらつきがあるためご留意 いただきたい。 網羅性のチェックリストは次の分類により整理されており、各チェック項目に対する補足説 明を補足欄に記している。 1. 工程成果物について共通的な事項 ¾ 各工程成果物に対して共通に確認すべき事項。工程成果物ごとに確認する。 2. 工程成果物間の関係に関する事項 ¾ ある工程成果物と別の工程成果物が関連する箇所に対して確認すべき事項。関係のある工程成果物 を確認する。 3. 各工程成果物に関する事項 ¾ 各工程成果物に対し個別に確認すべき事項。工程成果物ごとに確認する。 各チェック項目は、実際のプロジェクトにおいて適宜具体的なチェック方法に置き換えてご 使用いただきたい。 Copyright ©2008 IPA 第2部 - 4 第2部 記述確認 第1章 網羅性のチェックリスト チェック対象の工程成果物 ＩＤ 1 2 3 分類 チェック項目 補足事項 画面一覧 画面遷移 アクション明細 共通 レビュー前に、各工程成果物におけるレビューの順番が、あらかじめ 設定されていることを確認する。 ○ ○ ○ ○ ○ ○ 共通 発注者の気持ちになって読み直す。 工程成果物の記述は一意に受け取れるような平易な日本語で記述 複数の意味で受け取れるような日本語の言い回しを用いる されていることを確認する。 と、レビュー時に、受発注者間で解釈の相違が生じたまま 進行してしまう。 ○ ○ ○ ○ ○ ○ 識別子はユニークになっているか確認する。 ユニークになっているか確認する識別子： ・画面ID、画面名 ・画面レイアウトの識別ID ・条件分岐で使用されるフィールド識別子 ・アクション名 ・画面遷移ID ・共通ルールID ○ ○ ○ ○ ○ ○ 一致を確認する識別子： ・画面ID、画面名 ・画面レイアウトの識別ID ・条件分岐で使用されるフィールド識別子 ・アクション名 ・イベント名 ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ 共通 4 工程成果物間 識別子（IDまたは名称）が一致していることを確認する。 5 工程成果物間 レビュー対象の工程成果物をまとめる際、画面一覧の記述順序と、 他の工程成果物（画面レイアウト、入出力項目、アクション明細）の並 び順が統一されていることを確認する。 ○ 工程成果物間 画面一覧で定義されている全ての画面に対して以下の工程成果物 が過不足なく存在することを確認する。 ・画面遷移 ・画面レイアウト ・入出力項目 ・アクション明細 ○ 7 工程成果物間 画面遷移の分岐条件が入出力項目と対応が取れていない と、正しい分岐条件が理解できず混乱する。 画面遷移の分岐条件が、入出力項目と対応が取れていることを確認 分岐条件にて入出力項目で定義されている部品を指し示す する。 場合、どの部品を指しているのか明確になるように記述す ること。 ○ 8 工程成果物間 画面遷移、入出力項目及びアクション明細に記載されている画面部 品が画面レイアウトに存在しているか確認する。 ● 9 工程成果物間 画面遷移及び入出力項目に記載されているアクションがアクション 明細に存在しているか確認する。 ● 6 ※「○」チェック対象。「●」チェック時に参照。 画面遷移・レイ 画面レイアウト アウト共通ルー 入出力項目 ル Copyright ©2008 IPA ○ ● ○ ● ● ● ○ 第2部 - 5 第2部 記述確認 チェック対象の工程成果物 ＩＤ 分類 チェック項目 補足事項 画面一覧 画面遷移 ※「○」チェック対象。「●」チェック時に参照。 画面遷移・レイ 画面レイアウト アウト共通ルー 入出力項目 ル 10 工程成果物間 アクション明細で、アクション後の遷移先の画面を明確にしており、 画面遷移で定義している画面と一致していることを確認する。 11 工程成果物間 画面レイアウトの操作手順に書かれた操作が、アクション明細に記 述されていることを確認する。 12 工程成果物間 画面の見栄えや操作性、遷移パターンについて、共通化できる部分 の共通ルールが整備されているか確認する。 ● ● ○ 13 工程成果物間 基準を設けず、その都度異なる表現をすると、同じものの説 共通ルールに基づいて画面部品の形状を定義しているか、配置して 明なのか別のものの説明なのか区別がつかなくなり、混乱 いるか、画面遷移されているか確認する。 の原因となる。 ○ ○ ● 14 工程成果物間 エラーの種類、エラー時の画面の表示方法、エラーメッセージ規約 が共通ルールで定義されており、他の工程成果物にて違反していな いことを確認する。 ○ 15 工程成果物間 桁数はバイト数、文字数のどちらの意味で用いるのかが統一されて いるか確認する。 16 画面一覧 画面の分類が命名規則とあっていないと、画面の分類や画 画面の分類が、あらかじめ定義された命名規則とあっていることを確 面名から、仕様、画面の項目、画面遷移等の想起が難しく 認する。 なり、妥当性の確認が行いにくい。 ○ 17 画面一覧 画面が、画面一覧にて、予め定義されている機能や分類に適切に対 機能や分類の定義が適切に実施されていることが前提。 応付けられていることを確認する。 ○ 18 画面一覧 左記のチェックがされていないと、同じ画面名で異なる役割 画面名が、機能の分類や機能名を考慮して定義されていて、画面一 の画面や、同じ役割だが異なる画面を定義してしまう可能 覧からそれぞれの画面の特徴を想起できることを確認する。 性がある。 ○ 19 画面一覧 発注者が業務で使用している用語を用いて画面名を定義されている ことを確認する。これにより、発注者が、画面名称から業務における 画面の役割を想起しやすくなる。 ○ 20 画面一覧 画面一覧に記述されている識別子（IDまたは名称）が、 ・あらかじめ定義されていることを確認する。 ・定義された識別子を引用していることを確認する。 機能や分類の命名規則など画面一覧の章立てに使用する べきルールが先に作成されていることを前提とする。 ○ 21 画面一覧 初期の段階では、気づいた点を備考欄に記述してよいが、 備考欄に、本来別の場所に書くべき内容が書かれていないことを確 適宜、工程成果物の構成要素として反映し、備考欄からは 認する。 削除していくことが望ましい。 ○ 22 画面遷移 画面遷移の開始画面と終了画面は明確に区別されていることを確 認する。 Copyright ©2008 IPA ● ○ ● ○ ● ● ○ 画面遷移図の説明やレビューが迷い無くスタートできる。ま た、後工程での詳細化で誤解が減る。 アクション明細 ○ ○ ○ 第2部 - 6 第2部 記述確認 チェック対象の工程成果物 ＩＤ 分類 チェック項目 補足事項 画面一覧 画面遷移 23 画面遷移 イベントが、記述されている画面の遷移を起動するための条件であ ることを確認する。 24 画面遷移 分岐条件は、その各条件分岐に対して条件が記述されていることを 条件に漏れがあったときに、後工程での詳細化において、 確認する。 混乱する。 ○ 25 画面遷移 分岐条件は、論理式（等号、不等号などの記載可能なもの）で表され 論理式で記載が難しいものは文章表現でも良い。 ていることを確認する。 ○ 26 画面遷移 分岐条件が互いに背反になっていることを確認する。 画面レイアウト 識別子が記述されていることは必須である。 画面レイアウトの構成要素に識別子が記述されていない 画面レイアウトの構成要素に、識別子（IDまたは名称）が記述されて と、構成要素の特定や全体量の把握が行いにくく、構成要 いることを確認する。 素のレビューが困難となる。また、画面レイアウトの構成要 素を特定しにくいため、構成要素の重複定義や抜け漏れを 発見しにくくなる。 ○ 28 画面レイアウト 本来、画面レイアウトを記述すべきところに、画面に入力す レイアウト図には、操作画面上の配置のみを表していることを確認す るデータの仕様も合わせて記述していると、一般に、画面レ る。 イアウトに記述されることのない情報が含まれることにな り、レビュー時に、不必要な混乱が生じる可能性がある。 ○ 29 画面レイアウト 記述されている画面部品が実際に実装可能であることを確認する。 標準的な画面部品以外を記述するときには、発注者に確認 すること。 実装できない画面部品が後工程で見つかった場合、アク ション明細など他への影響が大きい。 ○ 30 画面レイアウト 「ラベル」欄の文字列には、レイアウト図に示された文字列を記述し ていることを確認する。 レビュー時に、内容理解の誤解が生じない。 ○ 画面レイアウト 「画面遷移・画面レイアウト共通ルール」が整備される以前 にのみチェックする。 画面部品の種類などの違いが判別でき、表現（見た目）がわかり易く 画面部品の種類が判別できないと、部品の詳細などの深い なっていることを確認する。 レビューを行う際に、どの説明がされているのかわからなく なるなどの混乱の原因となる。 ○ 画面レイアウト 「同一の情報項目を扱う」場合とは、例えば、1つ目の画面 同一の情報項目を扱う画面部品が複数あり、レイアウト図上で画面 に入力した情報を2つ目の画面に表示する場合、2つの画面 部品の種類や見た目の表示幅が同じでなければならない場合、同じ の入出力項目の部品は、同じ桁数、データ型でなければな になっていることを確認する。 らない場合である。 ○ 27 31 32 Copyright ©2008 IPA イベントの記述が曖昧だと、解釈不能となる。 条件が互いに背反になっていないと、後工程において、混 乱する。 ※「○」チェック対象。「●」チェック時に参照。 画面遷移・レイ 画面レイアウト アウト共通ルー 入出力項目 ル アクション明細 ○ ○ 第2部 - 7 第2部 記述確認 チェック対象の工程成果物 ＩＤ 分類 チェック項目 補足事項 画面一覧 画面遷移 33 画面レイアウト 「選択」を表す以下の画面部品の種類の部品については、適切な種 類が選択されていることを確認する。 ・リストボックス ・コンボボックス ・チェックボックス ・ラジオボタン リストボックスやコンボボックス等に表示される内容の多さ が固定/変動なのか、選択する数が複数/単数なのか等に よって、適切な画面部品の種類を選択されている必要があ る。 ○ 34 画面レイアウト このチェックにより、画面部品が過不足なく検討済みである レイアウト図上のボタン・リンクがすべて「画面部品の説明」欄で説明 ことが確認できる。画面部品の説明欄で説明されている部 されているか確認する。 品は検討された状態であると言えるためである。 ○ 35 画面レイアウト 特定の条件では非表示になる旨の説明のある画面部品は、その表 「特定の条件」とは、例えば、画面を表示するユーザの権限 示・非表示の条件が明確に記述されていることを確認する。 や、表示する時間帯等の条件を指す。 ○ ・同じフェーズの工程成果物（データモデル等）との整合性 が取れていることを確認する。 ・抽象度の異なる工程成果物（要件定義書）との整合性を保 持していることを確認する。 36 入出力項目 入出力項目の根拠が、存在することを確認する。 37 入出力項目 パスワードの入力時に表示が「＊」になるなど、特殊例がある場合は 「入力制約」欄や「補足」欄に記述する。 明示していることを確認する。 ※「○」チェック対象。「●」チェック時に参照。 画面遷移・レイ 画面レイアウト アウト共通ルー 入出力項目 ル ○ ○ 入出力項目 入力の最大文字数（バイト数）が記載されているか確認する。 ・発注者に「このデータはこの長さで本当に良いのか」との 注意を喚起することができ、データ長に対して曖昧な取り決 めで先に進むことが防げる。 ・データ設計の段階でここで取り決められたデータサイズで 設計を進めることができる。 ○ 39 入出力項目 「同一の情報項目を扱う」場合とは、例えば、1つ目の画面 同一の情報項目を扱う入出力項目の部品が複数あり、「表示桁数」 に入力した情報を2つ目の画面に表示する場合、2つの画面 「入力桁数」「データ型」「文字種」「出力仕様」「必須」等の記述が同じ の入出力項目の部品は、同じ桁数、データ型でなければな でなければならない場合、同じになっていることを確認する。 らない場合である。 ○ 40 アクション明細 アクション処理詳細にて、処理の内容が「入力」「出力」欄との関係も 含めて明確に記述されていることを確認する。 38 Copyright ©2008 IPA アクション明細 ○ 第2部 - 8 第2部 記述確認 第2章 コツのチェックリスト コツのチェックリストは、「第1部 表現」 の各章に記した「書き方のコツ」「確認の コツ」を一覧化したものである。 実際のプロジェクトにおいて採用することとなった「第1部 表現」に記したコツが、 設計書に適用されているかどうかを確認できるよう、チェックリストの形式に整理 した。 設計書作成過程における備忘録として、またはレビュー実施前の確認リストとして 適宜ご利用いただきたい。 Copyright ©2008 IPA 第2部 - 9 第2部 記述確認 第2章 コツのチェックリスト ＩＤ 分類 コツ種類 コツＩＤ コツ内容 1 画面一覧 書き方のコツ FD1001 システム全体で必要とする画面の全体図が作成されている。 システム全体としての画面の 抜け漏れや重複を確認でき、作業の優先度も確認できる。システムの全体像に関する合意 を得やすくする。 2 画面一覧 書き方のコツ FD1002 画面一覧に記述する分類には、あらかじめ定義された分類を使用する。また、未定義の分 類については、新たな分類として定義した上で使用することにより、未定義の分類の使用に よる混乱を避けることができる。 3 画面一覧 書き方のコツ FD1003 適切な量（機能別、分類別等）に分類され、理解しやすい順序 で記述されていると、画面の 重複と抜け漏れの排除が容易になる。 4 画面一覧 書き方のコツ FD1004 あらかじめ管理方法を定めた項目番号を記述することによって、 画面の重複や抜け漏れの 確認が容易になり、画面一覧の完成度を向上させる。 5 画面一覧 書き方のコツ FD1005 画面一覧に記述する各画面の仕様の概要に加えて、当該仕様が導かれた要件及びその 理由を補足資料として作成しておくと、仕様漏れの防止に有効である。 6 画面一覧 書き方のコツ FD1006 画面の利用者や利用目的等の画面の特徴を捉えた説明を画面一覧の補足資料として記 述する。これにより、レビュー時の確認内容がより具体的になり、画面仕様の品質が妥当な レベルへ到達することを促進する。また、発注者が仕様を理解しやすくなる。 7 画面一覧 確認のコツ FD1007 あらかじめ定義された機能または分類に抜け漏れがある場合、画面一覧の画面の抜け漏 れは、さらに増加する可能性がある。これを防止するために、設計が進み、機能や画面の 分類が定義された段階で、機能や分類に抜け漏れがないことを確認する。 8 画面一覧 確認のコツ FD1008 画面一覧に付与したシーケンシャル番号を利用することで、画面の特定や、画面の全体量 の把握ができ、レビューを効率的に行うことができる。 9 画面遷移 書き方のコツ FD2001 一覧性があると、全体像を把握するのに役立ち、開発者が説明しやすく、かつユーザにも 理解されやすい。 10 画面遷移 書き方のコツ FD2002 画面名が、業務的に意味のある識別名になっていないと、画面遷移上で実際の画面が想 起しにくく確認しずらい。 11 画面遷移 書き方のコツ FD2003 画面遷移の遷移線が錯綜していると、処理の流れが煩雑となり、ユーザを混乱させる。 12 画面遷移 書き方のコツ FD2004 画面遷移が上から下、左から右に遷移するように配置する。 Copyright ©2008 IPA プロジェクトにおける採用 方針 適用確認欄 第2部 - 10 第2部 記述確認 ＩＤ 分類 コツ種類 コツＩＤ コツ内容 13 画面遷移 書き方のコツ FD2005 実装寄りのイベントや条件分岐の条件になっていると、画面遷移図上で実際の業務的な処 理が想起できず、読み手を混乱させる。 14 画面遷移 確認のコツ FD2006 画面レイアウトと画面遷移上の遷移が過不足なく記述されていることを確認する。 15 画面レイアウト 書き方のコツ FD3001 全体を軽くレビューする際に、表現（見た目）がわかりやすく、見ただけで画面部品の状態や 種類などを把握しやすい表記にすると、説明の手間が省け、画面部品の状態や種類の違 いを明確に認識することができる。（特に、入出力項目や可変長の表を対象とする） 16 画面レイアウト 書き方のコツ FD3002 操作手順に加えて、操作に対応するシステムのリアクションを記述する。 これにより、発注者とシステムの境界が明確になり、発注者が使う場面を想定して、操作手 順をより詳細まで確認しやすくなる。 17 画面レイアウト 書き方のコツ FD3003 画面部品の説明や見た目で、入出力が発生するか否かを明確に伝えると、入出力事項の 意識付けができた状態で入出力項目の説明を受けることができる。 18 画面レイアウト 確認のコツ FD3004 画面レイアウトに、構成要素の配置やボタン押下時の簡単な動作だけを記述している。この ことにより、本来画面レイアウトで明らかにすべき仕様が確認できず、不完全な仕様となる リスクがある。 FD3005 画面レイアウトの定義に必要な入力情報が明確になっており、画面レイアウトの仕様の妥 当性を、検証するための根拠の候補が整う（本質的な議論ができるようになる）。根拠の候 補とは、同じフェーズの工程成果物（データモデル等）との整合性だけでなく、抽象度の異な る工程成果物（要件定義書）との整合性を保持することを裏付けるための議論の材料のこ と。 FD3006 あるまとまった情報項目群（複数の同類のものが集まっている様子）があれば、それらを対 象とした機能概要を記述する。 （”「顧客情報」を登録・変更する”など、「」内があるまとまった情報項目群であるとし、”『氏 名』を登録・変更する”など、『』内があるまとまった情報項目群の中にある単項目であるとし た場合。） 19 画面レイアウト 確認のコツ 20 画面レイアウト 確認のコツ 21 画面遷移・レイアウト 書き方のコツ 共通ルール FD4001 共通ルールの整備にあたり、準拠すべき社内の基準、公的な基準を示すことにより、共通 ルールの適用基準が明確になる。 22 画面遷移・レイアウト 書き方のコツ 共通ルール FD4002 画面レイアウト共通ルールに「画面遷移パターンの定義」や「エラー表示方法」を記載するこ とによって、各画面ごとのアクション明細での記述を省け、確認ポイントが絞られる。 23 画面遷移・レイアウト 書き方のコツ 共通ルール FD4003 表示をさかのぼるボタンの押下など、共通的なアクションの場合、画面毎に記述していくと 記述量も増え、確認ポイントが増える。「共通のアクション明細」を作るなどの工夫が必要。 24 画面遷移・レイアウト 書き方のコツ 共通ルール FD4004 共通ルールの記述が少ないと、個々の画面や機能でばらばらなつくりとなってしまう。あと から共通化するのは困難を伴う。 Copyright ©2008 IPA プロジェクトにおける採用 方針 適用確認欄 第2部 - 11 第2部 記述確認 ＩＤ 分類 コツ種類 コツＩＤ 25 画面遷移・レイアウト 書き方のコツ 共通ルール FD4005 画面の見出し、データ入出力領域、エラーメッセージ等の表示領域を標準化する。 26 画面遷移・レイアウト 書き方のコツ 共通ルール FD4006 画面共通のエリアのアクションを示す設計書が別途必要となる。（ナビゲーションなど）共通 ルールの記述だけで不充分な点は、該当事項に特化した画面設計書や設計書サンプルな ど、具体例を示さないと発注者の理解が困難な場合がある。 27 画面遷移・レイアウト 書き方のコツ 共通ルール FD4007 複数の画面で表示される一組の入出力項目がある場合、そのレイアウトを共通ルールとし てパターン化する。 28 画面遷移・レイアウト 書き方のコツ 共通ルール FD4008 数値化できるルール、特に制限を示す項目は可能なかぎり数値化しておくことにより判断の 曖昧さを排除することができる。 29 画面遷移・レイアウト 確認のコツ 共通ルール FD4009 画面を使う人がヘッダー領域から何を読み取れるようにするか、を明確にすることで、ルー ルの記述の意図を顧客に伝えやすくする。 30 画面遷移・レイアウト 確認のコツ 共通ルール FD4010 共通ルールによる各エリアの配色やレイアウト例を施した状態の見た目の全体表示イメー ジを用意して、各エリアの配色やエリア同士の配色の組合せに問題がないかを確認できる ようにする。 31 画面遷移・レイアウト 確認のコツ 共通ルール FD4011 色の表現を“赤”といった記述をしている場合、厳密に（“#FF0000”）というように示してあっ ても、色の認識は共有しにくい。実際に色やフォントを表示して見せる必要がある。色の例 を示さないと、顧客との認識の相違を生じさせることになり得る。 32 画面遷移・レイアウト 確認のコツ 共通ルール FD4012 使用できるカラーの範囲、基本的な配色が指定されている。色彩の使われ方に一定の法則 があると、例えば「赤色系表示箇所は注意や重要事項」など、画面操作方法の習熟に効果 的であるほか、個別画面の仕様への理解もスムーズになる。 33 画面遷移・レイアウト 確認のコツ 共通ルール FD4013 フォント名を共通ルールで示すだけでは、開発者にはわかりやすいが、発注者にはどのよう なフォントで表示されるのかわからなくなってしまうので、フォント表示の具体例を示せるよう にしておくべきである。 34 画面遷移・レイアウト 確認のコツ 共通ルール FD4014 共通的な項目が複数画面にある場合、共通的な表示用方法（ラベル名やフォント、色、な ど）にすべき範囲を明確にしているか。 35 入出力項目 書き方のコツ FD5001 入力制約や出力仕様がパターン化されて記述されていると、余計な説明が不要となる。さら に仕様のばらつきを抑えることができる。 36 入出力項目 書き方のコツ FD5002 画面の入出力項目について、それぞれ取得方法が明確であり、発注者が入力するデータと それ以外から取得するデータとの区別が明確である。このことにより、必要な機能及びその 内容が明確になり、要件の抜け漏れを防止しやすい。また、入出力項目の取得方法が明確 であるため、画面の操作性の議論や開発範囲を明確化しやすい。 37 入出力項目 書き方のコツ FD5003 ラベル名の命名規則、画面部品の種類の適用ルール（コンボボックスとラジオボタンのどち らを用いるかの定義等）が定義されており、その定義チェックが容易にできる工夫がされて いると、余計な説明が不要となる。さらに仕様のばらつきを抑えることができる。 Copyright ©2008 IPA コツ内容 プロジェクトにおける採用 方針 適用確認欄 第2部 - 12 第2部 記述確認 ＩＤ 分類 コツ種類 コツＩＤ コツ内容 38 入出力項目 書き方のコツ FD5004 アクション明細や画面遷移が発生する入出力項目に対して記載があると、アクション明細や 画面遷移と連動して仕様を把握し易い。 39 入出力項目 確認のコツ FD5005 文章のみの資料となっていると、誤解を招く可能性が高い。視覚的に伝えると直感的に伝 わる。 40 入出力項目 確認のコツ FD5006 ある軸で分類した業務の流れや権限 等 ごとに仕様が違う場合は、個別に記述されている と、仕様の抜け漏れがない。 41 アクション明細 書き方のコツ FD6001 あるまとまった情報項目群があれば、それらを対象としたアクションの概要を記述する。 42 アクション明細 書き方のコツ FD6002 アクションの処理概要と処理詳細を分けることにより、何の処理をするのか理解しやすい。 43 アクション明細 書き方のコツ FD6003 条件による場合わけが多い場合やアクションの処理が複雑な場合は「アクションの詳細」欄 に大量に記述が必要になってしまい、確認ポイントがぼやける。 44 アクション明細 書き方のコツ FD6004 場合わけが発生する場合は階層的に示し、どこで処理が分岐しているのかを明確に示す と、場合わけの全体像が想起されるため、過不足や問題点の気づきを促すことが出来る。 45 アクション明細 書き方のコツ FD6005 あいまいな表現(処理単位，タイミング等)があり処理内容が不明だと、混乱する。設計意図 を正しく伝えられずに誤解を招く。 46 アクション明細 書き方のコツ FD6006 実装よりの表現(手続き的な詳細の仕様)となっていると、実際の業務仕様を想起できない。 理解できない。 47 アクション明細 確認のコツ FD6007 条件による場合分けが多い場合でも全て記載することで、機能の曖昧な部分を残さず確認 できる。 48 アクション明細 確認のコツ FD6008 画面遷移のイベントと名称を統一することで、遷移にまつわるアクションの抜け漏れをチェッ クしやすい。 49 工程成果物間の関連 書き方のコツ FD7001 例えばどのような値を入力するのか、具体例を示し、画面レイアウトと入出力項目の間で同 期が取れていることを確認することで、制約条件の抜け漏れを防げる。 50 工程成果物間の関連 書き方のコツ FD7002 画面レイアウトとアクション明細の間で記載する定義内容が明確に切り分けられていない場 合、重複などにより、確認ポイント（発注者に確認してもらう主要な内容）がぼやける。 Copyright ©2008 IPA プロジェクトにおける採用 方針 適用確認欄 第2部 - 13 第2部 記述確認 ＩＤ 分類 コツ種類 コツＩＤ コツ内容 51 工程成果物間の関連 書き方のコツ FD7003 適切な量（機能別、分類別等）に分類され、理解しやすい順序で記述されていると、画面仕 様の重複や抜け漏れの確認や、画面仕様の理解が容易になる。これにより、発注者が画 面仕様を理解しやすくなり、レビューにおいてより本質的な確認を行うことができる。また、 機能別、分類別等の区別もなく、ランダムに画面一覧が記述されていると、画面の抜け漏 れや重複の確認が困難となる。 52 工程成果物間の関連 書き方のコツ FD7004 業務の流れや権限等ごと仕様が違う場合は、個別に記述されていると、仕様の抜け漏れが ない。 53 工程成果物間の関連 確認のコツ FD7005 画面遷移で予期している動作とアクション明細で定義されたアクションの処理内容が異な る、もしくは、アクション明細で定義された内容が曖昧で適切なアクションを表現しているか 不明だと、論点や説明が曖昧になる。誤解を招く。 Copyright ©2008 IPA プロジェクトにおける採用 方針 適用確認欄 第2部 - 14 第3部 レビュー 第3部 レビュー Copyright ©2008 IPA 第3部 - 1 第3部 レビュー 目次 はじめに 第1章 レビューの進め方 1.1 合意の成熟度におけるフェーズの考え方 1.2 個々のフェーズの考え方～仕掛期／充実期／完成期 第2章 設計書レビューの進め方のポイント 2.1 設計書レビューの進め方のコツ 第3章 工程成果物に着目したレビューのポイント 3.1 画面全体にわたる共通事項をレビューするコツ 3.2 画面の一連の動きをレビューするコツ 3.3 一つの画面をレビューするコツ Copyright ©2008 IPA 第3部 - 2 第3部 レビュー はじめに 本編は「発注者ビューガイドライン（画面編）」の「第3部 レビュー」です。 ここでは、発注者と開発者の間で行う画面設計レビューに関する内容を扱いま す。 画面設計書のレビューに参加するメンバを対象にしています。 発注者と開発者の合意の成熟度に応じたレビューフェーズの考え方を説明します。 レビュー参加者の間で、レビューの役割、目標に対する共通認識を提示します。 画面に関する各工程成果物を対象にしたレビューのコツを説明します。 Copyright ©2008 IPA 第3部 - 3 第3部 レビュー 第1章 レビューの進め方 画面の設計が記された工程成果物をレビューする ときに、発注者と開発者の合意を成熟させるため のレビューの考え方を解説する。 設計書レビューの初回から承認を目的としたレ ビューを実施することは望ましくない。 設計書レビューはその時点での合意の成熟度に 応じた目標の設定が必要である。 Copyright ©2008 IPA 第3部 - 4 第3部 レビュー 1.1 合意の成熟度におけるフェーズの考え方 合意形成に着目したレビューを実施する。 レビューをすることによって合意形成を繰り返し、最終的には発注者による適切な 承認に至ることが目標である。 工程の最初から承認を目標にしたレビューを行うことは望ましくない。 合意の成熟度に応じた現状の理解と目標設定が必要になる。 少なくともレビューのフェーズについて、合意の成熟度の観点から、次の３つを 想定しておくべきである。 仕掛期 前期、合意形成を開始、 レビュー対象となる工程成果物の量が大幅に増加するフェーズ 充実期 中期、合意形成が大幅に成熟、工程成果物の量は小幅に増加、 バグ発見と修正が主となるフェーズ 完成期 後期、合意の成熟を達成、工程成果物の量や修正数は安定、 承認が主となるフェーズ ３つのフェーズ毎に目標とすべき合意の成熟度を理解し、その目標に向けてレ ビューを進める必要がある。 Copyright ©2008 IPA 第3部 - 5 第3部 レビュー 1.2 個々のフェーズの考え方～仕掛期 工程の前期を表す。 発注者の要求を開発者が刈り取ることが主たる目的となる。 この時期のレビューは、要求の刈り取りを行い、合意形成が必要となる範囲に対して 認識を共有するための場となる。 レビューすべき工程成果物の規模がほぼ確定し、共通的なもの、他への影響が大き いもの、典型的なものの工程成果物が出揃うことによって、仕掛期は決着する。 仕掛期が終わると、画面における工程成果物は次の状態になっている。 工程成果物 状態 1 画面一覧 すべての画面が画面一覧に記述されている。 2 画面遷移 すべての画面と、典型的な遷移矢線が画面遷移に記述されている。 3 画面レイアウト 共通的な画面、典型的な画面、他への影響が大きい画面のレイアウトが記述されている。 4 共通ルール すべての画面に共通する制約事項やリスクに対するルールが記述されている。 5 入出力項目 共通的な画面、典型的な画面、他への影響が大きい画面の入出力項目が記述されている。 6 アクション明細 共通的な画面、典型的な画面、他への影響が大きい画面のアクション明細が記述されている。 7 工程成果物間 画面毎にのみ整合性が保たれている。 Copyright ©2008 IPA 第3部 - 6 第3部 レビュー 1.2 個々のフェーズの考え方～充実期 工程の中期を表す。 工程成果物の品質を高めることが目的となる。 この時期のレビューは、工程成果物の修正が必要となる箇所（バグ）を発見し、 バグを除去し、合意形成を充実させるための場となる。 工程成果物のバグの発見が減速し、バグ対策の速度のほうが上回り、重大なバ グの対策がすべて完了することによって、充実期は決着する。 充実期が終わると、画面における工程成果物は次の状態になっている。 工程成果物 状態 1 画面一覧 すべての画面が記された画面一覧の記述が完了している。 2 画面遷移 すべての画面とすべての遷移矢線が記述され、バグと対策が明らかになっている。 3 画面レイアウト すべての画面レイアウトが記述され、バグと対策が明らかになっている。 4 共通ルール 一部の画面に必要な制約事項やリスクに対するルールが記述されている。 5 入出力項目 すべての画面の入出力項目が記述され、 バグと対策が明らかになっている。 6 アクション明細 すべての画面のアクション明細が記述され、バグと対策が明らかになっている。 7 工程成果物間 複数画面にわたって整合性が保たれている。 Copyright ©2008 IPA 第3部 - 7 第3部 レビュー 1.2 個々のフェーズの考え方～完成期 工程の後期を表す。 発注者が工程成果物に対する承認のために適切な判断を与えることが目的とな る。 この時期のレビューは、発注者にとっての承認行為の障害を除去し、合意が成 熟できていることを相互に確認するための場となる。 発注者による工程成果物の承認、あるいは承認における条件を決定することに よって、完成期は決着する。 完成期が終わると、画面における工程成果物は次の状態になっている。 工程成果物 状態 1 画面一覧 完成の状態にあり、審査・承認の作業のみ管理される。 2 画面遷移 完成の状態にあり、審査・承認の作業のみ管理される。 3 画面レイアウト 完成の状態にあり、審査・承認の作業のみ管理される。 4 共通ルール 完成の状態にあり、審査・承認の作業のみ管理される。 5 入出力項目 完成の状態にあり、審査・承認の作業のみ管理される。 6 アクション明細 完成の状態にあり、審査・承認の作業のみ管理される。 7 工程成果物間 画面の工程成果物以外も含めて整合性が保たれている。 Copyright ©2008 IPA 第3部 - 8 第3部 レビュー 第2章 設計書レビューの進め方のポイント 画面設計書のレビューについて、３つのフェーズの考え方に基づいた進め方のコ ツを解説する。 Copyright ©2008 IPA 第3部 - 9 第3部 レビュー 2.1 設計書レビューの進め方のコツ 画面レビューの進め方のコツは次のとおり。 ○ ○ FR0001 画面仕様全体のレビューの順番をあらかじめ決める。 FR0002 他の画面あるいは工程成果物への影響度に留意して説明順序を決定する。 FR0003 画面遷移、画面レイアウト、入出力項目の資料をレビューの際に同時に参照できるよう別々の冊子 （レビュー用の準備資料）として用意する。 ○ ○ FR0004 設計書で使用されている用語が、発注者の用語と合致しているか、混乱を招く使われ方をしていな ○ いか確認していただく。 ○ FR0005 説明する時は、画面遷移と細かい桁数・入力規則などの画面詳細に分けて行う。 ○ ○ FR0006 複数の情報項目が組み合わされて一つの情報項目を表すルールがある場合、その組み合わせに ○ 名称（情報項目群）をつけて組み合わせの名称で説明を行う。 ○ FR0007 継続検討している箇所については発注者と開発者の間で情報を共有する。 ○ ○ FR0008 発注者の理解度を確認しながらレビューを進める。 ○ ○ FR0009 想定される例外条件を網羅的に洗い出す。 Copyright ©2008 IPA 完成期 内容 充実期 ID 仕掛期 フェーズ ○ ○ ○ ○ 第3部 - 10 第3部 レビュー 2.1 設計書レビューの進め方のコツ 仕掛期 【FR0001】画面仕様全体のレビューの順番をあらかじめ決める。 充実期 表記例は Java Pet Store* を題材としています。 背景：レビュー順番を決めてからレビューを実施すると抜け漏れや重複を排除しやすくなる。 レビューの順番 ①「第2部 記述確認」を使用して画面一覧の完成度が高いことを確認し、是正する。 ②分類または機能別に分類し、業務フローに沿ってレビューの順番を決定する。 ③画面についても画面レイアウト→入出力項目→アクション明細の順に進める。 （画面一覧） Copyright ©2008 IPA 機能を整理して レビュー順序を決定 第3部 - 11 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第3部 レビュー 2.1 設計書レビューの進め方のコツ 充実期 【FR0002】他の画面あるいは工程成果物への影響度に留意して説明順序を決定する。 背景：他への影響度の高いレビューを後回しにすると、合意事項の見直しが行われ、手戻りが発生する可 能性が高い。 メニュー画面 [注文] 稼動時間外 《異常系》 注文時間外エラー画面 ＜説明①＞ 影響度が高い ため、優先して レビューを実施 する 書籍注文入力画面 [次へ] 書籍注文入力確認画面 [注文] ＜説明②＞ 上記説明①をふま えて、レビューを実 施する 手戻りを防止するため、他 の画面あるいは工程成果 物への影響度の高いもの から優先して説明する。早 めに合意をすることで他の レビューもスムーズにすす めることができる。 影響度が高いものは、以下 が挙げられる。 ・画面レイアウトの共通部分 （ナビゲーションなど） ・画面遷移の共通部分（エ ラー処理など） ・典型的な画面遷移（一覧画 面から詳細画面への遷移 など） 書籍注文結果確認画面 Copyright ©2008 IPA 第3部 - 12 第3部 レビュー 2.1 設計書レビューの進め方のコツ 仕掛期 充実期 【FR0003】画面遷移、画面レイアウト、入出力項目の資料をレビューの際に同時に参照でき るよう別々の冊子（レビュー用の準備資料）として用意する。 背景：画面遷移のレビューの際に画面レイアウト、入出力項目と連動させて説明を行うと発注者の理解が得 られやすい。 入出力項目2-2 ・・ ・ 画面レイアウト2-1 画面遷移2 画面遷移1 ・・ ・ 画面遷移2 入出力項目1-2 画面レイアウト1-2 入出力項目1-1 ・・ ・ 画面レイアウト2-1 画面レイアウト1-2 画面レイアウト1-1 画面レイアウト1-1 画面遷移1 ・・ ・ 設計書（目次順） Copyright ©2008 IPA 入出力項目2-1 入出力項目1-2 入出力項目1-1 設計書の構成上、機能や画面 ごとに画面遷移、画面レイアウ ト、入出力項目がまとまってい ることがある。 このような設計書を説明する 場合、画面遷移、画面レイア ウト、入出力項目の資料を 別々の冊子として準備するこ とで、各成果物間を連携して 説明を行う際に各々の成果物 が参照しやすくなる。 ※プロジェクターを使用して画 面レイアウトを表示してレー ザーポインターなどで説明箇 所を指し示しながら説明を行う とさらにわかりやすくなる。 レビュー用の準備資料 第3部 - 13 第3部 レビュー 2.1 設計書レビューの進め方のコツ 仕掛期 充実期 【FR0004】設計書で使用されている用語が、発注者の用語と合致しているか、混乱を招く使 われ方をしていないか確認していただく。 背景：実際にシステムを利用するユーザにとってなじみのある用語を使うほうが理解がしやすい。 [アクション明細](画面A：ログイン) 入力されたユーザ名、パスワード を元に、ログイン処理を行う ログイン処理が成功したら、画面 Bにユーザ氏名を表示する 別の「モノ」に紛らわしい名前を 付与した（望ましくない）例 [アクション明細](画面B：ログアウト) 現在ログイン中のユーザに対し、 ログアウト処理を行う ユーザの用語集と合致 しない（望ましくない）例 Copyright ©2008 IPA [用語辞書] (発注者用) ・システムを利用するユー ザが普段使用している用語 を用いているか、別の意味 の用語と混同しやすくない かを確認する。 ・同じ対象が別の名称で呼 称されていないか、また別 の対象に同じ(紛らわしい) 名前をつけていないかも確 認する。 … ログイン：... ログオフ：... … 第3部 - 14 第3部 レビュー 2.1 設計書レビューの進め方のコツ 仕掛期 充実期 【FR0005】説明する時は、画面遷移と細かい桁数・入力規則などの画面詳細に分けて行う。 背景：画面遷移と個別画面の説明を同時に行うと、個別画面の詳細説明が多くなり、画面遷移の全体像が ぼやける。 画面遷移と細かい桁数・入力規則などの画面詳細を同時に説明することは避け、初めに画面遷移、後で画面 詳細の説明に集中する事により論点がぼやけるのを防ぐ。 表記例は Java Pet Store* を題材としています。 まず、メニュー画面から始まる全体 の画面遷移について説明いたしま す。画面上での操作については、 後ほど説明いたします。 先ほど説明を省略いたし ました画面の入力規則に ついてご説明いたします。 画面レイアウト 画面遷移の例 受付状況確認画面 入出力項目 ログイン画面 ［受付状況確認］ ［注文］ ［ログイン］ 開発者 ［注文入力］ ［書籍検索］ メニュー画面 書籍検索画面 注文入力画面 注文結果確認画面 ［書籍登録］ ［確認］ ［購入受付］ 書籍登録画面 書籍登録確認画面 購入受付画面 Copyright ©2008 IPA 第3部 - 15 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第3部 レビュー 2.1 設計書レビューの進め方のコツ 仕掛期 充実期 完成期 【FR0006】複数の情報項目が組み合わされて一つの情報項目を表すルールがある場合、そ の組み合わせに名称（情報項目群）をつけて組み合わせの名称で説明を行う。 背景：あるまとまった情報項目群があれば、それらをグルーピングした言葉（情報項目群）を使って説明する。 たとえば、下図の「事務所名」 「事務所名（カナ）」 「事務所種別」 「担当部署」「所属」「他社」「利用可否」を組み合わせて「事務所情 報」と定義し、「この画面では事務所情報を入力します。」などと説 明を行う。 また、情報項目群がどのような項目を含むのか 一目でわかる資料を別途用意する。 情報項目群 事務所情報 項目 事務所名 事務所名（カナ） 事務所種別 担当部署 所属 他社 利用可否 Copyright ©2008 IPA 第3部 - 16 第3部 レビュー 2.1 設計書レビューの進め方のコツ 仕掛期 充実期 【FR0007】継続検討している箇所については発注者と開発者の間で情報を共有する。 背景：画面遷移の確定は、個別の画面設計を待たなければいけない場合もあるため、あらかじめそれを考 慮したレビューの進め方を計画する必要がある。 画面遷移のうち、個別の画 面設計を待つ必要がある 部分についてはレビュー時 に明示し、発注者と開発者 の間で認識をあわせる。 [画面遷移] 受付状況確認画面 ログイン画面 ［受付状況確認］ ［注文］ ［ログイン］ ［注文入力］ ［書籍検索］ メニュー画面 書籍検索画面 注文入力画面 注文結果確認画面 ［書籍登録］ なお、画面遷移が確定する べき期日も、レビュー時に 明確にしておく。 ［確認］ ［購入受付］ 書籍登録画面 書籍登録確認画面 購入受付画面 この範囲の画面遷移 は、個別画面の工程成 果物のレビュー完了後、 再度見直しを行う Copyright ©2008 IPA 第3部 - 17 第3部 レビュー 2.1 設計書レビューの進め方のコツ 仕掛期 充実期 【FR0008】発注者の理解度を確認しながらレビューを進める。 背景：発注者が理解する前に話を進めると、仕様のチェックができない。 仕掛期 仕掛期 ユーザに業務運用の可否、例外的な業務運用の場合の対応方法の確認を行うとよい。 ・説明した画面の遷移、操作で業務を運用できるか？ ・説明した画面の遷移、操作では対応できない例外的な業務運用はないか？ 充実期 充実期 仕掛期で確認した事項に齟齬がないかの再確認を行うとよい。 ・例外的な業務運用の場合に説明した画面遷移、操作で対応できることをユーザに確認する。 レビュー中に気にかけること（例） ・画面の意味や機能をわかってもらえるだろうか ・発注者の要求に応えた画面になっているだろうか ・出来ないことについても理解してもらえただろうか 開発者 Copyright ©2008 IPA 第3部 - 18 第3部 レビュー 2.1 設計書レビューの進め方のコツ 充実期 完成期 【FR0009】想定される例外条件を網羅的に洗い出す。 背景：例外条件の網羅性が不十分でないことを確認する必要がある。 押下するボタンや入力する値等の画面に対するすべての操作に対して想定する例外に漏れが無いかを確認 する。 表（ディシジョンテーブル）を作成すると網羅性を確認することが出来る。 例 表形式による網羅性の確認 この例では入力値には8つ のパターンがあります。 画面１-登録処理 入力値 項目１ Y Y Y Y N N N N あり･･･Y 項目２ Y Y N N Y Y N N 項目３ Y N N Y Y N Y N 結果 正常処理 X X X 実行･･･X 例外処理１ X X X X なし･･･N 例外処理２ Copyright ©2008 IPA 入力値 X 第3部 - 19 第3部 レビュー 第3章 工程成果物に着目したレビューのポイント 画面設計書レビューにおいて、特定の工程成果物に着目したコツを以下 の３つに分類して説明する。 画面全体にわたる共通事項をレビューするコツ 画面の一連の動きをレビューするコツ 一つの画面をレビューするコツ Copyright ©2008 IPA 第3部 - 20 第3部 レビュー 3.1 画面全体にわたる共通事項をレビューするコツ 「共通ルール」等を用いて、全体的な統制をレビューするコツ 画面設計書レビューのコツと、工程成果物およびフェーズの関連は次のとおり。 フェーズ ○ 画面共通の情報と、個別の画面の情報は分離して説明する。 ○ ○ FR1003 レビューの際に、共通ルールに従った具体例を提示して説明する。 ○ ○ FR1004 画面一覧を活用して発注者との間に必要な機能などの認識の齟 齬がないか早期に確認する。 FR1005 レビューの際にエラー表示を具体的に説明し、表示の妥当性判 断に役立てる。 Copyright ©2008 IPA ○ 完成期 ○ 充実期 仕掛期 工程成果物間 アクション明細 入出力項目 FR1002 ○ 共通ルール FR1001 発注者が実際に操作できるプログラム等を使って画面レイアウト の仕様の確認をする場合は、レビュー前に確認項目をまとめてお く。 画面遷移 内容 画面一覧 ＩＤ 画面レイアウト 工程成果物 ○ ○ ○ ○ ○ 第3部 - 21 第3部 レビュー 3.1 画面全体にわたる共通事項をレビューするコツ 画面レイアウト 共通ルール 【FR1001】発注者が実際に操作できるプログラム等を使って画面レイアウトの仕様の確認を する場合は、レビュー前に確認項目をまとめておく。 背景：発注者に実際の操作イメージを説明する際に、出来上がり状態の画面ではなく紙資料を用いると、操 作感を確認しにくく、良し悪しの判断がつかない。 レビューの事前準備 ポイント： ①実際に操作できるプログラム等の作成 確認したい内容を予めリストアップしておく ②実際に操作できるプログラム等を使って確認したい項目のリストアップ 実際に操作できるプログラムの例 確認項目の例 実際に操作できるプログラムにおける発注者確認事項 書籍管理画面の操作における発注者確認事項 1 入力項目の配置場所が適当か 2 3 ボタンの配置場所が適当か レイアウトの確認 4 5 ボタン、入力項目に過不足がないか ボタン、入力項目以外の画面部品の配置が適当か 操作の確認 ボタンの操作順序は適当か レビュー時の説明 1. 発注者に実際に操作できるプログラム等を利用して説明を行う。その際、予め用意した確認事項のリス トに沿って確認していく。 Copyright ©2008 IPA 第3部 - 22 第3部 レビュー 3.1 画面全体にわたる共通事項をレビューするコツ 共通ルール 【FR1002】画面共通の情報と、個別の画面の情報は分離して説明する。 背景：画面個別に設計書へ記載しなければならない事項やレビューのポイントを絞り込む。 表記例は Java Pet Store* を題材としています。 カート レビューを実施する際、画 面共通の情報と画面個別 の情報は分けて説明する。 検索 ロゴ 魚類 犬 爬虫類 猫 鳥 ユーザ名 と パ スワ ードを入 力し てくだ さ い！ ① 画面共通の情報において は、共通部分のアクション、 入出力項目についても説 明する。たとえば共通ヘッ ダー内にイベントが定義さ れている場合、それらも説 明する。 ユーザ 名 ： ② パ スワ ード： ③ ロ グ イン ユーザ 名 とパ ス ワード が な い 場 合 は 今 すぐ登 録 しましょ う ！ ロゴ (個別画面) (共通ヘッダー) アクション明細 アクション明細 入出力項目 入出力項目 画面レイアウト 画面レイアウト カート カート 検索 ロゴ 犬 爬虫類 猫 検索 ロゴ 魚類 魚類 犬 爬虫類 猫 鳥 鳥 ユーザ 名 と パス ワードを入 力 し て くだ さ い ！ ① ② ユーザ 名： 画面個別の情報において は、画面共通の情報は説 明しない。このように分離 することで、抜け漏れなく、 かつスムーズにレビューを 進めることができる。 パスワード： ③ ロゴ Copyright ©2008 IPA ロ グ イン ユーザ 名 とパ ス ワ ード が な い 場 合 は 今 すぐ登 録 しましょ う ！ 第3部 - 23 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第3部 レビュー 3.1 画面全体にわたる共通事項をレビューするコツ 共通ルール 【FR1003】レビューの際に、共通ルールに従った具体例を提示して説明する。 背景：共通ルールに従った画面設計がどうなるか、従わない画面がどうなるかを、中間成果物や作成例を示 しながらレビューすることによって、共通ルールとしての正確さについて合意することができる。 [共通ルール](抜粋) 共通ルールを適用したテン プレートやサンプルを準備 することで、その共通ルー ルの妥当性が検証しやすく なる。 3. 画面設計基準 3.4 ヘッダー領域 [4] ナビゲーションエリア ・・・ [5] コンテンツタイトルエリア ・・・ [6] メッセージエリア ・・・ 共通ルールに従った 作成例を提示 [画面レイアウト] カート 検索 ロゴ 魚類 犬 爬虫類 猫 鳥 ユ ー ザ 名 と パ ス ワ ー ドを入 力 し て くだ さ い ！ ① ② ユ ーザ 名 ： パ ス ワ ード： ③ ロゴ ログイン ユ ー ザ 名 とパ ス ワ ー ド が な い 場 合 は 今 す ぐ登 録 しま しょ う ！ 表記例は Java Pet Store* を題材としています。 Copyright ©2008 IPA 第3部 - 24 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第3部 レビュー 3.1 画面全体にわたる共通事項をレビューするコツ 画面一覧 【FR1004】画面一覧を活用して発注者との間に必要な機能などの認識の齟齬がないか早期 に確認する。 背景：画面レイアウト等の画面仕様の定義が完了していなくても、期間や規模に応じて、画面一覧で全体を確 認する。これにより、早い段階で画面の抜け漏れや重複を確認できる。 No. 画面名 画面ID 分類 1 ペットストアポー S-00-01 メニュー タル画面 2 ペット登録画面 S-01-01 入力フォーム 階層 階層1 階層2 ペットストア ユーザ機能ポー 総合メニュー タルメニュー 5 ペット検索結果表 示画面 6 位置情報表示画 面 7 ユーザログイン 画面 8 ユーザ登録画面 9 ユーザ同意書表 示画面 ペットストア 総合メニュー S-03-01 条件入力フォーム ペットストア 総合メニュー S-03-02 検索結果一覧表 ペットストア 示フォーム 総合メニュー S-04-01 地図表示フォーム ペットストア 総合メニュー S-05-01 入力フォーム ペットストア 総合メニュー S-05-02 入力フォーム ペットストア 総合メニュー S-05-03 情報表示フォーム ペットストア 総合メニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー 10 プライバシーポリ S-05-04 情報表示フォーム ペットストア ユーザ機能ポー シー表示画面 総合メニュー タルメニュー ペットストア ユーザー登録の際に間違いを 総合メニュー 減らすためにユーザー登録画 ペットストア 総合メニュー 面で入力した項目を確認する ペットストア 総合メニュー 画面が欲しいのですが… 11 ユーザ登録完了 S-05-05 完了通知画面 画面 12 カタログ画面 S-06-01 画像付情報表示 フォーム 13 ショッピングカート S-06-02 情報表示フォーム 表示画面 14 支払い情報入力 S-06-03 入力フォーム 画面 15 注文完了画面 S-06-04 完了通知画面 発注者 Copyright ©2008 IPA － ペットストア ユーザ機能ポー ペット登録 総合メニュー タルメニュー 3 販売者登録画面 S-02-01 入力フォーム 4 ペット検索画面 階層3 ペットストア 総合メニュー ペットストア 総合メニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ユーザ機能ポー タルメニュー ペット登録 ペット検索 ペット検索 説明 機能名 ペットストアのポータル。購入、検 索、カタログ選択などのメニューを表 示する。 販売者が、販売したいペットの情報 （カテゴリ、名前、特徴、価格、画像、 タグ）を登録する。 販売者の情報（氏名、住所等）を登 録する。 ペットを検索するための条件を入力 する。 ペットの検索結果を一覧表示する。 位置検索 地図上に、選択した位置（所望の （地図） ペットの居場所）を表示する。 ユーザ登録 ペットの売買に参加するためにシス テムにログインする。 ユーザ登録 ペットの売買に参加するためにユー ザ登録を行う。 ユーザ登録 ユーザ登録を完了させるために、同 意書を表示し、同意の意志を確認す る。 ユーザ登録 ユーザ登録を完了させるために、プ ライバシーポリシーを表示し、同意 の意志を確認する。 ユーザ登録 ユーザ登録が完了したことを通知す る画面。 カタログ 購入者が、ペットのカタログを表示す る画面。 ペット購入 購入者が、所望のペットを選択し、 ショッピングカートの内容を表示する 画面。 ペット購入 購入者が、支払いの情報を入力す るための画面。 ペット購入 ペットの購入の注文が完了したこと を通知する画面。 メニュー 機能ID 備考 F001 - ペット登録 Ｆ101 登録時に入力必須情報を チェックする。 販売者登録 F201 登録時に入力必須情報を チェックする。 ペット検索 F301 ペット検索 F301 位置検索 F401 ユーザ登録 F501 ユーザ登録 F501 ユーザ登録 F501 ユーザ登録 F501 ユーザ登録 F501 ペット購入 F601 ペット購入 F601 ペット購入 F601 ペット購入 F601 画面一覧を用い て抜け漏れなど を確認する - ・全部で15枚の画面がありま す。 ・ペット登録・・・○○枚 ・ペット検索・・・○○枚 ・ユーザ登録・・・○○枚です ・画面は、入力フォーム、条 件入力フォーム、情報表示 フォームから構成されます。 ・・・ - パスワードエラーの場合の 再入力は3回までとする。 登録時に入力情報をチェッ クする。 登録時に入力情報をチェッ クする。 - 確かに。 それでは追加する方向で検討 させていただきたいと思います。 表記例は Java Pet Store* を題材としています。 開発者 第3部 - 25 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第3部 レビュー 3.1 画面全体にわたる共通事項をレビューするコツ 画面レイアウト 共通ルール 【FR1005】レビューの際にエラー表示を具体的に説明し、表示の妥当性判断に役立てる。 背景：エラー表示については、レビューにおける確認が疎かになったり、あまり注意していない場合も多い。 ユーザにとっては問題が発生したときに次に行うべきことを理解する情報であることを注意しておくべきであ る。また、個別のエラー表示をレビューするときには共通ルールも確認しながらレビューすべきである。 エラー表示例（画面レイアウト、または別紙） ＄％＆ 検索 この画面で入力した文字が不 正だと、エラーがこのように表 示され、ユーザに再入力を促 します。 [不正な文を入力して “検索”押下］ 入力文字エラーです。 検索 ［入力文字を消して “検索”押下］ この表示でユーザが迷わない かな？ このメッセージで次に何をす ればいいかが、伝わるかな？ 共通ルールのエラー表示に関する記述 7 エラー表示方法、エラーメッセージ （１）エラー表示方法分類 エラー表示方法の分類を次の表のとおりとする。 種別 概要 1 簡易な入力エラー クライアント側でチェック可能な簡単な入力 エラー 2 サーバ送信後のエラー サーバ側のリクエストに対する処理でエ ラー検知 開発者 Copyright ©2008 IPA エラー表示方法 ダイアログによる英語メッセー ジ 画面遷移したのち、各国語に よるメッセージをコンテンツエリ ア（main）に表示する。 3 上記以外の致命的エ 何らかの不具合により処理が続行できない 共通のエラー画面に遷移し、 ラー メッセージを表示する。 入力エラー通知に用いるメッセージは理解容易な英語にできることから、英語メッセージに統一する。 サーバ側で処理した結果のエラーはユーザへの通知を明確にするために、各国語によるメッセージとする。 （２）エラー画面レイアウト図 特に定めない。個別の画面レイアウトに従う。 （３）エラーメッセージ書式定義 コンテンツエリア内に示す主たるメッセージ部分にはアクセントカラーを用いる。 発注者 レビューにおいてエラー表 示についての確認は疎か になりやすい。 ユーザに再入力を促す業 務のエラーと、操作の中止 を促すエラーの切り分けを 共通ルールに定めおき、発 注者はアプリケーションか ら発せられるエラー（警告） についての表示方法とその 表現の妥当性確認に注力 する。 設計書で「○○の場合は エラーとなる。」とだけ記述 されている場合は、エラー の表示が妥当であるか、注 意するほうがよい。 第3部 - 26 第3部 レビュー 3.2 画面の一連の動きをレビューするコツ 「画面遷移」「画面レイアウト」等を用いて画面の一連の動きをレビューするコツ 画面設計書レビューのコツと、工程成果物およびフェーズの関連は次のとおり。 工程成果物 FR2001 業務の流れ、画面遷移のレビューを実施してから画面レイアウ トのレビューを実施する。 ○ FR2002 画面遷移とアクション明細が抜け漏れなく記述されていることを 確認できるように、対応付けて説明する。 ○ FR2003 業務の流れに沿って画面遷移および画面レイアウトのレビュー を実施する。 ○ ○ ○ ○ FR2004 画面レイアウトのレビューの際、画面遷移の該当箇所を示す。 ○ ○ ○ ○ FR2005 画面レイアウトと共に画面遷移が見られるように予め用意して おき、遷移の発生する画面部品を説明するときは、遷移後の画 面を説明し、画面遷移上の位置を示す。 ○ ○ ○ ○ Copyright ©2008 IPA ○ ○ 完成期 充実期 仕掛期 工程成果物間 アクション明細 入出力項目 共通ルール 画面レイアウト 画面遷移 内容 画面一覧 ID フェーズ ○ ○ 第3部 - 27 第3部 レビュー 3.2 画面の一連の動きをレビューするコツ 画面遷移 画面レイアウト 【FR2001】業務の流れ、画面遷移のレビューを実施してから画面レイアウトのレビューを実 施する。 背景：画面遷移や業務の流れに基づいて説明対象の画面に関係する画面を示し、業務の流れや画面遷移 における該当箇所を説明しないと、説明される情報の構造が発注者の中で組み立てられず、混乱してしまう. レビューの順序 ※「業務フロー」はガイドラインの範疇外となります。 ①業務フロー ※ ②画面遷移 ③画面レイアウト 業務フローから画面遷移へ、画面遷移から画面レイアウトへ、と概要から詳細の順序になるよう説明する。 画面遷移に沿って説明する場合、必要であれば既に説明済みの画面レイアウトも再度説明する。 画面レイアウト 業務の流れ 業務フロー 書籍購入者 画面遷移 書籍販売業者 書籍検索 システム管理者 検索条件 受付状況確認画面 書籍の登録 ［受付状況確認］ ［注文］ ［ログイン］ 書籍購入 者登録 ログイン ［注文入力］ ［書籍検索］ メニュー画面 購入 書籍名 著者名 ログイン画面 書籍検索画面 注文入力画面 注文結果確認画面 検索 検索結果 画像 書籍名 著者 ISBN ［書籍登録］ ［確認］ 購入受付 ［購入受付］ 書籍登録画面 受付状況 確認 購入受付画面 Copyright ©2008 IPA 書籍登録確認画面 注文開始 書籍登録開始 第3部 - 28 第3部 レビュー 3.2 画面の一連の動きをレビューするコツ 画面遷移 【FR2002】画面遷移とアクション明細が抜け漏れなく記述されていることを確認できるように、 対応付けて説明する。 背景：画面遷移とそれに対応するアクション明細との対応関係を明確にする。 [画面遷移] ・画面遷移の特定の画面に 紐づくアクションが、アク ション明細に記載されてい るものと一致していることを 確認できるように、対応付 けて説明する。 抜け漏れなく記述されていることを確認でき るように、関連付けて説明する メニュー画面 [ユーザ管理] [戻る] [ユーザ削除] ユーザ管理画面 [ユーザ登録] [アクション明細]（ユーザ管理画面） ID イベント アクションの処理概要 入力 A-05 ユーザ登録 入力されたユーザ情 報を登録する。 ユーザ 入力されたユーザ情 報を削除する。 ユーザ ユーザ登録画面 A-06 ユーザ削除画面 Copyright ©2008 IPA A-07 ユーザ削除 戻る ・画面共通のアクションなど 別個の設計書に記載され ているものがあれば、その 旨説明する。 名 名 メニュー画面に戻る。 第3部 - 29 第3部 レビュー 3.2 画面の一連の動きをレビューするコツ 画面遷移 画面レイアウト 【FR2003】業務の流れに沿って画面遷移および画面レイアウトのレビューを実施する。 背景：画面遷移や業務の流れに基づいて、説明対象の画面に関係する画面を示し、業務の流れや画面遷移に おける該当箇所を説明しないと、説明される情報の構造が発注者の中で組み立てられず、混乱してしまう。 レビューの事前準備 ①発注者に理解してもらいやすい業務、画面遷移の提示順序を決定する。 ②画面レイアウトの説明順序を補足説明資料として作成する。 補足説明資料例（画面レイアウトの説明順序） 画面レイアウトの説明順序 説明順序 順序 1 2 業務名 画面遷移ID ログイン画面 購入準備 メニュー画面 3 4 書籍検索画面 購入 注文入力画面 5 注文確認画面 6 注文受付 7 注文状況確認画面 注文受付画面 DT-0001 注文状況確認画面 （書籍検索画面） 8 9 画面名 書籍登録 書籍登録画面 10 書籍登録確認画面 11 書籍の購入者一覧画面 12 13 Copyright ©2008 IPA ポイント： ・画面遷移にできるだけ沿った順序になるよ うにする。 ・実現の重要性の高い画面の説明が先にな るようにする。 ・全ての画面がレビューに含まれるようにす る。 購入者登録 ポイント： ・業務の流れに沿って説明するために、必要 であれば、既に説明済みの画面レイアウトも 再度説明する。 書籍の購入者登録画面 書籍の購入者登録確認画面 第3部 - 30 第3部 レビュー 3.2 画面の一連の動きをレビューするコツ 画面遷移 画面レイアウト 【FR2004】画面レイアウトのレビューの際、画面遷移の該当箇所を示す。 背景：画面遷移や業務の流れに基づいて、説明対象の画面に関係する画面を示し、業務の流れや画面遷移 における該当箇所を説明しないと、説明される情報の構造が発注者の中で組み立てられず、混乱してしまう。 説明例 「この画面遷移において、書籍検索画面のレイアウトについて説明します。」と、画面遷移と画 面レイアウトの両方を示す。 レビュー対象の画面レイアウトの例 画面遷移の例 書籍検索 受付状況確認画面 検索条件 ログイン画面 書籍名 著者名 ［受付状況確認］ ［注文］ ［ログイン］ ［注文入力］ ［書籍検索］ メニュー画面 書籍検索画面 検索 検索結果 注文入力画面 注文結果確認画面 画像 書籍名 著者 ISBN ［書籍登録］ ［確認］ ［購入受付］ 書籍登録画面 購入受付画面 Copyright ©2008 IPA 書籍登録確認画面 注文開始 書籍登録開始 第3部 - 31 第3部 レビュー 3.2 画面の一連の動きをレビューするコツ 画面遷移 画面レイアウト 【FR2005】画面レイアウトと共に画面遷移が見られるように予め用意しておき、遷移の発生 する画面部品を説明するときは、遷移後の画面を説明し、画面遷移上の位置を示す。 背景：遷移の発生する画面部品の説明時に、遷移後の画面も合わせて説明すると、前後のつながりを意識付 けでき、発注者は業務の流れについて確認できる。（開発者にとってもその後の説明がしやすくなる。） 説明1：◇◇の伺いに対して差し戻しをするとき、 説明2：このときの画面遷 画面レイアウトの差戻しボタンをクリックします。 移での位置づけは、この 伺い種別が○○の場合、コメント記入画面に遷 部分です 移します。伺い種別が△△な場合は、ダイアログ を表示後、稟議一覧画面に移ります。 遷移後の画面の例 基本情報 画面遷移の例 稟議一覧 レビュー対象の画面の例 ID ◇◇伺い 説明のポイント： ・画面部品の説明時に遷移後の画面も示す。 ・対応する画面遷移の位置を示す。 文書名 種別 起案者 選択 稟議一覧画面 [“表示”ボタンを押す] 文書名 種別 詳細情報 起案者 XXX XXX XXX 表示 表示 [“差し戻し”ボタンを押す] 差戻し 差戻し 遷移の発生する画面部品 （説明対象） Copyright ©2008 IPA 伺い書確認画面 差戻し 伺い種別が△△ 伺い種別が○○ コメント 次へ 次へ コメント記入画面 第3部 - 32 第3部 レビュー 3.3 一つの画面をレビューするコツ 「画面レイアウト」「入出力項目」「アクション明細」等を用いて一つの画面をレビューするコツ 画面設計書レビューのコツと、工程成果物およびフェーズの関連は次のとおり。(1/2) フェーズ ID 内容 FR3001 特に重要であったり、複雑であったりする画面レイアウトは、全て のパターンについて漏れなく説明する。 ○ FR3002 条件に応じて画面レイアウトが変化する場合基準となる画面レイ アウトだけを説明するのではなく、権限や条件に対応する画面を 一つずつ説明する。 ○ FR3003 画面レイアウトにて、見た目が似たような画面部品が存在する場 合、それぞれの違いを明確にして説明する。 ○ FR3004 配色を確認するときは、実際に表示してみせる。 ○ FR3005 画面レイアウトを用いて入出力項目をレビューする。 ○ ○ ○ ○ FR3006 入出力項目の桁数と画面レイアウトの表示範囲が異なる場合、 明示的に説明する。 ○ ○ ○ ○ FR3007 画面レイアウトの入出力項目は、入力・出力定義の説明を行う。 ○ ○ ○ ○ Copyright ©2008 IPA 完成期 充実期 仕掛期 工程成果物間 アクション明細 入出力項目 共通ルール 画面遷移 画面一覧 画面レイアウト 工程成果物 ○ ○ ○ ○ ○ ○ 第3部 - 33 第3部 レビュー 3.3 一つの画面をレビューするコツ 「画面レイアウト」「入出力項目」「アクション明細」等を用いて一つの画面をレビューするコツ 画面設計書レビューのコツと、工程成果物およびフェーズの関連は次のとおり。(2/2) ○ ○ ○ FR3009 画面レイアウト上で入出力項目とアクション明細を合わせること で、条件分岐の認識が発注者と一致していることを確認する。 ○ ○ ○ FR3010 仕様の検証に必要十分な情報が記述されているか確認する。 Copyright ©2008 IPA ○ ○ 完成期 FR3008 画面レイアウトの説明後、入力が必要な箇所やボタン押下時の 動作を説明しておくと、後々の入出力項目やアクション明細のレ ビューの際に発注者の理解が得やすい。 充実期 内容 フェーズ 仕掛期 ID 工程成果物間 アクション明細 入出力項目 共通ルール 画面遷移 画面一覧 画面レイアウト 工程成果物 ○ ○ ○ 第3部 - 34 第3部 レビュー 3.3 一つの画面をレビューするコツ 画面レイアウト 【FR3001】特に重要であったり、複雑であったりする画面レイアウトは、全てのパターンにつ いて漏れなく説明する。(1/2) 背景：複数の表示パターンがある場合には、実際の表示パターンを全て示すと漏れなく確認することができる。 （特に可変長の表で長い場合と短い場合や表示内容が場合によって変わる画面での全パターンを対象とする） レビューの事前準備 ¾表示パターンを補足説明資料として作成する 書籍検索結果表示画面の表示パターンのご説明 表示パターン 画面ID：BS-002 画面名：書籍検索結果表示画面 1 検索結果の一覧が1件以上10件以下の場合 2 検索結果の一覧が11件以上で、1件から10件までを表示する場合 3 検索結果の一覧が11件以上で、11件以降を表示する場合 4 検索結果の一覧が11件以上で、最後のページを表示する場合 5 検索結果が0件の場合 6 検索条件が不正であった場合 Copyright ©2008 IPA ポイント： ・発注者にとっての優先度順に並 べる ・全てのパターンを記述する 第3部 - 35 第3部 レビュー 3.3 一つの画面をレビューするコツ 画面レイアウト 【FR3001】特に重要であったり、複雑であったりする画面レイアウトは、全てのパターンにつ いて漏れなく説明する。(2/2) 背景：複数の表示パターンがある場合には、実際の表示パターンを全て示すと漏れなく確認することができる。 （特に可変長の表で長い場合と短い場合や表示内容が場合によって変わる画面での全パターンを対象とする） 表示パターン1：検索結果の一覧が1件以上10件以下の場合 表示パターン2：検索結果の一覧が11件以上で、1件から10件 までを表示する場合 書籍検索結果表示 書籍検索結果表示 検索条件：書籍名＝○○○ 画像 書籍名 著者 検索条件：書籍名＝○○○ ISBN 画像 書籍名 著者 ISBN 次の10件へ ポイント： ・全ての表示パターンの画面レイアウトを示す。 レビュー時の説明 ¾全ての表示パターンについて画面レイアウトを説明する Copyright ©2008 IPA 第3部 - 36 第3部 レビュー 3.3 一つの画面をレビューするコツ 画面レイアウト 【FR3002】条件に応じて画面レイアウトが変化する場合基準となる画面レイアウトだけを説 明するのではなく、権限や条件に対応する画面を一つずつ説明する。 背景：特定のパターンで、開発者の都合のよいところだけ見せると情報システムの実態を隠蔽してしまうこと になり、全体観の把握および過不足や問題点の指摘をいただくタイミングを逃してしまう。 ① ペット購入者の場合 ペット購入者の場合です。 ヘルプ画面のみ表示さ れます。 ヘルプ入力画面 対応者：システム管理者 ヘルプ入力画面 新規作成 メニュー ログアウト 問合せ情報 氏名 取消 ▲ ▼ 問合せ内容 開発者 ヘルプ入力画面 対応者：システム管理者 新規作成 メニュー ペット販売業者の場合です。 ヘルプ画面の情報に加え 基本情報も表示されます。 ログアウト 問合せ情報 変更登録 問合せ番号 氏名 ▲ ▼ 問合せ内容 画面パターン ペット購入者 ① ペット販売業者 ② ヘルプセンター ③ システム管理者 ④ 削除 ② ペット販売業者の場合 ヘルプ入力画面 ヘルプ入力画面表示項目パターン 役割名 変更登録 問合せ番号 表記例は Java Pet Store* を題材としています。 ①ヘルプ入力画面 ②ヘルプ入力画面＋基本情報 取消 ③ヘルプ入力画面＋基本情報＋ヘルプセン ター情報 削除 ④ヘルプ入力画面＋ヘルプセンター情報 基本情報 ヘルプ受付時 受付No 対応開始 受付日 対応者 対応内容 ▼ 差戻し ▲ ▼ Copyright ©2008 IPA 対応依頼 開発者 設計書に整理して記載された、権限や条件と 対応して画面レイアウトを説明する。 対応回答 第3部 - 37 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第3部 レビュー 3.3 一つの画面をレビューするコツ 画面レイアウト 【FR3003】画面レイアウトにて、見た目が似たような画面部品が存在する場合、それぞれの 違いを明確にして説明する。 背景：画面部品の説明では、違いを明確にすると、その画面の仕様と合致しているか判断がしやすい。 表記例は Java Pet Store* を題材としています。 ＜レビュー時の説明例＞ 同じテキスト ボックスで桁数 が異なる 「本画面にはユーザ名とパ スワードの2つテキストボッ クスがありますが、入力で きる桁数はそれぞれユー ザ名が20桁、パスワードが 12桁となっております。」 ※同じテキストボックスでも 桁数が異なる場合、その旨 説明する。 Copyright ©2008 IPA 第3部 - 38 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第3部 レビュー 3.3 一つの画面をレビューするコツ 画面レイアウト 共通ルール 【FR3004】配色を確認するときは、実際に表示してみせる。 背景：共通ルールによる各エリアの配色やレイアウト例を施した状態の見た目の全体表示イメージを用意して、 各エリアの配色やエリア同士の配色の組み合わせに問題がないか確認できるようにする。 HTMLで作成したレイアウトサ ンプルデータ、Visioやパワー ポイントなどで作成した画面イ メージを活用して実際の配色な どを確認する。 なお、どのような方法で確認用 の資料を準備するかは場合に 応じて決定する。 Copyright ©2008 IPA 第3部 - 39 第3部 レビュー 3.3 一つの画面をレビューするコツ 画面レイアウト 【FR3005】画面レイアウトを用いて入出力項目をレビューする。 入出力項目 表記例は Java Pet Store* を題材としています。 背景：入出力が発生する場合は、その内容を入出力項目と合わせて説明すると、業務の流れが想起できる。 大まかなレビューの順序 ①画面レイアウトにて入出力を伴う画面部品のレイアウトについてレビューする。 ②画面レイアウトを示しながら他の工程成果物である入出力項目をレビューする。 画面レイアウトの例 入出力項目の例 ポイント： ・画面レイアウト上で対応 する入出力の項目を示す。 Copyright ©2008 IPA 第3部 - 40 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html 第3部 レビュー 3.3 一つの画面をレビューするコツ 画面レイアウト 入出力項目 【FR3006】入出力項目の桁数と画面レイアウトの表示範囲が異なる場合、明示的に説明する。 背景：入出力項目の表示桁数と画面レイアウトの表示範囲が異なっている場合、明示的に説明しないと発 注者が認識できない場合がある。 [画面レイアウト] 従業員ID 氏名 画面上の表示桁 数と入力可能な 桁数が異なる 住所 入出力項目と画面レイアウ トの表示桁数が一致してい るかを確認する。意図的に 変える場合があるので、そ の意図を確認する。 [入出力項目] 表示用の ラベル 部品の種類 有 効 入 力 表 示 桁数 入力 桁数 データ型 従業員ID ラベル － × 18 － 文字列 氏名 テキストボックス ○ ○ 18 10 文字列 住所 テキストボックス ○ ○ 18 30 文字列 Copyright ©2008 IPA ・・・ 第3部 - 41 第3部 レビュー 3.3 一つの画面をレビューするコツ 画面レイアウト 入出力項目 【FR3007】画面レイアウトの入出力項目は、入力・出力定義の説明を行う。 背景：どこが入出力になるかを明示的に説明しないと、発注者が認識できない場合がある。 画面レイアウトの入出力項目は、対応する入出力項目設計書を使用して「入力」「出力」の区分を説明する。 従業員ID [画面レイアウト] 氏名 住所 [入出力項目] 表示用の ラベル 部品の種類 有 効 入 力 表 示 桁数 入力 桁数 従業員ID ラベル － × 18 － 入力なし/出力あり 文字列 氏名 テキストボックス ○ ○ 18 10 入力あり/出力あり 文字列 住所 テキストボックス ○ ○ 18 30 入力あり/出力あり 文字列 Copyright ©2008 IPA データ型 ・・・ 第3部 - 42 第3部 レビュー 3.3 一つの画面をレビューするコツ 画面レイアウト 入出力項目 アクション明細 【FR3008】画面レイアウトの説明後、入力が必要な箇所やボタン押下時の動作を説明してお くと、後々の入出力項目やアクション明細のレビューの際に発注者の理解が得やすい。 背景：画面レイアウトの説明時に、あらかじめ入出力項目やアクション明細を意識した説明を行っておくこと で、後々でのレビューをスムーズに進められる。 ＜画面レイアウトのレビュー＞ 画面レイアウトの例 （AAAA010） メニュー 出張情報登録 レビュー時の説明例 1.画面レイアウトの確認 部署 氏名 氏名（カナ） 国内/海外 国内 海外 ▼ 国コード 旅費精算 前払い 出張経験（海外） 立替 有 無 画面印刷 ヘルプ 登録 リセット 請求書 ポイント： ・一番確認したいのは画面部品の配置。 ・入出力、アクションは簡単な説明に留める。 ・入力と画面の連動があるかどうか程度の 確認は行っておくとよい。 2.入力が必要な箇所、ボタン押下時の説明 （例） ・部署は、出張者の所属部署を入力するテキスト ボックスです。 ・・・《中略》 ・国内/国外は、出張先を選択するラジオボタンです。 ・国コードは国外を選択したときのみ有効で、国内を 選択すると無効になります。 ・国コードは、ドロップダウンで、表示された国名から 一つ選択できます。 ・・・《中略》 ・メニューボタンを押すと、メニュー画面へ遷移します。 ・登録ボタンを押すと、出張情報登録確認画面へ遷移 します。 ・・・《略》 画面レイアウトのレビューを行った後で入出力項目やアクション明細の説明をするときに、画面の動作の説明を簡単に行った 旨を伝える。 ※説明しすぎると、画面の部品の配置や画面構成を確認したいのに、入力項目やボタン動作に話題が集中してしまう。仕掛期では具体的なことはいえないはずなのに、発注 者は決まったつもりになってしまう Copyright ©2008 IPA 第3部 - 43 第3部 レビュー 3.3 一つの画面をレビューするコツ 画面レイアウト 入出力項目 アクション明細 【FR3009】画面レイアウト上で入出力項目とアクション明細を合わせることで、条件分岐の認 識が発注者と一致していることを確認する。 背景：入力値による条件分岐などの場合、入出力項目の成果物と合わせることによって、条件の内容を明 確にできる。 新規ユーザ登録 氏名 ① 郵便番号 ② 住所 ③ 電話番号 FAX番号 ④ ⑤ メールアドレス ⑥ ID アクション名 イベント名 アクションの処理概要 確認用 ⑦ A-001 顧客情報登録 登録ボタン押下 ⑥と⑦の記載内容が異なった 場合には、エラーメッセージを 表示する。 メールアドレス 登録 入出力項目 画面レイアウト 「メールアドレス」と「確認用 メールアドレス」が異なる 場合にはエラーメッセージを 表示するという動作の 認識が発注者と一致 していることを確認する。 Copyright ©2008 IPA 記載内容が一致した場合に は次の画面に進む。 アクション明細 レビューの方法： （1）入出力項目で入力情報の仕様を確認する。 （2）アクション明細で、入力情報の違いによる条件分岐の認識が発 注者と一致していることを確認する。 第3部 - 44 第3部 レビュー 3.3 一つの画面をレビューするコツ アクション明細 【FR3010】仕様の検証に必要十分な情報が記述されているか確認する。 背景：仕様の検証に必要十分な情報が記述されていないとテスト工程での検証が出来なくなる。 「何を」、「どのように」、「どうする」という入力、処理、出力の内容が明確になっているか を確認する。 表記例は Java Pet Store* を題材としています。 プロジェクト名 ドキュメントID ドキュメント名 画面ＩＤ 概要 ID A-05-001 A-05-002 Java Pet Store 工程 全てのアクションに対して入力・出力 佐藤一郎 作成日付 が定義出来ているかも確認する。 更新日付 A社殿向けJava Pet Store開発 システム名 JPS0001 作成者 Java Pet Store外部設計書 更新者 S-05-01 画面の名称 ペット購入システムを利用するために必要なログイン画面 アクション名 イベント名 アクションの処理概要 入力 アクションの処理詳細 ログイン ログインボタン 押下 入力されたUsername Username とPasswordをもとに顧 Password 客データを検索し、 ユーザ情報画面を表 顧客情報テーブル 示する。 ①UsernameとPasswordの入力チェック ユーザ登録 「Register Now!」リンク押 下 ユーザ登録画面を表 示する。 バージョン 遷移先画面名称（Ｉ 出力 Ｄ） - - ②検索処理 顧客情報テーブルから該当するユーザを検 索する ③-1 合致するデータが存在した場合 ペットストアポータ ペットストアポータル画面に遷移する ル画面(S-00-01) - ③-2 合致するデータが存在しなかった場合 エラーメッセージを表示する 顧客情報テーブ ル エラーメッセージ - ①ユーザ登録画面を初期化する 言語テーブル 分類テーブル - - Copyright ©2008 IPA ユーザログイン画面 外部設計 2007/1/12 ②利用環境情報の設定 言語と分類をリスト選択できるようにする ③-1 言語と分類がリストより選択された場 合 ユーザ登録画面を表示する ③-2 リストから選択されなかった場合 エラーメッセージを表示する - - - - ユーザ登録画面 (S-05-02) エラーメッセージ - 第3部 - 45 * Java Pet Store Software :http://java.sun.com/blueprints/code/jps132/docs/index.html あとがき あとがき Copyright ©2008 IPA あとがき - 1 あとがき あとがき 実践的アプローチに基づく要求仕様の発注者ビュー検討会について 実践的アプローチに基づく要求仕様の発注者ビュー検討会は、情報システムにおける「仕様」につい て、「お客様にわかりやすい記述方法および合意方法」を共同検討することを目的として、 （株）ＮＴＴデータ、富士通(株) 、日本電気(株) 、 (株) 日立製作所、 (株) 構造計画研究所、 東芝ソリューション(株) の6社により、2006年4月12日に発足しました。その後、2007年8月1日より、日 本ユニシス株式会社、沖電気工業株式会社、TIS株式会社の3社が加わり、合計9社による検討活動と なりました。 発注者ビューガイドライン（画面編）は、 ①開発現場の実例の中から成功要因および失敗要因を導出し、6社の知見を集約・整理する。 ②集約・整理した結果を、発注者側企業による評価を経ることで「開発者視点」の偏りを排除する。 というアプローチにより作成しました。 実際のシステム開発においてはシステムの形態のみならず、発注者とのコミュニケーションが発生す る場面は非常に多岐にわたりますが、本ガイドラインでは、システムの形態としてWebベースのアプリ ケーションを想定し、設計書の記述やレビューにポイントを絞りました。 本ガイドラインを読まれたみなさんへ 発注者ビューガイドライン(画面編)は、システム開発に関わる方々がお互いの理解の齟齬を減らし、円 滑に意思疎通を図るための知見を提供したい、という思いをこめて執筆しました。 このガイドラインを大いにご利用いただくことで、発注者も開発者も目標とするシステム像を共有し、か つ、発注者の思い描くシステムが実現されることを願っております。 Copyright ©2008 IPA あとがき - 2 あとがき あとがき 謝辞 株式会社東京証券取引所様とＡＧＳ株式会社様には、ガイドラインの記載内容につい て多数のご意見をいただきましたことに感謝いたします。 Copyright ©2008 IPA あとがき - 3 あとがき 参考文献 [1] 独立行政法人 情報処理推進機構 ソフトウェア・エンジニアリング・センター編 経営者が参画する要求品質の確保～超上流から攻めるIT化の勘どころ～, 株式会社オーム社, 2005 Copyright ©2008 IPA あとがき - 4