自治体Webサイトに求められる6つの要件
具体的な事例を見る前に、自治体Webサイトが満たすべき基本要件を整理しておきましょう。民間サイトとは異なる行政特有の要件を押さえておくことで、事例を見る際の視点が明確になります。
アクセシビリティ（ウェブアクセシビリティ）
自治体Webサイトにとって最も重要な要件です。JIS X 8341-3:2016（ウェブコンテンツのアクセシビリティに関する日本産業規格）への準拠が求められ、公的機関は適合レベルAA準拠が目標とされています。
2026年度にはJIS規格がWCAG 2.2ベースに改正される見通しで、達成基準は現行の38項目から55項目に増加します。モバイル端末対応や認知障害者への配慮に関する基準が新設される予定で、今後のリニューアルではこの動向を踏まえた設計が不可欠です。
総務省は無料の検証ツール「miChecker」を公開しているほか、定期的に全自治体サイトの対応状況を調査を行っています。
参考
※総務省が無料公開している「miChecker」は、WebページのJIS X 8341-3準拠状況を自動で検査できるツールです。リニューアル時だけでなく、日常的なコンテンツ更新時にも定期的にチェックすることが推奨されています。
ユーザビリティ（使いやすさ）
自治体のサイトにおいて、住民が必要な情報にスムーズにたどり着ける情報設計とナビゲーション設計が重要です。
具体的には、サイト内検索の充実（サジェスト機能付き）、ライフイベント別・対象者別の導線設計、FAQ整備、パンくずリスト、よく見られるページのランキング表示などが有効な施策です。
レスポンシブデザイン（モバイル対応）
スマートフォンからのアクセスが全体の6〜7割を占める現在、レスポンシブ対応は必須要件です。特に自治体サイトでは表組みが多用される傾向がありますが、スマートフォンでの閲覧性が著しく低下するため、箇条書きへの変換やスクロール対応テーブルの導入が推奨されています。
セキュリティ
HTTPS化はほぼ全自治体で完了していますが、2025年にはサイバー攻撃事例が増加傾向にあり、WAF（Web Application Firewall）やIPS/IDSの導入、自治体情報セキュリティクラウドの活用が進んでいます。
CMS自体のセキュリティも重要で、自治体のセキュリティレベルに適したCMSを採用する自治体が増えています。
多言語対応・やさしい日本語
在留外国人の増加に伴い、多言語対応や「やさしい日本語」でのコンテンツ整備が進んでいます。特にやさしい日本語は外国人だけでなく、高齢者や障がいのある方にとっても情報を理解しやすくなる効果があります。
CMS（コンテンツ管理システム）
自治体サイトでは、承認フロー機能、組織改編への柔軟な対応、アクセシビリティ自動チェック機能など、行政特有の要件に対応したCMSが求められます。
参考にしたい自治体Webサイト17選
ここからは、デザイン・ユーザビリティ・アクセシビリティの観点で優れた自治体Webサイトを紹介します。リニューアルの参考として、各サイトの評価ポイントを具体的に解説します。
渋谷区（東京都）
URL：https://www.city.shibuya.tokyo.jp/
2023年3月にリニューアルし、同年にグッドデザイン賞「ベスト100」を受賞。白・黒・グレー基調のニュートラルなUIに独自ピクトグラムを配した洗練されたデザインが特徴です。
技術面ではPWA（Progressive Web App）を採用し、アプリのような快適な操作感を実現。121言語対応の自動翻訳や、可読性の高いUDフォントの導入、WCAG 2.2準拠など、アクセシビリティも最高水準です。「庁舎を訪れることなく行政サービスを完結させる」というDX思想が、設計の細部にまで貫かれています。
参考
- 渋谷区公式サイト 渋谷区ポータル｜2023 グッドデザイン・ベスト100
- 【3月30日】公式ウェブサイト「渋谷区ポータル」リニューアル ーPWAでスマホアプリのような使用感。121言語に対応ー | 報道発表 令和5年（2023年） | 渋谷区ポータル
大阪市（大阪府）
URL：https://www.city.osaka.lg.jp/
大都市ならではの膨大な情報を、整理されたナビゲーションで迷わせないように提示しています。特に検索窓の直下に配置された「よく探されるキーワード」は、ユーザーの目的達成をサポートする優れた導線設計です。
視覚的な魅力と実用性のバランスが良く、スライドショーに停止ボタンを設けるなど、JIS規格に準じた細やかな配慮が光ります。
横浜市（神奈川県）
URL：https://www.city.yokohama.lg.jp/
「海」を想起させる落ち着いたブルーで統一されたブランドカラーが、政令指定都市としての信頼感を醸成しています。
スマートフォンでのタップ・スクロール操作を考慮した設計で、政令指定都市にふさわしい風格と実用性を高いレベルで両立しています。
世田谷区（東京都）
URL：https://www.city.setagaya.lg.jp/
配色に頼らないシンプルで洗練されたデザインに、大きなアイコンによる直感的なナビゲーションが特徴です。
オンライン手続き・相談を最上部に配置した先進的な導線設計で、各手続きを順次オンライン化するDX推進の姿勢が表れています。
江戸川区（東京都）
住民の「情報が探しにくい」という声を反映し、徹底的なシンプル化とテキストの削減を断行。特筆すべきは、ChatGPTを活用したサイト内検索の要約表示機能で、目的の情報への到達速度を飛躍的に高めています。
また、120言語の自動翻訳に加え、ネイティブによる英語専用ページを構築するなど、多文化共生社会への対応力が非常に高いサイトです。
参考
川崎市（神奈川県）
URL：https://www.city.kawasaki.jp/
自治体サイトとしては珍しいモダンな配色とフォント選定が際立ちます。マウスホバーでカラーが変わったり、拡大したりするインタラクティブなデザインなど、民間企業サイトのような先進的な表現を取り入れています。
千葉市（千葉県）
URL：https://www.city.chiba.jp/
「お役立ちナビ」やユーザー属性（一般・高齢者・事業者等）に合わせた導線設計により、迷わない構造を構築しています。
目に優しい緑の同系色でまとめられたデザインは、長時間の閲覧でも疲れにくく、アクセシビリティに配慮されています。「よく使われるキーワード」の多層的な配置も、ユーザーの検索意図を的確に捉えています。
浜松市（静岡県）
URL：https://www.city.hamamatsu.shizuoka.jp/
トップページが表示される前に市章と文字が画面いっぱいに表示される印象的なローディング演出が目を引きます。
不要な文章を極力排除したミニマルなトップページが特徴的です。情報量を意図的に絞ることで閲覧者の混乱を防ぐ設計思想が徹底されています。
仙台市（宮城県）
URL：https://www.city.sendai.jp/
「杜の都」をイメージした鮮やかなグリーンを基調に、地域の個性をデザインで体現。
音声読み上げ機能や閲覧補助ツールの充実など、自治体サイトに求められるアクセシビリティ機能を網羅しています。公共機関としての安心感と、地域ブランドの訴求を高いレベルで両立させています。
相模原市（神奈川県）
URL：https://www.city.sagamihara.kanagawa.jp/
緑から青緑のカラートーンで統一し、山や湖の自然をシティプロモーションの核に据えた構成です。JIS X 8341-3:2016準拠を明示しており、子育てページには独自イラストを配した親しみやすい工夫が見られます。
参考
岡山市（岡山県）
URL：https://www.city.okayama.jp/
ヘッダーを透過させることで、岡山城や季節のイベント情報を画面いっぱいに映し出す「大胆なファーストビュー」が目を引きます。
視認性の高い大きな文字サイズをデフォルトで採用しており、高齢者を含む幅広い年齢層に対し、情報の見落としを防ぐユニバーサルデザインとしての配慮が徹底されています。
参考
東川町（北海道）
URL：https://town.higashikawa.hokkaido.jp/
「写真の町」のコンセプトを完全に体現したサイトです。写真家が撮影した町の四季折々の風景がスライドショーで展開され、配色・フォントの統一によるブランドの一貫性が際立ちます。「写真文化首都」というアイデンティティをWebデザインで表現した秀逸な事例です。
参考
帯広市（北海道）
URL：https://www.city.obihiro.hokkaido.jp/
ファーストビューで画面いっぱいの写真によるインパクトに加え、Instagramと連携して「#撮ろう帯広」の市民投稿をトップページに表示するUGC活用が特徴的です。
また、ターゲットを「市民」「観光」「移住者」に明確に分離した導線も、ユーザビリティの観点で優れています。
小布施町（長野県）
URL：https://www.town.obuse.nagano.jp/
繊細な写真と温かみのあるイラストを絶妙なバランスで配置し、アートの町としての品格を表現しています。
アートの町としてのブランドイメージをWeb上で丁寧に表現しており、見やすく整理されたレイアウトで町の文化的な魅力が伝わります。
焼津市（静岡県）
URL：https://www.city.yaizu.lg.jp/
「水産文化都市」焼津の特性を体現する、魚や海をイメージした動きのあるキービジュアルが他にはない個性を放ちます。
14年ぶりのリニューアルで、膨大なコンテンツを「くらし」「観光」「移住」の3軸に集約。
特筆すべきは、複雑な手続きをステップ形式で案内する「手続きかんたんナビ」の導入です。UDフォントの採用や海をイメージした動的なキービジュアルなど、使いやすさと個性が共存しています。
岐阜県
URL：https://www.pref.gifu.lg.jp/
丸みを帯びたデザインと「清流の国ぎふ」をイメージした水色・緑色の配色で、県のシンボルカラーを効果的に活用した都道府県サイトです。
関連メディア「GIFU42メディアネットワーク」との連携により、県全体の情報発信を統合的に展開しています。
沖縄県うるま市
URL：https://www.city.uruma.lg.jp/
2025年広報コンクールで総務大臣賞を受賞。独自の「うちなーぐち（沖縄の言葉）」を随所に取り入れ、人気イラストレーター・空えぐみ氏によるイラストを起用した遊び心あふれるデザインが特徴です。
地域文化を大切にする姿勢がデザインの細部に宿っており、行政サイトの新しい表現可能性を示したサイトです。
参考
自治体Webサイトの最新トレンド
アクセシビリティ対応の強化が加速
2024年4月の改正障害者差別解消法施行により、合理的配慮の提供が民間事業者にも義務化されました。行政機関は従来から義務でしたが、社会全体の関心の高まりを受けて、自治体サイトへの要求水準も上がっています。
アクセシビリティ対応チェックリスト
リニューアル時に最低限確認すべきアクセシビリティのポイントを整理しました。JIS X 8341-3の全達成基準を網羅するものではありませんが、自治体サイトで特に重要な項目をピックアップしています。
| カテゴリ | チェック項目 | 対応のポイント |
|---|---|---|
| 画像 | すべての画像にalt属性（代替テキスト）があるか | 装飾画像はalt=""（空）を設定 |
| 色・コントラスト | テキストと背景のコントラスト比は4.5:1以上か | miCheckerやコントラスト比計算ツールで検証 |
| キーボード操作 | マウスなしで全機能を操作できるか | Tab移動順序、フォーカス可視化を確認 |
| 見出し構造 | 見出しタグ（h1〜h6）が階層的に正しく使われているか | 見出しの飛ばし（h2→h4等）は不可 |
| フォーム | 入力欄にラベルが関連付けられているか | label要素のfor属性とinputのidを紐付け |
| 動画・音声 | 字幕・代替テキストが提供されているか | 自動再生動画には停止ボタンを設置 |
| 文字サイズ | 200%拡大時にレイアウトが崩れないか | 固定値（px）でなく相対値（rem）を使用 |
| リンク | リンクテキストが「こちら」等の曖昧な表現になっていないか | 遷移先がわかる具体的なテキストに変更 |
| 言語 | html要素にlang属性が正しく設定されているか | 日本語はlang="ja"を設定 |
| PDF文書にもアクセシビリティ対応がされているか | タグ付きPDF化、読み上げ順序の設定 |
AI・チャットボットの活用
生成AIの進化を受けて、自治体サイトへのAIチャットボット導入が加速しています。住民からの問い合わせに24時間自動で応答できるほか、関連情報へのナビゲーション機能を持つものも増えています。マイページ機能や情報のプッシュ通知など、CRM的な住民サービスの実装も一部自治体で始まっています。
データドリブンなサイト改善
GovTech東京ではGA4（Googleアナリティクス4）、Googleサーチコンソール、Microsoft Clarity（ヒートマップツール）を活用したデータに基づくサイト改善を推進中です。アクセスデータに基づいてユーザーの行動を可視化し、継続的にサイトを改善するアプローチは今後のスタンダードになるでしょう。
リニューアルの進め方ガイド
ここからは、実際にリニューアルを進める際の手順、費用感、入札プロセスについて解説します。
リニューアルの7つのステップ
ステップ1：現状分析（1〜2ヶ月）
現サイトのアクセスデータ分析、住民・職員へのヒアリング、アクセシビリティ診断を実施。課題を洗い出し、リニューアルの方向性を定めます。
ステップ2：要件定義・仕様書策定（1〜2ヶ月）
サイトの目的、ターゲット、必要機能、CMS要件、アクセシビリティ目標等をまとめた仕様書（RFP）を策定します。この段階で外部コンサルタントの支援を受けることも有効です。
ステップ3：制作会社の選定（1〜2ヶ月）
プロポーザル方式で制作会社を選定します。
ステップ4：設計・デザイン（2〜3ヶ月）
情報設計（IA）、ワイヤーフレーム作成、デザインカンプ制作。この段階で庁内関係者のレビューを重ね、方向性を固めます。
ステップ5：CMS構築・コーディング（2〜4ヶ月）
CMS環境構築、テンプレートコーディング、各種機能実装を行います。
ステップ6：コンテンツ移行・テスト（1〜2ヶ月）
既存コンテンツの移行と整理、アクセシビリティ検証、ブラウザ・端末テスト、セキュリティ検査を実施します。コンテンツ移行はリニューアルで最も工数がかかる工程の一つです。数千ページのコンテンツ整理には、不要ページの棚卸しが欠かせません。
ステップ7：職員研修・公開（1ヶ月）
CMSの操作研修、運用マニュアルの整備を行い、公開します。年度末（3月）に公開日を設定するケースが多いです。
CMS選定のポイント ～確認すべき7つのチェックポイント～
自治体サイトのCMS選定は、リニューアル後の運用品質を大きく左右する重要な判断です。以下のポイントを押さえて選定するようにしましょう。
（1）承認フロー機能：投稿→上長承認→公開の多段階ワークフローに対応しているか。行政組織では必須の機能です。
（2）組織改編への対応：年度替わりの部署名変更・統廃合に柔軟に対応できるか。自治体特有の重要要件です。
（3）アクセシビリティチェック：投稿時に自動でJIS X 8341-3準拠を確認する機能があるか。職員の意識に頼らない仕組みが重要です。
（4）操作の容易さ：専門知識がない職員でも更新できるか。自治体では数年ごとの人事異動があるため、属人化しないUIが求められます。
（5）災害時の対応：軽量版への自動切替、緊急情報の即時掲載機能があるか。
（6）セキュリティ：WAF、脆弱性対策、バックアップ体制が十分か。WordPressは脆弱性が頻繁に報告されるため、自治体での採用には慎重な判断が必要です。
（7）サポート体制：問い合わせ対応の時間帯、研修提供の有無、マニュアルの整備度合い。
制作パートナー選びのポイント
自治体Webサイトの制作パートナーを選ぶ際は、民間企業のWeb制作とは異なる視点が必要です。以下の5つのポイントを確認しましょう。
（1）自治体・官公庁での制作実績：行政特有のルール（入札・プロポーザル対応、公平性への配慮、個人情報保護、組織改編への対応）を理解しているかが最も重要な判断基準です。
（2）アクセシビリティ対応の知見：JIS X 8341-3への準拠経験があり、試験方法を熟知しているか。対応実績と検証体制を確認しましょう。
（3）ワンストップ対応力：RFP策定支援から設計・制作・CMS構築・データ移行・職員研修・保守運用まで、一貫して対応できる体制があると、リニューアル全体の品質管理がしやすくなります。
（4）運用支援体制の充実度：公開後の保守・運用こそがサイトの質を維持する鍵です。コンテンツ更新代行、定期的なアクセシビリティ検証、セキュリティ監視の体制を確認しましょう。
（5）セキュリティ体制：24時間365日のサーバ監視、WAF導入、プライバシーマーク取得など、行政サイトに求められるセキュリティ水準を満たしているか。
EWMグループの自治体Webサイト支援
EWMグループは、東京都をはじめとする多数の自治体・官公庁のWebサイト構築・運用実績を持つWeb制作会社です。
RFI・RFP策定支援からWebサイト制作、CMS構築、保守運用、セキュリティ対策までワンストップで対応しています。
【EWM支援事例】佐賀県大町町
URL：https://www.town.omachi.lg.jp/portal/
県外からの移住定住促進を目的とし、既存サイトから「子育て」と「移住」に関する重要情報のみを抽出・集約したポータルサイトです。
行政サイトの堅苦しさを排除した親しみやすいデザインを採用し、手厚い助成制度を視覚的に分かりやすくアピール。
情報をセグメント化（属性別に整理）することで、検討層が必要な情報へ迷わず辿り着ける、コンバージョン（移住相談等）を意識した導線設計が特徴です。
【EWM支援事例】佐賀市（佐賀市歴史民俗館）
URL：https://www.sagarekimin.jp/
歴史的建造物としての「格式」を保ちながら、観光施設としての「親しみやすさ」をデザインで両立させています。
特筆すべきは多言語展開の質であり、日本語に加え、英語・韓国語・繁体字・簡体字の5言語に対応。単なる翻訳に留まらず、インバウンド需要を的確に捉えた情報発信を行っており、文化施設や観光系サイトが多言語対応を進める際の理想的なロールモデルとなっています。
【EWM支援事例】東京都保健医療局
URL：https://www.hokeniryo.metro.tokyo.lg.jp/iryo/iryo_hoken/medical_info
在留外国人や訪日外国人が急な病気・ケガに際して、安心して医療機関を受診できる環境を支援する専門サイトです。
東京都の統合CMS「Liferay」を基盤に活用し、メインビジュアルやサムネイルを新規に書き起こすことで、全ページを通して高い統一感を実現。複雑になりがちな医療情報を、言語の壁を超えて正確かつ迅速に届けるためのUI設計がなされており、公共機関における多言語アクセシビリティの高度な実践例です。
まとめ
本記事では、自治体Webサイトの参考事例○選を中心に、サイトに求められる要件、最新トレンド、リニューアルの実務情報を包括的に解説しました。
改めて要点を整理します。
第一に、2024年の法改正・ガイドライン改訂を受けて、アクセシビリティ対応は待ったなしの状況です。2026年度のJIS改正を見据え、現在のリニューアル計画からWCAG 2.2への対応を織り込むことが重要です。
第二に、事例に共通する成功の鍵は「地域のアイデンティティをデザインで表現すること」と「情報到達性を最優先にした設計」です。他自治体のデザインをそのまま真似するのではなく、自分たちの地域の強みを核にしたサイト設計を目指しましょう。
第三に、リニューアルは「制作して終わり」ではありません。データに基づく継続的な改善、CMS運用体制の整備、職員研修の定期実施が、長期的なサイト品質の維持に不可欠です。
自治体のWebサイトは、住民と行政をつなぐ最重要のデジタル接点です。本記事が、より良いサイトづくりの一助になれば幸いです。