PLAN A / 在庫先行
ADOPTEDHERO → STOCK → PAIN → PROMISE → MAINT → PRICE → TRADE-IN → RESERVE
FVの一文とメーター「総額表示 100%」で値札の意味を先に定めてから、ボタン「在庫8台を見る」の直後に在庫を置きます。8台は横に流れるので1画面で済み、車を見た直後に話が止まる理由と店の約束を読ませられます。この順を採用しました。
中古車販売・整備 ツグミオート
総額表示のLP と 車検リマインドCRM
2026.09
中古車で最も不信を生むのは、表示価格と最終金額のズレです。そこを先に片づけるために、閉店後のショールームでヘッドライトが点く場面から始め、値札を乗り出しの総額で書き、納車前整備の中身と修復歴を先に出す構成にしました。あわせて、紙の台帳にしかなかった車検の満了日を並べ替えて、掘り起こしのDMまで下書きするデモを作っています。
(04) INFORMATION
MEMO
(05) DESIGN NOTE / なぜこの構成にしたか
01
この業界の集客構造
- 在庫は大手のポータルサイト経由で見られるのが前提。掲載料と成約手数料がかかり、同じ条件で全国の在庫と横並びに比べられる。
- ポータルの初期表示は車両本体価格の安い順。本体を安く見せて諸費用で戻す店ほど上に来るため、総額で正直に書くと不利になる並びになっている。
- 検索語は「車種名 + 中古」と「中古車 + 市区町村名」が中心。店名の指名検索はほぼ起きず、来店前に3店から5店を比べられている。
- 商圏は車で30分から60分。販売だけを見ると全国が相手だが、車検と整備の入庫まで数えると近隣客のほうが生涯の取引額が大きい。
02
狙った導線
- FVは閉店後のショールームで、ヘッドライトの光が見出し「この一台と、次の毎日」の上を左から右へ渡り、通った所から文字が現れる。値札の話は見出しに持たせず、その下の一文「諸費用と納車前整備を含めた総額で、ご案内します。」と、FVの下端に並ぶメーター「総額表示 100%」で言い切る。
- FVのボタン「在庫8台を見る」の直後に在庫を置き、車を見た人にだけ「話が止まる、よくある理由」を読ませる。表示価格とのズレ・諸費用・状態の分からなさ・下取り額の分からなさを言語化してから、「全車・全件、同じ約束」に受ける。
- 在庫8台はボディタイプ・支払総額・走行距離の絞り込みと4種の並び替えを付けた。PCでは画面を止めてカードが横に流れ、スマホは指で1枚ずつ送る。ポータルと同じ操作感のまま、表示だけが総額に変わる。
- 総額108万円の内訳は6行を上から順に出し、最後の支払総額だけがランプ色に点く。下取りの概算で予算のあたりを付けさせてから来店予約と電話に落とす。
03
デザインの根拠
- 地は無彩の黒 #08090B とグラファイト #1C1F23。閉店後のショールームの床と車体の色で、この上に置くのは写真の光と文字だけにした。紺と金は使わない。暗い区間が続かないよう、話が止まる理由・整備と保証・購入の流れ・質問の4章だけ #EEF0F3 の明るい地に切り替えた。
- 差し色はボルドー #8E1F32 とランプ色 #FFF1D6 の2つ。ボルドーは主ボタン・「総額」のピル・選択中の絞り込みチップ・警告ランプに限り、ランプ色の大きな数字は内訳の支払総額 1,080,000円 の1か所だけにした。在庫カードの総額はクロームのまま、Michroma で本文の2倍以上(34から46px)にして桁で読ませる。
- 見出しは Noto Serif JP の600、本文は IBM Plex Sans JP。価格・年式・英字ラベルだけ Michroma。見出しとロゴには #7A838D から #F4F6F8 に抜ける金属のグラデーションを文字の形に切り抜いてクロームに見せ、面には塗らない。
- 看板の演出はヘッドライト・スイープ。楕円の光だまりが文字の上を左から右へ渡り、通った所から文字が現れる。走るのはFVの見出し・内訳の支払総額・予約の見出しの3回だけで、幕開けは写真のヘッドライトの位置でランプが点いてから明かりが上がる。動かすのは transform・opacity・clip-path に限った。
- スマホは9:16の写真を全面に敷き、見出しを上、一文とボタンを下に置く。写真は素で見せ、文字の裏だけに濃さ0.52までの影を敷いた。在庫カードは幅84vwで横に並べて指で送り、上端1pxの金属の光でグラファイトの面から浮かせた。
04
検証で捨てた案
- 「支払総額 39万円から」の下限表示。ポータルの並びに合わせる案だったが、総額で書くという主張と噛み合わないので1台ごとの総額表記に戻した。
- 金額を0から数え上げる演出。内訳の7行と在庫カードの価格に入れる予定だったが、途中の数字が本物の料金に見える瞬間ができるので外した。数えるのはFV下のメーター3つだけにし、内訳は行が順に現れて最後に支払総額が点く形に変えた。
- 来店予約フォームを3項目まで削る案。希望車種と来店希望日を取らないと試乗車の準備ができず、当日に店側の手間が増えるので戻した。
- ヒーローの走行動画。夕方の幹線道路のカットを試したが、在庫を見に来た人の目的とずれるうえ初回表示が重い。閉店後のショールームの静止画に替え、光の動きはCSSで作った。
(06)
Structure 3 Plans
構成の順番だけを変えた3案を作り、表示価格への疑いを最初の30秒で消せるのはどれかで選びました。
PLAN B / 金額連続
HERO → STOCK → PRICE → PROMISE → TRADE-IN → RESERVE
在庫を縦に積むとスマホで6画面近くになり、その直後に内訳の表が続きます。金額の話ばかりが3画面以上続いて、店の姿勢を語る理由と約束が後ろに追いやられるので見送りました。
PLAN C / 整備先行
HERO → SHOP/STAFF → MAINT → STOCK → PRICE → FAQ → RESERVE
整備体制から入る案です。店の姿勢は伝わるものの、在庫と金額に届くまで2画面かかり、比較の途中で離れる人を止められないので見送りました。
(07)
Final Design PC View
採用した案Aで組んだ最終形です。夜のショールームから在庫、話が止まる理由、店の約束、総額の内訳、下取り、来店予約まで、黒の地に明るい章を4つ挟んで1本でつながります。
FIG.07 / PC版 全体スクリーンショット(枠の中をスクロールできます)
(08)
Smartphone
在庫はスマホで見られます。写真を全面に敷いたFVと、片手で絞り込んで指で送れる在庫を優先しました。
FIG.08-A / 全面写真のFV
FIG.08-B / 在庫一覧(絞り込み)と固定CTA
SP DESIGN NOTE
- 画面下に「電話で相談する」と「来店予約」の2ボタンを固定。1023px以下で、FVを6割スクロールしてから出す。押した瞬間だけランプ色に光らせ、最後の行が隠れないよう末尾に84pxとセーフエリアぶんの余白を足した。
- 在庫カードは幅84vwで横に並べ、指で1枚ずつ送る。次のカードが右に少し覗き、「一覧で見る」を押すと縦に積み替わる。絞り込みのチップは項目ごとに1行にして横に流し、ラベルはその上に置いた。
- 保証プランの表は767px以下で3枚の縦積みカードに、下取りの参考表は名前と金額を1段目、レンジのバーを2段目に組み替えた。数字は横に流さず、折り返しもさせない。
- 電話のボタンは制作デモのため発信せず、押すと「電話はつながりません」と案内して予約フォームへ誘う。ヘッダーの「電話で相談する」は1279px以下で隠し、固定バーの同じボタンに1本化した。見出しは車体の反射に重なるので、767px以下では字の縁にだけ薄い影を落として読ませる。
(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 ↓
(06) ✶ 2026 / CLEANING
Aoba Clean
エアコンクリーニングの個人店 / Before/After主役のLP × 予約・リマインド台帳