Lumi

プロジェクト概要

習慣の“管理”ではなく“関係性”で継続を楽しく可視化する習慣化サポートアプリ
習慣の積み重ねによってペットが成長し、継続そのものが楽しみに変わる習慣育成アプリ

主要機能

①ペット部

ペットのLumiの画面、触れると笑うし習慣を達成しても笑顔になる。普段は口角が下がっているのでギャップが可愛い。その日のタスクの達成数とその達成数や達成時間の比率によって信頼度、疲労度のステータスが変動する。この二つの値から感情の値を算出してその値がレベルを変動させる。

<< 推しアイデア >>
人力で考えた独自のLumiの状態計算ロジック

信頼度、疲労度、感情の計算ロジックは二人でAIを使わずに
人力で設計した。

チャット部

まず、Lumiがユーザーに適した習慣を提案します。そして、ユーザーがダメ出ししたいことがあったり、もう少し変更を加えたいなどの議論をLumiとします。カウンセラーLumiって感じです！！ Lumiの状態ステータスの下部にある。Lumiとの議論画面、

②習慣表示部

習慣表示の画面、習慣登録画面で追加した習慣のうち今日のタスクのみをタイムブロックごとに表示してここでタスクの達成・非達成を選択できる。また、経過日数、進行中タグ、編集ボタン、削除ボタン、連続達成日数などが表示される。

＜習慣登録画面＞

習慣登録画面、登録には習慣名、タイムブロック、期間ブロックの設定を行うことができる。アプリを開始したらまずはここで習慣を登録しよう。

アプリコンセプト決定までの過程

　初心者二人のチームだったため、「当日に確実に動く画面まで完成させること」を絶対的な目標に、Todoアプリ制作の経験とふぇふぇの自己開発中で合った「習慣化を無理なく続ける習慣管理アプリ」をメインコンセプトとし、ここにテーマ「先端」に適したアプリのアイデアを出し合った。

アイデア出しの結果、ペット育成要素を組み合わせた習慣管理は新規性があり、テーマにも適していると判断し方向性を決定した。

当初、ペットのステータスは「信頼・疲労・感情」の3要素で設計したが、感情は信頼と疲労から算出する形式へ変更。基本軸を「信頼・疲労」の2つに整理した。

しかし成長要素が不足していたため「レベル」を追加。当初は年齢と同義とし、レベル上昇で値の変動幅が安定する設計だったが、計算ロジック上の制約から再設計を行った。

最終的に、信頼値と疲労値の結果から感情を算出し、その蓄積によってレベルが上がる現在の仕様へと至った。

＜初期ダッシュボード画面＞

完成版とここが違う！ Lumiのデザインがうさぎっぽい！！ この頃も可愛いけど今の方がもっと表情豊かで可愛い!

＜初期習慣登録画面＞

完成版とここが違う！ 習慣設定の期限設定がカレンダーによる設定方式になっている！！ 習慣化支援の最小機能を再検討し、カレンダー方式から現在の方式へ変更！！

開発技術面

AI活用

figma 　UI構想および画面遷移設計に使用。ワイヤーフレーム作成、コンポーネント設計、画面レイアウトの視覚化を行った。
antigravity　実装時のコーディング補助として使用。基本的な画面構築および機能実装を行う際の開発支援ツールとして活用した。
claude　仕様書を基に、追加機能のロジック設計やステータス計算方法の検討に使用。文章整理および設計案の言語化にも活用した。
gemini アプリのアシスタントAIとしてGoogle AI studioのAPIを使用　
ChatGPT　アプリ全体の機能構想、ステータス設計の整理、仕様変更時の論理構築など、企画・設計段階の壁打ちとして活用。
Github Copilot　Vercel Agent Skillsを用いたAIエージェント機能をVS Code内で活用。コード補完、リファクタリング提案、関数構造の最適化、型定義の補助、重複コードの改善などに使用した。

技術チャレンジ

あおい そもそもWebアプリ制作が初めてであり、React関連の知識がほぼない状態からスタート。ふぇふぇの手厚いサポートやVercel Agent Skills を用いて実装したGithub Copilotの使用によりアプリのUI案作成、Next.jsの使用やコンポーネント構想からリファクタリングを行った。

ふぇふぇ Webアプリ開発は１度経験があり、Reactについての動画で学習し知識のアウトプットとして簡易的なTodoアプリを開発してVercelにデプロイしました。58hackでは、バックエンドに挑戦し、Next.jsのApp routesとAPI routes, DB設計を学習してから実装に取り掛かりました。そしてあおいのコードをコンポーネントの再利用性、関数の純粋さを意識して、直しやすいコードに変更しました。

今後の展望

ログイン機能実装
Lumiの要素の追加(バリエーション、触れ合い機能)
開始日の指定機能の追加による、習慣設定の期間選択の自由度の拡張
進行中タグを利用した達成することができた習慣の履歴を見ることのできる機能
Lumiの対人戦機能

ペットとの"関係性"を育てて"習慣化"！新しい習慣管理アプリ

推しアイデア

作った背景

推し技術

プロジェクト詳細