CO₂排出量計算アプリ
家庭や生活スタイルから、月間のCO₂排出量を簡単に計算できるWebアプリケーション
プロジェクト概要
目的
環境意識の向上とサステナブルな生活の促進を目的として、家庭や生活スタイルから月間のCO₂排出量を簡単に計算できるWebアプリケーションを開発しました。電気・ガス・水道、交通手段、食生活の影響を総合的に計算し、ユーザーが自分の生活が環境に与える影響を理解できるようにしています。
開発背景
環境問題への関心が高まる中、個人レベルでのCO₂排出量を簡単に計算できるツールの必要性を感じ、開発を開始しました。
プロジェクト画像
メイン画面 - 段階的な入力フォーム
結果画面 - 月間CO₂排出量の表示
技術詳細
使用技術
React 19
Next.js 15
TypeScript
Tailwind CSS
Framer Motion
開発期間
2025年7月 - 2025年7月（1週間）
開発体制
個人開発
デプロイ
Vercel
主な機能
計算機能
- • 電気・ガス・水道の使用量からCO₂排出量を計算
- • 交通手段（車・電車・バス）の排出量計算
- • 食生活（肉・魚・野菜）の影響計算
- • 月間総排出量の表示と比較
UI/UX機能
- • 段階的な入力フォーム
- • スムーズなアニメーション
- • レスポンシブデザイン
- • 環境に配慮した生活の提案
開発過程
1
要件定義・設計
環境省のデータを参考に、家庭の電気・ガス・水道、交通手段、食生活からCO₂排出量を計算するロジックを設計。直感的なUI/UXを重視しました。
2
フロントエンド開発
React 19とNext.js 15を使用してコンポーネントベースの開発を実施。Tailwind CSSでレスポンシブデザインを実現し、Framer Motionでスムーズなアニメーションを追加しました。
3
テスト・デプロイ
基本的な動作確認を実施し、Vercelでデプロイ。個人開発として機能を完成させました。
成果・学び
技術的な学び
- • React 19とNext.js 15の最新機能の活用
- • Framer Motionを使ったアニメーション実装
- • TypeScriptの型安全性の重要性
- • レスポンシブデザインの実装
プロダクト面の学び
- • 環境データの正確な計算ロジック
- • ユーザビリティを重視したUI設計
- • 短時間での効率的な開発
- • Vercelでのデプロイと運用