地図とデザイン
全国版鉄道路線図の新たなカタチ、APIの提供で“路線図のGoogle マップ”目指す
ヴァル研究所「駅すぱあと路線図」開発者インタビュー
2016年9月29日 06:00
連載「趣味のインターネット地図ウォッチ」からの派生シリーズとして、地図の図式や表現、地図のグラフィックデザイン／UIデザイン、デジタルによる新たな地図デザインの可能性……等々、“地図とデザイン”をテーマにした記事を不定期掲載でお届けします。
乗換案内サービス「駅すぱあと」を提供する株式会社ヴァル研究所が、全国の鉄道路線図API「駅すぱあと路線図」を8月31日に提供開始した。同APIで使用される鉄道路線図は、日本全国すべての鉄道路線と駅をシームレスな1枚の図で表現したもので、拡大・縮小やスクロールが可能だ。
特定の鉄道会社に限ったものではなく、すべての鉄道会社を網羅したこのような路線図は、鉄道が好きな人にとっては眺めているだけでも面白い。さらに、この路線図をAPIとして提供することで、鉄道路線図とさまざまなデータを組み合わせた新たなコンテンツを開発できる。
駅すぱあと路線図は、一体どのような思いから始まったもので、完成までにはどのような苦労があったのだろうか。プロジェクトリーダー（開発側のリーダー）である島村城治氏（CRM推進部カスタマーデータチーム）、島村氏とともに企画者であり、プロダクトオーナー（コンセプトや予算取り、スタッフの収集などを行う製品の責任者）である篠原徳隆氏（Business Development Dept.部長）、プログラムレベルでのAPIの設計・実装を担当した青山正太郎氏（Business Development Dept.）の3名に話をうかがった。
見て面白い路線図を目指して開発がスタート
ヴァル研究所は、これまでも鉄道路線図をウェブに組み込むためのASPサービスとして「路線図ASP」というサービスを提供してきた。篠原氏によると、この路線図ASPを開発したきっかけは、Google マップの登場だったという。「Google マップが登場したときに、そのAPIがAjaxで動くことが非常に画期的で、鉄道路線図についても同じようなことができないかと思って路線図ASPを開発しました」と語る。しかし、この路線図ASPは、あくまでも乗換案内サービスの入力のためのUIとして提供してきたもので、そこにさまざまな情報やデータを組み合わせてウェブアプリケーションを作ることは難しかった。そんな中、2012年に鉄道路線図をまるごと1枚で提供しようというプロジェクトがスタートする。
「今回のプロジェクトが立ち上がった一番の理由は、時代がスマホデザイン主流になってきた中で、“スマホクオリティ”で路線図を提供したいと考えたことです。スマホの小さい画面で処理できるだけのサイズ感や画質が求められてきたと同時に、路線図ASPのお客さまの中から『このような情報を載せられないか』『路線図のこの部分だけを表示したい』などと、入力のUIとしてではなく、表現手段として使えないかという要望が出てきました。さらに、開発者の観点からしても、ただの画像である路線図ASPに対してプログラムを組むのはどうしても難しく、APIとして提供することでさまざまな表現を簡単に行えるようにしたいと思いました。このような背景から、今までにない新しい路線図を作ろうと考えました。」（篠原氏）
路線図ASPは今でも不動産情報サイトなどで使われているが、東京・大阪・福岡・名古屋の4都市の路線図しか提供していない。1枚の路線図に全国すべての路線を集約したのは、駅すぱあと路線図が初めて。そこには「近郊レベルの路線図で全国をカバーしたい」という篠原氏の強い思いがあった。
「とにかく見ていて面白いもの、そして路線図として今までにないものを作りたいと考えました。私は鉄道についてはあまり詳しくないのですが、そのような人間からすると、路線図を見ていて『この先どうなっているのだろう』と気になったときに、従来の路線図ではなかなか分かりにくい、調べづらいという思いがあります。そういう者にとっては、やはり日本の鉄道がどのようにつながっているのかを1枚で詳しく表示することに、いろいろな意味があるのではないかと思いましたし、そういう鉄道路線図をこの目でぜひ見てみたいと思いました。それで作ったのが駅すぱあと路線図です。」（篠原氏）
日本地図の形に近いが、随所でデフォルメも
全国規模の鉄道路線図というと思い浮かぶのが、「JTB時刻表」や「JR時刻表」の巻頭ページにある広域の路線図だ。これらは南北が左右に伸びるなど、日本地図としてはかなりデフォルメされたものになっているが、駅すぱあと路線図はそれに比べると実際の日本列島の形に近い。また、ヴァル研究所が従来提供していた路線図ASPでも、山手線が円形になっているのに対して、駅すぱあと路線図では実際に近いハート型になっている。
「従来の路線図では、北が右側という寝ている図のため、どうしても違和感があるので、それよりは実際の地図の感覚に近付けようとしています。ただし、地図上の鉄道路線をそのままトレースして全国を同じ縮尺で描いても、地域によって駅の密度が大きく異なるので、駅間隔の狭いエリアを基準に作ると、広いエリアで間延びしてしまうことになります。そのため、やはり随所でデフォルメはしていて、例えば北海道や、房総半島などの半島部は全体的に小さくなっているし、逆に中部地方は太くなっています。」（島村氏）
駅すぱあと路線図のズームレベルは2段階で、全国を網羅する小縮尺の路線図の中に、大縮尺の詳細図があるエリアを赤枠で示している。全国図と詳細図との縮尺差はかなり大きいが、ズームレベルのステップを増やすと、今度はメンテナンスの手間がかかってしまうため、2レベルにとどめたという。技術面を担当した青山氏はこの点について、「詳細図の縮尺はエリアによってかなり変える必要があり、それぞれの縮尺をどれくらいにすればいいのかを決めるのが大変でした」と語る。
もちろん広域図では、駅の密度の高いエリアは表示する駅を間引くことになる。どの駅を残してどの駅を消すかという選択は、ヴァル研究所とそのパートナーである東京地図研究社、そして地図研究家・今尾恵介氏の監修のもとに行われたという。
ちなみにどのエリアが一番苦労したかと質問したところ、駅が密集する「関東」および「近畿」という答えが返ってきた。これらのエリアはとにかく駅の数が多いので、駅名を伏せないように載せていく場合、路線がそのままの位置だと文字が被って掲載できない部分が出てきてしまう。そのため、多少ずらしつつ、できるだけ本来の駅間隔のイメージを変えないようにする作業が大変だったという。どうしても線に被る場合は、字の周りに白く輪郭を取って、被っても字がつぶれないようにするといった工夫も行っている。
地下でつながる駅の形や、“縦バス”などのバス路線も掲載
このほか、今尾氏からは、スイッチバックやトンネルの位置関係、路線が交差している場合の上下の位置関係などについて指摘があった。
「笹子トンネル（中央本線）や水窪駅（飯田線）付近のトンネルなど、さまざまな細かい指摘を受けました。路線のループなどもできるだけきちんと描くようにしていますので、鉄道を知っている人が見ると、スッと入り込める地図に仕上がっていると思います。提供開始後も、利用者の方からいくつか指摘を受けましたが、『ここまでやっているのですね』と感心されることも多いです。」（島村氏）
細かいところでは、駅の形にもこだわっている。新宿など、さまざまな路線の駅が地下街でつながっているような場合は、行き来できる駅同士をピンク色の背景で結んでいる。永田町駅では、有楽町線のホームと丸ノ内線・銀座線のホームを、半蔵門線のホームでつないだ形にするなど、“分かる人には分かる”表現が随所にちりばめられている。また、吉祥寺駅と調布駅など、主要な駅と駅の間がバス路線でつながっている場合、それが点線で表現されている箇所もある。バス路線のほかにも、フェリー航路やケーブルカーなどの情報も掲載されている。
「すべてのバス路線を入れるとなると大変なことになるので、いわゆる“縦バス”と言われる、駅と駅とをつなぐバスの中で主要なものをピックアップして載せています。電車だと遠回りだけど、実は点線上にバス路線があるということを伝えるための点線ですね。あとは、半島の先端付近にある鉄道の駅から、さらにその先まで行くバス路線についても、記載するようにしています。これらのバス路線については、駅すぱあと路線図を公開したときに詳しい説明をしなかったのですが、『これはバスですね』と気付いた方はけっこう多かったです。分かる人には分かるのだな、と思いました。」（島村氏）
ベクトルとラスターのハイブリッドシステムを採用
このようなデザイン上のこだわりに加えて、技術的な面でもさまざまな工夫が施されている。駅すぱあと路線図のシステムについては、パートナー企業である合同会社Georepublic Japanとの共同で開発が行われた。従来の路線図ASPがラスターデータで作られているのに対して、駅すぱあと路線図はベクトルとラスターのハイブリッドで構成されている。巨大な広域路線図をウェブブラウザー上で軽快に動かせるようになるまでには、かなりの開発期間がかかっている。
「最初はベクトルだけで作ろうと思って、まずは元のデータとしてベクトルを用意して、それをSVG（Scalable Vector Graphics）の形で表示したのですが、SVGで表示するとブラウザーのパワーがかなり必要で、PCでも表示が困難で、スマホではもっと辛いという状況でした。そこで、実際に描画している部分はラスター中心で、その上にベクトルデータを載せるというハイブリッドシステムにしました。」（島村氏）
「また、軽快な動作を実現するため、最初はウェブフォントを使おうと思っていたのですが、ブラウザーの中には縦書きに非対応のものがあるなど、ブラウザーによっていろいろな対応が必要となりました。そのため、実際に表示する場合は、元データのほうでパスデータに置き換えて、テキストを絵として出す方式に変えました。Georepublic Japanのエンジニアの方にはかなり知恵を絞っていただいて、おかげさまで十分に納得できるパフォーマンスを実現できました。今回は『Leaflet』という地図を表示するためのオープンソースのJavaScriptライブラリを使っているのですが、Leafletの使用例としてはかなり画期的な試みだと思います。」（島村氏）
なお、使用しているフォントは、駅名についてはユニバーサルデザインのゴシック書体の「UD新ゴNT Pro」、路線名については明朝の「UD黎ミン Pro」を利用している。こちらについても、今尾氏と東京地図研究社、ヴァル研究所の3者で話し合った。
豊富なサンプルコードを用意
ヴァル研究所では、この駅すぱあと路線図を使ってどのようなコンテンツを作れるのか、その可能性をエンジニアに示すため、APIの申し込み者に対してさまざまなサンプルコードを提供している。この事例集の中には、特急や急行などの停車駅を表示させる方法や路線の色を変更する方法、ヒートマップ表示、線路に沿って電車が動くアニメーション、ランキング表示など、多彩なサンプルコードが収録されている。
最後に、駅すぱあと路線図について3人に今後の方針について聞いた。
「路線図ASPのころから終始一貫しているのは、『路線図のGoogle マップになりたい』という思いです。駅すぱあと路線図を使っていただくことによって、みなさんに路線図の新しい使い方を発見していただけるとうれしいですね。そのため、できるだけ多くの方に使っていただけるように、1日100セッションまではAPIを無料で使えるようにしました。これくらいのセッション数なら、ユーザーも自由にいろいろと運用できると思いますので、いいコンテンツを作っていただけるのではないかと思います。」（篠原氏）
「今までは路線図というのはあくまでも補助であり、中心に来るものではありませんでしたが、路線図そのものを前面に出してさまざまな表現ができるということになれば、もっともっと使っていただけるし、利用価値も上がります。そういう点では、駅すぱあと路線図のほうが、ずっとみなさんの要望に応えられるものになったかと思います。今後は、バスについてもぜひ同じような路線図を開発したいですね。バス路線図を全国規模で作ろうと思ったら、かなり大変なことになるとは思いますが、なんとか実現したいですね。」（島村氏）
「駅すぱあと路線図のAPIの利用方法には、いろいろと裏技的なものもあるのですが、便利なものは裏技ではなく表技にして、サンプルコードとしてどんどん出して行きたいと想いますし、機能拡充も行っていきたいと思います。」（青山氏）
なお、コンシューマー向けとしては、auとソフトバンクのアプリサービス向けに駅すぱあと路線図と同様の路線図を提供している。一般向けアプリもいずれリリースする予定で、ヴァル研究所が駅すぱあと路線図を活用したアプリをリリースすることも検討している。
例えば2016年の4月1日に、ヴァル研究所は「駅長の野望～四月馬鹿伝～」というアプリをエイプリルフール企画として発表している。このアプリは、全国路線図を“勢力図”に見立てて駅取り合戦を行い、所属する軍の勝利を目指すという内容となっている。このような路線図を使ったゲームや、鉄道の乗りつぶしマニア用アプリなど、今後どのようなコンテンツが登場するか実に楽しみだ。
片岡 義明
IT・家電・街歩きなどの分野で活動中のライター。特に地図や位置情報に関す ることを中心テーマとして取り組んでおり、インターネットの地図サイトから法 人向け地図ソリューション、紙地図、測位システム、ナビゲーションデバイス、 オープンデータなど幅広い地図関連トピックを追っている。測量士。インプレスR&Dから書籍「位置情報ビッグデータ」（共著）が発売中。