【Lovable】カーシェアvsレンタカー料金比較ツールを数時間で作った手順

はじめに

タイムズカーシェアとタイムズレンタカーの料金を比較できる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向けのプロンプトを作成しました。

プロンプトの構成

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

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

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

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を使うことで、要件定義→実装→デプロイまでを数時間で完了できました。

特に重要だったのは:

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

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

完成品

Lovable

---

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