Works — Web service

MINT CARS

全国の中古車販売・車買取・廃車買取の店舗を、都道府県と都市ごとに比較できるランキングサイト。企画から開発・運営まで手がけています。

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Supabase
  • Stripe
  • Vercel

Tech stack

技術スタック

フレームワーク
  • Next.js 16App Router。Server Components を基本に、必要な部分だけクライアント化
  • React 19React Compiler 有効（手動のメモ化を書かない）
言語
  • TypeScriptstrict 設定
スタイル
  • Tailwind CSS v4意味ベースの色トークンでライト／ダークモードに対応
  • Geistnext/font で最適化して読み込み
ホスティング
  • VercelGitHub 連携の自動デプロイ。Vercel Cron で定期バッチ
データベース / 認証
  • SupabasePostgreSQL・Auth・Storage。東京リージョン
  • Row Level Securityデータごとに公開範囲を DB 側で制御
決済
  • Stripeカード登録（SetupIntent）と月次の自動課金
メール
  • Resend認証メール・お問い合わせの送受信
地図
  • MapLibre GL JSオープンソースの地図ライブラリ
  • 国土地理院タイル従量課金のある地図 API を使わない
外部データ
  • Google Places API (New)掲載候補ショップの初期データ投入（無料枠内）
  • World Bank Commodity Price Data地金相場（CC BY 4.0）
  • Frankfurter API為替レート（円換算）
アクセス解析
  • Google Analytics 4検索・エリア選択・問い合わせをカスタムイベントで計測
CMS
  • 自作汎用 CMS を使わず、管理画面を内製

Architecture

システム構成

ページが表示されるまで
  1. Visitorエリアを選んでアクセス/used/都道府県/都市/ のランキングページ
  2. Vercel静的生成したページを配信Next.js の App Router。約 500 ページを事前生成
  3. Supabase店舗・ランキングのデータPostgreSQL（東京）。公開範囲は Row Level Security で制御
  4. MapLibre地図に店舗を表示国土地理院タイル＋座標データ
掲載ショップの登録から課金まで
  1. Supabase Authアカウント登録メール認証は Resend から送信
  2. Stripeカードを登録SetupIntent でカード情報は Stripe 側に保持
  3. Server Actions掲載枠に入札バリデーションと業務ロジックはサーバー側
  4. Vercel Cron月次で締め・課金当選結果を確定し、登録済みのカードに自動課金

Decisions

なぜ、この構成にしたのか

  1. 01

    全国約 500 ページを、静的生成で速く

    「カテゴリ → 都道府県 → 都市」の 3 階層で、全国のランキングページを作っています。ページの組み合わせは事前に決まるため、Next.js の generateStaticParams で静的に生成し、毎回サーバーで描画するコストと待ち時間をなくしています。

  2. 02

    URL は「サービス → 地域」の順

    ユーザーが最初に決めるのは「中古車を売りたいか、廃車を売りたいか」です。そのため /used/hokkaido/sapporo/ のようにカテゴリを最上位に置きました。SUUMO などの縦型ポータルと同じ定石で、検索意図ごとにページの中身も特化させやすくなります。

  3. 03

    Server Components を基本にする

    データ取得はサーバー側で完結させ、ブラウザに送る JavaScript を最小限に。入札やフォーム送信などの書き込みは Server Actions で受け、業務ロジックとバリデーションはすべてサーバー側に置いています。

  4. 04

    地図に従量課金の API を使わない

    Google Maps API はアクセスが増えるほど費用が膨らみます。MapLibre GL JS と国土地理院のタイル、事前に用意した座標データを組み合わせ、地図表示のランニングコストをゼロにしました。

  5. 05

    データベースは Supabase（東京リージョン）

    PostgreSQL・認証・ストレージがひとつにまとまり、Row Level Security でデータの公開範囲を DB 側で守れます。利用者が国内に集中するため、リージョンは東京を選びました。

  6. 06

    検索に強い構造化データとキーワード設計

    都道府県・都市・カテゴリごとにタイトル・説明文・JSON-LD を動的に生成しています。よくある質問などの文章も、構造化データ用のプレーンテキストを保ったまま、画面上では重要なキーワードを強調表示しています。

Numbers

数字で見る MINT CARS

対象ページ数
約500
対象エリア
158
初期掲載データ
5,342件
地図の月額費用
0円

※ 2026 年 9 月時点の値です。

Visit

mintcars.jp ↗