次世代電子申請フォーム...

2nd FACTORY CO.,Ltd.

IS 525714/ISO27001

株式会社セカンドファクトリー

次世代電子申請フォーム

ソリューションのご紹介

2nd FACTORY CO.,Ltd. 1

目次

ソリューションの概要

1 ソリューションの概要

・・・・・・・・・・・・・・・・・・・ P.3

3 解決策

手順の明示

入力のしやすさ

参照情報へのアクセス

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ P.13

・・・・・・・・・・・・・・・・・・・・・・・・・・・・ P.14

・・・・・・・・・・・・・・・・・・・・・・ P.16

4 主要機能

ウィザード形式

プレビュー

ステータスウィンドウ

書類添付

・・・・・・・・・・・・・・・・・・・・・・・・・・・・ P.18

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ P.19

・・・・・・・・・・・・・・・・・・・・・・ P.20

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ P.21

5 画面構成

画面構成・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ P.23

2 ユーザビリティの要件

ニーズの定義

電子政府ユーザビリティガイドライン

ターゲットユーザーのニーズ

ペルソナ1

ペルソナ2

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ P.5

・・・・・・・・・・・・ P.6

・・・・・・・・・・・・・・・・ P.7

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ P.8

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ P.10 6 デモ・システムの操作手順

デモ・システムの操作手順

補足

・・・・・・・・・・・・・・・・ P.25

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ P.28

7 動作環境

動作環境・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ P.31


ソリューションの概要 1


ソリューションの概要

目的

行政機関の電子申請の利用率を向上させるため、ユーザーにとって使いやすい電子申請フォームを最新の

技術を活用してご提供いたします。

電子申請に期待される効果としてユーザー・行政機関の双方の業務効率化が挙げられますが、その利用率

は未だ低いのが現状です。ユーザビリティの改善を図り書面申請に対する優位性を生かすことでユーザー

の作業効率は向上し、利用率アップに貢献できるものと考えます。

概要

• ユーザーにとってどのような見た目、操作性が適しているかをご提案いたします。

• 要件の定義に当たっては、各種のガイドラインの参照やユーザーシナリオからニーズを抽出しています。

• 本資料では実際に使用されている「雇用保険被保険者資格取得届」を素材としたサンプルをご紹介します。

• 電子申請フォーム（デモ）の作成にはマイクロソフト社のSilverlightの機能を全面的に活用しています。

• デモシステムは、部分的に操作可能なものとなっていますのでぜひ体感してみてください。


ユーザビリティの要件 2


ユーザビリティの要件

ニーズの定義


多忙な担当者が

正確かつ効率的に利用できるフォーム

手順の明示参照情報へのアクセス

ユーザビリティの改善を図り

書面申請に対する優位性を生かすためには、

まず申請者（ターゲットユーザー）の作業効率向上につながる

ニーズを定義します。

本資料では「電子政府ユーザビリティガイドライン」を軸と

して定義しています。またサンプルの素材としている

「雇用保険被保険者資格取得届」は、主な

ターゲットユーザーを企業の人事・総務担当

もしくは、提出代行者となる社会保険労務士と

想定し、そのヒアリングから右図のように

要件を定義しています。



電子政府ユーザビリティガイドライン

電子政府ユーザビリティガイドライン（2009年7月1日各府省情報化統括責任者（CIO）連絡会議決定）に定められる「共通設計指針」を軸として

ニーズを定義しています。

＜利用手順＞

① 利用者が想定する流れに沿った手順にする

② 業務プロセス及び申請書等の様式の見直しにより、最小限の操作、入力で申請等ができるようにする

＜画面の構成＞

③ 見てすぐ何をすればよいかが分かるような画面や手順にする

④ 無駄な情報、デザイン、機能を排し、シンプルで分かりやすい画面にする

＜指示や状態のわかりやすさ＞

⑤ 操作の指示や説明、メニュー等には、利用者が正しく理解できる用語を使用する

⑥ 基本的な用語、指示、デザインには一貫性を持たせる

⑦ 手続を行っている時に、システムが処理している内容を利用者がすぐ分かるようにする

＜エラーの防止と処理＞

⑧ 利用者が操作や入力を間違えないデザインや案内を提供する

⑨ 確認画面を用意し、利用者が行った操作や入力の取り消し、やり直しが、その都度できるようにする

⑩ エラーが発生した時には、利用者が迷わずに問題の解決をできるように、必要な情報と手段を提供する

＜ヘルプ＞

⑪ 利用者が必要とする時に、ヘルプ情報やマニュアル等を利用できるようにする

＜その他＞

⑫ 情報提供については、言葉遣い、メニューの分類・順番や必要な情報の有無に配慮し、必要な情報が容易に理解できるようにする

⑬ 障害者や高齢者に配慮し、日本工業規格JIS X 8341シリーズ、ISO/IECガイド71、「みんなの公共サイト運用モデル（総務省）」に準拠した設計を

行う

※本資料では前頁の通り主たるターゲットユーザーを設定しており、障害者や高齢者を対象としたユニバーサルデザインは対応可能な範囲のものとしています。


頻度が高くない申請については、手順を忘れてしまう手順の明示

過去に記入した書類を、記入例として参照することが多い

参照情報へのアクセス参照書類が多く煩雑なため、どの書類のどこに目的の情報があるか見つけにくい

「記号」や「番号」等、似た表現の異なる項目が多く、何を示しているのか分かりにくい

頻繁にルールが変更となるものもあり、毎回調べるのは手間


ターゲットユーザーのニーズ

実際に帳票に記入（または入力）する際のターゲットユーザーの環境と心理を分析する目的で、担当者にヒアリングを実施した結果、

以下のような潜在的ニーズを発掘しました。



ペルソナ1

※参考イメージ

写真提供：ペイレスイメージズ

名前鈴木大輔

年齢 32歳

性別男性

職業中小企業の人事・総務担当

PCリテラシー会社における日常業務にPCを使用する。

日常的に使うのはブラウザやメーラー、および、Office系アプリ。

別段詳しいわけではないが、学生時代より授業でもPCに慣れ親しんでいた世代であり、

アレルギーはない。

電子申請

頻度年に数回～多くて十数回、おもに社員入社のタイミングで電子申請を行う。

利用背景

利用頻度が高いわけではないが、申請内容の特性上、スピード感を求められる

ことが多く、郵送や窓口へ出向く時間と手間を省き、業務を効率化する目的で、電子申

請の環境を整えた。

ペルソナとは：ニーズを洗い出す目的で具体的に定義したユーザーモデル。



ペルソナ1のユーザーシナリオ

• 8:30出勤。いつもは9:00出勤のところ、今日は新人受入のため早めの出勤となった。

• まずはメールのチェック。様々なリクエストが寄せられ、中には急を要するものも。

• 給与支払報告書の提出期限が迫っており、その大半は本日投函予定となっている。

また、新人の雇用保険被保険者資格取得届も、なるべく早く済ませてしまいたい。

• 9:00をまわり、新人の受入を開始。社内ルールや設備を一通り説明し、

雇用保険被保険者証と離職票を預かる。

• お昼休みを挟んで、給与支払報告書の記入を急ピッチで進める。

自治体によってクセが様々で、毎回手を焼く作業である。

• 給与支払報告書の投函が終わり、気づけば17:00を回っている。

• 雇用保険被保険者資格取得届の手続きを始める。

ハローワークや郵便局の営業時間も、ポストの集荷時間も気にせずに

作業できるのはありがたい。

• 電子申請のサイトにアクセスし、手続きを開始。

久しぶりの電子申請なので、やり方もうろ覚えだ。

• 必要な書類の準備を促される。雇用保険被保険者証、離職票、氏名が確認できる書類。

そうだ、新人はつい最近結婚し姓が変わったため、同時に氏名の変更をする

必要があるのだった。早速、履歴書を準備した。

イレギュラーなケースもあり、予め必要書類を示してくれるのは助かる。

• 画面に手続きの流れが表示される。入力と、必要書類の添付が大まかな流れらしい。

流れを確認できるのは安心だ。

• 職種の入力。書面に記入していた頃は、裏面の一覧を参照しなければならなかった。

リストから直接選択できるのは効率的だ。

• 契約期間の入力。開始日は本日なので、2012年1月16日。

平成で言うと…？年が明けたばかりで混乱しかけたが、西暦での入力もできて便利だ。

• 1週間の所定労働時間は、以前は何と記入したか？同じにしておきたい。

過去に保存した届けを参照した。すぐに呼び出せるのは便利だ。

• 入力を完了したところで、内容を一通りチェックする。

目にしたことがあるフォーマットで確認ができるのは安心だ。

• 氏名の漢字にミスを発見。入力中には気付かなかった。すぐに戻って修正をした。

• 添付書類の確認を促された。ドラッグ＆ドロップで添付できるようだ。

データが深い階層に保存されていることもあり、エクスプローラーで辿らなくて良いのは嬉しい。

• 最後にもう一度チェック。今度こそ、ミスや漏れはなさそうだ。

• 無事に手続きを終了。印刷したり、遠回りしてポストに寄らなくて良いのは助かる。

キーとなる心理や体験を赤字で示しています。



ペルソナ2

名前渡辺博

年齢 50歳

性別男性

職業社会保険労務士

PCリテラシー会社における日常業務にPCを使用する。

ブラウザ、メーラー、Office系アプリに加え、労務に特化した業務用アプリも日常的に

使っている。

業務上の必要に迫られ、徐々にPCを使いこなすようになった。

電子申請

頻度ほぼ毎日

利用背景

日々クライアントからの依頼に対応するため、利用頻度は高い。

書面で申請していた頃に比べると、電子申請によって

作業はだいぶ効率的になった。

写真提供：ペイレスイメージズ

※参考イメージ

ペルソナとは：ニーズを洗い出す目的で具体的に定義したユーザーモデル。



ペルソナ2のユーザーシナリオキーとなる心理や体験を赤字で示しています。

• 9:00出勤。今日一日のスケジュールを確認後、FAXやメールのチェック。

• 午前中に顧問先企業を訪問するため、資料を手早くまとめる。

• 昨晩作成した別の顧客の書類を持って外出。

顧問先企業の訪問ついでに、途中、ハローワークと社会保険事務所に立ち寄るのだ。

電子申請を利用するようになったとはいえ、足を運ぶ機会はまだまだ多い。

帰りに昼食も済ませよう。

• 6月下旬のこの時期は、社会保険の算定基礎届と、労働保険の年度更新が重なり

一年の中でもピークに忙しい時期である。業務はできる限り効率的に行いたい。

• 事務所に戻り、午後は電話やメールの相談対応。

こちらの繁忙期などお構いなしに、業務が舞い込む。

• 夕方になり、ようやく作業が一段落。ここからが自分の業務に集中できる時間だ。

• 顧客先企業の雇用保険被保険者資格取得届の手続きを始める。

電子申請により、時間を気にせず手続きできるため

昼間の時間を顧客先訪問に使えるようになった。

顧客先の利便性を一番に考慮してこそ、プロとしての存在価値が生きるのだ。

• 電子申請のサイトにアクセスし、手続きを開始。

顧客先企業から預かった被保険者の情報を手元に用意した。

• 雇用保険被保険者資格取得の手続きは、頻繁に利用するため

電子申請の流れも把握している。

• ステップに従って入力を進める。

• 入力内容を保存することができるため、社労士記載欄に毎回同じことを入力せずに助かる。

• 事業所に関する情報は、予め顧客企業ごとにデータを保存してあるので

再利用ができて時間短縮が可能だ。

• 入力フォームは非常にシンプルであるが、

同時に、長年見慣れている様式で入力内容を確認できるのは安心だ。

• 添付書類は基本的に必要ない。

• 入力した内容を最終チェック。入念に確認する。特に問題はないようだ。

• 無事に手続きを終了。今回も滞りなく手続きを完了した。

明日はハローワークに立ち寄る必要がなさそうだ。

• 法令の改正等についての情報をチェックしてから帰るとしよう。


解決策 3


解決策

手順の明示

手続きのおおまかなフローを表示します。

手順の表示

2

入力に際し予め準備すべき参照書類を表示します。

参照書類の表示

1


解決策


帳票の情報を的確に分解し、ステップ分けをします。

情報を段階的に開示することにより複雑さを軽減します。

情報の分解とステップ分け

情報をグルーピングし、平坦になりがちな情報に

色やサイズ等で重み付けをします。

グルーピングと重み付け

1画面に情報を詰め込むのを避けることで

全体の文字サイズを大きくすることができます。

文字サイズ

1

2

3

グルーピング

強

中弱


解決策


次へ促す肯定色、注意を引く警告色等を設定し

全体を通して一貫します。

カラースキーム

入力内容のチェックを行い、エラーは傍に表示します。

どう修正すべきかを明記し、後の手戻りを防ぎます。

バリデーション

4

5


解決策

参照情報へのアクセス

選択肢は可能な限り一覧性を持たせて表示し

別の欄・書類を参照する手間を省きます。

選択肢を明記

過去に保存したデータの読込・参照、入力中のデータの保存が可能です。

同じ内容を何度も入力することを避け、ストレスを軽減します。

データの読込・参照・保存

どんな書類を準備すべきか、書類のどこを参照すれば良いか

その時々で助けとなるヒントを表示します。

（本デモンストレーションでは、1つのみ実装）

ヒントの充実

1

2

3


主要機能 4


主要機能

ウィザード形式

ステップを分けたフォームに、順を追って入力していくウィザード形式により

利用者を無理なく入力完了まで導きます。

一度に大量の情報を見せることによる混乱を回避します。


主要機能

プレビュー

入力している内容は、実際にはどのような形で申請されるのか、

プレビュー機能でリアルタイムに確認しながら入力を進めることができます。

従来の書面による申請に慣れているユーザーには特に嬉しい機能です。


主要機能

ステータスウィンドウ

全体の過程の中で今どこを入力しているのか、

ステータスウィンドウでいつでも進捗を確認することができます。

またエラー箇所も表示しますので、どこで躓いているのか一目瞭然です。


主要機能

書類添付

PCに保存している書類を添付することができます。

エクスプローラーでの参照に加え

より直感的なドラッグ＆ドロップによる書類添付が可能です。


画面構成 5


画面構成

プレビュー

エリア

フォーム

エリア

ビュー切替ボタン（プレビュー大・共存・フォーム大）

ステータスウィンドウ呼出ボタン

マウスオーバーで

ヘルプを表示

クリックで

リストを表示

ステップを表示

ビューのコントロール（機能しません）

印刷ボタン（機能しません）

戻る・進むボタン

帳票切替タブ（切替は機能しません）

マウスドラッグで移動、

ホイール操作で

拡大・縮小します


デモ・システムの操作手順 6



「今すぐ体験！」をクリックしてスタート「入力開始」をクリックします事業所情報を入力後

「次の画面へ進む」をクリックします



続いて、被保険者情報を入力し

次へ進みます

同様に、契約条件情報を入力し

次へ進みます

書類を添付し、次へ進みます

（書類添付は任意です）

日付は、直接入力の他、

カレンダーからも入力が可能です

書類添付は、エクスプローラーでの参照の他、

ドラッグ＆ドロップも利用可能です



内容を確認し「送信する」をクリックします送信完了画面が表示されて終了です

（実際には送信されません）



「？」にマウスオーバーすると

参照書類を再確認することができます

「入力状況」をクリックすると

ステータスウィンドウを表示します

閉じる

過去に保存したのデータの読込・参照と

入力中のデータの保存ができます

補足：



ハンドルを掴んで、左右のエリアの

幅を調整できます

左のボタンをクリックすると

フォームを隠し、プレビューを大きく表示します

中央のボタンをクリックすると

左右のエリアの幅を元に戻すことができます

右のボタンをクリックすると

プレビューを隠し、フォームを大きく表示します

補足：


デモ・システム動作環境 7


動作環境

動作環境

画面サイズ 1024 x 768 ピクセル以上

OS Windows XP（SP2以降）、Windows Vista、Windows 7

ブラウザ Internet Explorer 7 以降、Firefox 3.6 以降

次世代電子申請フォーム...

Documents

Transcript of 次世代電子申請フォーム...