離脱率81%の宿泊予約UIを
リサーチ・設計・実装で改善したケーススタディ
宿泊予約サイトの離脱率は81〜89%と、EC全般の平均70%を大きく上回る。 なぜユーザーは予約を完了しないのか。 データと実際のUIを分析し、構造的な問題を特定することから始めた。
国内外の調査データをもとに、予約フローの4段階それぞれで ユーザーがどこで・なぜ離脱するかを整理した。
検索・一覧・詳細の各ページを分析し、 UX・ビジュアル・コピーの観点から問題を洗い出した。
各問題に対して根拠のある改善を施し、 実際に動くプロトタイプとして実装した。
会員登録の強制がチェックアウト離脱を平均35%増加させるという調査データがある。
予約確認シートの最上部に「✅ 会員登録不要 — メールアドレスだけで完了」バナーを配置。不安を事前に解消する。
隠れた追加料金・税抜表示が離脱理由の第1位（Baymard 2024）。直前のコスト増加は信頼を破壊する。
全価格表示を税込に統一。料金内訳（宿泊料 / 消費税 / サービス料 / 手数料）を事前に開示し「不意打ち」をゼロにする。
一人旅需要が急増しているにもかかわらず、多くの予約サイトはグループ旅行設計のままで一人旅者を疎外している。
「おひとり様歓迎」フィルター・バッジ・専用トグルを3画面に統合。検索段階から一人旅者を歓迎する体験設計に。
複数の宿を比較したいユーザーは一覧と詳細を行き来しており、記憶負荷が高く離脱を招きやすい。
お気に入り（♥）で最大3件を保存し、比較ページで価格・評価・設備を横断比較。最良の選択肢をシステムが提示。
「残室わずか」「今X人が見ています」といった緊急性の訴求は、実装しない場合と比べて予約完了率に大きく影響する。
「残り2室」（赤）/ 「空室あり」（緑）のバッジで残室状況を可視化。操作を後押しする適切な緊急性を演出。
検索 → 一覧 → 詳細 → 比較 → 予約確認の全フローを
HTML / CSS / JavaScript で実装しています。