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

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

そうしたデザインの考え方を学ぶ上で役に立つもののひとつが、「地下鉄の路線図」です。
「何を伝えるのが最も重要なのか」を明確にして、余分な要素をうまく取り除いていくにはどのように気をつければいいのかが理解できます。
今回は、地下鉄の路線図から学ぶ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年から本格導入を開始した東京メトロの案内サインシステムは渋谷区のデザイン会社アール・イー・アイがデザインしたもので、全面的にユニバーサルデザインを取り入れつつも、サインの数を増やさず、かつ大型化もせずに表示の重点整備や簡略化を進め、字体もぼやけた状態でも誤読の少ないボールドな書体を採用しています。

地下鉄の路線図から学ぶUIデザインのポイント

地下鉄の路線図のデザインや、案内サインシステムのデザインは、インフォグラフィックやホームページ・アプリのデザインにも大きな影響を与えています。

それでは、こうした地下鉄の路線図の特徴を画面上でも生かすには、どのような点に気をつければいいのでしょうか。

1. 複雑なものを可能な限りシンプル化してみる

最終的に、地下鉄の路線図では、実際の地図のような曲線はできるだけ排除して、どこで乗ってどこで乗り換え、どこで降りればいいのかだけに注目できるようなデザインになっています。
そのため、曲線がたくさんあったとしても、それをユーザーが使い易いようにあえてシンプルに水平・垂直・斜め45度の直線だけを使ってみるというのは一つの決断です。

また、余計な情報を排除するのも大切なことです。
公園や施設などの情報は実際の「地図」やGoogleマップに任せるとして、路線図では乗降情報だけに絞って表示することです。
UIデザインにおいては、例えば申し込みフォームやサインアップフォームでたくさんのフィールドを設置するのではなく、シンプルに必要な情報だけを置いておくのです。

2. シンボルや色の持つ意味を有効に使う

ベック氏の地図が通常駅と乗り換え駅でシンボルを分けたように、UIデザインにおいてもシンボルを活用できそうであれば、大いに活用しましょう。
案内サインシステムでも、ピクトグラムを取り入れることでユーザビリティが向上しています。

フォームで言えば、住所の欄に「ピン」のマークをつけたり、性別の欄に「男女」のアイコンを置いたりすることで、何の項目を入力するのかが明らかになります。

また、色に意味を持たせて、デザイン上で活用するのも有効な手段です。
路線図を見ると、山手線なら黄緑、中央線快速ならオレンジ、半蔵門線なら紫と、ある程度色によって路線を判別することができます。

SNSソーシャルアイコンは活用事例の一つで、Facebookで言えば紺色、Twitterなら水色、Pocketならディープピンクと、パッとみて分かるようになっています。
もし複数のグルーピングをデザインに採用する場合には、こうした色による識別も活用してみてはいいのではないでしょうか。

3. 大項目と小項目でヒエラルキーの区別をする

もし路線図の通常駅と乗り換え駅の表示が同じであったら、ユーザーは路線がクロスしている場所をわざわざ探さなければなりません。
しかし、乗り換え駅はそうであるとはっきり分かるようにデザインされているので、乗り換え駅を基準に、ユーザーはどのように乗り継ぎをすればいいのかを考えることができます。

大項目と小項目の区別をデザインではっきりと示すことを「ビジュアルヒエラルキー」を作る、と言います。
ビジュアルヒエラルキーがなければ、すべての情報が一律に見えてしまうので、必要最小限の情報を残したとしても、どれが重要かがわからなくなってしまいます。
とりわけ路線図は、駅の数が多いので、大項目と小項目の違いをしっかりとつけてリズムをつけるようになっています。

UIデザインにおいても、ヘッダーの大きさやボタンの大きさなどが一律になっていないか、見直してみるようにしましょう。
同じラベルのボタンであっても、位置によって重要度が違うのであれば、大きさや色を区別してもいいでしょう。

まとめ

現在でこそGoogleマップなどのアプリの性能が向上したおかげで見ることが少なくなった路線図ですが、そこにはUIデザインのヒントもたくさん隠されていました。

シンプルではありますが、同時に機能的でもある路線図のデザイン。
ホームページやアプリのデザインとも見比べて、ぜひ活用してみてください。