何でも自作する人

工程を地図で追うUIのズームは、毎回寄っても寄らなくても分かりにくかった

執筆・制作：何でも自作する人（運営者について）

個人開発 / Webアプリ / Leaflet / UI設計

原料から廃棄までを工程ごとに地図でたどる自作アプリ「物の一生ビューア」で、地図のズームを3回作り直しました。

工程を進めるたびにその地点へ寄る方式と、全体表示のままにする方式の、どちらもうまくいきませんでした。最終的には、ピンが重なって見えるときだけ寄り、重なりが解けたら引く方式に落ち着きました。

1回目：工程ごとにその地点へ寄る

最初は、工程カードを切り替えるたびに、その工程の地点へズームしていました。

使ってみると「なんだか分かりにくい」という指摘がありました。寄るたびに地図の縮尺が変わるので、全体のどこにいるのか分からなくなるのが原因でした。

2回目：ズームをやめて全体表示にする

次に、ズームをやめて、全体が見える縮尺に固定しました。文脈は分かりやすくなりましたが、別の問題が出ました。

台湾・韓国・鄭州・東京のように近い地点が、画面上で重なって区別できません。工程が地図上で細かく動いていても、見えなくなります。

3回目：まとまって見えるところだけ寄る

出てきた案が「4–6 のようにまとまっている点では寄って、抜けたら引けばいい」というものでした。これを実装しました。

たとえばスマートフォンは、コンゴ（全体）、東アジア、首都圏の順に寄っていきます。

直したところ

実装では、3か所で詰まりました。

1. 工程を同じ場所にまとめると、寄っても分かれない

最初は工程を「同じ場所」ごとにまとめていましたが、それだと寄ってもピンが分かれません。工程ごとに代表例の地点を持たせ、同じ施設で行う工程だけ同じ地点にしました。

2. ピンをまとめる判定と、寄る判定がずれた

まとまりを「最初の点からの距離」で判定していたため、寄る側の判定と表示側の結果が一致しませんでした。どれか1点に近ければ同じまとまりとみなす単連結に変えて、そろえました。

3. 範囲が収まるズームだけでは、ピンが分かれないことがある

Leaflet の getBoundsZoom で範囲が収まるズームを求めても、ピンがまだ重なる場合がありました。分かれるまで、ズームを1段ずつ上げる処理を足しました。

学んだこと

地図で工程を追うUIでは、ズームを「全体の文脈」と「細部の移動」のどちらかに寄せると、片方が見えなくなります。ピンの重なりを基準に寄る・引くを決めると、両方を保てました。

もう1つは、直し方の順序です。使った人の「分かりにくい」「重なって見えない」「まとまったら寄ればいい」という短い指摘を、1つずつ実装に落とす形で、3段階で形になりました。