FLOW ANATOMY #33 — 1サイトを縦に解剖する
環洲メトロは、
なぜ答えをひと筆の線で見せるのか。
技法は『点』、サイトは『線』。架空の市営地下鉄『環洲メトロ／KANSHU METRO』は、迎えの一枚絵も、乗換案内アプリらしいキャッチコピーもありません。細いサインバーの直下に、いきなり乗換案内という道具そのものが立ちます。出発駅と到着駅を選ぶ——あるいは路線図の駅を直接クリックする——と、24駅5路線のネットワークに乗換ペナルティ付きDijkstraがかかり、最短経路が手描きのSVG路線図の上へline-drawでひと筆描かれ、その同じ経路を電車ドットが実際に走り続けます。所要時間・運賃・停車はcount-upで、乗換回数はその場で即座に返り、最後は路線一覧表という実務的な紙で締めくくる。読ませて期待させるLPではなく、使わせて納得させる“駅の券売機の脇にある案内板”を、章ごとに解剖します。解説をスクロールすると、実物のライブプレビューが同じ場所まで自動でついてきます。
BLUEPRINT流れの設計図 — 章の役割と緩急
サインバー→(核)路線図とDijkstra→答え→凡例→表、という一本道。他のFLOWシリーズが起承転結で緩急をつけるのに対し、このサイトは入力から答えまでの距離の短さそのものが緩急になります。動くのは主に路線図の上の一本の線と、そこを走る電車ドットだけ。色は5路線それぞれの固有色に絞り、路線図・凡例・結果ステップ・一覧表の路線コードはすべて同じ色で結ばれた“実物の案内板”らしい実直さを保ちます。
- 00ENTRY起 — ヒーロー無し、いきなりサインバーと乗換案内動
- 01NETWORK核 — Dijkstraが経路を計算し、路線図にline-drawでひと筆描く動
- 02RESULT証 — 所要時間・運賃・乗換・停車が、常に“今の答え”を映す常
- 03LEGEND記 — 路線凡例・記号・使い方を淡々と並べる動
- 04TABLE結 — 路線一覧表で締める動
ヒーロー無し、いきなりサインバーと乗換案内
狙い画面いっぱいの写真も、煽るコピーもありません。高さ58pxの薄いサインバーがposition:sticky＋backdrop-filterで常に上に貼りつき、「全24駅／5路線」という数字と「運行状況：平常運転」の緑ドットだけが並ぶ。このドットは@keyframes pulseで2.4秒ごとに輪が広がって消える——止まっていないことを、文字ではなく脈動で伝える。その直下には見出し画像の代わりに、出発・到着のカスタムセレクトと入れ替えボタンを持つフォームがすぐ立ち上がる。装飾より先に、道具そのものを見せる宣言です。
つなぎここで決まるのは情報の順番ではなく“主導権”。訪問者は説明を読む客ではなく、駅を選んで答えを引き出す操作者として最初の1秒で扱われる。以降のすべての章は、この最初の入力の続きに過ぎません。
Dijkstraが経路を計算し、路線図にひと筆描く
狙いこのサイトの背骨。24駅5路線のネットワークは「駅｜路線」という状態を持つDijkstraで解かれ、乗換には4分のペナルティが加算されます（同じ所要時間なら乗換の少ない方を優先するタイブレークつき）。答えが出ると、経路はstroke-dasharrayとdashoffsetで長さ0から実長まで最大1.5秒かけてひと筆で描かれ、通過駅は70msずつ遅れて順番に点灯する。線が半分ほど描かれたところでgetPointAtLengthで実座標を取り続ける電車ドットが走り出し、続けて始点・終点にピンが立つ——リダイレクトの矢印線ではなく、実際に“通る道”として提示する。駅を素早く選び直しても、世代カウンタが古いタイマーを無効化するため、線が二重に残ることはありません。
つなぎ読ませて説得する前に、経路探索という計算そのものを目で追わせる。次章の数字（所要時間・運賃・乗換）は、この一本の線が確かに存在する裏付けとして受け取られます。
所要時間・運賃・乗換・停車が、常に“今の答え”を映す
狙い4枚の統計タイルのうち、所要時間・運賃・停車駅数の3つはイーズアウトのcount-upで620msかけて積み上がり、乗換回数だけは計算結果をそのまま即時表示する（頻繁に切り替わる整数を毎回アニメーションさせない配慮）。運賃は¥180を基準に、乗車区間数が2区間を超えた分だけ30円ずつ加算し¥380で頭打ちという、停車駅数だけから決まる単純な関数で計算される。下には「乗車→乗換→下車」を路線色のレール線でつないだステップリストが並び、区間ごとに路線名の色チップが添えられる。同一駅を選んだ場合や経路が無いケースには、タイルを空表示にして理由をひとこと返す誠実な失敗表示も用意されている。
つなぎスクリーンリーダーには、カウントアップの途中経過を読み上げさせず、確定した最終値だけを一度aria-liveへ渡す。派手な数字アニメーションの裏に、静かな配慮を敷いているから、道具として長く使い続けられます。
路線凡例・記号・使い方を、淡々と並べる
狙い2カラムで、左に5路線ぶんの色スウォッチ・路線コード・区間・駅数を並べた凡例リストが1件ずつ遅延して現れ、右に「普通の駅／乗換駅／検索で選ばれた経路」という3つの記号の意味と、3ステップの使い方を添える。路線コードの文字と色は、路線図・凡例・結果ステップのすべてで完全に同じ配色を使い回しており、どの画面を見ても「S＝さくら線＝ピンク」という対応がぶれない。派手な演出よりも、色の一貫性そのものが説明を減らす設計です。
つなぎ路線図で覚えた色と記号を、ここで初めて文章として裏付ける章。経路を試す前でも後でも読める位置に置くことで、迷ったときに戻ってこられる“辞書”の役目を果たします。
路線一覧表で、締める
狙い最後はフォームでもCTAでもなく、5路線ぶんの記号・路線名・駅数・区間・全線所要をまとめた1枚の表。全線所要は、各区間を駅間の座標距離から機械的に算出した所要分（下限2分）を単純に積み上げた値で、経路探索が使うのと同じsegMin()という一つの関数を共有しています（乗換のペナルティは経路探索時にしか加算されません）。表の下には「概算です」という一文を添え、運賃も停車駅数だけから決まるデモ計算であることを率直に明記して終わる。触らせて終わりではなく、道具としての限界を最後まで隠さない締めくくりです。
つなぎ路線図というビジュアルで示した情報が、最後は行と列を持つ表という“持ち帰れる形式”に変換される。1画面のインタラクティブな道具が、印刷しても読める案内板として完結します。
TAKEAWAY“答えを線で描く”道具型UIの5原則
環洲メトロから取り出せる、経路探索・診断ツール・シミュレータ系サイト全般に持ち帰れる設計則。#21 はこぶね見積の“form-first”が入力の先に金額という単一の答えを置くのに対し、このサイトは入力の先に経路という“形のある答え”を置きます。同じ道具型でも、答えが数字なのか図なのかで見せ方を作り分ける好例です。
ヒーローの代わりに、道具を最初の1秒で見せる
説得のコピーを書く前に、触れる入力をいきなり置く。第一印象を「読む」ではなく「選ぶ・押す」にすれば、離脱の代わりに“試しに使ってみる”という低いハードルの行動を引き出せる。
共通する計算は、1つの関数に集約する
区間ごとの所要分は、経路探索も路線一覧の表も同じ関数から導く。図をクリックしても、セレクトで選んでも、表を読んでも、同じ区間には同じ数字しか出ない状態を作る——運賃のような独立した値でも、入口が増えるほど計算の出どころは減らしておく。
答えは結果だけでなく、そこに至る過程も見せる
経路をいきなり完成形で置くのではなく、stroke-dashoffsetで一本ずつ引かれる過程と、実際にその上を走る点を見せる。計算が“本当に行われた”という実感が、数字だけの結果より強い納得を生む。
色のコードは全画面で一切ぶらさない
路線図・凡例・結果ステップ・一覧表——どの画面でも同じ路線色と記号を使い回す。装飾ではなく“索引”として色を使うと、説明文を増やさなくても迷わなくなる。
動きの裏に、静かな配慮とやり直しやすさを敷く
reduced-motionでは線もドットも即座に最終状態へ、タッチ端末では電車ドットを省略、途中経過はaria-liveで読み上げない。素早い選び直しでも世代管理で描画が壊れないようにする——派手な演出ほど、壊れない土台が要る。