自治体Webデザイントレンドこぼれ話 : ここだよマップ

CSS Niteの年末イベントShiftでやっているセッションにデザイントレンドというのがあります。

その中に自治体デザイントレンドというコーナーがありまして、2009年から毎年1700近くある自治体のサイトをクロールしてリサーチしているのですが、そのこぼれ話などをここでお送りしていきます。

Story Permalink

まずは過去の自治体Webデザイントレンドトピックを取り上げていきます

自治体Webデザイントレンドのイベントに向けて、過去に自治体Webサイトのトレンドとして登場した数々のトピックを紹介していきたいと思います。

これから紹介していくトピックは、いずれも過去のCSS Nite Shiftにて取り上げているものです。

ここだよマップというスタイル

他のビジネスサイトになくて、自治体Webサイトに多く取り入れられることになったもののうち、最も著名なものは「ここだよマップ」と呼んでいるスタイルでしょう。

自治体Webサイトは、その性格上、地域色が強いですが、情報発信としては対象地域の人だけでなく、全国すべての人がターゲットとなりえます。

というのも、自治体に関係ある人というのは、居住者だけではなく、地域への移住を検討している人、用事があって訪問する人、観光に来る人、自治体とビジネスをしようと考えている人など様々だからです。

加えて、自治体のある場所というのは、住んでいる人でない限り知らないケースがほとんどと言えます。

例えば、都道府県レベルであれば、だいたいの人は場所を思い浮かべることができるかもしれません。

でも、市町村レベルとなるとどうでしょうか。

市くらいなら、住んでいる県のものくらいは言えるかもしれません。

町や村になってくると、県のどの辺りかはかなり怪しくなってきます。

自治体サイトのサイト名は自治体名であることが多いですが、それを補完するために生まれたのが「ここだよマップ」というスタイルなのです。

「ここだよマップ」はこういうもの

ここだよマップは、自治体の場所を中心に周辺の市町村との関係や、県名などがセットでイラスト化されたものです。(写真は雄武町)

このマップがあるおかげで、あまり知らない自治体であっても県のどこに位置するかを知ることが出来ます。

ユーザにとって便利であることの他に、ビジュアル要素の用意の困る自治体サイトにとって、デザインの遊びを取り入れることができる場所として、数多く導入がされていっています。

2012年頃から普及していき、現在もリニューアルされたサイトに多く搭載されています。

自治体Webサイトは、ある表現が採用されると周辺の自治体にも採用されていくという傾向があるようです。

各自治体は、隣接した自治体を競合サイトとしてウォッチしたりするのでしょう。

ここだよマップも、導入が進むにつれて、より便利な、よりわかりやすいものも増えてきました。

ヘッダー部での採用

ヘッダ部分に「ここだよマップ」が導入されているケースをみかけます。

ヘッダにある自治体名と、場所をまずアピールすることで、どこの話かをユーザに知らせることができます。

例えば、鶴居村のサイトでは、2009年の時点ですでに「ここだよマップ」が導入されていました。

現在は、このサイトでは、サイドエリアへと移動しています。

フッターでの採用

一方、ヘッダではなく、フッターに「ここだよマップ」を採用しているケースもみられます。

奥尻村などがそうです。

フッターに配置する場合、自治体の住所や電話番号、FAXなどお問い合わせと共に掲載するケースが多々あり、ここだよマップはアクセス情報として扱われています。

ヘッダに比べて、ゆとりをもった配置が可能な点もフッターに配置するメリットかもしれません。

メインイメージ、コンテンツエリア、サイドエリアでの採用

上島町は、メインイメージに「ここだよマップ」と、地域の紹介を取り入れた珍しいスタイルです。

また、「アクセス」というバナーにも、ほんのりと地図を入れている点も、バナーを押した先にあるコンテンツを想像することが出来、良いと思います。

サイドエリアへの配置は、近年採用が進む配置箇所です。冒頭取り上げた雄武町もサイドエリアタイプです。

地域を対象としたサイトに採用してもいいかも

「ここだよマップ」は何も自治体だけのものではありません。

特定の地域を対象にしたビジネスや商店のサイトにおいてもきっと威力を発揮するでしょう。

また、素材の乏しいサイトにおいても、キャッチーなビジュアル要素として利用出来るかもしれません。

モダン系のサイトが、Google Mapのカスタマイズを使ったスタイルを採用する一方で、こういったアプローチも親しみやすくて良いのではないでしょうか。

2/24は、自治体Webデザイントレンド

自治体Webデザイントレンドは、2/24に開催されます。ぜひみなさんいらしてください!

Colophon

編集長
Greative GK. 原一浩 ( kara_d )
製版システム
Clojure / Compojure / Ring / Enlive / markdown-clj / Jetty / MySQL
Share this magazine!
Follow designudge

Magazine Archives

vol.122

2016-2-01

Cover

台湾に行ってきました。

今回のカバーは、台湾にて撮影したものです。

自治体Webデザイントレンドこぼれ話 : ここだよマップ

CSS Niteの年末イベントShiftでやっているセッションにデザイントレンドというのがあります。

descjop で遊ぼう day 16 : Windows版のメニューを表示する

2015年の振り返り的な一人レトロスペクティブ

そういえば、まだ2015年の振り返りをマガジンに掲載していませんでした

編集後記

vol.121

2016-1-14

Cover

今回のカバーは、、、UFO?

自治体Webデザイントレンドこぼれ話 : 予告

CSS Niteの年末イベントShiftでやっているセッションにデザイントレンドというのがあります。

descjop で遊ぼう day 11 : Omのコンポーネントで遊ぼう

descjop で遊ぼう day 12 : Omのコンポーネントで遊ぼうその2

descjop で遊ぼう day 13 : Clojure ワークショップでTAしてきた話

descjop で遊ぼう day 14 : アプリケーションメニューを作ろう

descjop で遊ぼう day 15 : descjop 0.5.3をリリースしました

編集後記

vol.120

2016-1-14

Cover

今回のカバーも、初詣に行ったときのショットです。

descjop で遊ぼう day 6 : Electronがうまくダウンロードできないとき

descjop で遊ぼう day 7 : Hello Worldを出力してみるには

descjop で遊ぼう day 8 : Om basedテンプレートを使ってみる

descjop で遊ぼう day 9 : Om basedテンプレートにボタンをつける

descjop で遊ぼう day 10 : Om basedテンプレートにボタンをつけるその2

編集後記

vol.119

2016-1-10

Cover

今回のカバーは、初詣に行ったときのショット。

「descjop で遊ぼう」について

「descjop で遊ぼう」というのは年末にやったアドベントカレンダーのシリーズなのですが、前段としてまずはその解説をば。

descjop で遊ぼう day 1 : はじめに

descjop で遊ぼう day 2 : 3つのテンプレート

descjop で遊ぼう day 3 : 環境構築をしよう

descjop で遊ぼう day 4 : Helpを見てみよう

descjop で遊ぼう day 5 : デフォルトアプリケーションのビルドと起動

編集後記

vol.118

2015-10-22

Cover

今回のカバーは、Stack Overflow DevDaysのイベントをお手伝いしたときの窓からのショット。

Vaqum Web Design Review

創刊以来延々と続くWebサイトレビュー

ミカヅキClojure : ゼロからはじめるClojure入門第2回

Clojureっていうじつに面白いプログラミング言語をとりあげていきます

インフォメーション

おすすめのイベント・勉強会情報を紹介

編集後記

vol.117

2015-10-07

Cover

今回は散歩道からのショット

Editor’s Picks

designudgeで扱っている内容に近いジャンルのリソースのうち気になったものなど

U.S. Web Design Standardsを見てみる

今話題となっているU.S. Web Design Standardsの周辺情報など見てみました

Bootstrap 4徹底攻略 (3)

Bootstrap 4のアルファ版がでているので使おう

インフォメーション

おすすめのイベント・勉強会情報を紹介

編集後記

vol.116

2015-9-28

Cover

今回は帰省した際に通った三島からのショットです

Vaqum Web Design Review

創刊以来延々と続くWebサイトレビュー

みそじ過ぎからの英語再学習

40を目前に今までサボっていた英語学習をはじめました

Bootstrap 4徹底攻略 (2)

Bootstrap 4のアルファ版がでているので使おう

ミカヅキClojure

Clojureっていうじつに面白いプログラミング言語をとりあげていきます

インフォメーション

おすすめのイベント・勉強会情報を紹介

編集後記

vol.115

2015-9-13

Cover

前回と同じ開発合宿のショットから一つ

Vaqum Web Design Review

創刊以来延々と続くWebサイトレビュー

開発合宿へ行こう! : Python mini hack-a-thon 夏山合宿 2015

先週末に行ってきた開発合宿について書きました。

ミカヅキClojure

Clojureっていうじつに面白いプログラミング言語をとりあげていきます

インフォメーション

おすすめのイベント・勉強会情報を紹介

編集後記