公開用-熊本市様-電子申請-初級編

熊本市様 UI改善ワークショップ 初級編 『利用者視点』でUI改善 市民ペルソナになりきってユーザーテスト UI = ユーザーインターフェイス 2025年11月21日(金) 早く作って 早く試して 早く失敗する

問いとデザインの力で ビジネスを成長促進 金内 透 九州・福岡にバフをかける 合同会社CGFM 毎月 熊本に来てます Webデザイン制作歴 15年 崇城大学 デザイン学科 非常勤講師 10年目 UIデザイン歴10年 ワークショップ開催実績 ※2025年7月22日時点 企業向けワークショップ デザイン系ワークショップ (新規事業/チームビルディング他) (教育/スクール系） 実施回数 40回 以上 実施回数 100回 延べ参加人数 約 以上 1000人

授業風景 (崇城大学 デザイン学科 2014〜) エンジニアに 利用者視点をインストール 起業家を目指す社会人向け プログラミングスクール G’s ACADEMY FUKUOKA様 デザインワークショップ2days 高度IT人材教育のNPO AIP様 ITエンジニア向け 合同新人研修 ファシリテーション演習 2days

熊本市様 職員向けUI改善ワークショップ 2024年

今日のキーワード なりきる 本日は仮想ユーザー(ペルソナ)になりきって 市民にとって申請しやすい申請フォーム を考えていきます

ワークショップは皆で作る場 皆で良い学びの場を 作っていきましょう

チェックイン (本日学ぶこと) なりきる • ペルソナになりきる練習 • 利用者視点でのユーザーテスト手法 の体験 • 早く作って早く試して早く失敗する

前提の説明 今回はUI改善に関する研修 フォーム受付後の運用については今回対象外 今回のテーマの対象は、市民と行政の接点となる 申請フォームのUIの改善です。(UI=ユーザーインターフェイス) フォーム受付以後の、職員側の業務となる運用面での改善については 今回のワークショップに含まれておりません。

スケジュール 大まかな 前半 後半 ゴール ゴール インプロ（即興演劇） ペルソナ作成 利用者視点(なりきり)で 申請フォームの改善 なりきる練習 利用者視点になる筋トレ ユーザーテスト ペーパープロトタイピング 最後にチェックアウト アンケートも お願いします

ルール1 ワークショップ心得 この場の 最高権限者は ファシリテーター 時間厳守 失敗OK

ルール2 5グラウンドルール たくさんのアウトプットが生まれる 良い議論する場を作るための決まりごと 1. ほめる 粗野なアウトプットを歓迎する 2. 聴く 傾聴 たくさんの アウトプット （検討材料） 3. 受けとめる 受容≠肯定 4. 待つ 生産的沈黙 5. 愉しむ キツさも苦しさも含めて 良質な仮説を 立てられる （検討） (「5グラウンドルール」は株式会社つくるひとの登録商標です)

• http://www.biztool.jp/contents/fivegroundrules.html

インプロ(即興演劇)の練習 社長ごっこ ペルソナになりきる練習 身体知 利用者視点を 体験でインストール

どうでしたか？

対象の申請フォーム 国民健康保険資格喪失手続き の電子申請フォーム 国民健康保険資格喪失手続き をするのは どんな人？ どんな時に手続きをする？ 例) 自営業、フリーランスが会社員になる時 家族構成は？扶養は何人？

今日やること その申請フォームを使うのは どんな市民？ 1 ペルソナを考える 2 ユーザーテスト＆観察 PCかスマホ 3 ペーパープロトタイピング 改善 4 ユーザーテスト＆観察 紙

補足説明 ペルソナとは？ 企業・団体が提供する 製品・サービスにとって 最も重要で象徴的な ユーザモデルのこと 心理学学者ユングが 人間の外的側面を ペルソナと呼んだ メリット 共通の人物像を関係者で共有できる 「この人を満足させるには？」 「この人ならどう行動するだろう？」 を想像しやすくなり、取捨選択の 判断がしやすくなります。

補足説明 目安5分 高速で回す ユーザーテストとは 利用者(ユーザー)になりきって 目的を達成できるか検証すること 観察・記録 メリット 利用者が操作でつまづくポイントに 早い段階で気づける ペーパープロトタイプ ユーザー役 ペルソナの設定 どんな状況で使うのか？ 何がゴールなのか？ 案内・画面遷移

補足説明 ペーパー プロトタイピングとは ● 画面アイディアをラフに描く ● ユーザーの利用フローの検証と修正 メリット 紙とペンがあればすぐできる 短時間で繰り返しテストできる

このフォームを使う 利用者はどんな人？ ワーク ペルソナを考える 対象フォームを使う一番メインなペルソナを考える 誰のための 申請フォーム？

対象の申請フォーム 国民健康保険資格喪失手続き の電子申請フォーム 国民健康保険資格喪失手続き をするのは どんな人？ どんな時に手続きをする？ 例) 自営業、フリーランスが会社員になる時 家族構成は？扶養は何人？ 条件：以下の方は、今回のワークショップでは電子申請の対象外とします。 転出、後期高齢者医療制度の資格取得、生活保護開始、死亡等による手続きが必要な方。

用紙に書き込んでも 付箋を貼るだけでもOK 6 ペルソナの項目 (簡易版) ペルソナの概要 3 どんな経緯でWebサイトを利用する？ 家族構成は？家族の職業・年齢は？ ペルソナの顔 下手でいいから 手描きの絵 一番メインの利用者 を想定する ペルソナの抱えている課題 1 どんな課題を抱えてるペルソナ？ 例）上司から言われた フリーランスから会社員になった 名前/職業/年齢 4 ペルソナのゴール 自宅から簡単にスマホで申請を完了する (利用前の心の声) スタート時のセリフ 2 どんな状態がゴール？ 何をもってゴールとする？ (目的達成後の心の声) 5 �� (利用前の心の声) ゴール時のセリフ 滞りなく 申請できた！ ��

次は ペルソナなりきりで ユーザーテスト

ワーク ペルソナ になりきって 申請フォーム のテスト をする

ユーザーテスト① 目安10分 ペルソナ 役 （被験者） 申請フォーム ペルソナになりきって 思考発話※ 使うのはパソコン？スマホ？ ※操作中に思っていることをすべて声に出すこと ペルソナ役に 思考発話を促す ペルソナの設定 どんな状況で使うのか？ 何がゴールなのか？ 最初のセリフは？ ゴールのセリフは？ 案内役 観察 気になるセリフや 気づいた点を 付箋にメモ 記録役

1回目 ユーザーテスト後 ●観察記録を紙上で共有 ●改善点を検討協議

ワーク ペーパープロトタイプを 作る ペン・ふせん・ハサミを駆使して申請フォームの改善版をつくる

ペーパープロトタイプ 申請フォームを紙上で改善 ハサミ・のり・テープ・付箋紙を駆使 雑でOK チームで手分けして 画面を作っていきます 目安10分

ハサミで切り貼りして 順番を入れ替えたり 情報を削る 読める・意図が伝わる 程度の書き込み ふせんで上書き

ワーク ペルソナ になりきって ペーパープロトタイプ の ユーザーテスト をする

ユーザーテスト➁ ペーパープロトタイプ 目安10分 ペルソナ 役 案内役 （被験者） 思考発話を促す 観察 ペルソナの設定 セリフや気づいた点を 付箋にメモ どんな状況で使うのか？ 何がゴールなのか？ 記録役

どうでしたか？ 改善前と改善後で 使い勝手は異なりましたか？

補足 外部ユーザーテスト

チーム外の人にテストしてもらうことで問題点や改善点を発見できる ペルソナになりきって 思考発話しながら操作 どこでお困りですか？ チーム外の人 観察役 被験者 案内役 ✅ セリフの記録 ✅ 誘導しない ✅ 気付きの記録 ✅ 思考発話を促す 観察しやすいように スマホは机に置く

外部ユーザーテスト 手順 • あいさつ • 発話の練習 として 思考発話を心がける！ まずは被験者にペルソナの セリフを声に出してもらう • 被験者が目的を達成したらテスト終了 • 振り返り（被験者からレビューをもらう、気になった点を聞く） • お礼（被験者に感謝を伝える） 改善点や問題点の抽出に務める ユーザーに改善策を聞かないこと

国民健康保険資格喪失手続きの電子申請フォーム 補足情報） 申請受付後の職員の運用フロー ①電子申請受付 ②申し込み内容を自動で紙様式に出力 ③出力した紙を見ながら、 住基システム（別のPC端末）へ手入力 ※インターネット環境との接続ができないため

改善サンプル ○○○職員採用試験 申込フォーム

改善前 改善後 質問項目数 質問項目数 90点 以上 （大卒の場合） 25点 + .xlsxファイルを添付 ●履歴書 ●申込書 ●受験票 ●職務履歴書 ●面接カード

チェックアウト 「今日 気づいたこと」