店舗サイトの予約導線。ボタンの置き場所と、フォームで離脱が起きる箇所
予約ボタンをどこに置くか、フォームのどこで人が離れるか。Googleが公開しているフォーム設計の指針をもとに、店舗サイトの予約導線を点検する順番を整理しました。
「予約ボタンは目立たせています。それでも予約が入りません」
ボタンの色や大きさより先に見るところがあります。予約は1つの動作ではなく、3つの段階に分かれているからです。どこで落ちているかを特定しないと、直す場所を間違えます。
なお以下で引用するGoogleのフォーム設計の指針は、サインアップフォームや住所入力フォームについて書かれたものです。予約フォームを名指ししたものではありませんが、入力してもらう画面という点では同じ構造なので、判断の軸として使えます。
予約導線は3つに分かれる
| 段階 | 起きていること | 落ちる原因 |
|---|---|---|
| 見つける | 予約できると分かる | ボタンが見つからない |
| 決める | 日時と内容を選ぶ | 空き状況が分からない |
| 入力する | 名前や連絡先を書く | 項目が多い、入力しにくい |
3つとも別の問題です。ボタンを大きくして解決するのは1段目だけです。
自店がどこで落ちているかは、フォームの表示回数と送信数を比べれば見当がつきます。そもそも人が来ていない可能性もあるので、その切り分けはホームページから問い合わせが来ないときを先に確認してください。
ボタンの置き場所
「見つける」段階の話です。原則はひとつだけで、スクロールしなくても1つは目に入る状態にすることです。
店舗サイトで多い構成なら、置き場所は次のとおりです。
- ページ最上部（ヘッダー内、またはファーストビュー）
- メニュー・料金の直後（見て検討した直後が一番動く）
- ページ最下部（読み切った人の受け皿）
3箇所に置いても多すぎることはありません。同じ行き先なら、押した場所によって体験が変わることもありません。逆に「1箇所だけ、ページの真ん中」が一番取りこぼします。
スマートフォンでは画面下に固定表示する方法もありますが、本文を隠すほど大きくしないでください。Googleはページエクスペリエンスの自己評価項目として、主要なコンテンツを妨害するほどの広告を回避できているか、煩わしいインタースティシャルの使用を避けられているかを挙げています。予約を促すポップアップも、出し方によっては同じ扱いになり得ます。
フォームで落ちる箇所
「入力する」段階です。ここはGoogleの指針が具体的です。
1. 項目を減らす。 指針では、必要最小限の情報だけを求めることが強調されています（原文では "Cut the clutter"）。予約に本当に要るのは、日時・人数・氏名・連絡先くらいです。住所、生年月日、来店きっかけのアンケートは、予約が取れた後で構いません。
2. 確認用の入力を二重に置かない。 「メールアドレス（確認用）」のような重複入力は避けるよう明記されています。代わりに確認コードを送る方法が推奨されています。
3. type 属性を正しく使う。 モバイルで適切なキーボードを出すために使うよう案内されています。電話番号欄で数字キーボードが出ない、メール欄で @ が遠い、というだけで入力は止まります。
4. autocomplete 属性を付ける。 メールは autocomplete="email"、電話は autocomplete="tel" を付けます。自動入力は同じデータを何度も入力する手間を避け、フォーム入力を高速化するとされています。制作会社に依頼しているなら、この2つが入っているか確認してもらってください。
いずれも見た目には現れません。デザインを変えずに完了率が動く可能性がある部分です。
押せない・見えないという単純な問題
意外に多いのがこちらです。スマートフォンで自店のフォームを開き、最後まで自分で送信してみてください。
- 入力欄をタップしたら、キーボードが送信ボタンを隠して押せない
- 入力欄が画面幅からはみ出している
- 送信後に何が起きたか分からない（完了画面がない）
Googleのページエクスペリエンスの項目にも、コンテンツがモバイルデバイス上で適切に表示されているか、という自己評価が含まれています。パソコンで作ってパソコンで確認していると、ここは見つかりません。
電話も導線のひとつ
店舗では、予約フォームより電話のほうが動くことがあります。とくに当日の予約はそうです。
電話番号はタップで発信できる状態にしてください。画像に焼き込んだ番号や、テキストでもリンクになっていない番号は、スマートフォンでは押せません。営業時間外に電話しか導線がない場合は、その時間帯だけフォームを前に出す、という設計も成立します。
自作ツールを使っている場合、フォームや電話リンクをどこまで作り込めるかはツール次第です。判断材料は店舗ホームページは自作で足りるかにまとめています。
まとめ
- 予約導線は「見つける／決める／入力する」の3段階。落ちている段階を特定する
- ボタンは最上部・料金の直後・最下部の3箇所。1箇所だけが一番取りこぼす
- 固定表示やポップアップで本文を隠さない。妨害的な表示は評価項目に挙がっている
- 入力項目は最小限に。確認用の二重入力は置かない
typeでモバイルのキーボードを合わせ、autocomplete="email"autocomplete="tel"を付ける- 自分のスマートフォンで最後まで送信してみる
- 電話番号はタップで発信できる状態にする
サイトとGoogleビジネスプロフィールのどちらで詰まっているかを外から確認したい方は、無料のMEO診断をご利用ください。店名とGoogleビジネスプロフィールのURLだけで送れます。
参照した一次情報
本記事は一般的な傾向と公開情報にもとづく解説です。制度・仕様は変更されることがあるため、実際の手続きや設定の際は必ず一次情報をご確認ください。