Aquarium Passport

https://github.com/ryka-1104/progate_womens

GitHub

Figma

VSCode

Flutter

Dart

鑑賞体験とお土産選びをつなぐ水族館アプリ

Ayanentity

abo

Tanaka Rinna

Mikami Nasaki

ryok

推しアイデア

展示近くのQRコードを読み取ると、生物の情報と関連するお土産を知ることができ、保存ができる。QRコードを読み取るとスタンプを集めることができる。来場者の満足度向上とお土産屋さんでの購買促進を両立した。スタンプと生物の情報を結びつけ、アプリを見返したくなるワクワク体験を実現した。

作った背景

水族館で鑑賞中に生まれる「もっと知りたい」という推し生物への好奇心。この感情をその生物の「情報」や「関連グッズ」と楽しく結びつけることで、来場者の満足度向上とお土産店での購買促進を両立させる体験を目指した。

推し技術

展示横のQRコードを読み取ることで、生物の情報表示・スタンプ取得・関連グッズのレコメンドを同時に行う仕組みを設計

プロジェクト詳細

対象ユーザー

  • ファミリー層
    • 好奇心旺盛なお子様と、買い物をスムーズに楽しみたい保護者の方
  • 生き物ファン/観光客
    • お気に入りの生き物を深く知り、自分だけの思い出(お土産)を効率よく持ち帰りたい方

利用の流れ

  1. 入館・観賞
    • 展示を楽しんで推し生物と出会う
  2. 気になった生物の展示横にあるQRコードをスキャン
    • その生物のスタンプを獲得
    • 生物の情報を詳しく知ることができる
    • その生物に関連するお土産がレコメンドされる
  3. お土産の保存
    • 気になったお土産は保存して見返すことができる
  4. お土産屋さんで思い出を持ち帰る
    • お土産のリコメンド機能・保存機能によりお土産の購買意欲が向上
    • 保存したリストを見返しながら、わくわくした気持ちでショップへ向かい、推し生物のお土産を購入
  5. スタンプ一覧画面で獲得したスタンプを見返す
    • かわいいスタンプが沢山たまって嬉しい
    • スタンプをタップすることでその生物の情報やお土産を何回でも見ることができる

開発体制

役割分担

  • りおかさん:ぜんぶ
  • あやねさん:デザイン
  • あぼさん:JSON周りの実装
  • りんな:イラスト, UI実装
  • なさき:UI実装

画面設計

A. QRコードを読み取るカメラ機能画面
B. 読み取った魚のスタンプ、魚の情報、お土産(保存機能付き)が見れる画面
C. スタンプ一覧を見れる画面
D. 保存済みお土産閲覧画面
E. A、C、Dの画面を遷移できるボトムバー

画面の遷移フロー

  1. アプリ起動
  2. QRコードを読み取るカメラ機能画面
  3. QRコード読み取る
  4. 読み取った魚のスタンプ、魚の情報、お土産(保存機能付き)が見れる画面
  5. 4の画面を閉じる
  6. スタンプ一覧画面
  7. 6の画面でスタンプを押したら4の画面
  8. 保存済みお土産閲覧画面

開発における工夫した点

  • メンションを活用した、円滑な非同期コミュニケーション
  • 各自の習熟度に基づき、着実なアウトプットと技術的挑戦を両立させたタスク設計
  • 各メンバーが「面白い」「作りたい」と感じる機能を優先的に担当し、プロダクトへの熱量を向上
  • スタンプラリーを集めることで、繰り返し使えて楽しい体験を導入したこと
  • 気に入ったお土産が保存できることで、お土産屋さんで見返して、買い忘れを防げること
  • その生物のお土産がお勧めされることで、出会いが生まれるともに、購買意欲へとつながること
  • 買い忘れ防止・購買意欲向上により、お土産屋さん(店舗)の利益が向上
  • ただ情報を表示するだけだとWebサイトでも良いため、ローカル保存機能を実装し、モバイルアプリの良さを生かした
  • スタンプ一覧画面から、その生物の情報がいつでも見返せること
  • 実際にこのアプリを導入するには、お土産屋さん側がデータを入力するシステムが必要だが、コア機能ではないため、jsonでデータを作成することで柔軟に対応
  • miseを使ってシンプルな環境構築を行なった
  • Figmaで画面をデザインし、イメージをチーム内で共有した

Ayanentity

@ayanentity