Todo Quest

サービス概要

このアプリでできること

　このアプリは、日々のタスク消化をゲームのように楽しみながら、継続的なモチベーションを維持するためのタスク管理ツールです。 　ユーザーがタスクをこなすことで経験値を獲得し、その経験値によってキャラクターがレベルアップし、様々な姿に進化していきます。視覚的な楽しさと達成感を提供することで、単調になりがちなタスク管理を「キャラクターを育てる冒険」へと変革します。

作ろうと思った理由

　このアプリは、ユーザーが日々のタスク管理に楽しさを見出し、挫折せずに継続できることを目指して開発されました。 　単なるタスクリストではなく、ゲーム的な達成感を付与し、キャラクターの成長を通じてユーザー自身のモチベーションを効果的に維持できる仕組みを提供するために作られました。

---

主な機能

・タスクの登録と管理:：日々の細かなタスクを登録・管理できます。タスクは期限の日時を入力することが可能です。

・経験値の獲得： タスクを消化するたびに、キャラクターの経験値が貯まります。

・キャラクターのレベルアップと進化： 経験値が一定に達するとキャラクターがレベルアップし、新たな姿へと進化します。

・進化バリエーション：進化後のキャラクターには複数のバリエーションがあり、ユーザーは「次は何だろう」という期待感を持ちながらタスクに取り組めます。

・タスクの自動ソート：登録されたタスクは、日時順に自動でソートされ、常に整理された状態を保ちます。

・キャラクターコレクション：ユーザーが進化させたキャラクターの姿をコレクションとしていつでも振り返ることができます。

---

こだわり・ユーザー体験への工夫

　このアプリでは、ユーザーが楽しく、そして効率的にタスク管理を行えるよう、以下の点にこだわり、技術的な工夫を凝らしました。

・生き生きとしたUIデザイン： ユーザーのモチベーションを刺激するため、キャラクターを１から描き起こし、GIF画像として組み込むことで、画面に生き生きとした動きと楽しさをもたらしました。

・視覚的な達成感： タスク消化によるキャラクターのレベルアップ・進化は、ユーザーの努力が目に見える形で報われる喜びを提供します。特に、進化後の姿のバリエーションを増やすことで、「もっと見たい」「次は何だろう」という強い期待感を生み出し、継続的なタスク消化に繋がるよう設計しました。

・使いやすさの追求： タスク管理の基本である「わかりやすさ」を重視し、タスクの日時が自動でソートされるように調整しました。これにより、ユーザーは常に整理されたリストで効率的にタスクに取り組めます。

・振り返りの喜び：達成感を永続的なものにするため、進化させたキャラクターをコレクションとして見ることができる機能を実装しました。これは、これまでの努力の証となり、ユーザーが次の目標へ向かう原動力となります。

---

これからの展望

・経験値自動設定：Geminiを利用することで、経験値を自動で設定してもらえるようにする

・ゲームオーバー画面：HPが０になったときの、ゲームオーバーの画面作成

・HPの増加：レベルが上がった際に、HPがMAX値の３個まで回復する

・webサイト用のUI調整：webサイトのUIのクオリティをもっと上げたい

技術構成

フロントエンド: React 18とTypeScriptを用いて、堅牢でモダンなUIを構築しています。

ビルドツール: 高速な開発体験を可能にするViteを使用しています。

スタイリング: Tailwind CSSとNES.cssを組み合わせることで、効率的なスタイリングとレトロで魅力的なデザインを両立させました。

状態管理: React標準のReact Hooks（useReducer / Context）を活用し、コンポーネントの状態を効率的に管理しています。

データ永続化: MVP（Minimum Viable Product）ではLocalStorageを使用し、将来的にはFirebaseを導入してデータ管理を強化する予定です。