これは MIERUNE AdventCalendar 2022 12日目の記事です。
昨日は @Takayuki_Kawajiri さんによる LocationBaseARを16行で動かしてみる でした。
株式会社MIERUNEでグラフィックデザイナーをやっております加藤（@chizutodesign）です。Twitterでたまに変な地図を投稿したりもしています。
今回は2021年に制作したMapTilerの地図アイコンについてお話しします。
MapTilerとは何か
MapTilerはスイス発のウェブ地図サービスで、MIERUNEが提携して日本向けの地図配信サービスの提供を行なっています。Google Mapsのように、MapTilerにはウェブ上に地図を表示できるMapTiler Cloudをはじめとしたいくつかの地図配信サービスを提供しています。
詳細についてはこちらをご覧ください。
従来のデザイン
従来のMapTilerの地図はオープンソースであるOpenStreetMapのアイコンを使用していました。モノトーンのシンボルを地図上に載せたデザインとなっています。
他社サービスのアイコンの事例
地図アイコンを制作するにあたり、まず他社の先行事例を調査しました。
以下は当時作成した他社サービスの比較資料（一部抜粋）です。
配色の検討
大手地図サービスのAppleマップとGoogle Mapsの配色を調査したところ、
- 健康・生命に関わるもの（赤色）
- 飲食・商業（オレンジ色）
- 自然・レジャー（緑色）
- 交通（青色）
と、どちらも大筋では一致していることがわかりました。
（下記は当時作成した配色のサークル図）
自然、健康はそれぞれ森林、血液の色がモチーフとなっていると考えられ、いずれも直感的に見てもわかりやすく無理のない配色です。
不必要に変更することで逆に混乱を招いてしまう可能性もあるため、この配色は踏襲することとしました。
また、Appleマップの配色は
- 美容系（ピンク色）
- 楽しみ（赤紫色）
- レスト（紫色）
- 水域（水色）
- 学校（茶色）
- 史跡（黄土色）
など色のバリエーションが多く、全部で15種類ほどありました（当時）。
アイコンが表示される面積は地図全体から見ても極めて小さく、微妙な色の違いは一見した際に識別が難しいと考えられます。
また人間が一度に認識できる情報の数は諸説ありますが4〜7程度と言われているため、できるだけ色を絞り、6色とすることにしました。
さらに色覚多様性にも配慮し、誰もが識別しやすい配色を目指しています。
サンプル作成
アイコンによっては、細かい箇所まで描写されているものがあります。
拡大して見る分には楽しいものですが、地図上で実際に表示されるのは30px前後の極めて小さいサイズです。
Retinaディスプレイでは2倍もしくは3倍精細に描写されるものの、パソコンでは非Retinaの端末もまだまだ多く存在します。
そのため、非Retinaの端末でも綺麗に描写できるようグリッドを設定し、2px単位のピクセルで構成することで、ドット絵のように小さいサイズでもはっきり識別できるように制作しました。
下の図は非Retinaディスプレイでの表示シミュレートです。上が1px単位のピクセルで構成したもので、線がぼやけてしまっている一方、下の2px単位のピクセルで構成したアイコンはくっきりと表示されていることがわかります。
最後に
このように制作していき、最終的に全128個のアイコンが完成しました。
その後、MIERUNEの社外取締役でありカートグラファーでもある森により、アイコンの表示の制御や地図デザインについて新規で制作が行われ、日本向けの独自のスタイルである「MIERUNE Street」、「MIERUNE Dark」、「MIERUNE Gray」の3種類の地図が誕生しました。
このようにして制作されたMaptilerの地図を、ぜひお使いください。
詳細やお申し込みはこちらからどうぞ！
https://www.mierune.co.jp/maptiler
参考文献
地図の出典表記
© MIERUNE © MapTiler © OpenStreetMap contributors
明日の MIERUNE AdventCalendar 2022 は @Guarneri001 さんです。お楽しみに！