はじめに

タイムズカーシェアとタイムズレンタカーの料金を比較できるWebアプリを作りました。

使用技術

Lovable（AI支援型Web開発プラットフォーム）
React
Tailwind CSS
Recharts

開発時間: 数時間（要件定義含む）

作った理由

旅行のたびに「カーシェアとレンタカー、どっちが安いんだろう？」と計算していました。徹底的に比較してみたところ、意外な結果が出ました。

損益分岐点の計算結果（日帰り12時間）

車種	損益分岐点
コンパクトカー	136km
コンパクトミニバン	244km
ミニバン	1,249km

ミニバンは実質カーシェア一択。毎回計算するのが面倒なので、ツール化することにしました。

Lovableとは

プロンプトを渡すだけでReactアプリを生成してくれるサービスです。

要件定義をしっかり書く
プロンプトとして投入
生成されたコードを微調整

という流れで開発できます。

開発手順

1. 要件定義書を作成

最も重要なのはここです。Lovableの精度は要件定義の質に依存します。

入力項目

車種（コンパクト/コンパクトミニバン/ミニバン）
利用時間（1〜240時間）
走行距離（0〜3,000km）
給油・洗車の有無（チェックボックス）

出力項目

カーシェア料金（内訳付き）
レンタカー料金（内訳付き）
比較結果（どちらが安いか、差額、節約率）
損益分岐点
グラフ（料金変化の可視化）

料金データの整理

タイムズカーシェアとタイムズレンタカーの料金体系を、Lovableに渡す形式で整理しました。

以下の金額は説明用のサンプルであり、実際の価格とは異なります。実際のツールでは正確な料金データを使用しています。

{
  "carshare": {
    "compact": {
      "6h": 3300,
      "12h": 5500,
      "24h": 7700,
      "hourly": 550
    }
  },
  "rental": {
    "compact": {
      "6h": 4554,
      "12h": 6072,
      "24h": 7084,
      "additionalDay": 6336,
      "additionalHour": 844
    }
  }
}

計算ロジックの定義

カーシェアの料金計算:

利用時間に応じた最適パックを選択
距離料金: 20円/km
給油・洗車割引あり

レンタカーの料金計算:

時間帯別の基本料金
ガソリン代: (走行距離 ÷ 燃費) × ガソリン価格

距離単価や給油・洗車割引額も、上記は説明用のサンプルです。

2. プロンプトを作成

要件定義書をベースに、Lovable向けのプロンプトを作成しました。

プロンプトの構成

アプリの概要
機能要件
入力項目の仕様
出力項目の仕様
料金データ
計算ロジックの説明
デザイン要件

ポイントは具体的に書くことです。

「見やすく」ではなく「黄色と黒を中心に、アクセントで薄いオレンジを使う」
「わかりやすく」ではなく「『カーシェアの方が○○円（○%）安い！』と明示」

3. Lovableに投入

プロンプトをLovableに投げると、数分でReactアプリが生成されます。

初回でほぼ動くものができました。

4. 微調整

生成されたコードを確認し、以下を調整:

グラフ機能の追加

時間固定・距離可変モード

距離固定・時間可変モード

この2つのモードを追加することで、料金の変化を視覚的に確認できるようにしました。

レスポンシブ対応

モバイルでも使いやすいように調整
Tailwind CSSで実装

エッジケースの処理

入力値の上限・下限チェック
非現実的な値の警告表示

5. デプロイ

Lovableは自動でデプロイされるので、特別な作業は不要です。

実装のポイント

料金計算ロジック

最大時間料金の判定

タイムズカーシェアは「最大時間料金」方式です。利用時間に応じて適用される上限料金が変わります。

例: コンパクトカー

6時間まで → 上限あり
12時間まで → 上限あり
24時間まで → 上限あり

この段階的な料金体系を正確に実装する必要がありました。

ガソリン代の算出

車種ごとの実燃費を設定:

コンパクトカー: 18km/L
コンパクトミニバン: 14km/L
ミニバン: 11km/L

ガソリン価格（145円/L）と掛け合わせて計算します。

UI/UX設計

失敗から学んだこと

❌ 失敗1: 出発地・目的地を選択させる方式
→ 面倒なので、走行距離を直接入力に変更

❌ 失敗2: 金額だけを並べて表示
→ 「どちらが○○円安い」と明示

❌ 失敗3: 「損益分岐点: 123km」と表示
→ 「あと50km走ると逆転」と相対表示

✅ 成功: グラフでの可視化

特に「距離固定・時間可変モード」が便利です。レンタカーの段階的な料金上昇と、カーシェアの線形上昇（上限あり）の違いが一目でわかります。

必要最小限に絞る

当初は以下の機能も検討しました:

出発地選択
高速料金の詳細計算
複数プランの同時比較

しかし、必要最小限の入力で欲しい情報が得られることを優先し、削りました。

結果、シンプルで使いやすいツールになったと思います。

Lovableを使ってみた感想

メリット

開発スピードが圧倒的に速い
- プロジェクトセットアップ不要
- UI実装の時間を大幅削減
- デプロイまで自動
要件定義に集中できる
- 「何を作るか」を考える時間を多く取れる
- 実装の細かい部分はAIに任せられる
コードの品質が安定
- React/Tailwind のベストプラクティスに沿っている
- レスポンシブ対応も自動

デメリット・注意点

要件定義が甘いと精度が落ちる
- 曖昧な指示では期待通りにならない
- 具体的に書く必要がある
複雑なロジックは調整が必要
- 料金計算の細かい条件分岐などは微調整した
カスタマイズの自由度
- 生成されたコードを直接編集できるので問題なし

まとめ

Lovableを使うことで、要件定義→実装→デプロイまでを数時間で完了できました。

特に重要だったのは:

要件定義をしっかり作る（具体的に）
必要最小限に絞る（機能を欲張らない）
問題を深く理解してから実装する（分析→ツール化の順）

「日常の小さな疑問」をツール化するには、Lovableのようなサービスが最適だと感じました。

完成品

Lovable

こうした技術選定や要件定義のプロセスについて、エンジニア向けにもう少し整理して書いています。興味があれば、こちらにまとめています。