めぐる〜と

https://github.com/mstka/58hack_in_OMU

Next.js

Python

Docker

混雑を緩和することを目的としたルーティングサービスになります。

mashamo

Nao Maeda

SHODE SHIZUKU

HATAKEYAMA YUIKA

Riko Kotera

推しアイデア

AIが混雑状況を把握し、最適な観光ルートを自動で生成する機能です。混んでいるスポットを自然に避けながら、タイムライン付きのルートを提案します。観光客が「なんとなく有名な場所」に集まってしまう行動を、AIが賢く分散させることで、待ち時間の少ない快適な観光体験を提供します。

作った背景

今回のハッカソンのテーマであるCSV(共通価値の創造)に向き合ったとき、「観光地の混雑」という課題が浮かびました。混雑人の動きが止まることで地域の経済循環も滞らせます。この社会課題を解決しつつ、地域経済の活性化につなげるビジネスモデルとして設計できないかと考えました。

推し技術

・ESP32による周囲のスマホの検知 ・CI/CD環境による高速な開発 ・StripeAPIを用いた実際の決済

プロジェクト詳細

めぐる〜と(混雑把握ルート検索アプリ)

概要

観光地への一極集中は、訪れる人の体験を損ない、地域の持続的な発展も妨げます。このアプリは、地方自治体と連携し、観光客の人流を自然に分散させることで、地域全体の観光を活性化させるCSV型プロダクトです。

アプリのデザインには彩度を抑えたオレンジを採用し、目に優しく健康的な移動体験を演出しています。

CSV

空いている場所に観光客を誘導することで地域全体の観光消費を底上げし、混雑緩和という社会課題の解決がそのまま地域経済の成長につながる構造を実現

センサーが今この瞬間の混雑をリアルタイムでキャッチ&蓄積    ↓ AIがその情報をもとに、今すぐ使える最適ルートを提案    ↓ 観光客が混雑を避けて快適に動き、滞在満足度が上がる    ↓ 閑散店舗にも人が流れ、地域全体の売上が底上げされる    ↓ 自治体の観光収入が増え、さらなる導入・投資につながる    ↓ より多くの店舗にセンサーが広がり、データが蓄積されるほど精度が上がる(ループ)

主な機能

  AIルート自動生成 出発地・目的地・希望時刻を入力するだけで、混雑を避けた最適な観光ルートをタイムライン付きで提案します。

スポット絞り込み検索 マップ上で混雑度・ジャンル・レビュー評価からフィルタリング。今すぐ行ける空いているスポットを即座に提案します。

クーポン管理 & コイン決済 閑散スポットへの誘導とクーポンをセットで活用することで、人流分散のインセンティブとして機能します。 マイルート保存 / 多言語対応(準備中) ルートの保存機能や、インバウンド観光客向けの翻訳機能も視野に入れています。

技術

【アーキテクチャ】

image

今回は、コインの購入決済にStripeAPIも導入しており、実際にクレジットカードを使ってのコイン購入が可能になっています。 image また、「ESP32」を使って周囲のスマホが飛ばしている電波を拾い、そのMACアドレスを記録していくことで台数の算出を行います。ここで、近年のスマホはセキュリティの観点でランダムMACアドレスになっているため、各種機種のシェア率や発信スパンから一台あたりの飛ばすMACアドレスの数の平均値を「4.3個/台」と仮定して、実際の台数を推算します。 マップ表示には、「Open Street Map」を使っています。 開発を効率化するために、GitHubのリポジトリーのmainブランチにプッシュされたら、自動でサーバー(今回はXserverのVPS)にデプロイされるCI/CD環境を整えました。

画面

ログイン画面 image

ホーム画面 image

メニューバー image

AIルート検索 image

絞り込み検索機能 image

コイン購入 image

マイクーポン image

設定 image

店舗側 image image image

開発の流れ

【STEP 1】 ・ユーザーストーリー(Canvaにて整理) image image ・画面ラフ設計(UI)(Canvaにて整理) 画面遷移じゃなくてコンポーネントの変化は横並びにすることでタスク担当を明確化 image

【STEP 2】 ・トンマナ統一 ・API設計

【STEP 3】 ・DB設計、ベースとなるリポジトリー構築(大久保) ・フロントエンドのモック構築

【STEP 4】 ・バックエンド構築スタート ・周辺機能の実装 ・順次フロントエンドとバックエンドの繋ぎこみ ・順次デプロイ

議論

中間発表後 →ターゲットを外国人観光客にしぼってはどうか?ユーザーストーリーがより具体的になる(アプリ内コインや決済システムが、外貨と日本円の両替が難しい外国人観光客にとってありがたい機能)(翻訳機能)  →外国人観光客をターゲットにアプリ内コインなどの機能に重心を置くとCSV (待ち時間問題・混雑解消)とずれてしまう。むしろマップ上のAIルートや混雑情報取得の方が大事。 →ターゲットは店舗?観光客?

ターゲット自治体について →混雑傾向のある店舗も人が全然来ない店舗も、地域のすべての店舗に導入してもらう必要がある。だけどCSVに従うと、繁盛(混雑)している店舗からすると、人がはなれて行ってしまうので、自店舗には不利益だとしてアプリ導入してくれないそれを自治体のでは? →自治体(地域全体)で導入してもらうことで解決する。  自治体には人流データなどをまとめた資料を定期的に提出 資料サンプル

消した機能:レビューとフォト閲覧専用ページ

レビュー・フォト閲覧ページ →レビュー・フォト一覧画面と絞り込み検索結果はどちらも店舗一覧が出てくるような画面で、ひとまとめにしてもよさそう →絞り込み検索機能にレビュー・フォト一覧ページを入れる  →絞り込み機能で店舗(レビューとフォト)が一覧で出てくる。 その個別店舗のレビュー・フォトが見られる。混雑状況も文字で見られる。さらに、個別店舗の店舗名をタップするとマップに遷移してマップ上で店舗のピンを見られる。

混雑状況表示

マップ上のピン →ピンを色分けして混雑状況を視覚的に表す。(暖色:混んでる 寒色:空いてる)  →色分け一覧画面は? →なし

混雑状況 →レビューで混雑状況書いてもらう?  →混雑判断基準があいまいなので最大許容人数から混み具合判定   →混み具合は円グラフ?   →レビューの星と混み具合の文字がいい感じなので円グラフいらない。

将来的に入れ込みたい機能

翻訳機能 インバウンド観光客向けの翻訳機能 マイルート保存 AIで生成したルートを「マイルート」として保存し、見返すことができる機能 自治体用の画面

開発中に困ったこと

プログラミング未経験のメンバーが多く、コードの書き方だけでなくターミナルの操作やファイル管理といった基本的なパソコンの扱いから教えてもらう必要があった

教える側は、自分にとって当たり前の知識が相手には伝わらないことを前提に、言葉の選び方を都度工夫する必要があった

一つの作業を進めるたびに全員の理解度を確認しながら進めたため、開発スピードが想定より遅くなる場面があった

それでも全員が諦めずに取り組んだことで、最終的にプロダクトとして形にすることができた

成長アピールポイント

エラーなどわからないことがあった場合はわかる人に聞いてフィードバックをもらうの繰り返しを続けました。

mashamo

@06f0b4d86edd7f1b