このセッションでやったこと

家族旅行アーカイブの大分エリアに、これまで散らばっていた「行きたい場所」リスト60件超を座標付きで地図にプロットした。最初はターミナルにタグ付きテーブルを出力するだけだったが、画面で距離感を掴みたくなり、左サイドにスクロール可能なカードリスト、右側にLeafletマップを置いたGoogleマップ風の分割レイアウトに作り変えた。

ついでに福岡2泊3日の家族向けガイドページ /guides/fukuoka-2days と、1名で行く1泊2日の下見ガイドも同じ構造で立てた。3本のページがほぼ同じ部品で動くので、後から沖縄や台北を増やすときも同じ型に流し込むだけで済む。

手を動かしたのはほぼClaude Code側で、自分は「これ離れすぎて見づらい」「右上にトグル置いて」「座標違う」と画面を見ながら指示を入れていた係。Claude Codeに地図UIを組ませて、自分は実機で違和感を拾う係に徹した、というのが今日の構図に近い。

出発点：ターミナルのテーブル出力では距離感が分からなかった

最初は「行きたい場所リストをタグでフィルタできるテーブルにして」とだけ頼んでいて、Claude Codeはターミナルに68件のマスターテーブルを出してきた。タグでの絞り込みもできるしデータとしては十分なのだが、別府と国東半島と九重がどのくらい離れているのか、テーブルだと全くピンと来なかった。文字列を上から下に読んでも、地理的な距離感は脳内で再構成できなかった。

「リーフレットで地図化しといて」と追加で頼んで、エリア単位（大分など）で行きたい場所を管理できるページを /areas/oita として新設してもらった。座標が取れるものはWeb検索で拾い、不明なものは null で後追加できるようにJSONを構成。エリア一覧ページ /areas も併設して、ヘッダーに「エリアガイド」リンクを刺してもらった。

最初は地図がカード一覧の下にぶら下がる縦長レイアウトだったが、Googleマップを参考にしたスクリーンショットを渡して、左サイドにスクロール可能なカードリスト、右側にLeafletマップの左右分割に作り変えてもらった。カードをクリックすると地図がそのピンまで寄って、ピンが色を変える双方向の連動も入れた。これで「別府温泉の集中エリア」と「国東半島の点在エリア」が一目で分かるようになって、回り方の見当がついた。

ガントバーをクリックで地図と連動した瞬間

福岡2泊3日ガイドを並行で組んでもらっていて、こちらは旅程ガントチャートと地図を連動させる構造にした。ガントバーをクリックすると、地図が該当地点までズームし、ピンがハイライトされ、右パネルに詳細カードが出る。1日目の昼に博多、夜に中洲、2日目の午前にマリンワールド、午後に天神、という流れがガント上で時系列で並んでいて、各バーが地図上のピンと紐づく。

最初に太宰府のバーをクリックしたとき（このときはまだ太宰府を残していた）、地図がぐぐっと太宰府まで寄って、ピンが色を変え、右側に詳細カードが滑り込んできた。3つの連動が一回で全部動いたので、画面の前で軽くガッツポーズした。Claude Codeに「ガント→地図のクリック連動」と一言入れただけで、selectedPin の双方向バインドからピンのアイコン差し替え、右パネルのスライドインまで一気に通したのは正直驚いた。

連動が動くと、旅程の検討の解像度が上がる。「2日目の午前にマリンワールド入れたけど、博多駅からの移動時間どれくらいだろう」と思ったら、ガントバーをクリックして地図で位置を確認、戻ってガントの時刻を調整、という往復が画面上で完結する。テキストで「博多→マリンワールドは電車で40分」と書いてあるのを読むより、地図上で距離を見た方が「これは午前1本で帰ってこられるな」が早い。

試行錯誤のテーブル

実機で触りながら違和感を拾って指示を出す、を6〜7往復した。

最後の座標ミスは恥ずかしいやつで、Claude Codeが当初入れていた 33.3783, 131.5414 は別府市街地の方を指していて、実際のハーモニーランドの位置（日出町）とは数キロずれていた。地図上でピンの位置を眺めていたら、「ハーモニーランドって別府の市街地にあったっけ？日出町じゃなかったっけ？」と引っかかった。Web検索したら 33.400804, 131.546473 が正しい座標だと判明、修正したらピンが日出町のテーマパーク敷地に綺麗に乗った。

ピンの位置はAIに任せきりにせず、知っている場所で答え合わせする工程は必要、という地味な学びを残した。Claude Codeが座標を生成するときは、訓練データに含まれる古い情報や、似た名前の別施設の座標を引いてくる事故が起きる。60件のピンを目視で全部チェックするのは現実的でないが、自分が訪れたことのある数件をスポットチェックするだけで明らかなズレは検知できる。

福岡下見ガイドへの応用

家族ガイドが落ち着いた後、1名で1泊2日の下見ガイドを別途立てた。中洲か博多のビジネスホテルに泊まる前提で、最初Claude Codeが太宰府を入れてきたので「遠いし、行ったことあって普通の寺だったので外して」と返した。代わりに船で行ける施設（マリンワールドは半島の先端で、博多湾を船で渡るルートもある）や、住宅地下見の候補（百道浜・西新・アイランドシティ・能古島）をピンに追加してもらった。

住宅地は地図上に並べると、博多駅からの距離感が体感で分かる。電車で何分、というテキスト情報よりも、地図上での位置関係の方が「ここは少し遠いな」「ここは中心部に近いな」が直感的に掴める。能古島はフェリーで渡る必要がある離島だと地図を見るまで気づかなかった。下見ガイドも家族ガイドと同じ左右分割×Leafletの構造なので、ピンをクリックすれば右パネルに詳細カードが出る。

3本のページ（大分エリアの行きたい場所、福岡2泊3日家族ガイド、福岡1泊2日下見ガイド）が同じ部品で動いているので、後から大分以外のエリアを増やすときも、JSONを足してページを1枚切るだけで済むようになった。沖縄ガイドや台北ガイドはまだ計画段階だが、データだけ用意すれば既存のVueコンポーネントに流し込める状態になっている。

Tooltip→Popupへの切替で視線が泳がなくなった

地点名をマウスオーバーで出す実装は最初 Leaflet の Tooltip で組んでもらった。これは動くのだが、Tooltipは地図のオーバーレイ層に出るため、カードコンポーネントの中身が増えるとピンから離れた位置に表示されてしまう。マウスをピンに乗せて、視線がカードを探して右上に泳いで、また地図に戻る、を繰り返すと地理把握が止まる。

Popup＋hover に切り替えた。bindTooltip を bindPopup に置換し、ホバーで openPopup()、離脱で closePopup() を呼ぶハンドラを足してもらった。Popupには矢印（吹き出しの三角）がついていて、ピンの直近に表示される。視線がピンとカードの間で泳がなくなって、ホバーするだけで「ここは何の場所か」がスッと入るようになった。

地味な差なのだが、地図UIの体感は「視線移動の少なさ」で決まる、と今回学んだ。

カードコンポーネントの情報密度

カード表示は最初「地名＋住所＋Googleマップへのリンク」程度しか載っていなかった。元のリストには「カテゴリ」「Googleマップのレビュー数」「価格帯」も入っていたので、これをJSONに拾い直してカードに3行追加してもらった。

Popupにも同じ情報を載せているので、地図上をホバーするだけで「ここは観光地で、レビュー数が多くて、価格帯はミドル」までが一目で分かる。情報密度が一段上がった。

タイル切替＋localStorage保存

Leafletのデフォルトは OpenStreetMap で、緑（公園・山林）が多い地域だと道路が埋もれる。大分は山と海と温泉が密集していて、標準タイルだとほぼ全面が緑と青で塗りつぶされて、目的地の周辺の道路が見えにくかった。「白地図にトグルできない？」と頼んだら、OpenStreetMap（標準）と CartoDB Positron（白地図、道路中心）の切替ボタンが右上に出てきた。選択は localStorage に保存しているので、ページを再訪してもさっき選んだ方が残る。

白地図に切り替えると、別府の温泉街と国東半島の海岸線がスッと見えるようになって、地理把握が格段にラクになった。地図のタイル選びだけでこんなに体感が変わるのか、と画面の前で唸った。福岡側でも同じトグルを入れたので、住宅地下見モードでは白地図、観光地検討モードでは標準、と用途で切り替えられるようになった。

ラベル常時表示とON/OFFトグル

「マウスオーバーしないと何のピンか分からない」も致命的だったので、divIconにラベルを組み込んでピンの下に地名を常時表示するモードを入れた。最初は全件常時表示にしたら、別府温泉エリアでラベルが重なりまくって何も読めなくなった。

ON/OFFのトグルボタンを右上に追加して、密度が高いときはラベルを消して、絞り込んだ後で再度表示、という運用にした。福岡側は10件程度なので常時ON固定、大分側は60件あるので初期OFFでトグル可、というデフォルト設定の出し分けまで入れてもらった。

振り返り

地図UIの完成度を上げる作業は、実機で触って違和感を拾って指示を返す、のループで進めるのが向いていた。設計を最初に詰めようとしても、Tooltipが遠いとかカードの情報が足りないとかは、画面を見ないと出てこない。Claude Codeが一発で完璧なUIを出してくる必要はなくて、こちらが「ちょっと違う」と返したときに、ピンポイントで直してくれる速度の方が効いた。

1ターン目で「地図を出して」と頼んだあと、2ターン目「左右分割で」、3ターン目「マウスオーバーで出して」、4ターン目「白地図トグル」、5ターン目「ラベル常時表示」、6ターン目「Popup＋座標修正」、と6往復で完成形まで持ってきた。設計書を書いてから実装に入っていたら、たぶんTooltipの位置問題には気づかないまま完成判定していたと思う。

ハーモニーランドの座標ミスは反省点。AIに座標を取らせるときは、自分が地理感のある場所をいくつかピックして「ここで合ってる？」と聞く工程を挟むべきだった。次から地名→座標の変換を頼むときは、知っている場所3件で抜き打ち検算するルールにしようと思う。

最終的に大分60件超＋福岡家族ガイド＋福岡下見ガイドの3本が同じ地図部品で動く構造になった。これで後から沖縄・台北・札幌のガイドを足すときも、JSONとAstroページを1枚切るだけで済む。1回作り込んだ部品が3本に展開できた、という意味で今日は手応えがあった。

会計士・税理士フォロワー視点で1行差し込んでおくと、クライアントの拠点一覧（本社・支店・倉庫）を地図にプロットする社内ダッシュボードにも同じ部品が転用できる。住所→座標変換さえ通せば、左にクライアント一覧、右に地図、というレイアウトで「東京近郊にどれくらい集中してるか」を一望できる。Excelの住所列を眺めるより、画面で点の散らばりを見る方が早い。