Web Fontの新しい使い方！US地図をWeb Font/CSSで表現「Stately」
StatelyはWeb Font/CSSを使ってUS地図を表示するソフトウェアです。
地図（ここではUS）をWeb上に描こうと思った場合、SVGを使ったり画像を使うのが一般的です。しかし今回は一風変わったやり方、Web Fontを使ったStatelyを紹介します。
[](http://images.moongift.jp/2013/02/Screenshot 2013-02-06 19.57.43.1360149048.png)
デモです。このアメリカの地図がフォントで作られています。
[](http://images.moongift.jp/2013/02/Screenshot 2013-02-06 15.41.27.1360149053.png)
一部を見ると、ハイライト設定されているのが分かります。
[](http://images.moongift.jp/2013/02/Screenshot 2013-02-06 19.59.53.1360149058.png)
フォントビューワーで見た所。州の形ごとに作られているのが分かります。
StatelyはWeb Fontとスタイルシートで指定されているので色を変更するのがとても簡単です。それも州の略である二文字で指定できます。マウスオーバーなどのアクションを付けるのも簡単でしょう。デメリットとしては厳密に計算された場所に配置されているので、フォントの大きさを変更したりすると一気に崩れる可能性があることです。
StatelyはWeb Font/スタイルシート製、MIT Licenseのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
Statelyの試みはとてもユニークです。Web Fontの活用法としてこのようなやり方があったのかと気付かされます。日本地図や世界地図などで同様のプロジェクトがあっても面白いかもしれません。ベースになるデータは幸い、SVGで既に公開されているものが数多くあります。
今後、O2Oの発展をベースにWeb上で地図を描画するケースは増えていくと思われます。そんな時にGoogleマップを常に使える訳ではありません。県ごとの統計データを表示したりするのにこういったプロジェクトは相当役立つことでしょう。