画面デザイン・ガイドライン...4 別添2 画面デザイン・ガイドライン...

1

別添２画面デザイン・ガイドライン

画面デザイン・ガイドライン

2


目次

１．本書の目的

２．適用範囲

３．用語の定義

４．動作環境

５．画面構成

５－１．前提条件

５－２．画面の種類

５－３．画面の標準サイズ

５－４．画面の表示位置関係

５－５．メイン画面の構成

５－６．サブウィンドウ画面の構成

５－７．データ入力用部品

６．画面タイプ

６－１．単票形式

６－２．一覧表形式

６－３．単票＋一覧表形式

６－４．表示データがない場合の一覧表表示方法

７．画面遷移パターン

７－１．ログイン後からメニュー画面・各業務画面への遷移

７－２．業務画面内の遷移

７－３．業務画面から個別機能画面への遷移

７－４．その他の画面遷移

８．ナビゲーションの操作

８－１．単票(形式)画面におけるレコード送り

８－２．一覧表、単票＋一覧表（形式）画面におけるページ送り

８－３．リンク

８－４．エラーハンドリング

８－５．確認・警告の通知

９．ネーミング

９－１．ブラウザのタイトル名

９－２．メニュー記載事項名、画面タイトル及びウェブサイト構造名

９－３．ボタン名

3


目次

１０．画面スタイル

１０－１．画面構成別スタイル

１０－１－１．Ｈｅａｄｅｒ部に関するスタイル

１０－１－２．Ｂｏｄｙ_Ｈｅａｄｅｒ部に関するスタイル

１０－１－３．Ｂｏｄｙ_Ｆｏｏｔｅｒ部に関するスタイル

１０－１－４．Ｂｏｄｙ_ＲｅｓｕｌｔＩｎｆｏ部に関するスタイル

１０－１－５．Ｂｏｄｙ_Ｂｏｄｙ部に関するスタイル

１０－１－５－１．入力フォームに関する前提条件

１０－１－５－２．「＊」などのレイアウト

１０－１－５－３．凡例のレイアウト

１０－１－５－４．和暦部品のレイアウト

１０－１－５－５．ラジオボタン／チェックボックスの列タイトル

１０－２．レコード送り／ページ送りに関するスタイル

１０－３．一覧表表示件数に関するスタイル

１０－４．文字フォント

１０－５．文字の配置

１０－６．画像

１０－６－１．画像の最適化

１０－６－２．ページの背景画像

１０ー７．色

１０－７－１．カラールールの前提条件

１１．その他

１１－１．スクロール

１１－２．一覧表示

１１－３．禁止文字

１１－４．数値表記

１１－５．ラベルでの表示

１１－６．年月日の表示

[付属資料]標準インターフェースパーツ

付属１．共通アイコン一覧

付属２．メイン画面で使用するボタン例一覧

付属３．サブウィンドウ画面・入力補助機能で使用するボタン例一覧

4


１．本書の目的

本書は、人事・給与関係業務情報システムの企画・開発・設計・制作を進める上で考慮すべき画面デザインに係る基本的なルールを定めるものである。画面デザインにおけるルールは以下の基本コンセプトを基に定義しているものである。

（１）統一的で一貫性のある画面レイアウトの提供・意味の同じ表示要素は、同じ形や色彩で表示し、同一のものを示す時は同じ用語を使用する。また、専門知識の有無に係わらず、できるだけ分かりやすい表現・用語を用いる。・画面レイアウトの標準化を行い業務間・機能間でのレイアウトの差異を無くす。

（２）効率的なシステム操作の実現・同時に必要となる情報は、可能な限り同時に見えるようにする。・入力欄を使用する時は、何を入力すればよいかを理解しやすく示し、操作しやすいように配慮する。・Ｔａｂによるカーソル移動や入力欄の全角半角文字を自動切替え、入力データのチェックの実施及び分かりやすいエラー内容の表示など、効率的な入力と誤入力の防止に配慮する。・重要度や緊急性が高い表示要素は、発見しやすいようにする。・ユーザが実行処理を行う際は、実行確認メッセージを表示するなど誤操作の防止に配慮する。・同一又は並列的な作業工程は、同じ手順で達成できるようにする。

（３）ユーザーアクションに繋がる画面遷移の実現・システム利用者がログイン後、処理すべき案件を把握できるよう画面及び画面遷移を工夫する。・システム利用者の職務権限を反映した個別画面表示と、それによる画面遷移を提供する。

5


２．適用範囲

人事・給与関係業務情報システム（以下「本システム」という。）における全画面に適用する。

6


３．用語の定義

本書で用いる主な用語の解説を以下に示す。

情報やサービス、ソフトウェアなどが、どの程度広汎

な人に利用可能であるかをあらわす語。特に、高齢

者や障害者などハンディを持つ人にとって、どの程度

利用しやすいかという意味で使われることが多い。

“accessibility” とは「近づきやすさ」「接近容易性」といった意味の英単語である。

情報アクセシビリティ２

ソフトウェアやWebサイトの「使いやすさ」のこと。様々

な機能になるべく簡単な操作でアクセスできることや、

使っていてストレスや戸惑いを感じないことなどが、

優れたユーザビリティにつながる。また、ユーザが目

標の操作を完了するまでに費やした労力などもユー

ザビリティの指標となる。

ユーザビリティ１

解説用語項番

7


４．動作環境

本システムを利用可能なユーザーPCの動作環境は、以下の環境とする

（１）ＯＳWindows XP, Windows Vista

（２）WebブラウザWindows版 Internet Explorer Ver. 6.0 SP2以降のバージョンおよびWindows版 Internet Explorer Ver. 7.0 （以下「ＩＥ」という。）

（３）入力文字コードShift JIS※ Windows Vistaの場合はXP互換モード（MS932）に限定する

8


５．画面構成

9


５－１．前提条件

・1024×768(ﾋﾟｸｾﾙ)の画面サイズ（以下「基準画面サイズ」という。）で表示できるものとし、可能な限りスクロールすることなく表示できるよう画面設計を行う。

・基準画面サイズ外のＰＣで縦横幅を確保する必要がある場合には、縦横スクロールを可能とし、画面の構成・表示要素が崩れることのないように考慮する。

・表示画面の最大化・縮小を可能とすること。また、画面縮小時は、縦横スクロールを効率的に利用するものとし、画面の構成・表示要素が崩れることのないように考慮する。

10


５－２．画面の種類

画面の種類は、メイン画面、サブウィンドウ画面（ポップアップ画面）、確認等メッセージ画面とする。

11


５－３．画面の標準サイズ

各画面の標準サイズは、以下の内容とする。

（１）メイン画面メイン画面は、次の仕様で統一する。

（２）サブウィンドウ画面（ポップアップ画面）サブウィンドウ画面（ポップアップ画面）の標準サイズは、次の仕様とし、各業務画面の表示要素の大小によりユーザの理解のし易さ、操作のし易さを考慮し、適宜、適切なサイズに調整する。

（３）確認等メッセージ画面Windowsの標準ダイアログを使用し、サイズはWindowsの仕様に従う。

1024pix

768pix

950pix

740pix

登録します。よろしいですか？

はいいいえ

12


５－４．画面の表示位置関係

画面の表示位置関係は、以下の内容とする。

（１）サブウィンドウ画面（ポップアップ画面）の表示

（２）確認等メッセージ画面の表示

左上から20ｘ20ピクセル

ずらす

メイン画面

サブウィンドウ画面（ポップアップ画面）

「メイン画面」、「サブウィンドウ画面（ポップアップ画面）」の表示位置に係らず、画面中央に表示する

画面

確認等メッセージ画面

13


以下にメイン画面の構成を示す。

（１）メイン画面構成メイン画面は、Header部、Side_Menu部、Body部の３つにゾーンを分ける。Body部については、Body_Header部、Body_Body部、Body_Guide部、Body_Footer部、Body_ResultInfo部の５つにゾーンを分ける。なお、Side_Menu部及びBody_Guide部は、そのゾーンの表示・非表示の切替を可能とする。

１．Header

２．SideMenu Body(1)Body_Header

(2)Body_Body

(4)Body_Footer

(5)Body_ResultInfo

(3)Body_Guide

３．Body

各業務画面の登録・更新時などに発生したエラー情報や完了情報を表示する。

(5) Body_ResultInfo部

表示している業務画面に対応する各種機能ボタン（登録・更新、戻る、閉じるなど）を配置する。

(4) Body_Footer部

業務固有の処理画面の説明や操作方法などの操作ガイドを表示

する。

(3) Body_Guide部

人事、給与等の業務固有の処理画面を表示する。(2) Body_Body部

画面タイトル名、現在のメニュー階層、業務日時（閲覧中の画

面表示時点）を表示する。

(1) Body_Header部

３.Body部

システム利用者に割り当てられた権限により、使用可能な個人メニュー、業務メニュー等ウェブサイトの構造をツリー形式で表示する。

２.Side_Menu部

利用者情報表示エリアとグローバルナビゲーション表示エリアで構成する。

１.Header部

説明ゾーン名称


14



■画面サンプル

15


グローバルナビゲーション各画面共通のリンクボタンを設定

メニュー表示・非表示ボタン

画面印刷ボタン

パスワード変更ボタン

ガイド表示ボタン

ログアウトボタン

利用者情報表示

バッチ実行結果遷移ボタン

（２）Ｈｅａｄｅｒ部Ｈｅａｄｅｒ部は、利用者情報表示エリアとグローバルナビゲーション表示エリアで構成する。

・利用者情報表示エリア現在ログインしている職員の氏名、所属を表示する。

・グローバルナビゲーション表示エリアシステム利用者情報表示エリア及び各画面共通に使用する機能の起動ボタンを配置する。配置されるボタンは以下の通り。

①バッチ実行結果遷移ボタン・・・バッチ実行状況一覧画面を表示する。②メニュー表示・非表示ボタン・・・サイドメニューの表示・非表示を切り替え、

該当メニューの選択を行う。③画面印刷ボタン・・・現在表示している業務画面の印刷を行う。

（ＩＥの機能で印刷の画面を表示する）④パスワード変更ボタン・・・パスワード変更画面をサブウィンドウで表示し、

現在のパスワードの変更を行う。⑤ガイド表示ボタン・・・画面内項目の入力方法及び凡例の表示を行う。

業務ガイド画面はBody_Guide部に表示され、表示・非表示を切り替え可能とする。

⑥ログアウトボタン・・・システムからログアウトする。ログアウト前に確認メッセージを表示し、ログアウトの最終確認を行う。


16


（４） Body_Header部Ｂｏｄｙ＿Ｈｅａｄｅｒ部は、画面タイトル名、メニュー階層、業務日時（閲覧中の画面表示時点）を表示する。

・画面タイトル表示している業務画面のタイトルを表示する。

・メニュー階層現在の業務メニューをルートから「>」で区切り、階層表示する。

・日付表示業務画面を表示した時点の業務日付を表示する。

（３） Side_Menu部Ｓｉｄｅ＿Ｍｅｎｕ部には、システム利用者に割り当てられた権限により、使用可能な個人メニュー、業務メニュー等ウェブサイトの構造をツリー形式で表示する。ツリー形式での表示に当たっては、＋／－記号などにより、ツリー構造の畳込み／展開の操作を可能とする。


（５） Body_Body部Ｂｏｄｙ＿Ｂｏｄｙ部は、人事、給与等の業務固有の要素、機能ボタンを配置する。人事、給与等の業務固有の要素、機能ボタンなどを配置する。

業務日付を表示

画面タイトル名を表示

メニュー階層を表示

■画面サンプル｜業務タイトル、メニュー階層、日付表示

■画面サンプル｜サイドニュー

17


（６） Body_Guide部Ｂｏｄｙ＿Ｇｕｉｄｅ部には、業務固有の処理画面の説明や操作方法などの操作ガイドを表示する。画面内には[ＰＯＰ表示]ボタンを設け、これを押下することにより操作ガイドをサブウィンドウ画面に表示することができる。


■画面サンプル｜業務実行結果

※バッチ処理の起動を指示した際、完了を示すメッセージを表示する

（７） Body_Footer部

Ｂｏｄｙ＿Ｆｏｏｔｅｒ部には、表示している業務画面に対応する各種機能ボタン（登録・更新、戻る、閉じるなど）を配置する。また、ボタンの配置に当たっては、原則として、同一機能のボタンは同一場所に配置するものとする。

（８） Body_ResultInfo部

Ｂｏｄｙ＿ＲｅｓｕｌｔＩｎｆｏ部には、各業務画面の登録・更新時などに発生したエラー情報や完了情報を表示する。

■画面サンプル｜業務ガイド →関連情報７－４．（１）業務ガイドの表示

→関連情報７－４．（２）入力エラーメッセージの表示

18


サブウィンドウ画面の構成は、原則として、Header部、Body部、Footer部の３つにゾーンを分ける。なお、Footer部に配置するボタンの表示形式は、上記５－５（７）に準じる。


×

Body

Footer

Header

１．Header部画面タイトルを表示する。

２．Body部業務固有の要素、入力支援部品等を配置する。

３．Footer部表示している業務画面に対応する各種機能ボタン（実行、登録、戻る、閉じるなど）を配置する。

→関連情報５－７．（３）入力補助部品

19



■画面サンプル

Body

Footer

Header

20



・テキストボックス

入力欄の前には、何を入力すればよいかを理解できるよう明示する。

また、入力欄は、入力領域であることが分かるよう、立体的な表示を行う等の

工夫を施す。

住所東京都

データ入力に当たって、システム利用者が何を入力すればよいかを理解しやすく示し、操作しやすいよう配慮する。以下に、代表的なデータ入力部品とその留意点を示す。

・テキストエリア

１行に収まらない文字列の入力、更新可能な値の表示に使用する。

改行の入力を可とする。

留意点については、テキストボックスと同様

備考 ▲

▼

○月×日より△△△部に異動

（１）テキストによる入力入力欄の前には、何を入力すればよいかを理解できるよう明示する。また、入力欄は、入力領域であることが分かるよう、立体的な表示を行うなどで工夫を施す。

21


・ラジオボタン単一の選択を行う場合に使用する。また、初期値の設定を可能とする。必須選択項目のため、必ずどちらかが選択されている状態とする。

・チェックボックス

複数の選択を行う場合に使用すること。なお、初期値の設定は行わない。


住所東京都

大阪府

愛知県

（２）既定の複数選択肢からの選択入力

既定の複数選択肢から選択して入力する場合には、ラジオボタン、チェックボックス、

プルダウンメニューのいずれかによる方法で入力できるようにする。

男

女

人事

給与

届出

・プルダウンメニュー複数の選択を行う場合に使用する。初期値の設定を可能とする。また、表示幅については、選択肢の内容により可変となるため、原則として選択肢の内容がすべて表示可能なサイズとなるよう、設計時に考慮する。表示幅が極端に短くて済む場合には、他の構成要素の表示幅と同等のサイズとするなど、工夫する。

22



（３）入力補助部品データ入力用部品だけではデータ入力の操作のし易さや分かりやすさが確保できない場合には、独自の入力支援部品を提供する。提供する入力支援部品は、サブウィンドウ画面（ポップアップ）に埋め込むものと業務画面に直接埋め込むものの２種類を提供する。

サブウィンドウ形式にて提供する入力補助部品を以下に示す。

処理対象となる組織の検索、及び組織の選択により、所属する職員を検索する。組織／職員検索

郵便番号指定により対象住所を検索する。住所検索（郵便番号指定）

処理対象となる組織を検索する。組織検索

金融機関、支店の選択により、対象金融機関情報を検索する。金融機関検索

交通機関等の指定により、対象運賃を検索する。運賃検索

処理対象となる家族を選択する。家族選択

カレンダーによる日付選択を行う。日付入力（カレンダー）

選択関連

処理対象となる職員を職員番号、カナ名等で検索する。職員検索

検索関連

機能入力補助部品名

都道府県の選択により、地域を検索する。地域検索

維持管理期間の選択により、宿舎を検索する。宿舎検索

X□＿

＊＊＊＊

サブウィンドウ

Footer

Header

SideMenu Body_Headeｒ

Body_Body

Body_Footer

Body_ResultInfo

Body_Guide

検索値設定

起動

・入力補助部品（サブウィンドウ形式）業務画面上の入力補助部品用ボタンをクリックすることで、別ウィンドウが立ち上がり、入力補助部品を表示する。設定する値を選択するとサブウィンドウは自動的に閉じる。

23



プルダウンにより和暦表示による選択を可能とする。和暦

プルダウンによりコード名称での選択を可能とする。コード選択

機能入力補助部品名

・入力補助部品（埋め込み形式）

業務画面に入力補助部品を直接埋め込むことで、入力操作を省略する。例としては、年号を表示するプルダウン等が埋め込み形式の入力補助部品にあたる。

埋め込み形式として提供する入力補助部品を以下に示す。

※組織検索補助部品に関してはユーザビリティの向上の観点からツリー形式の選択画面を使用する

■画面タイプ別サンプル｜組織検索（サブウィンドウ形式）

24



25


2-1．画面タイプ

画面のタイプは、大別して、①単票形式、②一覧表形式、③単票＋一覧表形式に分けられ、それぞれ更新系と参照系に分けられる。それぞれの形式における留意点は、次のとおり。

・Body_Body部の表示形式は、業務固有の特性やその前画面の画面タイプに応じて、構成要素を分かりやすく配置する。

・Body_Footer部に配置するボタンの表示形式は、５－５（７）に準じる。


26


2-1．画面タイプ

データ入力やデータ入力後の結果確認、検索結果など職員情報・業務情報を単票形式で表示する場合には、原則として、次に示す形式とする。

（１）単票形式（参照のみ）

検索結果の情報などを単票形式で表示する。

当画面は参照のみとし、編集作業は不可とする。


×□＿

項目A

項目B

項目C 項目D

項目E

Header

Body_Body

Body_Footer

Body_Header

ラベル

BODY_ResultInfo

ＸＸＸＸＸ

ＸＸＸＸＸ

ＸＸＸＸＸ

ＸＸＸＸＸ

ＸＸＸＸＸ

27



（２）単票形式（直接編集可能）

検索結果の情報などを単票形式で表示する。

当画面にてデータの直接編集を可能とする。

×□＿

項目A

項目B

項目C 項目D

項目E レレX X X X X X X X X

▽

◎ X X X X X X○

Header

Body_Body

Body_Footer

Body_Header

テキストボックス

BODY_ResultInfo

28


６－２．一覧表形式

検索結果の情報などを一覧形式で表示する。当画面は参照のみとし、編集作業は不可とする。また、１画面に表示する一覧表の行数は、最大50 行表示とする。なお、一覧表の表示行数は、画面表示やデータ更新実行時のレスポンスに大きく影響することから、外部情報での登録・変更が設定（50 行以下）できる仕組みを用意する。

Header×□＿

項目A 項目B 項目C 項目D

◎

○Body_Body

Body_Footer

Body_Header

※一覧形式画面のみ、以下の専用ボタンを配置し操作性の向上を図る。① 全選択・・・行を選択するチェックボックスが一覧表に存在する場合、

現在表示中画面の全チェックボックスを全てのチェックボックスにチェックを入力する。チェックボックスが無い場合、非表示とする。

② 選択解除・・・行を選択するチェックボックスが一覧表に存在する場合、現在表示中画面の全てのチェックボックスのチェックを外す機能。チェックボックスが無い場合、非表示とする。

③ 絞込・・・特定のレコードのみを一覧表に表示させる機能で、一覧表の表示項目（列）により絞り込むことが可能。条件設定は、サブメニュー画面（ポップアップ）を表示させ、設定する。

④ ソート・・・指定した条件により一覧表のレコードの並べ替えを行う機能で、一覧表の表示項目（列）により昇順・降順の設定が可能。条件設定は、サブメニュー画面（ポップアップ）を表示させ、設定する。

⑤ 設定解除・・・絞込み、ソート機能を解除する機能。⑥ ページ送り・・・次ページ、前ページ、ページ直接指定によるページ遷移を行う。

一覧形式専用ボタン

ラベル

全選択選択解除絞込ソート設定解除ページ送り

データ入力やデータ入力後の結果確認、検索結果、業務案件・お知らせ情報など職員情報・業務情報を一覧表形式で表示する場合には、原則として、次に示す形式とする。

（１）一覧形式（参照のみ）

BODY_ResultInfo

29


（２）一覧表示形式（直接編集可能）

検索結果の情報などを一覧表示形式で表示する。表示行数については一覧形式

（参照のみ）と同等とする。

当画面にてデータの直接編集を可能とする。

2-1．画面タイプ６－２．一覧表形式

×□＿


▽

▽□

□ 検索

検索

Header

Body_Body

Body_Footer

Body_Header

一覧形式専用ボタン

※ 一覧表形式専用ボタン

一覧表形式では、専用ボタンを配置し操作性の向上を図る。

詳細については、上記（１）参照。


全選択選択解除絞込ソート設定解除ページ送り

BODY_ResultInfo

30


単票形式と一覧表形式を組み合わせた画面タイプで、画面上部に単票形式を設け、その下に一覧表形式を表示させる。単票形式に表示させる情報は、データ抽出や登録データのグループ情報、抽出・検索条件など一覧表に表示する共通情報で、また、一覧表形式には、これに一致する職員情報・業務情報を表示する。

（１）単票＋一覧表示形式（参照のみ）

一覧検索表示画面の検索条件を一覧画面上部に設定し、検索結果の情報などを

一覧表示形式で表示する。当画面は参照のみとし、編集作業は不可とする。

表示行数は一覧形式（参照のみ）と同等とする。


×□＿

項目A

項目B

項目C X X X X 項目D X X X X


◎

○

Header

Body_Body

Body_Footer

Body_Header

BODY_ResultInfo

X X X X

X X X X

31


（２）単票＋一覧表示形式（直接編集可能）

一覧表示画面の検索条件を一覧画面上部に設定し、検索結果の

情報などを一覧表示形式で表示する。

当画面にてデータの一覧部分の直接編集を可能とする。

×□＿

項目A

項目B



□

□

Header

Body_Body

Body_Footer

Body_Header


▽

▽


BODY_ResultInfo

X X X X

X X X X

32


×□＿


該当するデータがありません

６－４．表示データがない場合の一覧表表示方法

タイトル行のみを残し、データ行を非表示にする。

（１）表示データが無い場合の一覧表

Header

Body_Body

Body_Footer

Body_Header

絞込ソート一覧形式専用ボタン

BODY_ResultInfo

33



34



画面遷移のパターンは、大別して、①ログインからメニュー画面・各業務画面への遷移、

②業務画面内の遷移、③業務画面から個別機能画面への遷移、④その他の画面遷移に分けられる。

35


X□＿

＊＊＊＊

７－１．ログイン後からメニュー画面・各業務画面への遷移

ログイン後からメニュー画面及びメニュー画面から各業務画面への遷移は、原則として、次に示す方法とする。（ログイン処理方式、ログイン画面の有無等については、職員等利用者共通認証基盤（GIMA）との調整により決定する。）なお、各府省既存のイントラ画面等による設定（本システム接続後のイントラ画面の表示・非表示の制御を含む。）は、各府省がそれぞれ別途行う。

業務画面内においては、業務画面内に設定されている遷移ボタンを押下することにより行う。

（１）ログイン後のメニュー画面までの画面遷移を示す。

ログイン画面等

本務/併任画面

業務画面（個人トップページ）メニュー画面

利用者に本務、併任がある場合にのみ表示する。本務のみの場合、他府省併任の場合は表示しない。

凡例

メイン画面の遷移

サブウィンドウ画面の遷移

36



業務画面内の遷移は、原則として、次に示す方法とする。

（１）一覧表形式 → 単票形式

×□＿

X X X X X X X X

レレX X X X X X X X X

▽

検索

◎ X X X X X X○

×□＿

項目A 項目B 項目C 項目DX X X X X X X X X X X X X X X X XX X X X X X X X X X X X X X X X X

◎

○

一覧表形式画面

単票形式画面

※標準機能として一覧表で選択されたデータは単票画面の次データ、前データボタンにより、データ移動を可能とする

※一覧表画面が行を選択するチェックボックスが存在する場合で複数行を選択した場合には、単票画面上でレコード送りを可能とする。

凡例



37


（２）一覧表形式 → 一覧表形式 or 単票 + 一覧形式 → 単票形式


×□＿


◎

○

×□＿

項目A X X X X

項目B X X X X X X X X



◎

○

×□＿

項目A X X X X

項目B



▽

検索

◎ X X X X X X○

一覧表形式画面

単票形式画面

一覧表形式画面 or 単票 + 一覧表形式画面

凡例



※一覧表画面から単票画面に遷移する際は、上記（１）と同様。

38


（３）単票形式 → 一覧表形式 or 単票 + 一覧形式 → 単票形式


×□＿

項目A X X X X

項目B



▽

検索

◎ X X X X X X○

×□＿

項目A X X X X

項目B X X X X X X X X



◎

○

×□＿

項目A X X X X

項目B



▽

検索

◎ X X X X X X○

単票形式画面

一覧表形式画面 or 単票 + 一覧表形式画面

単票形式画面

凡例



※一覧表画面から単票画面に遷移する際は、上記（１）と同様。

39


７－３．業務画面から個別機能画面への遷移

（注）一覧画面内のBody_Body部にポップアップを起動するボタンが配置されている場合に、当該ボタンよりサブウィンドウ画面（ポップアップ画面）を起動する

（注）単票画面内のBody_Body部にポップアップを起動するボタンが配置されている場合に、

当該ボタンよりサブウィンドウ画面（ポップアップ画面）を起動する

単票画面

サブウィンドウ画面サブウィンドウ画面

一覧画面

サブウィンドウ画面サブウィンドウ画面

（１）単票画面 → サブウィンドウ画面（ポップアップ画面）

（２）一覧表画面 → サブウィンドウ画面（ポップアップ画面）

凡例



業務画面から個別機能画面内への遷移は、次に示す方法とする。

40


画面右にガイド画面が表示される。ガイド画面の右下に表示されている「ＰＯＰ表示」ボタンを押下する


（１）業務ガイドの表示

各業務画面上で、グローバルナビゲーションのガイド表示ボタンを押下することにより、操作ガイドを画面内（Body_Guide部）に表示させることができる。また、表示された操作ガイド（Body_Guide部）にはＰＯＰ表示ボタンを設け、これを押下することにより、操作ガイド部分のみを別画面で表示する。

凡例



■画面タイプ別サンプル｜業務ガイドの表示

グローバルナビゲーションの「i」（インフォメーション）ボタンを押下する

サブウィンドウ画面（ポップアップ画面）にガイドを表示し、参照しながらの入力を可能とする入力終了後は、「閉じる」ボタンを押下し、画面を閉じる

41


■画面タイプ別サンプル｜入力エラーメッセージの表示

入力エラーがあることをアラートボックスに表示、ＯＫボタンを押下する

（２）入力エラーメッセージの表示

入力フォームなど各種入力欄の入力データが既定値から外れるデータを入力した際は、エラーメッセージの表示を行う。エラーメッセージの表示に当たっては、確認・警告ダイアログの表示、当該項目のエラー識別表示、Body_ResultInfo部にエラー内容の表示を行う。


必須項目に何も入力せずに申請ボタンを押下する

下段のBody_ResultInfo部にエラー内容を表示し、入力項目の色を変更する

凡例



42


■画面サンプル｜バッチ実行状況一覧の表示


凡例



任意のタイミングでグローバルナビゲーションより実行結果確認ボタンを押下する

サブウィンドウ画面によりバッチ実行状況が確認できる

バッチ実行画面よりバッチを実行する

（３）バッチ実行時の画面遷移

業務画面より実行したバッチは、バッチ実行状況一覧画面から確認可能とする。バッチ実行状況一覧画面へは、任意のタイミングにおいてグローバルナビゲーションから遷移可能とする。

画面デザイン・ガイドライン...4 別添2 画面デザイン・ガイドライン...

Documents