PLAN A / 総額先出し
ADOPTEDHERO → PAIN → STOCK → MAINT → PRICE → TRADE-IN → RESERVE
値札の意味を先に定義してから在庫に入るので、他店の本体価格と見比べている最中でも金額の話が最後まで崩れません。この順を採用しました。
中古車販売・整備 ツグミオート
総額表示のLP と 車検リマインドCRM
2026.08
中古車で最も不信を生むのは、表示価格と最終金額のズレです。そこを一撃で潰すために、値札を乗り出しの総額で書き、納車前整備の中身と修復歴を先に出す構成にしました。あわせて、紙の台帳にしかなかった車検の満了日を並べ替えて、掘り起こしのDMまで下書きするデモを作っています。
(04) INFORMATION
MEMO
(05) DESIGN NOTE / なぜこの構成にしたか
01
この業界の集客構造
- 在庫は大手のポータルサイト経由で見られるのが前提。掲載料と成約手数料がかかり、同じ条件で全国の在庫と横並びに比べられる。
- ポータルの初期表示は車両本体価格の安い順。本体を安く見せて諸費用で戻す店ほど上に来るため、総額で正直に書くと不利になる並びになっている。
- 検索語は「車種名 + 中古」と「中古車 + 市区町村名」が中心。店名の指名検索はほぼ起きず、来店前に3店から5店を比べられている。
- 商圏は車で30分から60分。販売だけを見ると全国が相手だが、車検と整備の入庫まで数えると近隣客のほうが生涯の取引額が大きい。
02
狙った導線
- FVで「乗り出しの総額から、車を選べる店。」と言い切る。ポータルで本体価格だけを見てきた人に、価格の意味の違いを最初の画面で気づかせる。
- 悩み共感の4点で、表示価格とのズレ・諸費用・状態の分からなさ・下取り額の分からなさを言語化してから在庫へ送る。
- 在庫8台はボディ・総額・走行距離の絞り込みと4種の並び替えを付けた。ポータルと同じ操作感のまま、表示だけが総額に変わる。
- 総額108万円の内訳を1台ぶん全部出し、下取りの概算で予算のあたりを付けさせてから来店予約と電話に落とす。
03
デザインの根拠
- 帯色はガンメタ #2E3238。展示場の車体と工具の色で、値引きを煽る赤や黄色を使わずに「自社工場を持つ店」の質感を出せるため選んだ。
- 差し色はシルバー #C8CCD2 だけ。価格は色で目立たせず、桁の大きさで読ませる。在庫カードの総額だけを本文の2倍強(16px→36px)まで上げた。
- 在庫カードは総額を最大サイズ、車両本体と諸費用の内訳をその直下に小さく置く。1枚の中で価格の話が完結する。
- 在庫8台の車両写真は、同じアングル・同じ曇天の光の生成画像でそろえた。撮り方が統一されているだけで、寄せ集めではなく店の在庫台帳に見える。
- 内訳表と保証表は表だけを横スクロールできる枠に入れ、最小幅430pxを確保。数字が折り返して桁を読み違えることを防ぐ。
04
検証で捨てた案
- 「支払総額 39万円から」の下限表示。ポータルの並びに合わせる案だったが、総額で書くという主張と噛み合わないので1台ごとの総額表記に戻した。
- 在庫の無限スクロール。8台では読み込みの間が無駄になり、絞り込んだ結果の件数も読めなくなるため、全件表示と件数カウンタに変えた。
- 来店予約フォームを3項目まで削る案。希望車種と来店希望日を取らないと試乗車の準備ができず、当日に店側の手間が増えるので戻した。
- ヒーローの走行動画。夕方の幹線道路のカットを試したが、在庫を見に来た人の目的とずれるうえ初回表示が重い。展示場の静止画に戻した。
(06)
Structure 3 Plans
構成の順番だけを変えた3案を作り、表示価格への疑いを最初の30秒で消せるのはどれかで選びました。
PLAN B / 在庫先行
HERO → STOCK → PRICE → TRUST → TRADE-IN → RESERVE
ポータルと同じ見え方になり、総額で書いている強みが伝わる前に金額の比較へ流れてしまうので見送りました。
PLAN C / 整備先行
HERO → SHOP/STAFF → MAINT → STOCK → PRICE → FAQ → RESERVE
整備体制から入る案です。店の姿勢は伝わるものの、在庫と金額に届くまで2画面かかり、比較の途中で離れる人を止められないので見送りました。
(07)
Final Design PC View
採用した案Aで組んだ最終形です。総額の定義から在庫、内訳、下取り、来店予約まで1本でつながります。
FIG.07 / PC版 全体スクリーンショット(枠の中をスクロールできます)
(08)
Smartphone
在庫はスマホで見られます。片手で絞り込めることと、桁を読み違えないことを優先しました。
FIG.08-A / FVと固定CTA
FIG.08-B / 守る3つのこと
SP DESIGN NOTE
- 画面下に「電話で聞く」と「来店予約」の2ボタンを固定。1060px以下で出し、本文の下に74pxの余白を足して最後の行が隠れないようにした。
- 在庫カードは1列に落とし、絞り込みのチップは折り返して並べる。ラベルだけを行頭に落とすので、横スクロールは起きない。
- 総額の内訳表と保証表は、表だけを横に流せる枠に入れた。最小幅430pxを確保して、金額の桁が折り返さないようにしている。
- 電話番号はタップで発信。ヘッダーの電話は1060px以下で隠し、固定バーの側に1本化して押し間違いを減らした。
(09)
Operation Note
業務設計メモ / 車検・点検リマインドCRMのデモを作るまでに整理したこと。
01
現状の課題
- 車検の満了日は車検証の控えと紙の台帳にしかなく、誰がいつ満了になるかを月初に手で書き出している。
- 満了の2か月前に案内を出したいが、対象を拾う作業に時間がかかり、結局30日を切ってから慌てて電話している。
- 掘り起こしのDMは毎回ゼロから書いている。宛名・車種・満了日の差し込みも手作業で、書き間違いが起きる。
- 誰に送ったかの記録が残らず、同じ人に二重で送ったり、送り漏れたまま満了日を過ぎたりする。
02
ゴール
- 車検の満了日が近い順に顧客が並んだ画面を1つ持ち、月初の書き出しをなくす。
- 30日以内と60日以内を色で分け、いま連絡すべき相手がひと目で分かる状態にする。
- DMは下書きが出てくる状態にして、担当者の作業を「直す」と「選ぶ」だけに寄せる。
- 送信の状態を1か所に残し、二重送信と送り漏れを止める。
03
打ち手
- 顧客16名を車検満了日の近い順に並べたCRM画面を作る(デモは単一HTML)。基準日からの残り日数を計算して並べ替える。
- 30日以内を赤、31日から60日を黄で分け、件数を画面上部の4枚のカードに出す。名前・車種・ナンバーの検索と未対応の絞り込みも付けた。
- 顧客を1人選ぶと、宛名・車種・車検満了日が差し込まれたDM文面が下書きされる。ていねいとカジュアルの2トーンを切り替えられる。
- 文面はその場で直せて、コピーと「送信予定に登録」で送信ログに残る。誰にどのトーンで送ったかが後から追える。
04
効果試算
- 掘り起こしDM 15件の作成 2時間 → 10分 (試算)
- 満了日リストの書き出し 月60分 → 常時表示 (試算)
- 二重送信と送り漏れ 月3件 → 月0.2件 (試算)
- 案内を出せる時期 満了30日前 → 満了60日前 (試算)
上記はすべて架空ブランドを前提とした試算値です。実測値ではありません。実際の数値は業務量と体制によって変わります。
(10) SELECTED WORK ↓
WORK 05 ✶ 2026 / SALON
orihi
ヘアサロン / 自社予約に寄せたLP × 予約管理と顧客カルテ