PLAN A / 比較先行
ADOPTEDHERO → BEFORE/AFTER → SIGNS → LAYERS → PRICE → CTA
相見積もりの前に確かめたいのは「本当に落ちるのか」なので、洗い終えた部屋を約束したすぐあとに、同じ部品の洗う前と洗ったあとを自分の指で洗い流してもらう、この順を採用しました。
エアコンクリーニング アオバクリーン
分解洗浄を見せるLP と 予約・リマインド台帳
2026.09
比較サイト経由の相見積もりが前提になっている業種です。価格の勝負に持ち込まれる前に、同じ部品の洗う前と洗ったあとを自分の指で洗い流して確かめてもらい、フィルターの奥は分解しないと洗えないことを図で見せ、そのうえで1台12,000円と言い切る順番にしました。あわせて、電話の折り返しに追われていた予約受付を1つの台帳にまとめるデモを作っています。
(04) INFORMATION
MEMO
(05) DESIGN NOTE / なぜこの構成にしたか
01
この業界の集客構造
- 需要が5月から8月に寄る。梅雨明けから盆までの数週間で、年間の受注量がだいたい決まってしまう。
- 検索は「エアコンクリーニング + 市区町村名」が中心。個人店が店名で指名検索されることはまずない。
- 流入の多くが比較サイト経由。成約ごとに手数料が引かれるので、自社ページで直接受けた分がそのまま手元に残る。
- 問い合わせの引き金は価格ではなく症状。冷えない、におうと感じた当日に、同じ画面で3社ほど並べて見比べられている。
02
狙った導線
- 1行目を「深呼吸したくなる部屋へ」にした。症状ではなく洗い終えたあとの部屋を先に約束し、同じ画面に壁掛けエアコン1台12,000円(税込)の料金の行を置いて「2台目から割引」を隣に添える。最初の1画面で、結論と金額の両方が揃うようにした。
- FVの直後に、同じ部品の洗う前と洗ったあとを置いた。下へ進むと傾いた水の縁が洗浄前の写真を右から左へ洗い流し、洗浄後の写真が現れる。丸いつまみを左右に動かしても比べられる。落ちるかどうかを、説明より先に自分の指で確かめてもらう。
- 汚れのサイン6つと内部3層の断面図は、比較のあとに置いた。フィルター・アルミフィン・送風ファンのうち下の2層を「ここは分解しないと洗えません」の枠で括り、簡易清掃との差を図で示す。比較のすぐ下には洗浄風景も載せ、汚れた水を持ち帰るところまで見せる。
- 予約はトークを主、フォームと電話を副にする。作業中で電話に出られない時間帯の取りこぼしを減らす。
03
デザインの根拠
- 主色はアクアの #0E7C9E、見出しと濃い地は深い水の #063B4F。差し色はひまわりの #F6B73C で、予約ボタン、工程番号、見出しの細い下線、「必須」のバッジなど、押す場所と目印だけに使う。泥色の #7A4E2A は、洗う前の写真のラベルと汚れのサイン、断面図の汚れている層にだけ使い、料金や予約の面には出さない。
- 見出しは Zen Maru Gothic の500だけ、本文は Noto Sans JP、数字と屋号の欧文は Outfit。丸ゴシックは幼く見えやすいので、太さを1つに絞り、H1の字間を詰めて締める。料金の数字は Outfit の300で最大120px、本文は16pxを床にして行間1.9で組む。
- 章の目印は英字の小見出しではなく、丸ゴシックの和文と水滴の小さな形にした。英字は屋号と写真の BEFORE / AFTER、質問の Q と A にとどめる。ヒーローと代表の写真は水滴の形に切り抜き、PCではヒーローの角丸が12秒かけてゆっくり形を変える。スマホは写真の下端に白72%のすりガラスのカードを重ね、写真の上に文字を載せない。
- 看板は、洗う前の写真を12度傾いた水の縁が右から左へ流す演出にした。縁に沿って白と薄い水色の飛沫を canvas で描き、3行のキャプションが進みに合わせて入れ替わる。半分を越えると枠が薄く光る。動きを減らす設定やJSが無い環境では、2枚の写真を並べた静止表示に切り替える。
04
検証で捨てた案
- ヒーローの動画と、約束を流す文字の帯、金額を0から数え上げる演出。動画は水しぶきの短尺を試したが初回表示が重く、帯は読む速さを奪い、数え上げは途中の数字が本物の料金に見える。写真と、動かない1行にした。
- 「9,800円から」の下限表示と、回転させた円形の価格バッジ。下限は当日の追加請求への警戒を強め、バッジは比較の写真と目を奪い合う。1台12,000円を料金の行で言い切り、2台目から割引を隣に添えた。
- 汚れの拡大写真をFVに置く案。訴求力は強いが不快感が先に立つので、FVは作業中の写真と一文にし、拡大写真は次の章で自分の手で洗い流せる形にした。
- 比較サイトの掲載バッジ。信頼の裏付けにはなるが、そちらで予約する動機を与えてしまうので外した。
(06)
Structure 3 Plans
構成の順番だけを変えた3案を作り、最初の30秒で「うちのエアコンも落ちそうだ」と思ってもらえるのはどれかで選びました。
PLAN B / 料金先行
HERO + PRICE → BEFORE/AFTER → SIGNS → FLOW → CTA
3タイプの料金表をヒーローに重ねる案です。価格だけで並べ替えられる読まれ方になり、分解洗浄と簡易清掃の差が伝わる前に金額比較へ入られるので見送りました。
PLAN C / 人柄先行
HERO → ABOUT → FLOW → VOICE → BEFORE/AFTER → PRICE → CTA
代表の紹介と作業の流れを先に置く案です。ひとりで伺う安心感は先に出せるものの、落ちるのか・いくらなのかの結論まで2画面かかるので見送りました。
(07)
Final Design PC View
採用した案Aで組んだ最終形です。約束の一文と料金の行から入り、洗う前と洗ったあとを洗い流して見せ、サインと断面図、料金と流れを挟んで、トーク予約まで1本で下りていきます。
FIG.07 / PC版 全体スクリーンショット(枠の中を縦にスクロールできます。洗う前と洗ったあとは、動きを止めて左右に並べた状態で撮っています)
(08)
Smartphone
この業種は流入のほとんどがスマホという前提で作っています。写真の下端にすりガラスのカードを重ね、画面下には電話とトークの2つを固定しました。
FIG.08-A / FV(約束と料金)
FIG.08-B / 洗う前と洗ったあと(洗い流す前)
SP DESIGN NOTE
- 画面下に「お電話」と「トークで予約」を並べて固定した。下へ読み進めている間は隠れ、指を戻すとまた出てくる。作業中で電話がつながらない時間帯でも、もう片方に逃がせる。
- ヘッダーは店名と「予約する」のボタンだけを残して追従させ、少しスクロールしたらすりガラスに変わる。どこまで読んでいても予約の入口が切れない。
- FVは写真を上に置き、下端を水滴の丸みで切って、その上にすりガラスのカードを重ねた。写真に文字を載せないので、見出しも料金もそのまま読める。見出しは「深呼吸したくなる」と「部屋へ」の2行に固定した。
- 料金は横スクロールさせず、壁掛け・お掃除機能付き・天井埋込の3つをタブで切り替える。オプションと出張費は行で並べ、金額を右端で揃える。看板の比較は、つまみに触れたときだけ横の操作を受け付け、縦のスクロールを奪わない。
(09)
Operation Note
業務設計メモ / 予約・リマインド台帳のデモを作るまでに整理したこと。
01
現状の課題
- 予約の入口が電話・トーク・フォームに分かれ、台帳は手書きのカレンダー1冊しかない。
- 作業中は電話に出られず、日程の確認だけで折り返しの往復が発生する。不在ならさらにかけ直しになる。
- 前日の確認連絡を毎回手で打っており、繁忙期に漏れる。当日不在で空振りになる訪問がある。
- 前回いつ作業したか、どの機種だったかが手元になく、現地で聞き直している。
02
ゴール
- カレンダー・予約台帳・顧客リストを、見る場所を1画面にまとめる。
- 明日の予約者への確認連絡を、思い出さなくても数十秒で出し切れる状態にする。
- 日程の確認で発生していた折り返しの電話を減らし、作業に使える時間を増やす。
- 変更したいという返信が来たとき、空き枠を見ながらその場で日程を差し替えられるようにする。
03
打ち手
- 月間カレンダーと予約台帳、顧客リスト24名を1画面に置いた台帳を作る(デモは単一HTML)。
- 「明日の予約者に一括リマインド」を押すと、確認メッセージがトーク風の送信トレイへまとめて流れる。
- 予約の行を押すと顧客カードが開き、前回作業日と機種メモをその場で見られる。
- 返信が来た予約には印が付き、空き枠を選ぶだけで日程を差し替えられる。
04
効果試算
- 予約確認の電話の往復 ▲80% (試算)
- リマインド送信の作業 15分から1分へ（試算）
- 明日のリマインド未送信 3件から0件へ（試算）
- 前回作業日と機種の確認 現地での口頭から顧客カードへ（試算）
上記はすべて架空ブランドを前提とした試算値です。実測値ではありません。繁忙期に予約が続く週(1日3〜4件)を想定し、電話1件3分30秒・不在時のかけ直し1.4回を仮置きして算出しており、実際の数値は業務量と体制によって変わります。
(10) SELECTED WORK ↓
(01) ✶ 2026 / DINING
Sumioto
炭火焼鳥と純米 炭音 / 焼鳥・居酒屋の世界観型LP × 予約・問い合わせAIチャット