みちくさ（寄り道アプリ)

―

―

TypeScript

React

CSS

現在地の街の歴史やグルメを、AIがその場で解説するまち発見アプリ

Haruki Ishii

推しアイデア

何の目的意識もなく、その場にふらっと来た人が街に繰り出して、もう一度来たいと思えるようにする。

作った背景

歴史的背景や文化的特徴を手軽にキャッチアップすることで、その地域の旅行がより楽しいものになる

推し技術

API経由でGeminiにその場の情報をワンクリックで、まとめて簡単に出力してもらうことができる。

プロジェクト詳細

みちくさ（michikusa）

ふらっと立ち寄った街を、2000円・徒歩20分で楽しむ。AIガイド × デジタル御朱印帳。

概要

GPSで現在地を取得し、生成AI（Google Gemini）がその街の解説・グルメ・お得情報をその場で生成するWebアプリです。「目的なくふらっと来た人」に向けて、予算2000円以内・徒歩20分以内で楽しめる寄り道を提案します。食べた名物は写真からAIが判定して「御朱印スタンプ」として集められ、同じ街にまた来たくなる体験を作ります。

課題

知らない街にふらっと来ても「何をすればいいか分からない」。既存の観光アプリは目的地ありきで、"目的のない人"には刺さりません。

解決

現在地だけで、AIが即座に「気軽な楽しみ方（2000円・徒歩20分）」と「その街のお得」を提案。食に特化し、集めて再訪したくなる仕掛け（御朱印帳＋思い出メモ）でリピートを生みます。

主な機能
  • 現在地からAIが街を解説（音声ガイド付きで歩きながら聞ける）
  • ふらっとプラン（2000円・徒歩20分）＋この街のお得情報
  • カメラ → AIが料理を認識 → 写真で御朱印スタンプ ＋ 思い出メモ
  • デジタル御朱印帳（スタンプ収集・タップで思い出を再表示）
  • 訪問履歴・散歩の記録（軌跡）・地図表示
  • 和モダンデザイン（青海波・市松などの伝統文様をCSSで描画）

アーキテクチャ

 
[ ブラウザ / React + Vite + TypeScript ]
   GPS(Geolocation) ・ 音声(Web Speech) ・ Canvasスタンプ生成 ・ localStorage保存
                    │  fetch (POST, JSON)
                    ▼
[ Vercel Functions (サーバーレス) ]
   /api/describe      … 座標 → 街の解説・提案を生成
   /api/food-stamp    … 料理写真 → 料理名を認識
   ※ APIキーはサーバー側の環境変数で秘匿（フロントに出さない）
                    │
                    ▼
[ Google Gemini ]  テキスト生成 ＋ 画像認識(Vision) / responseSchemaで構造化JSON出力

外部連携: Nominatim(逆ジオコーディング) ・ Wikimedia/Wikipedia(実写画像) ・ OpenStreetMap(地図)

技術的に工夫した点
  • APIキーをサーバー側の環境変数に隔離し、フロントに露出させない安全設計
  • 共有の型定義を1ファイルに集約し、3人（フロント／GPS／LLM）で分業してもデータ形式が破綻しない
  • useEffectを使わない設計（イベントハンドラ内の async/await ＋ Promiseを返すカスタムフック）で状態管理をシンプルに
  • responseSchema で生成AIの出力をJSONに固定し、安定してパース
  • 画像生成に頼らず、写真＋Canvasでスタンプを生成 —— コストと可用性リスクを避けた設計判断
  • AI障害時のフォールバック（手入力での継続、データ欠損時は非表示）で体験が途切れない
  • 演出・文様はすべてCSSで実装（画像アセットゼロ＝軽量）

技術スタック

React / Vite / TypeScript ・ Vercel（Functions & デプロイ）・ Google Gemini API ・ Web Speech API ・ Canvas ・ Geolocation ・ localStorage ・ Nominatim ・ OpenStreetMap

チーム

3人構成（フロントエンド／GPS・位置情報／LLM・バックエンド）

Haruki Ishii

@2a0dfd2fdfc5879a