01
プロジェクトの概要
何度も京都へ行くと、有名な観光地はすでに見ている。次の行き先を探しても、よく知られた場所が先に並ぶ。KYOTABI＋は、そんなリピーターが知らない場所へ寄り道するためのアプリです。
一覧では場所の名前を先に出さず、写真と体験を表すタイトルから選べるようにしています。気になる投稿を開き、ポイントを使うと本文を読めます。場所が登録された投稿では、正確な場所とGoogleマップへのリンクも確認できます。
関西ビギナーズハッカソン vol.8（2026年8月）の3人チームによる制作物です。完成版の要件定義・技術選定と公開コードを基に、現在の内容を紹介しています。
02
発見までの流れ
写真で興味を持ち、条件で探し、最後に場所を確かめる。操作の順序を短くまとめました。
寄り道先を見つける3つの操作
公開版の画面とコードを基に、操作の流れを文章で再構成しています。実画面のスクリーンショットではありません。
-
写真から選ぶ
ホームでは投稿の写真とタイトルを見て、気になった寄り道を選びます。場所の名前は一覧に出しません。
-
条件で探す
キーワードや気分を選び、天気、時間帯、空き時間なども指定できます。選んだ理由は検索結果にも表示します。
-
場所を確かめる
投稿の写真とタイトルを確認してから1ptを使うと、詳しい文章が開きます。場所が登録されていれば地図にも進めます。
03
公開版の機能
写真を中心にした投稿一覧
写真と体験のタイトルを入口にします。詳細を見る前に場所名や人気の数字を並べない構成です。
条件が伝わる検索結果
キーワードと気分は条件に合う投稿だけを表示し、天気や空き時間などは順位付けに使います。「雨でも大丈夫」など、上位に来た理由も示します。
ポイントで開く投稿詳細
初回に10ptを持ち、未閲覧の投稿を1ptで開きます。一度開いた投稿には再度ポイントを使いません。
撮影場所を取り込む投稿画面
写真に位置情報があれば読み取り、なければ端末の現在地を使えます。位置情報を取得できない場合は場所を手入力できます。
04
技術と選定理由
ハッカソンの短い制作期間でも公開して試せるよう、ブラウザからすぐ触れられる構成です。検索の並び替えにはAIを使わず、入力条件に対する一致と加点をコードで決めています。
Next.js 15 / React 19
画面とルーティングを構成し、Vercelで公開。
TypeScript
投稿と検索条件のデータを型で管理。
Supabase
共有投稿の取得、追加、反応をREST API経由で扱う。
localStorage
ポイント残高、開いた投稿、自分の投稿を端末内で保持。
EXIF / Geolocation API
写真の撮影地点を読み、取得できないときは現在地や手入力で補う。
CSS
独立したUIライブラリに頼らず、モバイル向け画面を構成。
05
現在の範囲
アカウント登録なしで公開デモを試せます。共有投稿はSupabaseから読み込みますが、ポイント残高や閲覧履歴は使っている端末のブラウザに保存します。このため、端末を替えても同じ残高や履歴を引き継ぐことはできません。
写真の位置情報は、SNSなどを経由すると削除される場合があります。投稿画面では、端末の現在地を使う操作と場所の手入力を用意しています。
06
資料・公開先
アプリはブラウザから試せます。詳しい仕様と実装は公開リポジトリで確認できます。