地図とデザイン
現代のデジタル地図、デザインの源流は「ぴあMAP」!? そして、すべてはCUDへ？
「MapFan」に見る地図デザインのバリエーションと変遷
2016年4月28日 06:00
連載「趣味のインターネット地図ウォッチ」からの派生シリーズとして、地図の図式や表現、地図のグラフィックデザイン／UIデザイン、デジタルによる新たな地図デザインの可能性……等々、“地図とデザイン”をテーマにした記事を不定期掲載でお届けします。
4月1日に地図サイト「MapFan Web」をリニューアルし、新たに「MapFan」としてスタートしたインクリメントP株式会社。今回のリニューアルでは、標準地図のデザインを一新したほか、英語・中国語・韓国語・タイ語・インドネシア語など多言語表記にも対応。さらに「RPG風」「古地図風」など、さまざまなデザインの地図に切り替えられるようになった。
RPG風・古地図風の地図は、地図の内容そのものは現実の街並と同じにもかかわらず、見た目はゲームや古地図に見えるという不思議な感覚が味わえる地図だ。これらの地図デザインはもともと、同社が法人向け地図API「MapFan API」で提供していたもので、今回、それをウェブの地図サービスでも広く公開したかたちとなる。
これらのユニークな地図のデザインは、通常の地図とは何が違うのか？ そして、リニューアルした同社の標準地図のデザインはどのように変わったのか？ インクリメントPで地図制作に携わる3人に話を聞いた。
点・線・面で構成されるデジタル地図のデザイン
RPG風・古地図風デザインの地図について考える前に、まずはデジタル地図の構成要素、そしてMapFanの標準地図のデザインについて整理してみよう。
インクリメントPによると、「地図」とは「地球などの地表、あるいは架空の世界の全部または特定の一部分を縮小表現したもので、現実世界を2次元で模式化し、そこにある情報を記号と文字を重ねて表現しているもの」。表示構成要素としては、地面や水域、山、川などの自然地物、建物や道路などの構造物、そしてそれらの地名や住所、表示対象の名称などで構成される。
こうした表示構成要素を最終的に「地図」として目に見える形にするため、デジタル地図で用いられている表現方式の1つが“ベクター表現”だ[*1]。ベクター表現では実世界を個別に図形で表現しており、データ構成要素としては、ベクターデータの3要素でもある“点（ノード）”、ノード間を結ぶ“線（アーク）”、アークとアークで囲まれる“面（ポリゴン）”と、それら3要素に付属する“属性情報”ということになる。例えば道路であれば、ノードが交差点で、アークが交差点間を結ぶ道、ポリゴンが道で囲まれた敷地の部分といった具合だ。
- 点：長さや幅のない対象物や、ある施設・対象物の真位置や表示位置を表す。
地図表示の例としては、
- 山頂、標高点
- 信号
- 注記（施設名、交差点名、地名など）
- 企業ロゴアイコン（ガソリンスタンドやコンビニなどのブランドアイコン）
など - 線：長さと方向を備え、複数の点を接続するものを指す。
地図表示の例としては、
- 道路
- 鉄道路線
- 河川
- 行政界（国境や都道府県、市区町村の堺）
など - 面：地図上で1つの地域を表す多辺図形を一般的にポリゴンと呼ぶ。
地図表示の例としては、
- 建物の形状（外形枠）
- 施設の敷地の範囲
- 陸地、山岳
- 水域
など - 属性情報：これらのベクターデータの中にある「この点は信号である」「この線は道路である」「何車線である」「この建物は駅である」などといった情報のこと。
地図表示の例としては
- 対象物の名称
- 建物や道路の種別
- 施設の詳細情報（開閉時間など）
など
※上記は一般的な例。道路をポリゴン、建物をラインで表現することも可能。各社の地図仕様による
3要素のうち、点については、ただポイントだけを置いたのでは分からないため、それが何なのかを判別できるような記号を種別に応じて割り当てられている。さらに、名称を具体的に示すためのテキスト（注記）も添えられる。日本全体を表示するような広域図では大都市や地方の名称などを注記として表示し、もう少し縮尺が大きくなると都道府県名や県庁所在地、湖沼や河川名、道路名など、詳細図では地名や施設名、交差点名、駅名、バス停などに注記が付けられる。
線については、行政界や道路、線路などがこれに当たる。行政界は地域や住所を区別しやすいように入れられるが、その境界は現実の世界では目に見えないものなので、実線ではなく破線で表現されることが多い。一方、道路は高速道路と一般道の国道／県道、鉄道では私鉄とJRの在来線／新幹線などにそれぞれ異なった色や形を割り当てることにより、どのような施設なのかがひと目で分かるようにデザインされている。
面については、どのような色や柄を割り当てていくかがポイントとなる。MapFanの標準地図の広域図では、河川や湖沼は水色に、公園は緑に、平野部はアイボリーといった風に色が割り当てられている。
ベクターデータをもとにしたデジタル地図のグラフィックデザインとは、このような点・線・面の3要素および属性情報を、縮尺などに応じてどのような視覚的表現で描画するのか――という法則・アルゴリズムの話となる。
ただし、そうしたアルゴリズムは、描画エンジンの描画仕様・設定条件にも依存するほか、そもそも元となる各地図会社のデータ仕様の違いなどにも左右される。各社のデザインポリシーあるいは見やすい地図を表示するための工夫なども含め、まさに各地図会社がそれぞれ蓄積してきたノウハウと言える。残念ながらその辺りのお話は伺えなかったので、以下、MapFanのさまざまな縮尺の地図を見ながら、どの要素をどのような視覚表現で描画しているのか、読者の皆さんも考えてみてはいかがだろうか。
[*1]……デジタル地図の方式としてはもう1つ、地図データを画像データにして扱う“ラスター表現”がある。紙の地図と同じように、地図のグラフィックが1枚のスタティックな画像として固定されるため、注記の位置など細かい部分まで指定・再現できる一方で、回転や縮小・拡大などのダイナミックな操作は行えない。同一エリアの地図であっても、縮尺の異なる地図は別々の画像データとして地図タイル画像を用意し、表示の際に切り替える仕組みとなる。実はMapFanでは、スマートフォンアプリではベクター方式、今回リニューアルされた地図サイトではラスター方式となっている。地図サイトはウェブブラウザーで表示するため、レンダリングの負荷がベクター方式よりも小さいラスター方式を採用した。地図デザインの見た目はMapFan共通のあのデザインだが、地図サイトではデザインバリエーションも含めてラスター画像の地図タイルをサーバー側で用意し、それを配信・表示する仕組みとなっている。
テクスチャーを変えることで印象が大きく変化
それでは、MapFanのRPG風・古地図風デザインでは、地図のどの要素をどのように表現するよう変更することで“それっぽく”しているのか。
まず、RPG風だが、これはMapFanにおけるデザインカスタマイズの最初の試みとなった。1980年代のファミコン／スーパーファミコン世代だという企画担当者が、ドラクエの世界観を地図でまじめに再現したものだという。具体的には、色味（テクスチャーを含む）と表示対象の選定で工夫した。
「RPG風地図において、見た目の雰囲気に最も大きく影響しているのは、テクスチャーを使っている点。公園の緑や一般の背景は、通常の地図ではRGBで色の指定をしているだけだが、RPG風地図では森のようなテクスチャーを使用している。これらは模様の画像をテクスチャーとして別途用意した上で、どれを割り当てるかを考えている。昔のデジタルのゲームというのは“ドット絵”の世界だったので、その雰囲気を出すために、ドット調のテクスチャーを全面的に使用している。建物にはレンガのテクスチャーを採用し、通常の一般家形についても、色ではなく、全体をドット絵で描いているように見せている。」（インクリメントP株式会社コンテンツ本部企画制作部制作グループ・マネージャーの玉置希氏）
「地図記号も通常のものは用いず、専用アイコンにしている。鉄道の線路をトロッコ風に、交差点・信号は方面看板にした一方で、チェーン店のロゴマークは省いた。注記の書体も、あえてジャギーのあるものを選んで昔風にしている。」（玉置氏）
テクスチャーやフォントによって印象を変えるという考え方は、古地図風のデザインについても同じだ。
「実際の古地図で見られるような、和紙に描いた水彩画風のテクスチャーを建物や道路に使用。RPG風地図ではジャギーのあるフォントを使っているのに対して、古地図風では毛筆手書き調のフォントにしている。色は全体的にセピア調にした。」（玉置氏）
なお、これら2つの地図デザインにおいては、架空世界観の表現を優先しており、実利用での表示対象選別や見やすさという側面は、標準地図のデザインのようにはあえて重視しないスタンスだという。
このほか、グレー系の色だけで構成される「グレーマップ」、自動車用に道路を見やすい色で仕上げた「道路強調マップ」、インバウンド向けの「おもてなしマップ」などもデザインのバリエーションとして用意している。
「おもてなしマップは、インバウンド旅行者向けに飲食店を案内するマップを作るなど、何かテーマを決めて情報を載せて使う際のベースとなる地図で、そのために注記の量も抑え目にしている。外国の人が来てどこかに行きたいと思った際に、細かい店があると逆に邪魔に感じると思うので、よりシンプルに、余計なものを排除し、行きたいところへたどり着くため地図という位置付け。」
「観光客は民家に訪れる可能性は少ないので、一般家屋の家形も描画せず、観光施設や商業施設に絞っている。配色についても、地図上で隣り合っていたり、重なり合っていたりするものが“違うもの”として判別されるような配色とし、家形の枠線についても色がはっきりしているので不要だと判断した。」（玉置氏）
リニューアルした標準地図のデザインが目指すもの
このように点・線・面について色を変えたり、テクスチャーを変えたりすることで、地図のデザインは大きく印象を変えることが分かる。インクリメントPが創業したのは1994年で、以降、カーナビ向け、地図サイト、スマホ向けアプリなど、さまざまな地図を提供してきたが、同社の標準地図のデザインはこれまで大きく4回変わったという。今回、MapFan WebからMapFanへとリニューアルした地図サイトでも、大きく変わっている。
「現行（リニューアル後）のMapFanのデザインは、2013年の『MapFan for Android』の初回リリース時にリニューアルを行った際のものがベース。先行して2013年秋から、法人向けのMapFan APIでも使い始めているものだ。デザイン変更の理由としては、2013年以前は、道路の色を強調したカーナビ風デザインというイメージが強く、もう少しこれを見やすくしようという意図があった。」（インクリメントP株式会社第二事業本部先行企画部・部長の米澤秀登氏）
以前の地図は“カーナビ風デザイン”だったが、今回のリニューアルでは、カーナビに限定したものではなく、歩行者や自転車など、より幅広い意味での“ナビゲーション”を意識したという。
「MapFanのデザインの特徴は、ナビゲーション用途で動く地図上での地図視認性を重視していること。リニューアル以前のMapFanもナビゲーション用地図を意識したものだったが、それまでMapFanを利用していただいている方にとって定着しているMapFan地図のデザインイメージを残しつつ、ナビゲーション用途時の見やすさを改善した。標準デザインはカーナビに特化せず、“自動車・徒歩を問わず、広く日常利用できる地図”“年代層を限定せず、さまざまな方により広く利用してもらえる地図”を基本概念としてデザインし、利用シーンに合わせて縮尺ごとに必要な対象物を設定している。」
「例えば広域範囲を表示する時は自動車や鉄道による中・遠距離移動での利用を想定し、それに必要な交通施設関連の情報や目印とする情報を優先的に表示する。一方、大縮尺の都市詳細を表示する時は徒歩で利用するのに困らないよう、目的地となり得る施設や、そこにたどり着く上で目印になり得る情報をより多く表示している。」（米澤氏）
このようなデザインを実現するために、具体的にはどのような点を変えたのだろうか。
「配色については、鉄道や道路を認識しやすく、目印になるような施設に関しては色で分類し、それらがより認識しやすくなるように調整している。また、ランドマーク施設が目立つように配色する一方で、一般の家屋やマンションの家形は背景色に近付け、鉄道や道路が引き立つよう調整。高速道路は、直感的に高速道路と認識できるように、高速道路で使われている実際の道路案内標識の看板色に合わせて、それまでの青から緑系に変更した。これに伴い国道や主要道も変更しているが、色覚異常者にとって区別しにくい配色を避けるなどの配慮を行い、現状色に決めた。」
「注記については、従来は地図を見て得られる文字情報が多いことをメリットとして捉えていたが、その反面、多過ぎて逆に情報過多となり、欲しい情報が一見して得られにくいというデメリットもあった。この点を配色の設計と同様に、優先度の高いものをより認識しやすくなるようにプライオリティの見直しを行い、縮尺ごとに表示量の調整を行った。」（米澤氏）
現行のMapFanでは、このような標準デザインを用意しつつ、法人向けサービスとしては、多種多様なユーザーのニーズに合わせた主題図デザインを提供している。
「MapFan」の地図デザインは「ぴあマップ」がルーツ!?
今回、MapFanの地図デザインのルーツについても話を聞くことができた。話してくれたのは、同社コンテンツ本部・副本部長の樋川祐一氏。樋川氏は、インクリメントPに入社する前は北海道地図株式会社に在籍し、そこで初期のMapFanの開発に携わった。
「Map Fanの都市地図のデザインはもともとは、ぴあ株式会社が提供していた『ぴあMAP』のデザインを参考にしている。ぴあMAPは日本の出版地図の“金字塔”とも言える地図で、それ以降の地図デザインに大きな影響を及ぼした。ぴあMAPより前は、日本国内の書店で販売されている地図は、多色の線画（ポリライン）によって作られた平面に、基本的には国土地理院の地形図図式に則った注記文字列が配置されるデザインだった。」
「国土地理院の図式規定では、注記は基本的に黒色で、水系の注記は浅黄色、書体は明朝体で水系は右斜体、山岳などの名称は聳肩体（しょうけんたい）を用いて、強調する施設注記や地名注記だけゴシック体を用いている。それに対してぴあMAPでは、多色並びに地紋表現された面画（ポリゴン）により作られた平面に多色の説明注記文字列がゴシック体で置かれるというもの。そこには今の地図デザインの源流がある。」（樋川氏）
多色の面の上に多色の注記が置かれたそのデザインは、より親しみやすく、分かりやすい今の地図デザインの基本となった[*2]。そのようなぴあMAPのデザインを参考にしたという初期のMapFanは、今よりも色のコントラストが強く、一見してカラフルな印象を与える。それが代を重ねるうちに、次第に色使いが淡いものへと変化していった。
「現在、MapFanに限らず地図サイト各社のデザインが全体的に薄く淡い色になっているのは、カラーユニバーサルデザイン（CUD）を意識した配色をしていることが大きい。色弱の方でも違和感なく使える色を目指した場合、今のような配色を選ばざるをえず、必然的に各社のデザインは似たようなものになってきていると言える。」（樋川氏）
地図サイトごとのデザインの違いが少なくなりつつある一方で、そのような流れに必ずしも当てはまらないのが、日本とは異なる文化を持つ海外の地図だ。インクリメントPでは近年、アジアを中心に海外の地図作りに取り組んでおり、その一歩としてタイに拠点を構えてタイ全域の地図を試作している。
「タイは河川が輸送の要となっていて、交通量がとても多く、川にバス停のようなものまである。だから、桟橋の情報がとても重要で、デザイン的にも川を強調したものにしている。外国では、表示するデータの種類に、日本にはないものが含まれている。例えば寺院についても仏教系とヒンズー系で記号を分ける必要があるかもしれないとか、いろいろと考えなければならない要素がある。」
「現在、日本の地図というのはどこの会社でも色合いが似てきているが、外国人にもその色を受け入れやすいかというとそうではなくて、そこは現地の文化をよく調べて地図を作成する必要がある。また、記号のデザインについても、著作権などを注意しなければならない。ただ、地図を作る技術そのものは欧米に対して劣っているとは思わないので、今後はこの分野でも頑張っていきたい。」（樋川氏）
[*2]……「ぴあMAP」の地図表現については、「J-CAST SATELLITES」に掲載されているシリーズ記事「森下暢雄の地図」でビジュアル的に解説している。同シリーズの第3回「ぴあMAPをむいてみる」、第4回「ぴあMAPをむいてみる・京都編」を参照。
森下暢雄の地図（J-CAST SATELLITES）
http://www.j-cast.co.jp/morishita/
片岡 義明
IT・家電・街歩きなどの分野で活動中のライター。特に地図や位置情報に関す ることを中心テーマとして取り組んでおり、インターネットの地図サイトから法 人向け地図ソリューション、紙地図、測位システム、ナビゲーションデバイス、 オープンデータなど幅広い地図関連トピックを追っている。測量士。インプレスR&Dから書籍「位置情報ビッグデータ」（共著）が発売中。