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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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