公開スライド）熊本市様-電子申請中級編

2025年11月に実施した、熊本市職員様向けAI活用研修のスライド

合同会社CGFM
https://cgfm.jp/

Transcript

1. 熊本市様 電子申請中級編 自治体サイトのフォーム改善 早く作って 早く失敗する 早く試して 住民が“使いやすい”と思う入力体験とは 2025年11月21日(金) 合同会社CGFM
2. 金内 透 問いとデザインの力で ビジネスを成長促進 実施回数 40回 以上 企業向けワークショップ (新規事業/チームビルディング他) デザイン系ワークショップ (教育/スクール系） 実施回数 100回 以上 延べ参加人数 約 1000人 ワークショップ開催実績 ※2025年7月22日時点 崇城大学 デザイン学科 非常勤講師 10年目 九州・福岡にバフをかける 合同会社CGFM Webデザイン制作歴 15年 
 UIデザイン歴10年
 毎月 熊本に来てます
3. G’s ACADEMY FUKUOKA様 デザインワークショップ2days 授業風景 (崇城大学 デザイン学科 2014〜) 高度IT人材教育のNPO AIP様 ITエンジニア向け 合同新人研修 ファシリテーション演習 2days エンジニアに 利用者視点をインストール 起業家を目指す社会人向け プログラミングスクール
4. 熊本市様 職員向けUI改善ワークショップ 2024年
5. 皆で良い学びの場を 作っていきましょう ワークショップは皆で作る場
6. チェックイン (本日学ぶこと) • 普段どのようにフォームを作成していますか？ • 「この書き方で合っている？」 　と迷った経験はありませんか？ • AIに任せる部分と自分が判断する部分を見極めましょう (AIに丸投げしない) 市民が迷わず使えるフォーム をAIと共に考える
7. 前提の説明
 今回はUI改善に関する研修
 フォーム受付後の運用 については今回対象外 
 今回のテーマの対象は、市民と行政の接点となる
 申請フォームのUIの改善です。(UI=ユーザーインターフェイス) 
 フォーム受付以後の、職員側の業務となる運用面での改善については
 今回のワークショップに含まれておりません。

8. 大まかな スケジュール 入力しやすいフォームとは 講義 AI実践 ワーク プロンプト改善の考え方 講義 AI利用実践！ フォームの改善案を作る
9. ワークショップ心得 失敗OK 時間厳守 この場の 最高権限者は ファシリテーター ルール1
11. インプロ(即興演劇)の練習 社長ごっこ ペルソナになりきる練習 身体知 利用者視点を 体験でインストール
12. どうでしたか？
13. 入力しやすいフォーム とは？ 利用者を想像している？ 
 講義
 「市民の電子申請を身近にする、ひと工夫」を考える 

14. • 現状の課題 • フォームを改善する目的 • 改善は2段階で考える • 適切なUIパーツの選び方 入力しやすいフォームとは？ 講 義 講義の構成 予定時間：約15分
15. スマホでは表示が崩れ、読むのが 困難になる（誤解・入力ミスの原因） 現状の課題 入力項目が多い スマホでの入力は大変。 あきらめて途中離脱する。 フォームが長い 入力を途中で諦める。集中力低下で 入力エラーも生じる。 文章が難しい 電話で問い合わせるか、申請を諦め る。不満が溜まる。 市民への影響 フォームの課題 入力しやすいフォームとは？ 講 義 スマホ確認が不十分
16. 入力しやすいフォームとは？ 講 義 フォーム 離脱率を下げる フォーム改善の目的 住民満足度の向上 入力エラーを 減らす 職員の問い合わせ 対応を減らす 業務効率化
17. 入力しやすいフォームとは？ 講 義 ②適切なUIパーツを使う 2段階で考える ①使いやすい構造にする 選択肢1 選択肢2 購入理由 知人の紹介 店頭で ホームページ
18. 入力しやすいフォームとは？｜使いやすい構造にする 講 義 ステップ数が10以上なら構成を見直す 入力をあきらめる / 入力ミスも起こりがち 構成を見直して 市民の入力負担を減らす まだ残り8ページも ある... 
 マイナンバー活用で 入力を簡略化でき ないだろうか？ 
 本当に必要な 項目に絞る 
 1 2
19. 入力しやすいフォームとは？｜使いやすい構造にする 講 義 長いフォームの離脱率を下げる工夫 入力時間の目安を記載 [一時保存]ボタンの活用 どうしても短く 
 できない場合は... 
 回答時間の目安：約20分 申請 📄••••••••の届出 💾 入力内容を一時保存する
20. 入力しやすいフォームとは？ | 適切なUIパーツを使う 講 義 2〜5個 6〜15個 16個以上 利用者が探しやすいように 選択肢の数に適したUIパーツを選ぶ ラジオボタン プルダウン 検索付きプルダウン 女性 購入理由 知人の紹介 店頭で ホームページ 男性 設定しない 比較しやすい時 選択肢が多い時 さらに選択肢が多い時 例外ケース：都道府県(47個)は選 択肢が多いが、利用者は 
 経験上 問題なく操作できる 

21. 入力しやすいフォームとは？ | 適切なUIパーツを使う 講 義 ラジオボタンかプルダウンで迷ったら... 選択肢が5個以内ならラジオボタン 改善前　プルダウンを使用 改善後　ラジオボタンを使用 ※個数はあくまで目安です。最終判断は人間の目で確認して、状況に則したパーツを選んでください。 　（選択頻度・重要度・画面の長さなどを考慮） ｘ①枠を選ぶ 
 ②選択肢が出る 
 の2ステップ必要 
 選択肢が出ているので 
 すぐ選べる 

22. 種別を選んでください 必須 入力しやすいフォームとは？ | 適切なUIパーツを使う 講 義 フォームの増減でユーザーを驚かさない 初期値が未選択 選択後、初めてフォームが出る 選択後にフォームが 増えるストレス 
 法人 個人 法人 個人 種別を選んでください 必須 問題）
23. 入力しやすいフォームとは？ | 適切なUIパーツを使う 講 義 フォームの増減でユーザーを驚かさない 多くの利用者が使う選択肢を or 間違いに気づきやすい選択肢を 初期値として設定 初期値を選ぶ 
 基準は？
 法人 個人 種別を選んでください 必須 入力欄を予め表示しておく 選択後の挙動を記載 ※フォーム作成サービスの機能に無い場合は無理に対応しなくてよい ※選択後にお名前や住所、連絡先の追加 　入力欄が表示されます 解決案）
24. 個人 法人 実際の画面例 入力項目が増えた 😱⁉
 先に言ってよ 😡💢
 個人 か 法人 かを選択
25. 入力しやすいフォームとは？ | 適切なUIパーツを使う 講 義 並べ方(縦/横)を使い分けて、選択肢の一覧性を高める 改善前 改善後 入力項目が冗長で 
 探しづらい 
 見やすい
 フォームのラジオボタン「縦に並べる」,「横に並べる」を使い分ける
26. 入力しやすいフォームとは？｜適切なUIパーツを使う 講 義 表組み活用：列を整理して見やすくする 改善前 改善後 縦に長くなって 
 探しにくい 
 表で整理されてみやすい 

27. 【3⼈⽬】参加者の情報を⼊⼒してください。 【4⼈⽬】参加者の情報を⼊⼒してください。 入力しやすいフォームとは？｜適切なUIパーツを使う 講 義 表組み活用：列を整理して見やすくする 改善前 改善後 ページが長く、記入の 負担を感じる 
 記入漏れ、重複入力を防げる 
 表で整理されてみやすい 

28. 入力しやすいフォームとは？｜適切なUIパーツを使う 講 義 表組み活用：列を整理して見やすくする 改善前 改善後 AIの改善提案例（HTML) 

29. 入力しやすいフォームとは？｜適切なUIパーツを使う 講 義 [メールアドレス（確認）] の入力(同じ情報を二度入力させる) 現在は 原則として非推奨 理由 •スマホでは「コピペ or オートフィル」が当たり前 で、確認入力の意味が薄い •コピペ不可にするとUX(ユーザー体験)が悪化 •多くの大手サービスも「確認入力」を廃止している （楽天、LINE、Amazon、Google） •入力ミス ↓低下 •正確性 ↑上昇 •UX(ユーザー体験) ↑上昇 メールアドレスを一つにすると...
30. 入力しやすいフォームとは？｜適切なUIパーツを使う 講 義 フリガナ入力を「カタカナ」で強制するUI 理由 •スマホではカタカナ変換が手間で入力負荷が大きい •誤変換・候補の膨大さが原因でミスが起きやすい •多くの自治体では受理後にカタカナへ自動変換可能 改善案 •原則：ひらがなで入力 •システム要件上カタカナ入力が必要な場合はやむ無し （ひらがな でも入力可能です。自動でカタカナに変換されます） 氏フリガナ 必須　 参考）自動カタカナ変換のフォーム ラベル例） カタカナ変換が 必要になる 

32. ワーク
 AI利用実践 やってみましょう 

33. AIと職員の共同作業イメージ AIに伝えるプロンプトをチームで考える ワーク AIで添削 職員が確認 ＆手直し 承認後 公開 プロンプト 原稿準備 プロンプトを試します
34. AI利用実践ワークの流れ AI利用実践 ワーク ・対象フォームの構造分析 ・利用可能なUIパーツの確認 1 対象フォームの 改善案作成 2 改善案の HTML作成 3 UIパーツ辞書 資料 PDF化した 対象フォーム UIパーツ辞書 対象フォーム ②で作成した 改善案 情報を分割してAIに参照資料を渡す 改善案の HTML
35. 1）講師実演 AI利用実践 ワーク 2）チームで実践 チームで対象フォームに対して実践します。 手本を見て、操作の流れをつかみます。 Copilot チーム提出Canva 対象フォーム ブラウザのタブを切り替えながら使います
 研修ファイルは共有できてますか？
 CopilotはGPT-5で！

36. 実験！同じプロンプトで他のフォームを添削 ワーク チームで実践 step1プロンプト step2プロンプト step3プロンプト 1 2 3 + 対象フォームPDF + UIパーツ辞書.md フォームの分析 フォーム改善案 HTML生成 Canvaにスクショ貼付
37. 実際動かしてみて どうでしたか？ 現場で活用できそうな手応えはありましたか？
39. プロンプト改善のヒント 講義
 私の成功失敗経験から得た学びをお伝えします 
 AIの思考のクセって？ 
 壁打ち してます？

40. AI＝“新人さん”に丁寧に仕事を渡すつもり AI利用実践｜全体の流れ 振り返り ワーク UIパーツ理解 1 フォーム構造の 改善案を作成 改善案のHTML作成 3 対象フォームの 構造を分析 2 AI まず仕様や 提出形式を共有しますね 現状の構成は こういうことですか？ これがお願いしたい資料ね 背景や目的を理解してね はい、理解しました そうそう それじゃ、文章で 改善の構成案を考えて こういう構成で どうですか？ お、いい感じの文章だね。 では書式を整えてくれる？ はい。書式に合わせました。 確認してください。 上司
41. プロンプト改善のコツ 1/3 講義 • 誰向けに？（例：市民、中学生、外国人） • どんな成果？（短く、やさしく、構造化） • 何を守る？（内容を省略しない、文体統一） 「目的と条件」をAIに伝える AIは「何をしたいか」と「どうしたいか」が揃うと本領発揮する •文体（です・ます、やさしい日本語） •見出し階層（H2/H3をPDFと一致） •分量（短文化、スマホ向け） •読者の想定 •箇条書き中心／語尾の統一 スマホ向けに使いやすく。文体はです・ます調。 フォーム要素はPDFと完全一致で。注意点は箇条書きで簡潔に。 目的（WHAT） 条件（HOW） プロンプト 記述例
42. プロンプト改善のコツ 2/3 講義 Markdown記法で 構造を正確にAIへ渡す AIは“構造化された情報”に強い # 見出し （H1~H4で階層構造を明確に伝える） - 箇条書き（要点を整理） **強調** （条件を落としにくく） •AIの誤読が激減 •出力の再現性が大幅に向上 •行政サイトの構造改善にも応用できる 条件の例 Markdown記法の メリット 残念ながら、Markdown記法で フォーム要素は書けません 

43. プロンプト改善のコツ 3/3 講義 「このフォームを市民向けに改善したいのですが、 　使えるプロンプト案を3つMarkdownで作ってください。」 「条件に抜けがあれば教えてください。」 実際に使える相 談文 AIに壁打ちしてもらう 慣れないうちは AIにプロンプト作りを手伝ってもらうのが近道 AIに、別のAIへの 作業指示を考えてもらう
 AI壁打ちでできること •目的の整理 •条件の抜け漏れチェック •Markdownでの構造化 •プロンプト案の生成 •プロンプトの改良（改善点の提案） プロンプトは“AIと一緒につくる” と成功率が高く、AIの迷いが少なくなる OK
 僕が考えたプロンプトを 実行して

44. プロンプト改善の3ステップ AIは良き相棒 まとめ 1. 目的と条件を整理する 　 まず「誰向け」「何を達成したい」を明確にする 2. Markdownで構造を整える 　　見出し・箇条書き・強調 で情報を整理する 3. AIに壁打ちしてプロンプトを作ってもらう 相談しながら“最適な型”を生成・改善していく AIは異動のない 「良き相棒」だと 思って、みなさんで 育て続けてください
45. 入力の二度手間を市民に求めていないか、必ず確認 
 •業務側で照合できる情報ではないか？
 •すでに別の項目で取得していないか？
 •申請目的に直接必要なデータか？
 講義補足
 フォーム受付後、他の項目の情報で補完できる内容を 市民に重ねて入力 させていないか？ AIは与えられた情報の中 でしか判断できない 

46. 電子申請フォーム改善を業務フロー から逆算
 電子申請の受信 申込内容を確認 次の業務へ （台帳登録／審査／出力／印刷 など） 業務の流れ どんな形式のデータを 
 最終的にどう使う？ 
 最低限必要なデータは？ 
 このフォーム項目は 
 本当に必要？ 
 1 3 2 フォーム項目を 考える順番 人間にしかできない改善の考え方 講義
47. 質疑応答
48. チェックアウト 「今日 気づいたこと」
50. 職員向け研修のお問い合わせは info@cgfm.jp まで