アイコンフォントで日本地図を作ってみた

Posted by NAGAYA on May 9th, 2019

「Webサイト上に日本地図のイラストを載せる」には、通常は画像を貼りつけますよね。
ではコンテンツの内容に応じて都道府県の色分けをしたい場合、さらにそのコンテンツが流動的に変わるものであった場合、どうしましょうか…？？

今回はそんなケースをアイコンフォントを活用することで乗り切った一部始終をお届けします。

経緯と方針決定まで

「日本全国で行われるイベント情報」を紹介するためのページを、次のような仕様で制作することになりました。

ページには日本地図と開催中のイベントリストを掲載
地図上では、イベント開催中の都道府県に色が塗られるようにしたい
イベント情報はWordPressで管理する

これの実現に向けて、Webサイト上に日本地図を表示させる方法を調べていたところ見つけたのが日本地図のシンボルフォント「Prefectly」でした。

参考：GitHub - hrtsgt/prefectly
https://github.com/hrtsgt/prefectly

Prefectly はHTMLとCSSを使って日本地図を簡単に表示できるシンボルフォントで、アメリカの州をシンボルフォントにしたStatelyをベースに作られています。
各都道府県はCSSで個別にスタイルがつけられるのでシンプルなビジュアライゼーションに利用できます。そしてもちろん、フォントなので自由にサイズを変更することができます。

都道府県それぞれが一つのグリフに割り当ててあります。
それぞれの都道府県はほかの都道府県に合うように位置とサイズが調整されていて、それらが重なって表示されることで全体の地図を形作ります。
大文字のAからZと小文字のaからuまでの文字に47都道府県、それらとは別に、yに県境なしの日本地図、zに県境ありの日本地図が割り振ってあります。

これで「日本地図の表示」と「都道府県ごとに任意に色分けする」仕組みは整います。あと考えるのは「イベントリストから都道府県の情報を拾って地図の色塗りをする」こと。結果から言うとここは簡単なjQueryの処理を加えて実装しました（詳細は後述します）。
さほど負荷のかかる処理でもなく、またアイコンフォントを自作する方法もノウハウがあったためWebサイトのテイストに合わせて自由に地図のデザインを変えられるのも嬉しいポイントでした。

これはよさそう！ということで、この「Prefectly」から着想を得て実装を進めていくことになりました。

実績紹介：有限会社チャンネルアッシュ様

今回このアイデアを実装させていただいたのは、有限会社チャンネルアッシュ様の企業サイト内、「期間限定ショップ」ページです。
ユニークなTシャツをはじめ、わくわくするアイテムを多数展開しているアパレルブランドで、全国各地で催事を開かれています。

有限会社チャンネルアッシュ＞期間限定ショップページを見る

アイコンフォントを作る

それでは、ここからは実装までのステップを簡単にご紹介します。
まずはアイコンフォントのデータを自作していきます。

日本地図のベクターデータを作成

今回はIllustratorで日本地図を作りました。
1都道府県ずつフォント化するので個別に取扱いやすいようにしておきましょう。

日本地図のベクターデータ

ベクターデータ制作のポイント

アイコンフォント化する際はパスがアウトライン化されており、塗りが1色である必要があります。例えば県同士の境目を「線」でつけている場合は2色となりそのままではうまくフォントにすることができません。

パスの色数の例

ただし線を取り除くこともできるため、デザインが固まってから対応すれば大丈夫です。

パスの「線の位置」が外側なら、アウトライン化して「線」と「塗り」に分けたあと「線」にあたるパスを削除します。
「線の位置」が中央なら、(1) アウトライン化【Shift+Ctrl+O】→ (2) パスファインダーの「前面オブジェクトで型抜き」。(2) は1度実行したら「パスファインダーの繰り返し【Ctrl+4】」で適用することができます。

SVGで書き出し

1都道府県ずつSVGで書き出します。
最終的には「同じfont-sizeの文字を47個重ねたら日本地図が完成する」ようにしたいので、キャンパス全体がフォント1文字の枠と考えるのがポイントです。

キャンパス全体をフォント1文字の枠とする

上図のNG例のように各都道府県を文字枠いっぱいに配置すると、マークアップのときに、地図になるよう一文字一文字positionやfont-sizeを調整することになってしまい大変なのでご注意ください…！

SVGをフォントデータ化する

IcoMoon Appでフォントファイル（拡張子が .woff, .eot, .ttf, .svgのファイル4つ）とCSSファイルを調達しました。
IcoMoon Appの使い方は過去の記事をご参照ください。
Webサイトに「アイコンフォント」を導入しよう！IcoMoon Appを使ってみた

マークアップする

フォントデータが揃ったのでマークアップに移ります。
日本地図とイベント情報の表示はHTMLとCSSで。肝心の「イベント開催中の都道府県に色を塗る」のはjQueryにて実装しました。デモページと、コードの一部を掲載します。

→ デモページを見る

HTML

※ 地図部分は北海道、東北地方のみ掲載

コードの4行目以降の<li class="p-eveMapPref--{都道府県名}"></li>が各都道府県です。このclassに対し、CSSでアイコンフォントを定義していきます。

一方イベントリスト部分は、data属性を使って<li data-pref="{都道府県名}">のように出力。後々jQueryでの処理に使うため{都道府県名}部分は日本地図のほうと合わせるようにしましょう。
なお今回イベント情報はWordPressで管理されることになっていたので、都道府県をカテゴリとして登録 → そのスラッグを{都道府県名}部分に出力させるようにプログラマーさんにお願いしました！

CSS

※ 地図部分は北海道、東北地方のみ掲載
※ イベントリスト部分は割愛

position プロパティで全ての<li class="p-eveMapPref--{都道府県名}"></li>を重ねることで1つの日本地図に見せます。
font-sizeの単位にvwを使えばレスポンシブ対応もバッチリです。

このあとjQueryではイベント開催中の都道府県にはis-activeクラスをつけるという処理をします。.is-activeのときとそうでないときの文字色を各都道府県に設定しました。

jQuery

イベントリストの<li>すべてのdata-pref属性の値をチェック。
日本地図の<li class="p-eveMapPref--{都道府県名}"></li>の{都道府県名}部分と一致したらis-activeのクラスを付与します。

これで完成です！