東京メトロ路線図風のサイトナビゲーション

路線図は、複雑な都市交通を一枚の紙で「読める」ものに変えた、20世紀屈指の情報デザインです。1933年、ハリー・ベックがロンドン地下鉄図を地理的正確さから解放し、線の角度を45度刻みに単純化したとき、地図は「正確な絵」から「理解のための図」へと進化しました。このナビゲーションは、その発明をサイト構造の可視化に応用します。

大型サイトの「全体が見えない」問題

階層メニューやドロップダウンは、今いる枝しか見せません。ユーザーはサイトの全体像を一度も俯瞰できないまま、手探りで回遊することになる。路線図ナビは逆に、サイトのすべてを一画面に広げます。カテゴリを「路線」、ページを「駅」、複数カテゴリにまたがるページを「乗換駅」として描くと、情報の構造そのものが地理になる。ユーザーは「自分が今どこにいて、目的地までどう行くか」を、路線図を読むのと同じ直感で把握できます。

駅ナンバリングの実利

各駅に「C-12」のようなナンバリングを振るのは、見た目の演出だけが理由ではありません。初見のユーザーや海外からの訪問者にとって、記号は言語に依存しない道標になる。さらにその ID を URL の末尾に対応させれば、ページのブックマークや共有の手がかりにもなります。装飾が実用を兼ねる、good design の好例です。

仕上げの判断軸

視認性の限界は「5路線 × 10〜15駅 = 50〜75ページ」程度。これを超えると路線図は過密になり、メタファの利点である一覧性が崩れます。それ以上の規模では「急行停車駅」のようなフィルタ階層が必要です。路線は SVG path で描き、レスポンシブには viewBox を設定。モバイルでは縦スクロールで読ませる構成に切り替えます。