インフォグラフィックやホームページ・アプリ上の画面でデザインを行う際、余分な要素を入れないように気をつける必要があります。
余計な情報が多くなると重要な情報が埋もれてしまい、ユーザーが欲しい情報にすぐにアクセスできなかったり、情報が多いことで全体的に使い勝手が悪くなったりしてしまうからです。

したがって、特に使うターゲットが広くなればなるほど、シンプルで誰が見ても重要な情報だけを残してデザインするのは極めて重要です。
一番伝えたいことだけを残し、関係が薄い情報を見極めて取り除いていきます。
例えれば、遺跡を発掘する際に、刷毛はけとトンカチを使って、塵ちりを慎重に取り除いていく作業に近いです。

そうしたデザインの考え方を学ぶ上で役に立つもののひとつが、「地下鉄の路線図」です。
「何を伝えるのが最も重要なのか」を明確にして、余分な要素をうまく取り除いていくにはどのように気をつければいいのかが理解できます。
今回は、地下鉄の路線図から学ぶUIデザインのポイントをご紹介します。

地下鉄の路線図の歴史

20世紀初頭の路線図

世界最古の地下鉄は、イギリスの大ロンドン市域を走るロンドン地下鉄(London Underground)です。
1863年にメトロポリタン鉄道により開業した地下鉄は、アメリカやフランス、日本の地下鉄のようにサブウェイ(Subway)やメトロ(Metro)とは呼ばれず、ロンドンの住民には「the Underground」やトンネルの形状から「the Tube」というように呼ばれています。

20世紀に入ると、6つの異なった鉄道会社が別の地下鉄を運営するようになり、利用者を不便にさせたことから、1908年には4つの地下鉄会社の合弁会社として誕生したロンドン地下電気鉄道(UERL)によって統合路線図「アンダーグラウンド」(Underground)が発行されました。

uf.png
Source: Wikimedia: JP

これは、通常の地図をベースに、路線ごとに色を分け、描き入れたデザインでした。

当時としては画期的でしたが、これにはいくつかの問題点がありました。

第一に、路線図中央部の込み入った部分を詳細に描くために、区間線と路面線の末端路線は省略されたために、完全なネットワーク図とならなかったことです。

undergroundzoom.png

また、拡大してみるとわかるのですが、道や公園、建物も書き込まれていて、情報が混雑している点も挙げられます。
目的地までの経路や乗り継ぎ情報が簡単に参照できず、ロンドンの住民ならまだしも、旅行者には使いづらいものになってしまいました。

改定されたロンドン地下鉄地図

この問題を解決したのが、1931年にハリー・ベック(Harry Beck)氏がデザインした非公式の路線図です。

1931map.jpg
Source: Wikimedia: EN

地下鉄の従業員であったベック氏は、地下鉄はほとんど地下を走るので、ある駅から別の駅への行き方だけを知りたいと思っている利用者にとって、駅の物理的な位置は意味がない、ということに着目しました。
電気回路図のアプローチとも似ているように、駅とそれらを結ぶ直線、そしてテムズ川から構成される路線図を考案しました。
この路線図は、すべての路線が水平・垂直または傾き45度の直線で描かれており、通常駅(正方形)と乗り換え駅(ひし形)は区別して描かれました。

1933年、ベック氏の路線図が試験的に小冊子で紹介されると、瞬く間に人気になり、それ以来ロンドン地下鉄は、このデザインを継承した路線図を採用しています。

東京の地下鉄の路線図

map.png
参考：東京メトロ

日本では営団地下鉄(現在の東京メトロ)が、日本で初めてダイアグラム型の路線図を取り入れています。
この路線図を1972年に採用した際のデザイナーは、「いいちこ」などでのアートディレクションとしても知られている河北秀也氏です。

2.0m×1.5mのボードを作って「新宿のあたりを1ミリ動かすと、北千住付近まで影響が出て、また最初からやりなおし」というレベルの作業を繰り返し、半年がかりで最初のデザインが完成したといいます。

また、2005年から本格導入を開始した東京メトロの案内サインシステムは渋谷区のデザイン会社アール・イー・アイがデザインしたもので、全面的にユニバーサルデザインを取り入れつつも、サインの数を増やさず、かつ大型化もせずに表示の重点整備や簡略化を進め、字体もぼやけた状態でも誤読の少ないボールドな書体を採用しています。