フリーランスでWeb制作をしている矢野です。
ポートフォリオ作品として、ペットホテル「おうちで、わんこと。」様（架空クライアントを想定した新規制作作品）のホームページを制作しました。
「宿泊予約・お問い合わせ」への動線を最優先に、ファーストビューから料金・お客様の声・よくある質問までを一直線に配置し、迷わず予約ページへたどり着ける構成にしています。サービス内容（ペットホテル・日帰りステイ・お散歩代行・シャンプー・見守りサービス）を円形アイコンで一覧化し、料金を明朗に提示することで、初めて利用する飼い主様の不安を先回りして解消する設計にしました。
WordPressのオリジナルテーマとして、プラグインを使わずにお問い合わせフォーム(nonce・ハニーポットによるセキュリティ対策込み)も自作しています。
実際のサイトはこちらからご覧いただけます。
制作の裏側：予約フォームで意識したこと
一般的なペットホテルサイトのフォームが抱える問題
ペットホテルや家事代行など、対人サービス系のサイトを見ていると、予約フォームの入力項目が多いケースをよく見かけます。
お名前、連絡先はもちろん、ペットの犬種、年齢、性格、既往症、希望日時の候補まで、初回の問い合わせ時点で細かく聞こうとするフォームです。
事業者側からすると、事前に情報を集めておきたい気持ちはよく分かります。
ただ、利用者の立場で考えると、まだ依頼するかどうか迷っている段階でこれだけの項目を埋めるのは負担が大きく、途中で離脱してしまう原因になります。
私自身、本業でフォームの入力項目数とCVR(コンバージョン率)の関係をABテストで検証した経験があり、項目が1つ増えるごとに離脱率が上がる傾向を何度も見てきました。
必須項目を3つに絞り、バッジで明示する
そこで「おうちで、わんこと。」のフォームでは、必須項目をお名前・メールアドレス・お問い合わせ内容の3つだけに絞りました。
電話番号・犬種や頭数・ご宿泊希望日は任意項目とし、ラベルの隣に「必須」「(任意)」というバッジを表示して、埋めなくていい項目がひと目で分かるようにしています。
<!-- 予約・問い合わせフォームの項目バッジ(front-page.php より抜粋) -->
<label>お名前<span class="required-badge">必須</span></label>
<input type="text" name="wanko_to_contact_name" required>
<label>メールアドレス<span class="required-badge">必須</span></label>
<input type="email" name="wanko_to_contact_email" required>
<label>電話番号<span class="optional-badge">(任意)</span></label>
<input type="tel" name="wanko_to_contact_phone" placeholder="080-1234-5678">
<label>犬種・頭数<span class="optional-badge">(任意)</span></label>
<input type="text" name="wanko_to_contact_pet" placeholder="例：トイプードル 1頭">
<label>ご宿泊希望日<span class="optional-badge">(任意)</span></label>
<input type="text" name="wanko_to_contact_date" placeholder="例：来月中の平日">任意項目には「例：トイプードル 1頭」のように具体例をプレースホルダーで添えています。
これは、「正確に書かなきゃいけない」という思い込みで手が止まってしまうのを防ぐための工夫です。
ざっくりで構わないと伝わることで、任意項目も気軽に埋めてもらいやすくなると考えました。
「24時間以内にご返信」で送信後の不安を先回りして解消する
もう1つ意識したのが、フォームセクションの見出しと説明文の言葉選びです。
<h2 class="section-title"><?php esc_html_e( 'お問い合わせ', 'wanko-to' ); ?></h2>
<p><?php esc_html_e( 'ご予約やご相談など、お気軽にお問い合わせください。24時間以内にご返信いたします。', 'wanko-to' ); ?></p>ボタンの文言も「ご予約はこちら」と一本化せず、「宿泊予約・お問い合わせ」という形で予約したい人と相談したい人の両方を受け止められる言葉にしています。
まだ検討段階の人にとって、「予約」という言葉だけだと後戻りしにくい決定を迫られているような印象を与えてしまいますが、「お問い合わせ」も併記することで、気軽に送信するハードルを下げています。
さらに「24時間以内にご返信いたします」という一文を添えることで、「送信したのに返事が来なかったらどうしよう」という送信後の不安を先回りして解消しています。
レスポンス速度への期待値を事前に提示しておくのは、対人サービス系のフォームでは特に効果的だと感じています。
まとめ
今回は、「おうちで、わんこと。」の予約フォームで実践した、必須項目を3つに絞ってバッジで明示する設計と、送信後の不安を先回りして解消する言葉選びについて書きました。
対人サービス系のサイトでは、情報を集めたい事業者側の都合と、気軽に問い合わせたい利用者側の心理の間でバランスを取る必要があります。
このバランス感覚は、本業でのフォーム改善・ABテストの経験から得たものです。
同じようにペットホテルや宿泊系サービスのサイト制作でお困りの方がいれば、ぜひご相談ください。