しまなみ海道サイクリング旅行プランを地図とフォトギャラリーで作った記録

しまなみ海道を自転車で走ってみたい、と思ったところで止まった。 尾道から今治まで、瀬戸内の島々を橋づたいに渡っていくルートがあるらしいというイメージだけがあって、コースが何パターンあるのか、レンタサイクルの相場がいくらか、宿泊費まで含めた予算感が何もわかっていなかった。

Claude Codeにディープリサーチを頼み、ルートと費用を地図付きのドキュメントにまとめてもらうところから始めた。 既存の家族旅行アーカイブが「1旅行=2ファイル」の構成になっていたので、その形式に沿って作ってもらうことにした。 地図や行程を載せる本体ページと、検討の経緯を記録する「検討メモ」の2枚組で1つの旅行を管理する作りで、しまなみ海道もこの型に乗せることになった。

コースと費用感をドキュメントにする

調べてもらったのは、しまなみ海道本線をベースにしたルートパターン、レンタサイクルの料金比較、橋の通行料、宿泊・食事の予算感の4つ。 レンタサイクルはママチャリではなく、クロスバイクや電動アシストなど走りやすいタイプを軸に絞ってもらった。 未就学児と小学校低学年の子どもを連れて行く前提もあったので、子供乗せ自転車やキッズ向け設備まで並行して調べてもらっている。

出てきた比較表をもとに、地図コンポーネントに橋とサイクル拠点という新しいカテゴリを追加してもらい、トリップページとピンデータを作ってもらった。 ビルドは一発で通り、旅行プランのページが生成された。 生成されたページのURLに2026-11という時期が入っていて、実際に動くならこのあたりを軸に計画することになりそうだと気づいた。 まずChrome DevToolsで実際の画面を開き、地図が正しく描画されているかを自分の目で確認した。

画面で最初に確認したとき、橋やサイクル拠点のピンにまで宿泊施設専用の🏨アイコンが付いているのに気づいた。 ハイライト表示のロジックがカテゴリを見ずに一律で宿泊アイコンを出していたのが原因で、その場で直してもらった。 修正後にプレビューを読み込み直すと、🏨は宿泊ピンだけに戻っていた。 ルートパターン比較表やレンタサイクル比較表の中身も、「検討メモ」というドロワーを開いて一つずつ確認した。

海の上に浮かぶマーカー

できあがった地図を見返すと、ピンの一つが明らかに海の上に浮いていた。 「座標、しまなみ海道サイクリングのやつ、ちゃんと表示確認してくれませんか」と伝え、地図のピン位置をもう一度洗い直してもらうことにした。

OpenStreetMapの地名検索（Nominatim）で座標を一つずつ検証してもらうと、原因はすぐにわかった。 伯方島・大島・来島海峡まわりの複数のピン――サンライズ糸山、道の駅伯方S・Cパーク、ドルフィンファーム、伯方・大島大橋、道の駅よしうみいきいき館、来島海峡大橋、今治タオル美術館――が、実際の位置から4〜8kmもズレていた。 フリーテキストの地名から拾った緯度経度を、確認せずにそのまま採用していたらしい。 全ピンを実座標に差し替えてもらい、座標データのJSONに構文ミスがないか確認したうえでビルドし直した。 ズームインしたスクリーンショットで、橋の上や陸地に正しく乗っているかを一つずつ見直した。 今治側のクラスターも瀬戸田・生口島側のクラスターも、最終的にすべて陸地か橋の上に収まっているのを確認できた。

名所写真をギャラリーに

地図の座標が直ったところで、「しまなみ海道の有名な写真とか景観とか、ギャラリーみたいな感じで座標も一緒に入れてほしい」と頼んだ。 Wikimedia Commonsから、尾道の坂道、因島大橋、生口橋、多々羅大橋、大三島橋、来島海峡大橋、亀老山展望公園といった代表的な写真を8枚探してもらい、それぞれに撮影地点の座標を付けてギャラリーと地図ピンの両方に反映してもらった。 千光寺と亀老山展望公園は、それまで地図にピンがなかった場所だったので、写真と一緒に新しいピンとして立ててもらった。 プレビューでギャラリーを開くと、8枚とも読み込みエラーなく表示されていた。 地図のピンをクリックすると、ポップアップの中にも写真が出てくる仕組みにしてもらったので、実際にいくつかクリックして確かめた。

写真を32枚に増やす

8枚のギャラリーを見返して、「もっと増やしてほしい、32枚ぐらい」と頼み直した。 因島水軍城、白滝山、猫の細道、今治城、大山祇神社、村上海賊ミュージアムといった追加の名所と、各橋の別アングルの写真を足してもらい、数えると32枚ちょうどになっていた。 ついでに、以前のやり取りで伝えただけで本文に反映されていなかった尾道・今治エリアの年間の気温データも、この時に本文へ追記してもらった。

一度、ビルド後のプレビューで地図のVueコンポーネントがハイドレーションエラーを吐いた。 プレビューサーバーを一度落として立て直すとエラーは消え、32枚すべてが壊れずに表示されることを確認できた。 念のため画面をスクロールしながら32枚を一枚ずつ目で追い、壊れている写真がないことも確かめた。 ギャラリーを紹介する要約文が旧8枚版のまま残っていた箇所も見つかったので、32枚版に合わせて直してもらった。

ギャラリーをスライドショーに

「フォトギャラリーだけ、スライドショーっぽく、写真もっと大きく見たい」と頼むと、CSSの:target疑似クラスだけで動くライトボックス方式に作り替えてもらった。 JavaScriptに頼らない分、どのブラウザでも確実に動く。 サムネイルのリンク先を#g1から#g32まで振り、対応するidを持つ全画面レイヤーを表示させるだけの仕組みで、サムネイルをクリックすると全画面表示になる。 「次へ」「前へ」のリンクも同じ仕組みで隣の写真のidに飛ばすだけなので、32枚をそのまま送っていける。

実際にクリックして送っていくと、一度だけ暗いオーバーレイが重なりきらず、下の要素が透けて見える瞬間があった。 CSSをもう一段堅牢な書き方に直してもらってからは、全画面のオーバーレイが正しく前面に出るようになった。 前後移動と閉じるボタンも一通り試し、30枚目のバス写真まで詰まりなく送り切れた。

デプロイして本番で確認する

最後にコミットとデプロイを頼んだ。 ステージング前にgitの状態を確認すると、別セッションの作業と思われる無関係な変更が混ざっていたので、それは除外してしまなみ海道の分だけをコミットした。 学習ゲートに引っかかったので、ブラウザに表示された4問のクイズに/learnで回答し、受領証を発行してから本番に反映した。 デプロイ後は本番URLを自分で開き、地図とスライドショーが実際に動くところまで見て終えた。 地図のピンをいくつかクリックして写真のポップアップが出るところまで見届け、画面をずっと見ていないと安心できない性分だと改めて思った。

まとめ

ルートも費用もわからないところから始めて、地図とフォトギャラリー付きの旅行プランページができあがった。 座標のズレも写真の枚数も、頼んだ通りに一発で仕上がったわけではなく、都度見返しては直すの繰り返しだった。 地図のピンを一つずつ確認しているうちに、旅行前からすでに尾道と今治を歩いた気になっていた。 あとは秋までに、実際にペダルを漕げる体力を残せるかどうかだけが気がかりだ。