トップページへ戻る

市役所・区役所サイトのデザイン・コンテンツを解説!

この記事を書いた人 :

市役所・区役所サイトのデザイン・コンテンツを解説!

「魅力的なホームページを作りたい!」
「親しみやすくユーザーに選ばれるホームページに変えたい!」
「サイトをリニューアルして集客できるように改善したい!」

市役所・区役所のサイトをリニューアルしようと考えている担当者で、上記のような悩みを抱えていませんか?
この記事では、市役所・区役所のサイトを調査し、そのデータを元に、デザインやUI、コンテンツなどの傾向について解説しています。
市役所・区役所のオーナーやWebサイト担当者、デザイナーやマーケターなどで、サイト制作についてお悩みの方、成果を上げたいとお考えの方は、このまま読み進めてください。

Webサイトを訪れたユーザーが「ここに調査をお願いしたい!」と思うような魅力的なサイトを一緒に作っていきましょう。

今すぐ最新の業界データを手に入れよう!

data maisonは、圧倒的な
低価格で同業サイトを徹底分析

かんたん登録で、登録したその月から最新のデータが手に入る!
簡単3ステップ

Webサイト調査を手軽に簡単に

※ ご契約にあたり初回契約期間は3ヶ月から。
以降月次更新となります。

※ 対象となる業界やWebサイトによって月額が異なります。

※ 価格は全て税込です。

  • ビッグデータ
  • 業界データ
  • 個別データ
  • 最新データ
  • 過去データ

市役所・区役所のサイトデザイン・UI

メインビジュアル

市役所・区役所(5サイト)を中心にサイトを確認し、ファーストビュー(スクロールせずに画面に表示される部分)には以下のようなメインビジュアルが設定されていました。

●メインビジュアル例
新宿区のホームページのデザイン中野区のホームページのデザイン

調査したサイトの中で最も多かったのが、最新のお知らせ情報を案内するメインビジュアルです。上記に載せている、「新宿区」や「中野区」のホームページでは、新型ウイルスに関すること、時期的な案内などを複数用意しスライダー形式で見せるように設定しています。市役所・区役所という幅広い層が使うホームページとなっていることもあり、分かりやすく、見やすいをメインビジュアルを採用していることが多いのです。

サイトカラー

市役所・区役所のサイトカラーを調べて見ると、以下のような結果になりました。

5サイトのサイトカラー

サイト ベース (背景色) ロゴ・メインカラー アクセントカラー
A ホワイト グリーン、ブラック イエロー
B ホワイト ブラック 3色
C ホワイト パープル、ブラック ネイビー、イエロー
D ホワイト ブルー、ブラック ネイビー、グリーン
E 写真 グリーン、ブラック グリーン、レッド

調査した5サイト中で最も多いベースの色は「ホワイト」です。ロゴ・メインカラーとしては区や市のイメージカラーが使われていますが、「ネイビー」や「グリーン」が多く使われています。ネイビーといったブルー系は、「知的」「クール」「信頼感」などの印象があります。ネイビーを使うことで「このサイトは信頼感がある」ことを伝える演出が、できるためロゴやサイトカラーによく使われるのです。

また、アクセントカラーはサイトによって様々ですが、オレンジがやや多い傾向です。
全体的にブルー系のロゴ・メインカラーを採用しているためサイトが多くクールな印象の中に、オレンジのような中間色があることで、ユーザーに見て欲しいポイントが分かりやすくなっています。サイトによってユーザーにイメージさせたいテイストがあるはずなので、それに合ったサイトカラーを選択しましょう。

フォントサイズとフォントファミリー

市役所・区役所サイトのフォントサイズ・フォントファミリーを調べてみました。

● 5サイトのフォント

サイト フォントサイズ フォントファミリー① フォントファミリー② フォントファミリー③
A 16px メイリオ
B 16px UD新ゴ M Lucida Grande Helvetica Neue
C 16px メイリオ sans-serif
D 14px メイリオ ヒラギノ角ゴProN MS Pゴシック
E 14px ヒラギノ角ゴ Pro W3 メイリオ MS Pゴシック

TOPページ内の本文フォントサイズを調査したところ、平均サイズは16pxでした。5サイトの中で、最も小さいサイズで14px、最も大きいサイズで18pxです。全体的には、そこまで大きな違いもなく、標準的なフォントサイズを採用しているのがわかります。

また、フォントファミリーについては「Noto Sans JP」を採用しているサイトが多い傾向にあります。次点で「メイリオ」が多く、「ヒラギノ角ゴ Pro」という順で設定されているのが確認できます。ちなみに「Noto Sans JP」は、GoogleとAdobeが共同開発をしたフォントファミリーです。市役所・区役所以外でも良く使われるフォントファミリーとなっていて、「Noto Sans」の種類は「JP」以外にもあり、どれを使うか迷う人も少なくありません。同じ「Noto Sans」でも種類によってウェイトやサイズの違いがありますので、色々試しながら自社サイトのテイストに合うものを選びましょう。

これはあくまでもたった5サイトの傾向値でしかありません。
良質なWebサイトを作るためのヒントは、競合他社のサイトの中に、もっとたくさんあります。
そのためにも多くのサイトデータを集めて分析することが、自社サイトを成功に導くセオリーのひとつです。
とはいえ、集めなければならないデータ、そして同じ分量だけ分析しなければならないとなると、時間も労力もかかってしまいます。

競合他社サイトの情報収集を魔法のようにワンクリックでできたら良いですよね?

…実は、data maisonなら、あなたのその願いを叶えられます!

data maisonは、気になる競合サイト、新勢力企業のサイト、業界全体のサイトなどのデータをワンクリックで手軽に手に入れられるツールです。あなたがベンチマークしているサイトについて、今回紹介しているような「サイトカラー」や「フォントサイズ」などの情報も手に入りますし、市役所・区役所サイト全体のファーストビューの傾向、コンテンツの傾向なども確認できます。

本来はWeb担当者やデザイナーなどが、自分でサイトを抽出して苦労しながら調査していたことを、data maisonならたった165円~※という圧倒的な低価格で、最新の業界データを一瞬で手に入れることができます。

ぜひ、今までの煩わしい調査から解放される魔法のような調査体験を経験してみてください。
もっと市役所・区役所のサイト傾向を知ろう!

絶対に欠かせないサイトコンテンツ

「くらし・手続き」に関するコンテンツ

今回調査した5サイトで必ず掲載されていたのが「くらし・手続き」です。

● 「くらし・手続き」ページ
これは市役所・区役所からユーザーに向けて、生活する上で欠かせない情報・ルールを伝えるページとなっており、サイト内で欠かせないコンテンツのひとつです。なぜなら、ユーザーの多くがその街で暮らす上で必要な情報を知りたいと考えそれぞれに対応した役所のホームページに訪れ、自分が知りたい情報を探します。

そんな時、どこのページを選んだらいいのか迷っているに向けて、各種の手続きを一括で見られるようなページを作成しておくことで、ユーザーも知りたい情報を見つけられるようになるのです。どんなに良い情報を持つページがあったとしても、サイト内で分かりやすくしたり、アピールできていなかったりしたら、ユーザーもわからないままで意味がありません。そのため、ユーザーに知ってほしい、「情報」や「その街のルール」などを伝えるために、「くらし・手続き」ページは欠かせないコンテンツとなっているのです。

「観光スポット・イベント情報」に関するページのコンテンツ

その街に暮らすユーザーだけではなく、これから住もうと考えているユーザー、遊びに訪れるユーザーに対して街をアピールする目的として「観光スポット・イベント情報」などに関することです。

その土地のプロが教える「宿泊先の選び方」や「おすすめの旅行先」など、ユーザーが知りたい情報がコラムとしてまとまっています。
上記の例として「人気観光スポット」や「ファミリー向けのスポット」など、多様なニーズにも応えられる内容のコンテンツをコンスタントに発信しています。

「施設案内」に関するページのコンテンツ

市役所・区役所のサイトで良くあるコンテンツとして「施設案内」が挙げられます。

●施設案内のページ例
新宿区の施設案内ページ

市役所・区役所には様々な施設があります。どんな施設が利用できるのか?どこに行けば手続きができるのか?などを案内してあげることで、ユーザーからの不要な問い合わせを減らすことができるでしょう。即効性がある方法ではありませんが、インターネットを利用して検索する人が多くなっている昨今では、施設案内は欠かせないコンテンツと言えます。

市役所・区役所の集客やプロモーション方法

市役所・区役所は基本的にあまりプロモーションするということはないのですが、方法としてはインターネットが発達したこともあり、マスメディアやチラシなどの方法以外に、インターネットを使ったプロモーションをして集客をしていることもあります。

Webサイト以外の情報発信の場として、市役所・区役所の運用SNSを見てみると、以下の通りでした。

●5サイトの運用SNS

サイト 運用SNS
Instagram Twitter Facebook LINE YouTube
A
B
C
D
E

TwitterとFacebookを運用しているサイトが多く、他にLINEやYouTubeとなっています。

市役所・区役所の情報発信の場としてTwitterは特に活用されているケースが目立ちますよね。
リアルタイムに配信できることから災害が起きた時など、緊急的な発信をするのにどの都道府県でも使われているSNS。何かイベントを行う時などにも重宝されています。

定期的に利用してくれるユーザーが増えたり、自発的に友人や知人に紹介してくれたりするなど、様々な良い効果が期待できますので、SNS運用及びソーシャルメディアのプロモーションを試してみてはいかがでしょうか。

まとめ

日本は少子化に向かっているが、市役所・区役所市場は伸長傾向にあります。この理由としては、子供の成長を記録することに対する価値観の高まりがあると言われています。

市役所・区役所のニーズは多様化していますし、今後も更に様々な対応が求められることになるはずです。その際に、インターネットをもっと活用した効率的なやり方ができれば、働く側もユーザーもWin-Winの関係性になれるのではないでしょうか。

新型コロナウィルスによって市役所・区役所のWebサイトを活用する機会も増えてきています。よりスマートフォンでも使いやすくする必要があるため、リューアルする際には今回紹介したことなどを加味して、ユーザーに選ばれるサイト制作をしましょう。

そして、より良いサイトでユーザーに満足をもたらすためにも…。
ぜひ、あなたも他社サイトの情報を調査して「人の心を動かす」魅力的なサイト制作をしてくださいね。

data maisonは月額165円からご利用いただける個人向けサブスクリプション・モデルです。

ひとつ調べたい項目があった場合、100サイト分調査するのに、おおよそ1日かかります(1サイト5分としても)。
それが40項目において100サイト分調査するなら、おおよそ2ヶ月(40営業日)かかります。
そのために専用の派遣社員やアルバイトを雇ったとしましょう。
時給2,000円の社員に毎日8時間×2ヶ月(40営業日)、この調査業務を行ってもらった場合、以下の計算になります。

40項目の調査を100サイト行った場合、
 期間:2ヶ月の調査+統計整理 で 費用:640,000円(諸経費除く) 
これがdata maisonを利用した場合、
 期間:即時 で 費用:月々165円~

時間も2ヶ月の無駄を省き、費用も約1万分の3(=0.03%)まで削減できます。
これは経営者にとっても、Webマーケティング担当者にとっても、デザイナーにとっても、営業マンにとっても、めちゃくちゃ効率的ですよね。
時は金なり! 出る金は制すなり! です。
 
 

さぁ、今すぐ業界データを購入しよう!

気になる業界プランを購入!

今すぐ最新の業界データを手に入れよう!

data maisonは、圧倒的な
低価格で同業サイトを徹底分析

かんたん登録で、登録したその月から最新のデータが手に入る!
簡単3ステップ

Webサイト調査を手軽に簡単に

※ ご契約にあたり初回契約期間は3ヶ月から。
以降月次更新となります。

※ 対象となる業界やWebサイトによって月額が異なります。

※ 価格は全て税込です。

  • ビッグデータ
  • 業界データ
  • 個別データ
  • 最新データ
  • 過去データ