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

by @Garyuten

Slide 1

Slide 1 text

熊本市様電子申請中級編自治体サイトのフォーム改善早く作って早く失敗する早く試して住民が“使いやすい”と思う入力体験とは 2025年11月21日(金) 合同会社CGFM

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

チェックイン (本日学ぶこと) • 普段どのようにフォームを作成していますか？ • 「この書き方で合っている？」　と迷った経験はありませんか？ • AIに任せる部分と自分が判断する部分を見極めましょう (AIに丸投げしない) 市民が迷わず使えるフォームをAIと共に考える

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

大まかなスケジュール入力しやすいフォームとは講義 AI実践ワークプロンプト改善の考え方講義 AI利用実践！フォームの改善案を作る

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

どうでしたか？

Slide 13

Slide 13 text

入力しやすいフォームとは？利用者を想像している？   講義  「市民の電子申請を身近にする、ひと工夫」を考える  

Slide 14

Slide 14 text

● 現状の課題 ● フォームを改善する目的 ● 改善は2段階で考える ● 適切なUIパーツの選び方入力しやすいフォームとは？講義講義の構成予定時間：約15分

Slide 15

Slide 15 text

スマホでは表示が崩れ、読むのが困難になる（誤解・入力ミスの原因）現状の課題入力項目が多いスマホでの入力は大変。あきらめて途中離脱する。フォームが長い入力を途中で諦める。集中力低下で入力エラーも生じる。文章が難しい電話で問い合わせるか、申請を諦める。不満が溜まる。市民への影響フォームの課題入力しやすいフォームとは？講義スマホ確認が不十分

Slide 16

Slide 16 text

入力しやすいフォームとは？講義フォーム離脱率を下げるフォーム改善の目的住民満足度の向上入力エラーを減らす職員の問い合わせ対応を減らす業務効率化

Slide 17

Slide 17 text

入力しやすいフォームとは？講義 ②適切なUIパーツを使う 2段階で考える ①使いやすい構造にする選択肢1 選択肢2 購入理由知人の紹介店頭でホームページ

Slide 18

Slide 18 text

入力しやすいフォームとは？｜使いやすい構造にする講義ステップ数が10以上なら構成を見直す入力をあきらめる / 入力ミスも起こりがち構成を見直して市民の入力負担を減らすまだ残り8ページもある...   マイナンバー活用で入力を簡略化できないだろうか？   本当に必要な項目に絞る   1 2

Slide 19

Slide 19 text

入力しやすいフォームとは？｜使いやすい構造にする講義長いフォームの離脱率を下げる工夫入力時間の目安を記載 [一時保存]ボタンの活用どうしても短く   できない場合は...   回答時間の目安：約20分申請 📄●●●●●●●●の届出 💾 入力内容を一時保存する

Slide 20

Slide 20 text

入力しやすいフォームとは？ | 適切なUIパーツを使う講義 2〜5個 6〜15個 16個以上利用者が探しやすいように選択肢の数に適したUIパーツを選ぶラジオボタンプルダウン検索付きプルダウン女性購入理由知人の紹介店頭でホームページ男性設定しない比較しやすい時選択肢が多い時さらに選択肢が多い時例外ケース：都道府県(47個)は選択肢が多いが、利用者は   経験上問題なく操作できる  

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

種別を選んでください必須入力しやすいフォームとは？ | 適切なUIパーツを使う講義フォームの増減でユーザーを驚かさない初期値が未選択選択後、初めてフォームが出る選択後にフォームが増えるストレス   法人個人法人個人種別を選んでください必須問題）

Slide 23

Slide 23 text

入力しやすいフォームとは？ | 適切なUIパーツを使う講義フォームの増減でユーザーを驚かさない多くの利用者が使う選択肢を or 間違いに気づきやすい選択肢を初期値として設定初期値を選ぶ   基準は？  法人個人種別を選んでください必須入力欄を予め表示しておく選択後の挙動を記載 ※フォーム作成サービスの機能に無い場合は無理に対応しなくてよい ※選択後にお名前や住所、連絡先の追加　入力欄が表示されます解決案）

Slide 24

Slide 24 text

個人法人実際の画面例入力項目が増えた 😱⁉  先に言ってよ 😡💢  個人か法人かを選択

Slide 25

Slide 25 text

入力しやすいフォームとは？ | 適切なUIパーツを使う講義並べ方(縦/横)を使い分けて、選択肢の一覧性を高める改善前改善後入力項目が冗長で   探しづらい   見やすい  フォームのラジオボタン「縦に並べる」,「横に並べる」を使い分ける

Slide 26

Slide 26 text

入力しやすいフォームとは？｜適切なUIパーツを使う講義表組み活用：列を整理して見やすくする改善前改善後縦に長くなって   探しにくい   表で整理されてみやすい  

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

入力しやすいフォームとは？｜適切なUIパーツを使う講義 [メールアドレス（確認）] の入力(同じ情報を二度入力させる) 現在は原則として非推奨理由 ●スマホでは「コピペ or オートフィル」が当たり前で、確認入力の意味が薄い ●コピペ不可にするとUX(ユーザー体験)が悪化 ●多くの大手サービスも「確認入力」を廃止している（楽天、LINE、Amazon、Google） ●入力ミス ↓低下 ●正確性 ↑上昇 ●UX(ユーザー体験) ↑上昇メールアドレスを一つにすると...

Slide 30

Slide 30 text

入力しやすいフォームとは？｜適切なUIパーツを使う講義フリガナ入力を「カタカナ」で強制するUI 理由 ●スマホではカタカナ変換が手間で入力負荷が大きい ●誤変換・候補の膨大さが原因でミスが起きやすい ●多くの自治体では受理後にカタカナへ自動変換可能改善案 ●原則：ひらがなで入力 ●システム要件上カタカナ入力が必要な場合はやむ無し（ひらがなでも入力可能です。自動でカタカナに変換されます）氏フリガナ必須　参考）自動カタカナ変換のフォームラベル例）カタカナ変換が必要になる  

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

AIと職員の共同作業イメージ AIに伝えるプロンプトをチームで考えるワーク AIで添削職員が確認＆手直し承認後公開プロンプト原稿準備プロンプトを試します

Slide 34

Slide 34 text

AI利用実践ワークの流れ AI利用実践ワーク・対象フォームの構造分析・利用可能なUIパーツの確認 1 対象フォームの改善案作成 2 改善案の HTML作成 3 UIパーツ辞書資料 PDF化した対象フォーム UIパーツ辞書対象フォーム ②で作成した改善案情報を分割してAIに参照資料を渡す改善案の HTML

Slide 35

Slide 35 text

1）講師実演 AI利用実践ワーク 2）チームで実践チームで対象フォームに対して実践します。手本を見て、操作の流れをつかみます。 Copilot チーム提出Canva 対象フォームブラウザのタブを切り替えながら使います  研修ファイルは共有できてますか？  CopilotはGPT-5で！ 

Slide 36

Slide 36 text

実験！同じプロンプトで他のフォームを添削ワークチームで実践 step1プロンプト step2プロンプト step3プロンプト 1 2 3 + 対象フォームPDF + UIパーツ辞書.md フォームの分析フォーム改善案 HTML生成 Canvaにスクショ貼付

Slide 37

Slide 37 text

実際動かしてみてどうでしたか？現場で活用できそうな手応えはありましたか？

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

プロンプト改善のヒント講義  私の成功失敗経験から得た学びをお伝えします   AIの思考のクセって？   壁打ちしてます？ 

Slide 40

Slide 40 text

AI＝“新人さん”に丁寧に仕事を渡すつもり AI利用実践｜全体の流れ振り返りワーク UIパーツ理解 1 フォーム構造の改善案を作成改善案のHTML作成 3 対象フォームの構造を分析 2 AI まず仕様や提出形式を共有しますね現状の構成はこういうことですか？これがお願いしたい資料ね背景や目的を理解してねはい、理解しましたそうそうそれじゃ、文章で改善の構成案を考えてこういう構成でどうですか？お、いい感じの文章だね。では書式を整えてくれる？はい。書式に合わせました。確認してください。上司

Slide 41

Slide 41 text

プロンプト改善のコツ 1/3 講義 ● 誰向けに？（例：市民、中学生、外国人） ● どんな成果？（短く、やさしく、構造化） ● 何を守る？（内容を省略しない、文体統一）「目的と条件」をAIに伝える AIは「何をしたいか」と「どうしたいか」が揃うと本領発揮する ●文体（です・ます、やさしい日本語） ●見出し階層（H2/H3をPDFと一致） ●分量（短文化、スマホ向け） ●読者の想定 ●箇条書き中心／語尾の統一スマホ向けに使いやすく。文体はです・ます調。フォーム要素はPDFと完全一致で。注意点は箇条書きで簡潔に。目的（WHAT）条件（HOW）プロンプト記述例

Slide 42

Slide 42 text

プロンプト改善のコツ 2/3 講義 Markdown記法で構造を正確にAIへ渡す AIは“構造化された情報”に強い # 見出し（H1~H4で階層構造を明確に伝える） - 箇条書き（要点を整理） **強調** （条件を落としにくく） ●AIの誤読が激減 ●出力の再現性が大幅に向上 ●行政サイトの構造改善にも応用できる条件の例 Markdown記法のメリット残念ながら、Markdown記法でフォーム要素は書けません  

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

プロンプト改善の3ステップ AIは良き相棒まとめ 1. 目的と条件を整理する　まず「誰向け」「何を達成したい」を明確にする 2. Markdownで構造を整える　　見出し・箇条書き・強調で情報を整理する 3. AIに壁打ちしてプロンプトを作ってもらう相談しながら“最適な型”を生成・改善していく AIは異動のない「良き相棒」だと思って、みなさんで育て続けてください

Slide 45

Slide 45 text

入力の二度手間を市民に求めていないか、必ず確認   ●業務側で照合できる情報ではないか？  ●すでに別の項目で取得していないか？  ●申請目的に直接必要なデータか？  講義補足  フォーム受付後、他の項目の情報で補完できる内容を市民に重ねて入力させていないか？ AIは与えられた情報の中でしか判断できない  

Slide 46

Slide 46 text

電子申請フォーム改善を業務フローから逆算  電子申請の受信申込内容を確認次の業務へ（台帳登録／審査／出力／印刷など）業務の流れどんな形式のデータを   最終的にどう使う？   最低限必要なデータは？   このフォーム項目は   本当に必要？   1 3 2 フォーム項目を考える順番人間にしかできない改善の考え方講義