Zenn
GovTech東京Publicationへの投稿
💁

自治体ウェブサイトのUX改善最新トレンド2024

クワモト
2024/12/20に公開
UI/UX
BI
UXライティング
ヒートマップ
生成 AI
idea

ごあいさつ

はじめまして。GovTech東京で、都庁各局や都内自治体向けにウェブサイトのUX改善やデジタルマーケティングなどの支援をさせていただいております、桑本です。パブリック界隈に来たのは2年前で、それまではECなどのウェブサービスや航空・ホテルなどのトラベル業界でプロダクトマネジメントやデジタルマーケティング・PRなどに関わってきました。

年末恒例と言えばということで、各メディアで発表されるその年のヒットランキングや翌年のヒット予測などにならって、我々の自治体向け伴走サポートもふりかえってみたいと思います。

GovTech東京ではこの1年を通じて、3ターム・都内20を超える自治体の公式ウェブサイトについて、アクセス解析から具体的な改善などを伴走サポートさせていただきました。

伴走サポートは、同じ課題をもった自治体がゼミのような形式で集まり、東京都・GovTech東京のエキスパートが支援後の自走も意識しながら伴走し、具体的な課題を解決していくものです。GovTech東京 noteでも前後半でご紹介させていただきましたので、ぜひご覧ください。

我々からご紹介したさまざまな改善施策のうち、自治体のみなさんから「やってみたい！」「これはいい！」と特に反響が大きかったのは以下の3つでした。

2024年 注目の3大トレンド

  1. UXライティング：読み手に分かりやすい文章作成・改善
  2. データ分析ダッシュボード：Google Looker Studioを使った効率的な分析
  3. ヒートマップ解析：Microsoft Clarityで把握する実際のユーザー行動
    それでは、各トレンドの詳細と実践方法をご説明していきます。

UXライティング

今年最も自治体職員の方々から共感いただいたのが「UXライティング」です。

とかく自治体のウェブサイトは、すべての人を受け止めるという想いが強いあまり、広く薄く長い文章になりがちですが、そこへの良いアプローチにつながると考えています。
施策実施の結果、エンゲージメント率や遷移率が5～10pt改善するページが続出しました。

UXライティングのテクニック（一例）

  • 冒頭で要点や重要情報を提示

    • 現代人はウェブコンテンツを読むというよりスキャンすると言われます。自治体ウェブページは起承転結で長くなりがちですが、冒頭に結論や必要なアクション（申請期限など）を配置することで、読み手は重要かどうかをすぐに判断できます。
      民間では、ワンクリックでその記事の概要を生成できる機能を提供しているウェブメディアも出てきました。

  • ページ上部に目次

    • 箇条書きの目次があれば、長文でもページ全体の構成が把握しやすくなります（書籍の目次と同じ効果があります）。

  • 箇条書き

    • 複雑な表
      自治体ウェブサイトでよく見られる表組みは、PCでは整然と見えても、スマートフォンでは文字や数字が縦書きになり、閲覧性が著しく低下します。箇条書きを活用すれば、見やすさが向上し、スクリーンリーダーでの読み上げもスムーズになります。ぜひ現状の表示方法を見直してみましょう。
      格段に読みやすくなるなら、多少ページが長くなるのは問題ないと考えます。

      • 架空の区役所の窓口案内を例に
        複雑でセルも狭く読みづらい見た目になった窓口案内表の例
        ↓（市民課を箇条書きにしてみます）
        1階 市民課 (窓口1-A)
        • 主な手続き
          • 住民票の写し
          • 印鑑登録
          • マイナンバーカード
          • 戸籍謄抄本
        • 受付時間
          8:30～17:15
          毎週水曜日は19:00まで受付
        • お問い合わせ
          03-XXXX-1111

    • 手続き・ステップの案内
      流れを端的に伝える場合も、文章で伝えるより番号付きリストなど箇条書きで表現すると、よりシンプルに理解できます。

      • 児童手当の申請を例に
        元の文「出生後、お住まいの市区町村の窓口で児童手当の申請手続きを行っていただく必要があります。申請書類に必要事項を記入し、必要書類と併せてご提出ください。審査後、認定通知書が送付され、指定の口座に手当が振り込まれます。」
        ↓（箇条書きにしてみます）
        1. 出生から15日以内に申請
        2. 必要書類の準備
          • 申請者の健康保険証のコピー
          • 通帳のコピー
        3. 市区町村窓口で申請書を記入
        4. 書類一式を提出
        5. 審査・認定通知の受領(約2週間)
        6. 指定口座への振込開始

  • 肯定的な表現

    • 自治体の案内ページでは「できないこと」の列記が目立ちますが、否定的な表現が続くと読み手の意欲が低下しますし、結局何がOKなのかもよく分からなくなります。事業や案内をポジティブに伝えるためにも、「できる」ベースで表現したいところです。申請フォームのエラー表示も同様です。
      • ポジティブに言い換える例
        1.「その文字は使えません」→「英数字のみ使えます」
        2.「指定のゴミ袋以外は使用禁止です」→「市指定のゴミ袋をご利用ください」
        3.「保育園の入所申請は期限を過ぎると受け付けられません」→「保育園の入所申請は○月○日まで受け付けています。早めのお手続きで、スムーズな保育園入所をサポートいたします」

UXライティングのテクニックは他にもたくさんあります。ネット上には様々な記事や事例が掲載されていますが、体系的かつ具体的に学びたい場合は、以下の書籍がおすすめです。

feat. 生成AI

文章を考えることが苦手な方も多いと思いますが、いよいよ良い時代となりました。「我々には生成AIがあるじゃないか」ということで、庁内で利用可能な場合には、生成AIを活用したリライトにも挑戦いただき、全庁向けにマニュアル作成を始めている自治体もいらしゃいます。
以下のような簡単なプロンプトでも、読みやすい・分かりやすいページに生まれ変わりますので、ぜひ試してみてください。

次の自治体ウェブページ文章を、UXライティングのテクニックを用いてリライトしてください。その際、モバイルファースト、ウェブアクセシビリティ、SEO、外国人に読まれたり自動翻訳されることを考慮してください。また、最後にどういったテクニックを使ったかも教えてください。

（ここに、ウェブページの文章を丸ごとコピペします）

UXライティングする前のページ例

保育所入所申込について

保育所入所申込に係る諸手続きについて、下記の通りご案内申し上げます。

申込対象者

保育所入所申込を希望する児童の保護者であって、就労、疾病その他の理由により当該児童を保育することができないと認められる場合において、当該児童を保育所において保育することを希望する者。

申込受付期間

令和6年度4月入所：令和5年11月1日から同年11月30日まで
※上記期間経過後も随時受付をいたしておりますが、定員の都合上、ご希望に添えない場合がございます。

必要書類

  • 入所申込書（様式第1号）
  • 就労証明書（様式第2号）
  • その他添付書類（詳細は担当課までお問い合わせください）

留意事項

申込時における必要書類の不備等がある場合、受付できない場合がございますので、予めご了承ください。なお、書類提出後における記載内容の変更等が生じた際は、速やかに担当課までご連絡いただきますようお願い申し上げます。

UXライティングしたページ例

保育園の申し込み方法

お子さまを保育園に預けたい方へ

■申し込みができる方

  • 仕事や病気などで、日中お子さまの保育ができない方
  • お子さまは0歳から5歳まで

■受付期間

【4月入園の場合】
受付：11月1日～11月30日
※この期間以外でも随時受付していますが、定員に空きがない場合があります
※育休明けなど、年度途中の入園相談も受け付けています

■必要な書類

  • 入園申込書
  • 保育が必要な理由を証明する書類
  • 会社にお勤めの方→勤務証明書
  • 自営業の方→営業証明書
  • 病気療養中の方→診断書
    ※書類は窓口でお渡しします。ウェブサイトからもダウンロードできます

■申し込み方法

Step1：必要な書類を準備する
Step2：窓口に提出（予約不要）
Step3：面談（15分程度）

■よくある質問

Q：書類の書き方がわからない
A：窓口でご説明します。お気軽にお声がけください
Q：仕事が決まっていないが、申し込めますか？
A：求職中でも申し込めます。内定証明書などがあればご提出ください

■お問い合わせ

子育て支援課 保育園担当
電話：00-0000-0000（平日8:30～17:15）
メール：hoiku@city.xxx.lg.jp

いかがでしょうか。思った以上にスッキリした文章に書き直されたのではないでしょうか。

しかし、AIがここまで改善できたとしても、人間の役割は依然として重要です。特に職員の方々による最終確認は不可欠です。ハルシネーションを見分け、修正できるのは、業務知識を持つ職員だけです。また、読み手を解像度高くイメージできるのも職員の皆さんならではです。

さきほどのプロンプトでは、回答の最後にどういった観点でリライトしたか教えてくれますので、私たちも学ぶことができます。
これこそが、人間とAIの理想的な共生であり、新時代の働き方における適切な役割分担といえるでしょう。

2025年以降は、システムプロンプトやRAGなどの整備を進めることで、より幅広い業務で活用できるアプリケーションの開発が期待できます。これにより、読みづらい・分かりづらいページの問題も解消されていくはずです。実際に、東京都やGovTech東京では、すでにその基盤構築に着手しています。

ダッシュボード

多くの自治体がGA4やサーチコンソールを活用していることから、伴走サポート先にはGoogle社のLooker Studioを使ってダッシュボードを構築し、提供しています。

自治体職員の皆さんは行政業務のプロフェッショナルですが、ウェブ運営まで分かる方は少数派です。しかし、そんな職員の方々もツールの操作に不慣れなだけで、データ分析へのニーズは確実にあります。最近では、EBPM（Evidence-based Policymaking：データなど客観的エビデンスに基づいた政策の策定）による行政運営を重視する自治体が増えており、ウェブアクセスデータの分析とそれに基づく改善は、身近なデータでもあり、自治体のニーズにも合致しています。

使われるダッシュボード、使われないダッシュボード

ダッシュボードでよく見られる課題は、十分な「設計」がされていない、見た目だけを重視したものです。見栄えは良くても、目新しさが薄れてくると活用されなくなってしまうことは、民間企業でも多いと聞きます。
私もPower BI、Tableau、DOMOなどのBIツールを使用してきましたが、社内での定着に苦労してきました。データの変化が乏しかったり、次のアクションが明確でないダッシュボードは、実質的に不要なものとなってしまいます。この課題を解決するには、ユーザーにとって「無くなったら困る」と感じられるものを提供することが重要です。これは結局のところ、プロダクト開発やマーケティングで培った経験が活きる分野だと実感しています。

使われるための工夫

  • 変化するものを1ページ目に
    前週比や日次での増減が分かるデータを1ページ目（表紙）に配置し、日々の変化に敏感になるようにします。具体的には、新規ユーザー数、参照元、検索キーワードなどを表示します。
    モバイル率や流入チャネル比率は大きな変動が少ないため、次ページ以降に配置しても良いのではと考えています。

  • Business Question（BQ）の設置
    データを「見る」ことは誰にでもできますが、「読み解く」ためのガイドが必要です。ダッシュボード界隈では、Business Question（BQ）と呼ばれる、グラフや表に対する「どこを見るべきか」という質問をタイトルとして設定します。
    たとえば、Google検索の流入キーワードランキングには「急上昇しているキーワードは？」というBQを記載します。このガイドがあることで、データを隅々まで見る必要なく、前週比の伸びが高いキーワードをすぐに特定し、増加の要因分析に集中できます。ガイドがないと、表を見ても一喜一憂するだけで終わってしまいます。
    BQについては、以下書籍も参考になるかと思います。
    ビジネスパーソンのための使われ続けるダッシュボードづくりの教科書

  • ページパスや参照元URL、検索キーワードのリンク化
    「表示回数が多いページの内容を確認したい」「急増している参照元サイトがどんなサイトか知りたい」といった場合、GA4では直接リンクがないため確認に手間がかかります。しかし、ダッシュボードではこれらをリンク化することで、その場ですぐに確認できる導線を用意しています。

  • 計算フィールド
    GA4のデータそのままでは見づらい・使いづらい・足りないといった場合に便利なのが「計算フィールド」です。いくつか数式と合わせてご紹介します。数式は適宜書き換えてください。

    • ディレクトリー（カテゴリー）
      グローバルメニューなどをベースに、主要カテゴリーをグルーピングすることで、カテゴリーや階層分析がしやすくなります。複数のディレクトリーを、まとめて同じカテゴリー扱いにもできるので便利です。
      「子育て」「ごみ」「コミュニティバス」など

      CASE
WHEN STARTS_WITH(ページ階層, '/AAAAA/') THEN 'AAAAAディレクトリー'
WHEN STARTS_WITH(ページ階層, '/BBBBB/') THEN 'BBBBBディレクトリー'
WHEN STARTS_WITH(ページ階層, '/CCCCC/') THEN 'CCCCCディレクトリー'
WHEN ページ階層 = '/' THEN 'HOME'
ELSE '(others)'
END

    • ページタイトル
      一覧での見やすさ向上のため、サイト名など共通文言を削除するものです。
      以下は「ページタイトル｜サイト名」というパターンの例です。

      REGEXP_REPLACE(ページ タイトル,'(｜|\\|)〇〇市公式ウェブサイト','')

    • 曜日（月曜始まり）
      曜日の分析をする時に便利なものですが、頭に数字を振ることで、並び替えも有効になります。

      CASE
  WHEN CAST(WEEKDAY(日付) AS TEXT) = '0' THEN "7_日"
  WHEN CAST(WEEKDAY(日付) AS TEXT) = '1' THEN "1_月"
  WHEN CAST(WEEKDAY(日付) AS TEXT) = '2' THEN "2_火"
  WHEN CAST(WEEKDAY(日付) AS TEXT) = '3' THEN "3_水"
  WHEN CAST(WEEKDAY(日付) AS TEXT) = '4' THEN "4_木"
  WHEN CAST(WEEKDAY(日付) AS TEXT) = '5' THEN "5_金"
  WHEN CAST(WEEKDAY(日付) AS TEXT) = '6' THEN "6_土"
  END

  • （おまけ）フィルター「生成AIサイトからの参照のみ」
    最近では、検索サイトに加えて生成AIを情報収集に使うユーザーが増えてきました。そこで、参照元データでも確認できる主要な生成AIサービスからの参照元を分析し、ユーザーがどのような情報（ページ）を探しているのか調べてみました。ウェブブラウザー経由の遷移に限られますし、実際のプロンプトも確認できませんが、ユーザーが生成AIを通じて知りたいことを把握できるのではと期待しています。とある自治体さんでは、介護保険に関するページへの遷移が目立つようなこともありました。

    「セッションの参照元」を「次を含む正規表現」で一致したもの（下記）でフィルターをかけています。

    (chatgpt.com|copilot.microsoft.com|gemini.google.com|claude.ai|perplexity.ai|genspark.ai)

ヒートマップ解析

ヒートマップ解析ツールは、Microsoft社のClarity（クラリティ）を使用しています。

Clarityでは、クリック／タップの多いエリアやスクロール深度が分かったり、ユーザー操作の再現動画（プライバシーに配慮されています）が確認できます。

ビジュ強めがゆえのワナ

ヒートマップは、GA4と比べて視覚的な訴求力が高く、最初は感動します。しかし、実際に使い始めると「これで具体的に何が分かるのだろう？」という疑問が湧いてきます。さらに「だいたい把握できた」と早々に興味を失ってしまうことも少なくありません。
この「もういいや」という状態に陥りやすい原因は、明確な目的を持たずに使っていることにあります。

  • 具体的な課題感や仮説の検証
  • 施策のパフォーマンス確認（ビフォーアフター比較）

などの明確な目的を持たずに漫然と見ても、残念ながら有意義なインサイトは得られません。

目的の具体例

以下のような課題感を持ってヒートマップを見ると、見えなかったものが見えてきたりします。

  • LINEの投稿からサイトに来たユーザーが、ページを読んでくれたか／迷っていないか
    URLパラメーターやイベント「click」でLINEからの訪問や外部申請ページへの遷移は把握できますが、GA4ではユーザーの具体的な行動パターンまでは見えにくいです。ヒートマップを活用することで、ユーザーがどの部分を熟読したか、ページを何度もスクロールしていないかなど、より詳細な行動を把握できるようになります。

  • チャットボットはどんな時に使われているのか
    チャットボットの会話内容自体はツール側で確認できますが、ユーザーがどのような状況やタイミングでチャットボットを利用しているかまでは分かりません。そこで、チャットボット起動という特定の操作を含むセッションに絞って動画を確認することで、「ページを開いてすぐにチャットボットを使ったのか」「ページを最後まで読んだ後や複数ページを見ても解決せずにチャットボットを使ったのか」といった詳細な行動パターンを把握できます（なお、すべて匿名化されており、実際の入力内容は確認できません）。

GA4のカスタムイベントでも定量的に掴める内容があるかも知れませんが、やはりビジュアルでパッと見でわかったり、一連の行動を通して見ることができるシンプルさは圧倒的で、チーム内や上司の方への説明も楽で、議論も活発になっています。
自治体ウェブサイトのリニューアルにおける現状分析フェーズでは、特に重宝されています。

さいごに（来年にむけて）

この1年間、自治体職員の方々から寄せられた「どう改善したらいいか分からない」「GA4が活用しきれない」「サイトリニューアルに向けて現状分析をしっかり行いたい」といった切実な想いに応えるべく、様々な施策を一緒になって取り組んできました。その結果、大小合わせて100近い施策を実行することができました。

2024年は自治体分野でも生成AIの存在感が際立ちましたが、来年もこの波は更に加速するでしょう。住民向けインターフェースとして現行のウェブサイトが適切なのか、また「生成AI検索」や「AIエージェント」が実務レベルで普及していく中で、情報提供サイトの役割も大きく変化していくと考えられます。
また、今回は触れませんでしたが、一部自治体では、マイページ機能や情報のプッシュ通知など、デジタルを活用した住民サービスが始まりました。行政でもCRMやCXといった観点が加速度的に重要になってくるでしょう。

これらのトレンドを見据えながら、来年も近未来の自治体ウェブサイトの在り方や、行政と住民の新たなコミュニケーション形態を模索していきたいと、決意を新たにしています。

お読みいただき、ありがとうございました。

最後にもう１つ、、
GovTech東京では一緒に働く仲間を募集しています！気になる方は、カジュアル面談からでもお気軽にお問い合わせください！
https://herp.careers/v1/govtechtokyo/9ERO4muhX0SA
https://herp.careers/v1/govtechtokyo/DOJwMMVUcBy-

GovTech東京
GovTech東京Publication

GovTech東京のテックブログです。

Discussion