2025.06.05 - Thu
見やすい！「自治体ホームページ」のWebデザイン18選！
見やすく、使いやすい自治体 公式ホームページのデザイン
「岐阜県」の公式ホームページ（HP）
こちらは岐阜県の公式ウェブサイトです。
丸みを帯びたデザインや、「清流の国ぎふ」マスコットキャラクターであるミナモやイラストが各所に散りばめられていて可愛らしい印象が強いサイトです。またカラーユニバーサルデザインの考えに基づいた色の使い方や和柄の模様は、色覚異常を抱えている人にも配慮されており、信頼性と公的機関としての品位を感じさせます。
トップページ上部には主要なカテゴリを配置し、各セクションの色分けなど明確に区分けされているため、ユーザーは必要な情報をスムーズに閲覧できます。
公的機関のサイトは情報量が非常に多く、また万人がアクセスしやすい環境を維持するため大きな容量を必要とする画像の使用を避ける傾向にあります。
そのため情報整理がとても難しく、コントラスト差がはっきりとした配色を使用する、セクションや区切りを明確にする・余白の使い方などのレイアウトを考慮するなど、工夫が特に必要となります。
また情報量が多い公的機関のサイトはリニューアルの際、URLの変更に伴ってPDFなどすべてのリンクが途切れてしまうことが多々あり、事前の情報設計が重要となる点も注意が必要です。
「輪之内町」の公式ホームページ
https://town.wanouchi.gifu.jp/
こちらも岐阜県から安八郡輪之内町のホームページです。
パキっと分けられた青色と白、グレーが清潔な印象を与えてくれています。また、のどかな風景や町のシンボルの写真が各所に使われているため、この地域の特色がしっかりと感じられるようになっています。
まずファーストビュー内に「くらし・手続き」、「健康・福祉」、「子育て・教育」、「観光・文化」、「町政情報」、「事業者向け」といった主要なカテゴリが配置され、その先に細かなメニューを選ぶ流れとなっていて、直感的にユーザーにわかりやすい動線になっているのがポイントです。
ファーストビュー下も最新のお知らせやイベント情報がトップページに配置されているため、町の動きを迅速に把握できます。
閲覧支援による背景色変更も、ただ色が変わるだけの機能ではなく、デザイン性が崩れないような配慮が見られ、どんなユーザーでも同じ体験が得られるよう工夫されていました。（惜しむらくはコントラストをもう少し強調した方が視認性を向上できると思いました。特に青色を。）
「世田谷区」の公式ホームページ
https://www.city.setagaya.lg.jp/
東京都は世田谷区の公式サイト。
配色に頼らないシンプルな見た目が公的機関のホームページとは思えない程洗練された印象です。大きなアイコンが欲しい情報へのアクセスを視覚的に容易にしています。
他サイトと異なる点はなんといってもオンライン申請とオンライン相談。利用者が直接足を運ばなくても対応ができるサービスは他の公的機関のサイトにもありますが、世田谷区では一番上に配置され、わかりやすい動線が魅力です。
他にも各地域の特色に焦点を当てており、エリアごとの情報が詳細に整理され、イベントやコミュニティに関する情報が多く掲載されていることも特徴のひとつと言えます。また閲覧支援も実際どんな感じになるかを事前に見てから変更できるので利用のハードルが低くなっています。
「渋谷区」の公式ホームページ
https://www.city.shibuya.tokyo.jp/
こちらは同じく東京都より渋谷区の公式サイトです。2023年度グッドデザイン・ベスト100にも選出されており、高いデザイン性を保ちながらも自治体のポータルサイトとしての機能を損なわない素晴らしい設計と言えます。
デザインのポイントとして真っ先に挙がるのは、アプリのように整列されたカラフルなピクトグラムでしょう。2024年最新のWCAG2.2（Webアクセシビリティ：障害を持つ人や高齢者など幅広い人々にとってWebサイトを使いやすくするための国際的なガイドライン）よりもさらに1段階上であるWCAG3.2基準のコントラスト比をクリアしたカラーパレットが使われています。
また外国人の方にも意味が伝わりやすいシンプルなピクトグラムは独自開発されたものだそうです。
情報が多い分どうしても分かりにくく、使いづらくなってしまいがちな公的機関のWebサイトですが、上記のように色・レイアウトなどの様々な工夫や導線設計によって情報を整理することで、「ちがいをちからに変える街」渋谷区を表現すると同時に、全ての人が使いやすいサイトをしっかり実現しています。
「大阪市」の公式ホームページ
こちらは大阪府大阪市のサイト。市章のすぐ下に検索欄があり、そしてすぐ下に配置された「よく探されるキーワード」は、知りたい情報へすぐ到達できるのでとても便利な機能です。シンプルな設計で余計な情報が目立ちません。
文字やコンテンツは同系統のグリーンで構成され、統一感を持たせると同時にユーザーの目の負担を考慮したデザインになっています。
大きくスペースを使い、大阪市の魅力的な場所・イベントが自動で流れていくスライドは観光情報の入り口としても役立ちそうです。
「千葉市」の公式ホームページ
千葉県千葉市の公式サイトでは特に下層ページに注目しました。
一番上に自分が今どの階層に居るのか一目でわかる大きな表示があり、その下には関連する情報の最新ニュース。右側のサイドメニューにもトップページと同じアイコンが配置されており、まるで小さいトップページのような印象を受けます。目指す情報にもスムーズに辿り着けそうです。
また右下にはチャットボットが設置されており、疑問点は直接こちらに入力すればよいため効率よく疑問が解決できそうです。
家庭ゴミのチャットボットなんて専用サービスも用意され、スマホで撮った写真を元にAIが分別方法を案内してくれる機能も。これはリーピー本社ビルのある我らが岐阜市にもぜひとも導入してほしいです…！！
「浜松市」の公式ホームページ
https://www.city.hamamatsu.shizuoka.jp/
静岡県浜松市の公式サイトははじめに表示されるロゴのみのシンプルなローディング画面が印象的です。
サイト構成は情報がかなり絞られており、余計なテキストや装飾画像もほぼありません。シンプルが一番見やすいんだと言わんばかりの大胆さです。
公的機関のサイトであればSEO対策（サイトを検索エンジンで上位表示させるための調整）も不要と言えますし…。
「相模原市」の公式ホームページ
https://www.city.sagamihara.kanagawa.jp/
神奈川県は相模原市の公式サイト。ちょっと下にスクロールすると現れるAIチャットボット「しつぎおとうふ」さんが筆者の心を捉えて離してくれません……！
と、それはさておき、リボンのようでもあり山川のようでもある装飾、グリーン系のさりげないグラデーション、白色やグレイが上品に見える色使いなど、洗練されたデザインも印象的で、ぜひお手本にしたいサイトです。
「川崎市」の公式ホームページ
こちらも同じく神奈川県から川崎市の公式サイトは必要な機能が右上、メニューはメイン画像のすぐ下にとミニマルにまとまっているのが特徴です。
ファーストビュー内で物事が完結してしまえるためユーザーにとっては便利な構成であると言えるでしょう。特にスマホからアクセスしている場合はスクロールする手が疲れないので嬉しい配慮です。
ただしファーストビューのみで完結＝下までスクロールしないと言うことでもあるため、他にも見てほしい情報がある場合は不向きです。
世界的なWebデザインアワードも受賞！
全国にある制作会社でも随一を誇る、14名のWebデザイナーが在籍。
世界最大級のWebデザインアワード「Awwwards.」の受賞歴も豊富なリーピーの制作実績を、ぜひご覧ください。
地域・地方創生・NPOの
情報が見やすく整理されたホームページ
カンダまちおこし株式会社
https://www.kanmachi.co.jp/（制作：株式会社リーピー）
十六フィナンシャルグループのまちづくり会社、カンダまちおこし株式会社様のウェブサイトを制作させていただきました。ローカルに回る経済、地方がおもしろくなる引力を起こす、というキーワードを元に、回転して引き合いながら広がっていくアニメーションを使用しました。サイト全体は暖色で統一し、温かみを演出しています。
岐阜県 全国高等学校総文祭推進課
https://gifu-bunkasai2024.pref.gifu.lg.jp/koku-shou-bunsai/（制作：株式会社リーピー）
サイトのトップページには、文化部の写真が豊富に使用されています。美術・音楽・演劇など、各文化部の活動が生き生きと写し出されており、総文祭の多彩な要素を表現していますね。大会イメージソングをサイト上で聴くことも出来、ワクワク感を味わせてくれます。他にもマスコットキャラクターが各部門に合わせた特別な格好をしているところも可愛らしく、注目どころが盛りだくさんのウェブサイトです！
GIFU42メディアネットワーク
https://gifu42.net/（制作：株式会社リーピー）
岐阜県内の首長の想い・声を集めたメディアサイト「GIFU42メディアネットワーク」を制作させていただきました。岐阜県のシンボルカラーである緑と、清流長良川をイメージした水色。川の流れのような波線で構成されており、岐阜県公式サイトを意識したデザインになっています。
シビックプライドプレイス（岐阜市・ぎふメディアコスモス事業）
https://medicos-cp.jp/（制作：株式会社リーピー）
岐阜市にある、ぎふメディアコスモスが運営するサイト「シビックプライドプレイス」を制作させていただきました。洗練された和モダンなデザインが、「過去を知り、現在を見つめて、豊かな未来を想像する。」というコンセプトとも上手くマッチしていますね。鯉や青海波などのさりげない和のあしらいも、とても上品です。
エエトコタント
https://cool-gifucity.jp/（制作：株式会社リーピー）
岐阜市のシティプロモーション「エエトコタント岐阜市」のメディアサイトを【ミユキデザイン＋リーピーの共同企業体】で制作させていただきました。明るい黄緑色が爽やかな印象を与えるデザインとなっています。岐阜市の観光やイベント情報、とっておきのネタまでこのサイトに集まっているので、見ていて楽しいサイトです。
寄ってきゃあ瑞浪（瑞浪市観光協会）
https://瑞浪.com/（制作：株式会社リーピー）
カラフルな装飾があしらわれた、ポップで賑やかなデザイン。重なり合った画像が奥行きを感じさせ、眺めているだけでワクワクするようなサイトです。写真や装飾が躍動感あるアニメーションで動くことで、ユーザーの興味を引き立て、サイトの魅力が一層際立っています。
FURUSATO（認定NPO法人ふるさと回帰支援センター）
https://www.furusato-web.jp/（制作：株式会社リーピー）
地方移住を応援するWebマガジン「FURUSATO(フルサト)」を制作させていただきました。このサイトでは、移住に関心のある人に向けたお役立ち情報を発信しつつ、移住相談への導線を設け、相談件数の増加につなげています。サイト内の回遊性を高めるポイントはサブカラム。イベントの検索がすぐにできるほか、人気の記事もランキング化されており、ユーザーの興味を掻き立てる工夫が施されています。
認定NPO法人 ふるさと回帰センター
https://www.furusatokaiki.net/（制作：株式会社リーピー）
東京都有楽町にある、ふるさと回帰支援センター様のWebサイトリニューアル事例です。メインカラーのブルーに差し色のオレンジが鮮やかなデザインですね！トップページには職員さんの写真がシールのように散りばめられていて、コミカルなポーズや素敵な笑顔に思わずほっこりしてしまいます。
NPO法人G-net（ふるさと兼業）
https://furusatokengyo.jp/（制作：株式会社リーピー）
愛する地域と共感する事業で選ぶプロジェクト型兼業・プロボノweb「ふるさと兼業」のホームページは弊社で制作させていただきました。カラフルな配色と丸みのあるゴシック体がホームページを活発で親しみやすい印象に仕上げています。ファーストビューからスクロールしてすぐに、地域や働き方などで自分に合ったプロジェクトを検索することができます。
※ご紹介しているサイトの中で、「（制作：株式会社リーピー）」と書かれたサイトは当社の制作実績です。その他のサイトは当社の制作実績ではございませんが、デザイン性などが優れているため、事例としてご紹介させて頂きました。制作をされた制作会社様で、掲載の取り消しをご希望の場合は速やかに対処いたしますので、当社までご連絡くださいませ。
世界的なWebデザインアワードも受賞！
全国にある制作会社でも随一を誇る、14名のWebデザイナーが在籍。
世界最大級のWebデザインアワード「Awwwards.」の受賞歴も豊富なリーピーの制作実績を、ぜひご覧ください。
