ある自治体のテーマを取り上げたいなあと思ったときにアイキャッチなどの画像を考えていて、そういえば簡単に作れたり使い回せたりする、自治体の形の画像の一覧みたいなものがないなあと思いました。幸い、今はAIの地代。なければ作っちゃえ！ということで「自治体シェイプメーカー」を作りました。
「自治体シェイプメーカー」は、市区町村や都道府県の地図上の形（シルエット）を、そのまま画像素材として書き出せるブラウザツールです。自治体名を選ぶか郵便番号を入れるだけで、詳細な地図画像から、ロゴ風のシルエット、ブログのヘッダー、SNSアイコン、ファビコンまで、まとめてZIPでダウンロードできます。インストールは不要で、全部ブラウザの中で完結します。
ツールはこちらです。
このツールでできること
地域メディアのロゴを作りたい、記事のアイキャッチにその街の形を入れたい、資料に自治体の位置を示したい。そんなときに、地図から手作業で切り抜く代わりに、数クリックで素材を用意できます。
書き出せるのは次の5種類です。用途に合わせて、同じ自治体から一気に作れます。
- 詳細画像（境界の凹凸まで残した、そのままの形）
- ロゴ風（角を丸めて単純化した、アイコンっぽいシルエット）
- ヘッダー（1500×500の横長。ブログの見出し画像向け）
- SNSアイコン（800×800の正方形。円形に切り抜くことも可能）
- ファビコン（16・32・48pxほか、サイト用の一式）
色や背景は自由に変えられますし、透過PNGでも書き出せます。
使い方
1. 自治体を選ぶ
選び方は2通りあります。
ひとつは「地域から選ぶ」。都道府県を選ぶと、その中の市区町村がプルダウンに並びます。政令指定都市なら、市全体と各区のどちらも選べますし、都道府県まるごとの形も出せます。
もうひとつは「郵便番号から」。7桁を入れて検索すると、その住所にあたる自治体が候補として出てきます。区・市全体・都道府県全体のどれで書き出すか、その場でボタンを押して切り替えられます。
※都道府県の全体を出すときには、必ず市区町村を選ぶドロップダウンから「全体」を選択してください。
2. 出力の種類を選ぶ
自治体を選ぶとプレビューが表示されます。上のタブで「詳細画像」「ロゴ風」「ヘッダー」「SNSアイコン」「ファビコン」を切り替えると、それぞれの仕上がりがその場で確認できます。
ロゴ風には「ざっくり度」のスライダーがあり、どれくらい単純化するかを調整できます。角を丸めたり、細かい小島を省いたりも切り替え可能です。SNSアイコンは余白の量を変えられて、円形に切り抜くチェックもあります。
3. 色と背景を整える
塗り色・線の色・線の太さを、それぞれ好きに変えられます。背景は透過と色指定のどちらかを選べます。透過を選べば、そのままサイトの好きな場所に重ねられます。
詳細画像とヘッダーには、出典クレジットを画像の隅に入れるオプションもあります。背景の明るさに合わせて文字色が自動で調整されるので、暗い背景でも読めます。
4. ダウンロードする
「素材一式をZIPでダウンロード」を押すと、選んだ自治体の素材がまとめて手に入ります。ZIPの中身はこんな構成です。
- 詳細画像（2000pxのPNGと、拡大しても劣化しないSVG）
- ロゴ風（1200pxのPNGとSVG）
- ヘッダー画像（1500×500）
- SNSアイコン（800×800）
- ファビコン一式（favicon.ico、各サイズのPNG、Appleのタッチアイコン、192・512pxのアイコン）
- 出典と注意事項を書いた README_LICENSE.txt
READMEには出典表記とデータの基準日、注意事項が入っているので、素材を配布・掲載するときの控えとしても使えます。
国交省の公開データから元データを生成
このツールが形を描くもとにしているのは、国土交通省が公開している「国土数値情報（行政区域データ）」です。全国の市区町村の境界が入った公式データで、これを下ごしらえしてから使っています。
ただ、元データはとても細かくて重いんです。全国ぶんをそのままブラウザに読ませたら、開くだけで一苦労してしまいます。そこで、境界を市区町村ごと・都道府県ごとにまとめ直して、形の細かさを表示に必要なぶんだけ残すように間引き、軽いファイルに変換しました。政令指定都市は、区ごとにも市全体でも出せるように整えてあります。この一連の下ごしらえが、いわば「データ作り」です。
ツール本体は、この軽くしたデータを読み込んで、選ばれた自治体の形をその場で描いているだけ。だから、あなたのブラウザの中だけで処理が完結して、サーバーに画像を作りにいく必要がありません。郵便番号の検索のときだけ、zipcloud という外部の検索サービスを利用します。
離島と湖の取り扱いで頭を使う
実はこのツール、この「データ作り」までは順調でした。全国の自治体の形をそろえて、いざ動かしてみようと東京都を表示したら、あれれ、やけに小さい。画面のほとんどが余白で、東京都が米粒みたいにちょこんと乗っているだけでした。
なんでだろうと少し考えて、理由がわかりました。東京都は本州の区部から、はるか南の沖ノ鳥島までを含みます。その全部を1枚に収めようとするから、あいだの広大な海までまるごと画面に入って、肝心の本土が縮んでいたわけです。
また、湖の情報の取り扱いもちょっと悩みました。例えば滋賀県全体を見るときには、びわ湖って中に見えるのが自然じゃないですか。でも、表示する自治体を滋賀県彦根市にしたとき、びわ湖の表記はどう考えたらいいでしょう？びわ湖の中で彦根市の管轄って何だ？
行政の区域はあるのでしょうが、それを県や市の形を表示したい人が「びわ湖のここからここが彦根市の管理」を知りたいかといえば、違うと思いました。ですので、湖や池の場合は描画しないモードも設けました。なお、湖・池は半径500メートル程度の大きさで採用・不採用を分けています。
原因がわかれば、対策も見えてきます。遠くの離島を外すスイッチと、好きなところを拡大して見られるパン・ズームの機能を足しました。次の2つがそれです。
こういう「表示がなんか変だぞ」という気づきと、その理由を掘る部分は、AIに丸投げでは進みません。データは正しいのに小さく見える、という現象を見て、なぜかを考え、どう直すかを決める。ここは人間の仕事だなと、作りながらあらためて感じました。
遠くの離島を省いて、メインを大きく表示する
「遠くの離島を省いてメインを大きく表示」にチェックを入れると、本土から離れた島を外して、主要な部分を大きく描き直します。「残す範囲」のスライダーで、どこまで省くかも調整できます。
なお、この設定を使って書き出したときは、README にも「一部の離島を省略しています」と自動で明記されます。
詳細画像は自由に拡大・移動できる
詳細画像モードでは、プレビューをマウスのドラッグで動かして、ホイールで拡大・縮小できます。「拡大」スライダーと「全体に戻す」ボタンもあります。
これが効くのが、さっきの離島のケースです。たとえば東京都を選んだまま、小笠原村の母島だけをぐっとアップにして書き出す、といったことができます。全体表示だと画面のごくわずかしか占めない小さな島も、拡大すればはっきりした形の素材になります。書き出すZIPの詳細画像も、そのとき表示している範囲で保存されます。
出典とライセンス、使うときの注意
このツールが描いている形は、国土交通省の「国土数値情報（行政区域データ）」をもとに、表示用に加工・簡素化したものです。ライセンスは CC BY 4.0 です。
素材を掲載したり配布したりするときは、「国土数値情報（行政区域データ）（国土交通省）を加工して作成」といった出典表記を添えてください。ダウンロードしたZIPの README にも同じ内容が入っています。
ひとつ大事な注意点として、この形は見た目のために単純化してあります。境界の凹凸は実際より粗くなっているので、正確な行政界の確認や、測量、境界の確定、法的な判断には使えません。あくまで、ロゴやアイコン、記事の飾りといった表示目的の素材とお考えください。
こんなときに使えます
そもそも、自分が「自治体の形の画像を使いたい」と思って作り始めた自治体シェイプメーカー、せっかくなので同じ用途を考えている人とシェアできればと思い公開しました。
地域に根ざしたブログやメディアのロゴ、その街を扱った記事のアイキャッチ、地元のイベント告知の飾り、自治体の位置を示す資料の挿絵、サイトのファビコン。地図の「形」そのものが持つ雰囲気を、手軽に素材にできます。ぜひ使って見てください。
さっそく試す：自治体シェイプメーカー
自治体シェイプメーカーで書き出した形状の、正しい使い方はどれ？