はじめまして。普段はフロントエンドエンジニアとして働いてます、megrismです。

今回は、銀行や大手メディアがひしめくレッドオーシャンなジャンルである「車のローン計算機」に、あえて個人開発で挑んでみた話を共有します。

「勝てるの？」と聞かれると怪しいですが...「技術的SEO（App Router）でどこまで戦えるか」「コンテキスト（文脈）を意識した広告実装で収益化できるか」という実験も兼ねています。

作ったもの

MY CAR CALC｜維持費もわかるマイカーローン計算機
https://my-car-calc.com

特徴

入力は3つだけ：車両価格、頭金、地域。これだけで計算開始。
維持費も合算：ローンだけでなく、ガソリン・税金・保険・車検代を含めた「リアルな月額」を算出。
スマホ最適化：ベッドで寝転がりながら親指だけで完結するUI。

1. なぜこれを作ったのか？

① 自身の「車購入検討」がきっかけ

私自身が車の購入を検討している真っ最中でして...
ふと気づいたことが以下の3点です。

どこも『ローンの返済額』しか載っていない
維持費のシミュレーターデザインが少しレガシー
入力項目が多くて面倒

「もっとシュッとしたUIで、面倒な入力なしで、維持費込みの数字を表示するツール」 が欲しかったので、自分で作ることにしました。

② SEOと収益化の実験

競合が強いジャンルですが、「Next.js App RouterのSEO機能をフル活用したら、個人のドメインでも検索上位に行けるのか？」 を試してみたかったのもあります。

2. 技術スタック

Framework: Next.js 15 (App Router)
UI Library: Chakra UI v3
Language: TypeScript
Hosting: Vercel
Domain: Xserverドメイン

3. こだわったUI/UX

面倒な入力を無くす事を目指しました。

① 入力の「摩擦」を極限まで減らす SmartInput

スマホで数値入力する時に一々0を消して入力するのがめんどくさいのでSmartInput コンポーネントを実装しました。

components/ui/SmartInput.tsx

"use client";

import { Input, type InputProps } from "@chakra-ui/react";

export const SmartInput = (props: InputProps) => {
  return (
    <Input
      {...props}
      type="number"
      inputMode="numeric" // スマホで数字キーボードを強制
      pattern="[0-9]*"
      onFocus={(e) => {
        // ✨ ここがポイント: タップした瞬間に中身を全選択状態にする
        e.target.select();
        props.onFocus?.(e);
      }}
      // ... デザイン設定
    />
  );
};

たったこれだけですが、「タップ → 即入力」が可能になり、体験が良くなりました。

② あえて待たせる UX

計算ロジック自体は単純なので、本来はボタンを押した瞬間に 0.01秒で結果が出ます。でも、あえて2.5秒間「計算中...」というローディング演出を挟んで待たせるようにしました。

一瞬で結果が出ると「これ本当にちゃんと計算した？」とチープに感じてしまうそうです。逆に、少し待たせることで結果に対する信頼度や満足度が上がる心理効果を狙っています。
Labor Illusion（労働の錯覚）と言うらしいですよ。

4. 収益化の戦略

ただASPのバナーを貼るだけでは、まずクリックされないだろうと考えました。

そこで今回は、「ユーザーの悩みに対する『解決策』として広告を提示する」設計にしました。

具体的なロジック

計算結果の「内訳」において、特定のコストが高いと感じたユーザーが詳細を開いたタイミングで、そのコストを下げるサービスを提案します。

「車検代、高いな...」と思った人 → 「楽天Car車検（ポイント還元で安くなる）」を提示

「駐車場代、バカにならない...」と思った人 → 「akippa（格安駐車場シェア）」を提示

技術的な実装

ASPから取得したimgタグをそのまま貼るのではなく、アプリのデザインに馴染むネイティブ広告風のコンポーネント (AdCard) を自作しました。


// 駐車場代のアドバイス内での実装例
<Box>
  <Text>月極駐車場は高いですが、シェアサービスなら安く済む場合があります。</Text>
  
  {/* ただのバナーではなく、アプリの機能の一部として見せる */}
  <AdCard
    title="akippa - 駐車場予約"
    description="月極より安い！スマホで簡単予約できる駐車場シェアサービス"
    ctaText="近くの駐車場を探す" // "広告を見る"ではなく具体的なアクション
    imageUrl={parkingAdImage}
    onClick={() => window.open(affiliateUrl)}
    badges={["節約テクニック"]}
  />
</Box>

このように、「広告（邪魔なもの）」を「機能（役に立つもの）」に変換してデザインすることで、クリック率の向上を狙っています。

5. SEO対策でやったこと

Googleに好かれるために、App Routerの機能をフル活用しています。

プログラマティックSEO:

車種データ（JSON）から generateStaticParams で大量のLPを静的生成。

「N-BOX 維持費」「ハリアーローン」などのロングテールキーワードを狙い撃ちします。

動的メタデータ:

generateMetadata を使い、ページごとに最適な title と description を注入。

構造化データ (JSON-LD):

Googleに「これは計算ツール（SoftwareApplication）ですよ」と認識させるマークアップを記述。

6. 今後の展望

AIコーディングツールを活用したおかげで、開発自体は爆速で終わりました。

これからはエンジニアリングというより、マーケターとして動いてみます。

SNSでの発信: X(Twitter)やNoteで開発背景を発信して、初期ユーザーを集める。
1年間の長期観測: 検索順位がどう変動するか、放置でどのくらい収益が発生するかをゆるく観察する。
他の開発: 初めての個人開発になるので、とにかく早く公開することを優先しました。今後は課金要素などを含めたアプリケーションも開発していきたいと考えてます。

個人開発は「作って満足」になりがちですが、今回は「使ってもらう」「お小遣いを稼ぐ」ところまで、やってみようと思います。

最後まで読んでいただきありがとうございました。