はじめに
最近、「風呂キャン」という言葉が流行り始めて、お風呂に入らない人に対しても少しずつ優しい空気が広がってきたように感じます。
とはいえ、どんな人でも心のどこかに「入らないと……」という気持ちはあるのではないでしょうか。
私自身、毎日のようにお風呂を後回しにしてしまうタイプです。
家に帰ってきてから寝るまでの時間、ずっと「うわー、入らないといけないな」と思いながら、結局ダラダラとスマホを見続けてしまいます。
その結果、気づいたら時間だけが過ぎていて、さらに入りたくなくなる——そんな悪循環を繰り返していました。
TikTokなどを見ていると、ときどき
「今すぐ画面を閉じて寝ろ！」
といった動画が流れてきて、ハッとすることがあります。
その時「こういう“きっかけ”を、意図的につくれたらいいのでは？」 と思いました。
そこで、私と同じようにお風呂を後回しにしてしまう人、そして何よりそんな自分のために、お風呂に入る気になれるアプリ を開発してみることにしました。
※ 本記事では、アプリ全体像や設計の考え方を中心にまとめています。
開発の流れや実装方法など具体的な内容については、Part2 として別途詳しく書く予定です。
アプリ概要
このアプリでは、お風呂を後回しにしがちな人向けに、キャラクターと辛口コメントで行動を促し、入浴習慣化を目指します。
時間設定に応じてキャラクターの状態が変化し、目標達成状況はカレンダーで可視化されます。
機能
- 入浴目標時刻・起床時刻の設定
- 時間経過によるキャラクターの4段階変化と辛口コメント表示
- 今入った場合のメリット（快適時間）の可視化
- 入浴完了の記録
- 目標達成状況を確認できるカレンダー表示
- 連続達成日数の確認
画面構成
本アプリは、主に以下の3画面で構成されています。
ホーム画面
- キャラクターと辛口コメントを中心に表示
- 現在の状況を直感的に把握できるメイン画面
- 快適時間：お風呂に入ってから寝るまでの神時間
- 入浴開始、完了ボタン
- 日付の切り替えは深夜0時ではなく、翌日6:00を基準に行われる
設定画面
- 入浴の目標時刻、起床時刻などの各種時間設定
- 設定内容はホーム画面の表示や判定ロジックに反映
- ホーム画面と連動したキャラクター表示
カレンダー画面
- 日ごとの入浴達成状況をカレンダー形式で表示
- 目標時間内に入浴できた場合〇がつく
- 連続で目標を達成できた日数を確認可能
キャラクターの4段階切り替え（ホーム画面）
切り替え条件
切り替え条件は以下のようにしてみました。
Stage1〜Stage3の間隔をあえて短くしているのは、期限が近いほど焦りを感じやすくなると考えたためです。
- Stage0［綺麗］：目標時刻より前
- Stage1［べたつき］：0〜14分遅れ
- Stage2［不潔］：15〜44分遅れ
- Stage3［終末］：45分以上遅れ
入浴終了ボタンを押すと、キャラクターは一気にピカピカな状態に戻ります。
どんなに遅れていても、ちゃんと入れば帳消しです。
使用技術
本アプリは、フロントエンドを中心としたシンプルな構成で実装しています。
今回は、最近話題になっている Antigravity を試してみたかったため、
実装には Antigravity を活用して制作しました。
UI設計から実装まで含めて、作成時間はおおよそ 3時間程度 でした。
フロントエンド
- React
- TypeScript
- Vite
ライブラリ
-
date-fns
- 時刻のパースや差分計算、入浴ステージ判定に使用
状態管理・データ保存
- React Hooks（useState / useEffect）
-
localStorage
- 入浴時間設定や達成状況の保存に使用
開発支援
-
Antigravity
- 画面構成やコンポーネント設計のたたきとして利用
- UIを確認しながらコードを調整し、実装を進行
実装で工夫したポイント
直感的に「今の状況」が分かる表現
とにかく、現在の状況が一目で分かることを重視しました。
数値や文章で説明するのではなく、キャラクターの見た目と背景色によって状態を表現しています。
これにより、アプリを開いた瞬間に 「まだ余裕があるのか」「もうまずい状況なのか」
を直感的に判断できるようにしています。
メリットが見える時間設計
入浴の目標時刻だけでなく、起床時間と睡眠時間も設定できるようにしています。
これにより、今お風呂に入った場合に
- 寝るまでにどれくらい快適な時間が残るのか
が可視化され「怒られるから入る」のではなく、「入った方が得だから動く」 という動機づけになるよう設計しました。
設定画面を極力シンプルに
設定画面は、必要最低限の入力項目のみに絞っています。
無駄な設定や細かすぎるカスタマイズはあえて省き、考えなくても使えることを優先しました。
設定に悩む時間が増えると、それ自体が行動のハードルになるため、入力負荷を下げることも重要なポイントだと考えています。
Antigravityを使ってみた感想
良かった点
- UIを見ながら実装を進められるため、試行錯誤のスピードが速い
- 画面構成やコンポーネント設計のたたきがすぐに用意できる
- プロトタイプを短時間で形にする用途にはかなり向いていると感じた
また、Antigravityだけに頼るのではなく、ChatGPTなど他のAIツールも併用することで役割を分担し、無料枠の制限内でも問題なく開発を進めることができました。
詰まった点・気になった点
- 細かい挙動や条件分岐は、最終的に自分でロジックを整理する必要がある
- 状態管理や時間判定などは、生成されたコードを理解して手直しする前提になる
- 追加指示を重ねすぎると、意図が伝わりにくくなる場面があった
Antigravityは「すべてを任せるツール」というよりも、
考える時間を短縮し、実装に集中するための補助ツールとして使うのが合っていると感じました。
今後の改善・やりたいこと
実装を進めていく中で、「これもあったら良さそうだな」と思う機能がいくつか出てきました。
今後は、以下のような点を中心に改善・機能追加をしていきたいと考えています。
- 入浴していない状態が続いた場合の 辛口コメント通知
- カレンダー画面のUI改善
- キャラクター、辛口コメントの追加
- 入浴以外の行動にも応用できるような機能追加
実際に使いながら少しずつ機能を足していき、
追加実装が進んだら、また続編として記事を書こうと思っています。
また、今回の記事では全体像や設計の考え方を中心にまとめましたが、時間判定ロジックや状態管理などの詳しい実装方法については Part2 として別途まとめる予定です。
まとめ
お風呂に入るという小さな行動でも伝え方や見せ方を工夫することで、意外と行動は変えられると感じました。
今後も「日常で使いたくなるもの」を軸に、改善を続けていきたいと思います。