Habit Trackerを作りました|今日の3つに集中する習慣管理アプリ

個人開発

「何かを始めたい」という純粋な意欲が、いつの間にか「こなさなければならないタスク」という重圧に変わり、気づけば挫折してしまう。そんな経験は誰にでもあるはずです。

エンジニアとして、そして一人の人間として、私はこの「習慣化の難しさ」という普遍的な課題に、一つの明確な解を提示したいと考えました。そして今回、人生で初めてのWebアプリをリリースしました。

アプリの名前は、『Habit Tracker』

コンセプトは極めてシンプルです。「今日やることを、3つだけに絞る」

本記事では、なぜ私が数多ある高機能なアプリではなく、あえて「機能を持たない」アプリを作ったのか。その背景にある習慣化の思想と、技術的な挑戦、そして開発を通じて得た「公開することの価値」について、深く掘り下げていきます。

初めてWebアプリをリリースした日のこと

エンジニアとしてコードを書き、システムを構築することは日常茶飯事です。しかし、自分がゼロから企画し、実装し、世界に向けて「公開」する。このステップは、どれだけプロとしての経験があろうとも、特別な感慨を伴うものです。

私が今回、初の個人開発プロダクトとして「習慣管理」を選んだのには、明確な理由があります。それは、私自身が「多機能すぎるツール」に振り回され、シンプルな機能だけが欲しいと思ったからです。

巷には、グラフ表示、リマインダー、SNS共有、ポイント機能など、豪華な機能を備えた習慣管理アプリが溢れています。しかし、それらのアプリを使いこなそうとすればするほど、管理コストが膨らみ、「アプリを入力すること」自体が新たなストレスになってしまいます。

そこから生まれたのが、この『Habit Tracker』です。

Habit Tracker
https://habit-tracker-delta-bice.vercel.app/

Habit trackerとは?

『Habit Tracker』は、あなたの1日を「たった3つの習慣」で定義するツールです。

今日やることを「3つだけ」に絞る習慣管理アプリ

このアプリの最大の特徴は、「登録できる習慣がその日ごとに3つまで」という強力な制約にあります。

エンジニアリングの世界では「疎結合」や「単一責任の原則」が重要視されますが、これは人間の行動設計においても同様です。多くのことを同時にやろうとすれば、脳のコンテキストスイッチ(切り替え)のコストが増大し、パフォーマンスが低下します。

Habit Trackerは、あえてタスクを増やしすぎないことで、以下の状態を作り出します。

  1. 優先順位の明確化: 「本当に今日やるべき3つは何か?」を自分に問いかけるプロセス。
  2. 脳のリソース保護: 選択肢を絞ることで、実行に移すためのエネルギー(ウィルパワー)を節約。
  3. シンプルに継続する思想: 「これだけやれば今日は100点」という達成感の創出。

H3:こんな人向けに作った

このアプリは、すべての人に向けたものではありません。特に以下のような「管理の複雑さ」に疲れた方に向けて設計しています。

  • TODO管理が続かない: リストが長くなればなるほど、やる気が失せてしまう方。
  • 既存の習慣化アプリで挫折した: 通知が多すぎたり、入力項目が複雑で面倒になった経験がある方。
  • ミニマルな管理がしたい: 余計な機能はいらない。ただ「やったか、やっていないか」だけを確認したい方。

Habit Trackerでできること

「シンプルであること」を極限まで追求したUI/UXについて解説します。

今日やる習慣を登録できる

アプリを開くと、まず目に飛び込んでくるのは清潔感のある入力インターフェースです。

余白を活かしたデザイン。中央に配置された入力フィールドは、今この瞬間の「宣言」に集中させてくれます。

今日の目標をテキストで入力し、追加する。これだけです。最大3つまでの登録制限があるため、自然と「今の自分にとって本当に価値のある行動」を選び取ることになります。

完了チェックで達成感を可視化

登録した習慣を実行したら、チェックボタンをクリック(タップ)します。

チェックを入れた瞬間、タスクが完了状態に変化します。この「小さなチェックを入れる」という物理的な動作が、脳に達成感をフィードバックします。

複雑な集計機能はありません。しかし、その瞬間の「やり遂げた」という感覚を大切にするためのフィードバックを設計しています。

シンプルなUIで迷わず使える

機能が少ないことは、マニュアルが不要であることを意味します。

PCでもスマホでも、変わらない操作感。移動中や寝る前、ふとした瞬間にストレスなくアクセスできる設計です。

ダークモードを基調とした落ち着いた配色は、夜の振り返りタイムでも目に優しく、集中力を削ぎません。

なぜ「今日の3つ」にこだわったのか

ここが、Habit Trackerの心臓部であり、最も重要な哲学です。

習慣化が続かない原因は「増やしすぎ」だった

私自身の経験を振り返ると、挫折のパターンは常に同じでした。 「今日から、プログラミング学習1時間、英語リスニング30分、筋トレ20分、読書20分、早起き……」

やる気に満ちた初日はこなせます。しかし、2日目、3日目になっていくと、忙しさなどでできない日が出てきます。一つでも「未完了」が出ると、その次の日にはやろうと思って、それが続いてしまうのです。

多機能なアプリほど続かなかった

多機能なアプリは一見便利ですが、使い始めると「管理のための管理」が発生します。

  • カテゴリ分けをどうするか悩む
  • 目標の数値設定を細かく調整する
  • グラフを見て満足し、行動が伴わない

これらはすべて、本質的な「行動」から注意を逸らす「選択疲れ」「管理疲れ」を引き起こします。エンジニアが「オーバーエンジニアリング」を避けるべきなのと同じ理由で、習慣化もまた、過剰なシステム化は毒になるのです。

だから最小限にした

Habit Trackerが「3つ」という制限を設けているのは、それが「迷わない限界値」だからです。

  1. 迷わない: 選択肢が3つなら、優先順位付けに5秒とかかりません。
  2. 続けやすい: どんなに忙しくても、3つの極小タスクなら完遂できます。
  3. 小さく達成できる: 3つすべてにチェックが入ったときの「全能感」。これが翌日のガソリンになります。

「全部できた」という成功体験を毎日脳に覚え込ませること。これが、根性に頼らない習慣化の唯一の近道です。

使用技術

開発者向けに、Habit Trackerを支える洗練されたスタックを紹介します。

フロントエンド

無駄なオーバーヘッドを避け、軽快な動作と堅牢なロジックを両立させるための構成を選定しました。

  • React:UIのコンポーネント化と宣言的な記述により、状態と画面の整合性を美しく維持。
  • TypeScript:「登録は無制限だが、チェックを入れられるのは3つまで」という条件分岐ロジックにおいて真価を発揮。完了済みタスクのカウント処理やフラグ管理の型安全性を厳密に担保し、実行時エラーを防ぐ強固な土台となりました。
  • JavaScript:Webの標準言語であり、React/TypeScriptのベースとして、動的なタスクの追加・削除やチェック処理のコアロジックを柔軟に駆動させています。
  • Tailwind CSS:ユーティリティファーストなスタイル記述によりコーディングを効率化。クラス名に悩む時間を、ユーザー体験(UI/UX)の向上に充てました。

デプロイ

  • Vercel:フロントエンドエンジニアにとって最高のプラットフォーム。GitHubとの連携による自動デプロイで、改善のサイクルを極限まで短縮しています。

個人開発で学べたこと

今回の開発は、技術的なスキルの向上以上に、エンジニアとしてのスタンスを再確認する機会となりました。

初リリース経験の重み

どれだけチュートリアルをこなしても、どれだけ社内システムを作っても、「自分の名前で世界に公開する」という経験に勝る学びはありません。 ドメインを取得し、OGPを設定し、ユーザーが触れる状態にする。この一連のフローを完遂したことで、プロダクトを俯瞰して見る視点が養われました。

UI設計の難しさと面白さ

「機能を減らす」というのは、実は「増やす」よりも遥かに難しい決断の連続です。 「履歴機能は本当にいらないか?」「やっぱり日付変更機能は必要か?」 誘惑に打ち勝ち、当初のコンセプトである「シンプルさ」を死守するプロセスは、優れたプロダクトマネジメントの本質を突くものでした。

状態管理とユーザー体験

Habit Trackerのようなシンプルなアプリこそ、手触り感が命です。 タスクが追加された時のレスポンス、チェックを入れた時のフィードバック。これらをいかに違和感なく実装するか。TypeScriptによる厳密な型定義が、結果としてユーザーの安心感(バグの少なさ)に繋がることを再認識しました。

AIとの協働による高速デプロイ

今回のロジックやベースコードの大部分は、AIをパートナーとして活用しながら作成しました。 自分が実現したい「ミニマルな思想」をプロンプトに落とし込み、AIが生成したTypeScriptのコードを精査しながら組み込むという開発スタイルです。 これにより、構文エラーに悩む時間を大幅に削減し、「ユーザー体験の設計」や「仕様のブラッシュアップ(チェックは3つまでという制限の落とし込み)」という本質的なクリエイティブに時間を集中させることができました。

開発して感じたこと

リリースを経て、私の中で「モノづくり」に対する意識が大きく変わりました。

作るだけでなく「公開する」ことが大事だった

エンジニアにありがちなのが、「もっと完璧にしてから公開しよう」と考えて、結局リリースせずに終わってしまうパターンです。 しかし、プロダクトはユーザーに触れられて初めて生命を持ちます。完璧主義は、時に創造性の敵になります。「完璧を待たずに、今できる最高の最小単位を出す」。このマインドセットが得られたことは、技術習得以上に大きな収穫でした。

実際に使う前提で考える難しさ

自分がユーザーとして毎日このアプリを触る中で、「あ、ここは少し使いにくいな」と感じる部分が即座にフィードバックとなります。 「自分が自分のプロダクトの最大のファンであり、最も厳しい批判者であること」。これが継続的な改善を生むエンジンのだと気づきました。

小さくても完成させる経験が大きかった

大規模なシステムの一部を組む仕事も重要ですが、小さくても「一つの世界を完成させた」という事実は、自己肯定感を大きく高めてくれます。この「完遂する力」は、今後のあらゆる開発において私の基礎体力となるはずです。

Habit Trackerはこちら

ここまで読んでいただき、ありがとうございます。 もし、あなたが今の自分を変えたいと願いながらも、複雑な管理に疲れているのなら。

ぜひ一度、この『Habit Tracker』を試してみてください。

実際に使ってみる

アプリURL: https://habit-tracker-delta-bice.vercel.app/

インストールも会員登録も不要です。今、この瞬間に思い浮かんだ「3つ」を、書き込んでみてください。

まずは「今日の3つ」から始めてみる

習慣化の秘訣は、意志の強さではありません。「自分を追い込まない仕組み」を作ることです。

「今日はこれだけやればいい」。
その心の余裕が、結果として、あなたを最も遠い場所まで運んでくれるはずです。

さあ、あなたの「今日の3つ」は何ですか? その一歩を、Habit Trackerと共に踏み出しましょう。

タイトルとURLをコピーしました