1. プロジェクトの背景：氷見の宝をデジタルで繋ぐ
富山県氷見市には、市出身の漫画家・藤子不二雄Ⓐ先生ゆかりのキャラクターたちが街の至る所に設置された「まんがロード」があります。
しかし、22箇所にも及ぶ魅力的なスポットが点在しているため、初めて訪れる方がすべてを巡り、その背景を楽しむには「ガイド」が必要だと感じていました。
そこで、位置情報を活用し、歩くほどに達成感を味わえるスタンプラリー形式のWebアプリ**「氷見漫画ウォーク」**を開発しました。
2. 主な機能とこだわり
「観光客が迷わず、かつ物語を楽しめること」を最優先に設計しました。
| 機能 | 内容 |
| リアルタイム追跡 | GPS連動で現在地を青い丸で表示。迷う心配をなくしました。 |
| 自動到達判定 | スポット半径15m以内に近づくと自動でポップアップを表示。 |
| 訪問記録 (LocalStorage) | 巡った場所は緑色のピンに変化。履歴は端末に保存されます。 |
| 多言語対応 | インバウンドを意識し、日・英・中の3言語を切り替え可能。 |
| Mockモード | 開発者向け機能。現地に行かずとも任意のスポット到着をテスト可能。 |
3. 技術スタックとAI実装の舞台裏
今回の開発では、保守性とスピードを両立させるため、あえてフレームワークを使わないVanilla JavaScriptでの構築を選択しました。
- 技術構成: Google Maps JavaScript API / Vanilla JS / JSON / CSS
- AIとの共同作業: * 22箇所の座標データとキャラクター情報の構造化をAIが担当。
- 到達判定（半径15mの計算ロジック）などのJavaScript実装において、AIとペアプログラミングを行うことで、バグの少ない実装を数時間で完了させました。
- モバイルファーストのUI設計におけるCSSの最適化。
4. 今後の展望
このアプリは公開して終わりではありません。今後は以下のアップデートを予定しています。
- スポットごとの写真・動画再生機能の追加。
- 最新のGoogle Maps API（AdvancedMarkerElement）への移行。
- 地元の商店街と連動したクーポンの発行など。
リンク
👉 デモアプリを開く （※クリックで動作確認できます）
📱 使い方
- アプリを開くと位置情報の許可を求められるので「許可」をタップ
- 言語を選択（日本語・英語・中国語に対応）
- 地図上に表示されるまんがスポットのマーカーを確認
- 実際にスポットの近くに行くと、自動でスポット情報がポップアップ表示
- スポットの写真や解説、動画を楽しむ
💡 ポイント: 実際に氷見市内を歩きながら使うGPS連動型アプリ。スポットに近づくだけで自動的に情報が表示されます。
🎯 こんな人におすすめ
- 氷見市を観光で訪れる藤子不二雄Aファン
- まんがロードを巡りたい親子連れ
- 外国語ガイドが必要な海外からの観光客
💡 この記事の実装パートナー：
- 構成・執筆サポート: Gemini (Google)
- プログラム生成: Claude / Claude code (Anthoropic)
コメント