元取り計算
「その買い物、本当に時間的に得ですか？」を一瞬で判断する ROI 計算アプリ
サービス概要
元取り計算 は、家電の購入に対して「どれくらい時間を節約できるか」をもとに投資回収期間（ROI）を算出し、購入判断を支援する Web アプリケーションです。
レビューサイトや比較サイトでは「良い商品か」は分かっても、「自分にとって時間的に得か」は分かりません。本サービスは「時間価値」に特化することで、感覚ではなく"回収期間"で生活の意思決定をサポートします。
解決する課題
| 課題 | 解決策 |
|---|
| 買うべきかどうか判断できない | ROI（投資回収期間）を自動計算 |
| 時短効果が実感しづらい | 月間・年間の削減時間を可視化 |
| 比較サイトは情報量が多すぎる | 入力3項目だけの即断 UI |
| 感覚で購入して後悔してしまう | 時間価値ベースで合理的に判断 |
開発背景
日常生活の中で、「この家電は本当に買う価値があるのか？」と迷うことがありました。そのため、家電の投資利益率を可視化することで生活の意思決定を支援するサービスとして、「元取り計算」というWebアプリを開発しました。
機能一覧
MVP リリース
- ROI 計算機能：「価格」「月の時短（分）」「時給」の3項目を入力して投資回収期間を計算
- 回収期間表示：何ヶ月で元が取れるか・1年間でいくらの節約になるかを自動計算して表示
- 家電プリセット機能：食洗機・洗濯機などの代表家電をプリセットページとして設定し、入力不要でワンタップ計算
- SEO 個別ページ：プリセットごとに
generateStaticParams() で静的生成
- レスポンシブ UI：スマホ前提のシンプル設計
補足: 当初「買い！／アリ／微妙／やめとけ」の4段階判定を予定していたが、時間の価値は
人それぞれであり機械的な断定がユーザー体験を損なう懸念から見送り、計算結果を淡々と
提示する中立的な設計とした（2026-09-18判断）。
本リリース（実装予定）
- アフィリエイト導線：回収期間が一定以上長い場合に、判定ラベルとしては表示せず、
「こちらの製品も検討してみてください」という中立的な文言で代替家電の候補を提示し
アフィリエイトへ誘導する(内部的な閾値判定はロジックとして持つが、ユーザーには
断定的なラベルとして見せない)
技術スタック
フロントエンド
| 技術 | 採用理由 |
|---|
| Next.js 16（App Router） | SEO と高速表示を両立しつつ、将来的な拡張性を持たせるため |
| React 19 | コンポーネント単位で ROI カードや比較 UI を再利用しやすくするため |
| TypeScript | ROI データやプリセットデータの型安全性を保つため |
| Tailwind CSS v4 | モバイルファーストな UI を高速に構築するため |
バックエンド
| 技術 | 採用理由 |
|---|
| バックエンドなし（MVP） | ROI 計算のみで完結するため、開発速度を優先してフロント完結構成を採用 |
| localStorage | 時給をブラウザに保存するため |
| 将来的に Supabase / Rails API を検討 | ユーザー保存機能や分析機能追加時にスケール可能な構成にするため |
開発・テスト
| 技術 | 採用理由 |
|---|
| Vitest | 高速なフロントエンドテスト実行のため |
| Testing Library（React） | ユーザー操作ベースで UI をテストするため |
| ESLint | コード品質を保つため |
| Prettier | コードフォーマットを統一するため（セミコロンなし設定） |
インフラ
| 技術 | 採用理由 |
|---|
| Vercel | Next.js との親和性が高く、GitHub push をトリガーに自動デプロイできるため |
| Docker | 開発環境をコンテナ化し、環境差異による不具合を防ぐため |
画面遷移図・ER 図
- 画面遷移図：作成予定
- ER 図：MVP 段階では未使用（フロント完結構成のため）
ローカル環境での起動方法
前提条件
セットアップ
git clone https://github.com/nagi558/Time-ROI-Hub
cd time-roi-hub
docker-compose up
ブラウザで以下へアクセス：http://localhost:3000
環境変数
Google Analytics 4 を有効にする場合は .env.local に以下を設定する（未設定の場合はGAタグは出力されない）。
NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX
本番環境（Vercel）ではプロジェクトの環境変数設定に同じキーを追加する必要がある。
ビルド
npm run build
こだわりポイント
- 1画面完結・即結果：ユーザーの離脱防止のため、入力から結果表示までを1画面で完結させる設計を徹底
- 入力最小設計：価格・時短・時給の3項目だけで即結果表示
- スマホファースト：親指操作のみで完結する UX
- プリセット設計：代表家電をワンタップで判定可能。
generateStaticParams() による SSG で SEO と表示速度を両立
- 時間価値の可視化：単なる価格比較ではなく、"人生の時間"で判断できる設計
- 責務分離：ROI 計算ロジックを
lib/roi.ts に集約し、テスト可能な純粋関数として実装
作者
