Illustratorを使って、東京圏の交通路線図を作りました。
現在、これを書きだしたSVGファイルを以下に置いて、ウェブ上から見られるようにしています。まだマップとして大した処理はしていないので、PCとかだとスクロールが面倒ですが、スマートフォンなどタッチ端末だとそこそこ見られると思います。
なお、AIファイル・SVGファイルはパブリックドメイン(CC0)としますので、配布・改変・販売含め、煮るなり焼くなり好きに使っていただいてかまいません。
どうして描いたの？
昔からハリーベック氏のロンドン地下鉄路線図がとても好きで、自分もこういうものを書いてみたかったからです。なんというか10年,20年たっても色褪せない美しさを感じるんですよね。これできたの1930年代ですよ？
路線図の特徴や成立うんぬんはだいたいリンクしたWikipediaに書いてますけど、丸投げるのもアレなので少し説明します。
まずベック氏、彼はロンドン地下鉄の人ですが、デザイナーではなく電気回路の技術者でした。彼が同地下鉄の路線図を余暇の時間にリデザインして試しに刷って配ってみたら、とてもウケが良くて広まったということです。
実は当時の路線図は駅の地理的位置を正確に図に落としていたため（当時の路線図）、正直わかりづらいものでした（交通案内図としての機能性が低い）。ベック氏は「地下鉄なんだから正確な場所はそんなに重要じゃないんじゃね」と考え、0度/45度/90度の直線だけでよりシンプルに構成することで（電気回路図のように）、路線図をわかりやすく再構成しました。
以上、説明終わり。
で、まあ当初はJR山手線/中央線とメトロだけ書こうと思ったのですが、「直通している私鉄も・・」とか「都営がないと寂しい」とか考えて描いているうちに横浜、成田、さいたま近辺まで描くことに。さすがに辞めどころを失ってきたので、中途半端なところで止めてますが。
SVG周りのお話
ちなみにこの記事はSVG Advent Celarnder 2014 20日目の記事です。SVGという側面で少しだけ話したいと思います。
なぜSVGで？
目的から考えた際に、図形としてプログラマブルでないといけなかったからです（後から図形を修正できる）。
元は交通路線図だけではなく、これに東京メトロなどの交通情報をマッシュアップして情報表示する予定でした。ちなみに、ロンドン地下鉄の交通路線図でも似たような試みがされています。SVGのパス(線)の一部の色を変える質問をしたのもこの一環でした。
ただ、これを実現するのに結構パワーが必要なのと、他にちょっと力を注ぎたいのもって、一旦素のままで公開してみることにしました・・。将来的には東京メトロのAPI（2015年3月以降も公開されるかわからないけど・・）との連携も考えたいですね。
SVG地図表示のライブラリ
できれば、ロンドン地下鉄の交通路線図のようにスクロール地図として実装したかったのですが、適切なライブラリが見当たらず実装できていません。。（地図系ライブラリの殆どはJPGやPNGのタイル画像で実現している印象）
なければ自分でと試してみましたが、自分のスキルではうまく出来ていません。
苦労したところ
基本的に地理関係を重視せず、わかりやすさを、という方針で作りましたが、地理的位置も理解しやすさの要因でもあるため、極端に位置を無視するのはかえって不自然になってしまいます。したがって、ある程度位置関係を重視しつつ、トポロジーとして割り切る部分はバッサリというスタンス（どっちつかず！）でやるところが辛くもありという感じでした（ちなみに筆者はトポロジーにはまるきり無知です）
位置関係を重視しつつ・・というので、一番重視した要素は河川、具体的には多摩川・隅田川・荒川・江戸川です。河は一つの地図上の目印となるので配置しましたが、実際は河の手前側にあるのに、向こう側に駅が配されていたりすると変なので、「河までのこの距離に5駅も詰め込む？」みたいなことが多発して結構辛い感じでした。
- 隅田川〜荒川の新宿線 西大島〜東大島駅あたり
- 多摩川近辺の東急大井町線あたり
- 多摩川近辺の京急線あたり
その他苦労したところとしては・・
- 四ツ谷〜赤坂見附は実際に丸ノ内線で移動するとすごい近かったりするわけですが、他路線の関係もあり、結構遠くなってしまい、これでいいのかなと悩んだりした・・
- 常磐線 上野〜北千住間を描くのに20,30回くらい描き直した気がする。。
- 常磐線は他にも「常磐線各駅停車」「常磐線」「常磐線快速」の3つがあって、さらに常磐線各停には千代田線も乗り入れるよ！という初めての人には理解が難しい構成になっていて、これ現地まで行って乗って確かめた覚えがありますw 複雑なものはだいたいそうなんですが、歴史の産物なんですよね、コレ。。
- 湘南新宿ラインは路線色として赤色を使っています。これは他の色とのカブリを避けるため、JRが設定した色なんですが、まあこの色って駅で見ないですよね・・。湘南新宿ラインといえば車体色である緑と橙のツートンなんで、今回もそれにしようかと思ったのですが、なぜかこれにするとiOSでうまく描画されないバグが・・。泣く泣く赤色を採用しています。
- 西国分寺以北における西武国分寺線・多摩湖線の交わるようで交わらねえぜ！という感じがなんかイライラした
- 他路線の影響を最も受けたのはJR武蔵野線ですね。首都圏をグルっと囲いつつ、他駅との接続もあるメガループの宿命みたいなものですが。
参考にした文献
『都市のイメージ』では、都市のパブリックイメージに影響する物理形態について、以下の5つの要素があると説明しています。
- パス（道）
- エッジ（境界。鉄道線路や河もこれですかね）
- ディストリクト（地域。内部に同様の特徴が見られる地域）
- ノード（集合点。特徴性があり、観察者が出入りできる点。駅、広場、交差点など）
- ランドマーク（目印。観察者が中に入らず外部から眺めるもの。）
東京は鉄道交通が非常によく発達した都市であり、著名な駅はランドマークとなり、あるいは山手線内という単語もあるほどエッジ・ディストリクトとして認知されていると思います。自分も東京の交通路線図を見ると、なんとなく東京を捉えた感じになっていたりしたので、上記の話には納得するところがあります。
東京の中心は空虚ではない - 「住宅都市整理公団」別棟では、東京の中心となる目印は皇居にあることを指摘していますが、まあ、そういう風に路線図には位置を相対的に把握するための上記の要素が配されているのだと思います。山手線然り、皇居然り。
今後はスカイツリー、東京ツリー、国会議事堂のような著名なランドマークも路線図に加えていこうと思います。
インフォグラフィックス―情報をデザインする視点と表現（木村 博之著）
Tube Graphics社 木村さんが書かれた、複雑な情報をわかり易く伝えるインフォグラフィックスを多数まとめた書籍です。
路線図において、同じ場所を通る別の線をまとめるかまとめないかは一つのデザイン判断が分かれる箇所なのですが、同著内でまとめない案としてナカバヤシ手帳マップを挙げた一方で、まとめる案としてさらっと試案を載せられていてびっくりした覚えがあります（ちなみに今回はまとめない案を選びました）
その他参考にしたサイトなど
- SVG関連
- 路線図周り。基本的にWeb上にある全ての路線図は見た気がします。。
- そのほか
これからやりたいこと
- スクロール地図として一般的な地図と遜色のないものとする
- 駅毎の情報が見られるようにリンクする
- APIとして開放し、テンポが地図上にマッピングできるようにする
- 交通情報をマッシュアップする
- ランドマークをもっと載せる
- 多言語化とUA側の優先言語にあわせた動的言語差し替えの仕組みを作る（オリンピックを意識したもの）
- 他の地域のものも作成する
commentsコメント