流入元に合わせて最初のボタンを変え、予約までの迷いを減らした話

今日は、訪日客向けの美容予約サイトで、最初に表示する案内を流入元ごとに変える実装を行った。

以前は、検索、SNS、紹介リンクなど、どこから来た方にも同じ入口を表示していた。画面はシンプルでも、「サロンを探したい人」「相談してから決めたい人」「すでに候補がある人」では、次にしたい行動が違う。入口を一つにまとめた結果、ユーザーがページ内を探し直す構成になっていた。

そこでNext.jsとTypeScriptで、URLのパラメータから流入元を判定し、最初のCTAだけを出し分けるようにした。検索経由ならエリアやメニューから探す導線、SNS経由ならサービスの説明と相談導線、特定の紹介リンクなら対象ページへ進むボタンを優先する。判定できない場合は従来の共通案内を表示し、URLが壊れていても画面が止まらないようにした。

実装で気を付けたのは、ページ全体を流入元ごとに複製しないことだった。本文や予約処理は共通のまま、最初の見出し・説明・ボタンだけを設定データとして切り替える形にした。これなら文言を変更するときも修正箇所が増えず、流入元を追加するときも安全に拡張できる。

最後に、パラメータあり・なし・想定外の値で表示を確認し、スマートフォンでもボタンが押しやすいかを検証した。成果を判断するには今後の計測が必要だが、少なくとも「入口で迷わせない」ための土台は作れた。

Webサイトや予約導線について、全面改修ではなく、現状確認・原因整理・1機能だけの改善からでも対応しています。Next.js、TypeScript、Supabaseを使った予約画面や管理画面のご相談があれば、お気軽にご連絡ください。