これはWeekend Challenge: Earth Day Editionへの提出です

Green Habit Tracker: AIで小さな行動を本当のインパクトへ

作ったもの

サステナビリティは多くの人が関心を持っていますが、現実には、しばしば圧倒されるように感じたり、抽象的だったり、継続して続けるのが難しかったりします。

私はGreen Habit Trackerを作りました。モバイルファーストのWebアプリで、環境にやさしい暮らしを「シンプルに」「やる気が出て」「やりがいのあるもの」に感じられるようにしています。

大きなライフスタイルの変更に焦点を当てるのではなく、このアプリはユーザーに小さな毎日のアクションを促します。たとえば：

• 繰り返し使えるボトルを持参する
• プラスチック製ストローを避ける
• 使っていない照明を消す

各アクションは次のことに貢献します：

• ポイント
• デイリーストリーク
• 測定可能な環境への影響

よりパーソナルな体験にするために、このアプリではGoogle Geminiを使ってユーザーが実際に完了した習慣に基づくAIパワーのエコヒントを生成します。これにより、一般的なアドバイスを意味のある文脈に沿ったガイダンスへと変えます。

デモ

ライブデモ：https://greentrackerai.netlify.app/

動画ウォークスルー：(19/4に公開予定 - 動画は現在作成中です)

主要画面：

• オンボーディング＆習慣の選択
• 毎日のミッションダッシュボード
• 完了時の報酬アニメーション
• AIによるエコインサイト
• 環境への影響のトラッキング

コード

GitHubリポジトリ：https://github.com/aisyahz/-Green-Habit.git

どうやって作ったか

フロントエンド

• React (Vite) + TypeScript
• レスポンシブなデスクトップ向けショーケースを備えたモバイルファーストのレイアウト
• スケーラブルな構成のためのコンポーネントベースのアーキテクチャ

UI/UXデザイン

• 自然に着想を得たカスタムのダークフォレストグリーンテーマ
• プレミアム感のあるガラスモーフィズムカードとやわらかいグラデーション
• 読みやすいタイポグラフィと最小限のアイコン（エコにフォーカス）
• モバイルネイティブな体験のためのフローティングな下部ナビゲーション

⚙️ 状態とロジック

• ローカルステート + localStorageによる永続化
• 習慣トラッキングシステム：
  • ユーザーがエコ習慣を選択する
  • それを毎日完了としてマークする
  • ポイントを獲得してストリークを作る
• インパクト計算：
  • 各習慣が推定CO₂削減量に寄与する

ゲーミフィケーション

体験を魅力的にするために：

• 完了した習慣ごとにポイントを付与
• デイリーストリークのトラッキング
• 完了時のアニメーション：
  • 「+10 pts」浮かび上がる報酬バブル
  • カードのスケール＋アイコンのバウンズ（はねる）インタラクション
• チャートと統計による進捗の可視化

Google Gemini連携

主要な機能の1つは、Google Geminiを使ったAIによるエコガイダンスです。

一般的なヒントを表示する代わりに、このアプリは：

• 完了した習慣をトラッキングする
• それらをコンテキストとしてGeminiに送る
• パーソナライズされた、背中を押すエコのアドバイスを生成する

例のプロンプト：

「今日完了したこれらのエコ習慣に基づいて：[リスト]、短い励みになるエコ向けのヒントを教えてください。」

これにより体験は：

• より関連性が高くなる
• より人間らしくなる
• よりやる気が出る

受賞カテゴリ

Best Use of Google Gemini

このプロジェクトではGeminiを使って：

• パーソナライズされたサステナビリティのヒントを生成する
• 実際のユーザー行動に基づいてレスポンスを適応させる
• 固定的なコンテンツではなく、文脈に沿った励ましを提供する

なぜこれを作ったのか

多くのサステナビリティ系アプリはトラッキングやデータに焦点を当てていますが、私は別のものにしたいと思いました：

環境にやさしい暮らしが、実現可能でやりがいのあるものに感じられるようにすること。

このように組み合わせることで：

• 小さな毎日の習慣
• 視覚的な進捗
• そしてAIによる励まし

目標はユーザーに：

• より気持ちが楽になる
• より継続できるようになる
• 自分のインパクトによりつながりを感じられるようになる

学び

• 複雑にせずに「やりがい」を感じるゲーミファイドなユーザー体験をデザインする方法
• AIを意味のある形で統合する方法。単なる機能としてではなく、ユーザーの旅（導線）の一部として使うこと
• アプリを「生きている」ように感じさせるマイクロインタラクション（アニメーション、フィードバック）の重要性
• 短いハッカソン期間の中でシンプルなロジックと強いUXストーリーテリングのバランスを取る方法

最後に

Green Habit Trackerはシンプルなアイデアです：

小さな習慣を継続することで、意味のある変化につながり得ます。

AIの助けによって、それらの習慣は単なる行動ではなく
よりサステナブルなライフスタイルへ向かう、導かれて励まされる旅になります ✨