美容室の初回来店LPは値引きクーポンなしで作れる｜所要時間・料金・来店の流れを先に見せる構成と、予約ボタンを押した人には出さない離脱ポップアップ、計測の置き方
美容室の初回来店LPは値引きクーポンなしで作れる｜所要時間・料金・来店の流れを先に見せる構成と、予約ボタンを押した人には出さない離脱ポップアップ、計測の置き方
広告の着地先として、初めてのお客様向けのLP（広告から着地させる1枚のページ）を作りたい。けれど、初回割引はやりたくない。値引きをしない方針の美容室でも、初回来店向けのLPは値引きクーポンなしで組み立てられます。
設計の軸は、初めての人の「よく分からない」を予約ボタンの手前で消しておくことです。具体的には、次の3点を事実で、ページの上のほうに見せます。
- 時間：仕上がりまで何分かかるか
- 料金：自分が受けるメニューがいくらか（追加料金の条件も含めて）
- 当日の流れ：店に入ってから帰るまで、何が起きるか
そのうえで、予約ボタンは画面から消えないように置き、ページを閉じかけた人には「割引」ではなく「空き状況を見るだけでOK」と声をかけます。予約ボタンのクリックは、どのボタンがどこで押されたかまで計測できるようにしておきます。
この記事では、郊外にある白髪染め専門サロンの初回来店LPを設計した実例をもとに、構成・ポップアップの条件・計測の置き方を順にまとめます。このLPは執筆時点で公開前のため、成果の数字ではなく「なぜこう作ったか」という設計の判断に絞って書いています。
値引きなしで初回の予約を取りにいく考え方
初回クーポンは、予約の後押しとしては分かりやすい手段です。ただ、値引きをしない店がLPのためだけに割引を作ると、次のようなことが起きやすくなります。
- 2回目以降の通常料金との差が、そのまま「高くなった」という印象になる
- 割引の条件（初回のみ・期間・対象メニュー）を説明する文が増え、ページが読みにくくなる
- 予約サイトや店頭の料金表と、LPの料金が食い違うリスクが増える
値引きの代わりにLPに持たせる役割は、初めての人が予約前に抱く疑問を先回りして答えておくことです。今回の実例では、ファーストビュー（最初に見える画面）に金色のバッジを3つ置き、「仕上がりまでの所要時間（約60分）」「根元染めの料金」「使っているカラーの種類」を並べました。
「初回◯%オフ」のような売り文句は入れていません。バッジに書くのは、店頭の料金表や予約サイトで同じ内容を確かめられる情報だけにするのが基本です。
初回来店LPの構成（上から順に）
実例のLPは、スマホで縦1列に読む前提で、次の順番に並べました。
| 順番 | セクション | 役割 |
|---|---|---|
| 1 | ヒーロー（最初の画面） | 何の店か・バッジ3つ・予約ボタン |
| 2 | お悩み | 「自分のことだ」と思ってもらう入口 |
| 3 | 選ばれる理由3つ | 店のやり方を3点に絞って説明する |
| 4 | 数値の帯 | 所要時間・料金など、事実の数字だけ |
| 5 | 仕上がり例 | 施術前後の写真 |
| 6 | 予約ボタン | ここで1回目の決断を促す |
| 7 | 料金＋メニュー診断 | 料金とオプションの一覧。迷う人向けに2問の診断を小窓で開ける |
| 8 | 来店の流れ | 入店から退店までを工程ごとに |
| 9 | お客様の声 | 出典を明記したものだけ |
| 10 | よくある質問 | 予約前に出る疑問を先に答える |
| 11 | アクセス | 地図・駐車場 |
| 12 | 最終の予約ボタン | WEB予約・LINE・電話の3つ |
順番で大事にしたのは、料金より前に「理由」と「仕上がり例」を置き、料金のすぐ後に「メニュー診断」と「来店の流れ」を置くことです。料金を見た人が次に考えるのは「自分はどのメニューを選べばいいのか」「当日どうなるのか」だと想定し、その答えを料金の近くに用意しました。
料金の中に「メニュー診断」を置く
メニュー名だけ並んでいても、初めての人には根元染めと全体染めのどちらを選べばいいか判断しにくいものです。そこで料金セクションの中に「根元染め？全体染め？」と問いかけるボタンを置き、モーダル（画面の上に重ねて開く小窓）で小さな診断を開けるようにしました。
質問は2つです。まず「前回染めてから2か月以内か」。続けて「毛先の色あせ」または「髪や頭皮の悩み」が気になるか。答えると、根元染め・全体染め・全体染めにクレンジングとトリートメントを組み合わせたメニューの3通りから、おすすめと料金が出ます。
診断は予約を取るための仕掛けではなく、予約画面でメニューを選ぶときに迷わないための下準備です。結果の画面には「このメニューで空きを見る」ボタンを置き、「迷ったらご来店時のカウンセリングで変更できます」と添えています。
「来店の流れ」で一般的な美容室と違う点を先に書く
専門店や新しい形態の店は、一般的な美容室と当日の流れが違うことがあります。実例の店は、店頭に掲示している「かんたんなシステム」の流れをもとに、WEB予約から受付・カウンセリング・カラーリング・シャンプー・仕上げとお会計までを工程ごとに載せ、仕上げを自分で乾かす方式（セルフドライ）であることも、この流れの中ではっきり書きました。
来店してから「思っていたのと違う」とならないよう、一般的な美容室と違う点は隠さず、予約前に読める場所に書く。これがこのセクションの設計意図です。
お客様の声は出典を書き、別の店舗の声を混ぜない
多店舗の本部が作るLPでは、店舗をまたいで共通の素材を使うことがあります。施術例の写真は「店舗での施術例」と書けば共通素材でも誤解を生みにくいのですが、お客様の声は、どの店舗の、どこに寄せられた声なのかを必ず書きます。別の店舗の声を載せる場合はその旨を明記し、公開までに着地させる店舗自身の声へ差し替えるのが基本です。
声を載せるときは、言い換えや要約をせず原文のまま使います。お店の側で声を書き足したり、誰かが言ったように読める文を作ったりもしません。
予約ボタンは「消えない」ように置く
広告から来た人は、ページを上から順に全部読むとは限りません。どこで「予約しよう」と思っても押せるよう、画面下に固定の予約バー（WEB予約・LINE・電話）を置きました。ただし、常に出しっぱなしにはしていません。
- 最初の画面の予約ボタンが見えている間は、固定バーを隠す（ボタンが二重に見えないように）
- 最初の画面を過ぎて予約ボタンが見えなくなったら、固定バーを出す
- ページ最後の予約セクションが見えている間は、また隠す
これはブラウザの「IntersectionObserver（要素が画面に入ったかを知らせる仕組み）」で、ヒーローのボタンと最終セクションの2か所を見張るだけで作れます。
パソコンで見た場合は、スマホ用の縦1列（幅480px）を画面の中央に置き、左右の余白にブランドの説明と予約の小さな箱を出す形にしました。広告LPなので、サイト上部のメニュー（ナビゲーション）は置かず、ページの外へ移る道を減らしています。スマホのボタン配置の考え方はスマホの問い合わせボタンはどこに置くかでも解説しています。
離脱ポップアップは「予約ボタンを押した人には出さない」が最初の条件
ページを閉じかけた人に1回だけ声をかける「離脱ポップアップ」も入れました。ここでも割引は出しません。見出しは「予約するかは、空き状況を見てからでOK」という趣旨にし、WEB予約は24時間受け付けていること、所要時間と料金、駐車場の有無だけを短く添えて、「空き状況を見てみる」ボタンを置きます。
ポップアップは出し方を間違えると、読んでいる人の邪魔にしかなりません。実例では、次の条件をすべて満たしたときだけ表示するようにしました。
| 条件 | 内容 |
|---|---|
| 予約ボタンを押していない | そのページを開いている間に、WEB予約・LINE・電話のどれかを押した人には出さない |
| ほかの小窓が開いていない | メニュー診断などを開いている最中には出さない |
| まだ一度も出していない | 同じ訪問の間は1回だけ（ブラウザの一時保存＝sessionStorageに記録） |
| マウスの合図（PC向け） | ページを開いて15秒以上たった後、マウスが画面の上端から外へ出たとき |
| スクロールの合図（主にスマホ向け） | 料金のセクションより下まで読んだ後、勢いよく上へ戻ったとき |
スマホにはマウスがないため、「閉じる直前の動き」を別の形で拾う必要があります。実例では、料金セクションより下まで読んだことを前提に、上方向へのスクロールの速さが一定以上で、しかもいちばん深く読み進めた位置から900px以上戻ったときを合図にしました。スクロールの合図は、料金まで読んでいない人には出しません。まだ判断材料を見ていない人に声をかけても、予約の後押しにはならないと考えたためです。
閉じ方も3通り用意しています。「閉じる」ボタン、小窓の外側（暗くなった部分）のタップ、キーボードのEscキーです。閉じたあとは、同じ訪問の間に二度と出ません。
計測は「どのボタンが・どこで」押されたかまで残す
LPは作って終わりではなく、どのボタンから予約に進んでいるかを見て直していくものです。実例では、店舗サイトと同じGA4（Googleアナリティクス4）のプロパティを使い、LPには page_type（ページの種類）として「初回来店LP」の印を付けて区別しました。そのうえで、次のイベントを送るようにしています。
| イベント名 | いつ送るか | 一緒に送る情報 |
|---|---|---|
| reserve_click | 予約系のボタンが押されたとき | 手段（WEB／LINE／電話）×位置（ヒーロー／固定バー／メニュー診断／ポップアップ／最終セクションなど） |
| menu_helper_open | メニュー診断を開いたとき | ― |
| menu_helper_result | 診断の結果が出たとき | どの結果になったか |
| exit_popup_show | 離脱ポップアップが出たとき | 合図の種類（マウス／スクロール） |
ポイントは、予約ボタンのクリックを1種類のイベントにまとめ、「手段」と「位置」を付け足す情報として送ることです。ボタンごとに別々のイベント名にすると、あとで集計するときに足し合わせる手間が増えます。1種類にしておけば、「ポップアップ経由の予約クリックは何件か」「電話とWEBの比率は」といった見方を、同じ表の切り替えで確かめられます。そのためには、手段・位置・ページの種類をGA4の「カスタムディメンション」に登録しておく必要があります（登録しないと標準のレポートに出てきません）。
注意したいのは、ここで数えているのは予約ボタンのクリックであって、予約の完了ではないことです。予約サイトが外部のサービスの場合、予約が最後まで完了したかはLP側では分かりません。広告の成果として取り込むかどうか、取り込むならクリックを成果として扱ってよいかは、予約サイト側の件数と見比べながら判断します。計測タグを重ねて入れると数字が二重になるので、設置後はGA4の二重計測を見つける手順の要領で一度確かめておくと安心です。
広告LPは検索に載せない設定にしておく
広告の着地専用のLPには、noindex（検索結果に載せない指定）を入れました。同じ店舗の公式サイトがすでに検索で表示されている場合、内容の近いLPが検索に載ると、本体のページと検索結果の場所を取り合うおそれがあるためです。LPは広告から来た人だけが見るページ、と役割を分けておきます。
また、一度広告に登録したLPのURLは、あとから変えないことが大切です。デザインを差し替えるときもURLはそのままにし、中身だけを入れ替えます。理由と手順は広告の着地ページをリニューアルするときはURLを変えないにまとめています。
公開前に確認する項目
初回来店LPを公開する前に、最低限ここまでは確かめておくと安心です。
- バッジ・数値の帯・料金表の数字が、店頭の料金表と予約サイトの表示と一致している（料金を画像の中に入れている場合は、画像の中の数字も）
- バッジや見出しの言葉が、店として公式に使っている表現の範囲に収まっている
- 予約ボタン（WEB・LINE・電話）のリンク先が、着地させる店舗のものになっている（多店舗で複製したLPは特に）
- お客様の声の出典が書かれている。別の店舗の声が残っていない
- 来店の流れに、一般的な美容室と違う点（仕上げの方式など）が書かれている
- 離脱ポップアップが、予約ボタンを押した後には出ないことを実機で確かめた
- GA4のリアルタイム画面で
reserve_clickに手段と位置が付いて届いている。カスタムディメンションを登録した noindexが入っている。広告に登録するURLが確定している
まとめ
- 初回来店LPは値引きクーポンがなくても組み立てられる。時間・料金・当日の流れを事実で先に見せ、初めての人の疑問を予約ボタンの手前で答えておく
- ファーストビューのバッジは、店頭の料金表・予約サイトで確かめられる情報だけで埋める
- 料金のすぐ後に「メニュー診断」と「来店の流れ」を置き、選び方と当日の流れを先に伝える
- 予約ボタンは画面下に固定し、最初と最後の予約ボタンが見えている間は隠す
- 離脱ポップアップは「予約ボタンを押した人には出さない・1回だけ」。スクロールの合図は料金まで読んだ人に限る。中身は割引ではなく「空き状況を見るだけでOK」
- 計測は予約ボタンのクリックを1つのイベントにまとめ、手段と位置を付けて送る。クリックは予約の完了ではない点に注意する。広告LPは
noindexにし、URLは変えない
「割引をせずに初回の予約につなげたい」「広告の着地先を店舗サイトのトップのままにしている」という場合は、今の広告と予約の導線を確認したうえで、LPを作るべきかどうかからご提案します。お気軽にご相談ください。