KAORI

https://github.com/Yutaro-web/kaori-hackathon

GitHub

TypeScript

React

CSS

Node.js

未来の自分を育てて、風呂キャンを駆逐する!

三宅雄太郎

推しアイデア

「風呂に入れ」と強制するのではなく、入りたくなる未来を見せる。

作った背景

「入りたいけど面倒で後回しにする」という実体験から開発。

推し技術

Geminiで写真を判定し、現実の入浴行動をゲームに反映。

プロジェクト詳細

プロジェクト詳細

KAORI

概要

風呂キャンしがちな人向けの 入浴 × 育成 × 恋愛ゲーム

毎日出される写真ミッションをクリアすると、 アバターが成長し、服やアイテムを獲得できます。

お風呂に入らない日が続くと、 香りが弱くなり、アバターの身なりも崩れていきます。

ゲームの流れ

  1. 今日の写真ミッションを確認
  2. お風呂に入る
  3. シャンプーやタオルなどを撮影
  4. Geminiが写真を判定
  5. MISSION CLEAR
  6. ファッションガチャ
  7. アバターが成長
  8. 恋愛ストーリーが進行

背景

チームメンバー自身の 「お風呂に入りたいのに、面倒で後回しにしてしまう」 という悩みから開発を始めました。

最初はPCをロックするなど 「強制的に入らせる」案を考えていました。

しかし話し合う中で、

風呂キャンする人は「今の楽さ」を重視し、 毎日入れる人は「未来の清潔感や良い匂い」を重視している

のではないかと考えました。

そこで、 「入らないと罰」ではなく 「入った未来を楽しみにする」ゲームへ方向転換しました。

開発の変遷

PCを強制ロック ↓ 風呂に入る理由をヒアリング ↓ 「未来を想像させる」という仮説 ↓ 香りを可視化する育成ゲーム ↓ 人間アバターへ変更 ↓ 着せ替え・ガチャ・恋愛要素を追加 ↓ KAORI完成

技術スタック

  • React
  • TypeScript
  • Vite
  • Node.js
  • Express
  • Gemini API
  • Tailwind CSS
  • GitHub
  • VS Code / Google AI Studio

アーキテクチャ

image

#シーケンス図

image

推し技術・推しポイント

Geminiによる画像判定

「お風呂に入りました」ボタンだけでは 簡単にごまかせてしまいます。

そこで、 シャンプーやタオルなどを実際に撮影し、 Geminiで画像を判定する仕組みにしました。

現実の行動が、そのままゲームのイベントになる ことがポイントです。

ゲームによる継続

MISSION CLEARすると、

写真判定 ↓ ガチャ ↓ アイテムGET ↓ アバター成長 ↓ 恋愛進行

までつながります。

「風呂に入らなければならない」ではなく、 ゲームの続きを見たいから入る という継続を目指しました。

PREVIEW MODE

このゲームは本来、 数日間続けることで変化を楽しむものです。

そこでハッカソンのデモ用に、 入浴・風呂キャン・時間経過を高速で確認できる PREVIEW MODEを実装しました。

通常データとは別の状態を持たせているため、 デモ操作で本番データが変わらないようにしています。

苦労したところ

「入浴したこと」をどう確認するか

ボタンだけでは実際に入浴したか分からないため、 写真ミッションとGemini画像認識を組み合わせました。

「匂い」をどう見せるか

スマートフォンでは実際の匂いを測れないため、

  • 香りゲージ
  • エフェクト
  • 表情
  • 身なり

によって「良い匂い」を視覚化しました。

強制から継続へ

最初は「PCを使えなくする」など ペナルティ中心の案でした。

しかし最終的には、

未来の自分を育てたい

というポジティブな動機で 継続させる設計に変更しました。

三宅雄太郎

@890fa43d4cb7db9b