予約画面を自前で作る — ブランディングと予約UX

はじめに

宿の公式サイトでよく見かけるのが、「ご予約はこちら」を押すと突然デザインの違う外部予約システムに飛ばされるパターンです。せっかく世界観のあるサイトを作っても、予約の瞬間に別世界へ連れて行かれては台無しですし、不安になって離脱する人も出ます。

この記事では、一棟貸しヴィラの公式サイトで予約画面そのものを自前で作ったときの、画面設計とブランディングの考え方を紹介します。

予約フローを最短距離で組む

4画面で完結させる

予約フローは「検索 → 予約者情報 → カード登録 → 完了」の4画面に絞りました。

入力項目は徹底的に削りました。予約管理システム側には会社名やFAX番号など多くの欄がありますが、フォームに置いたのは必須5項目＋任意の住所・要望のみ。欄が1つ増えるごとに離脱は増えるという前提で、「なくても運営が困らない欄」はすべて落としています。

検索結果は「押した場所の近く」に出す

最初の実装では、検索ボタンの下に結果を表示していました。しかしスマホで試すと、ボタンを押しても画面が変わったように見えず、スクロールして初めて金額に気づく。これでは「押したのに反応がない」と感じさせてしまいます。

そこで検索結果はフォームより上、見出しの直下に移動しました。ボタンを押すと視界内で金額が変わる。小さな違いですが、体感は大きく変わります。画面を読み上げるユーザーにも変化が伝わるよう、結果領域には更新を通知する属性（aria-live）も設定しました。

モバイルの固定ボタンは「2段階」にする

モバイルでは画面下部に予約ボタンを固定しています。ただ、最初から日付入力欄まで常時表示すると、どのページでも画面の下1/4が予約フォームで埋まってしまいます。

そこで1回目のタップで日付欄が開き、2回目で予約ページへ進む2段階式にしました。トップページの予約カードと下部バーで日付の選択状態は共有しているので、どちらから操作しても食い違いません。

「満室」の見せ方にこだわる

満室と「確認できない」を区別する

空室情報の取得はネットワーク越しなので、たまに失敗します。このとき安易に「満室」と表示してしまうと、本当は空いているのに機会を失うことになります。

システム内部でも「空室あり」「満室」「他のお客様が決済手続き中」「確認できない」の4状態を明確に区別し、それぞれ文言を変えています。満室のときは前後の空いている日程を自動で探して提案し、行き止まりを作らないようにしました。

「他のお客様が決済中」という状態

一棟貸しは在庫が1つしかないため、誰かが予約手続きを始めたら、その30分あまりは他の人が同じ日程を取れません。これを「満室」と表示すると、手続きが放棄されたあとに空きが復活して混乱します。

そこで「ただいま他のお客様が決済手続き中です」という専用の表示を用意しました。正直に状態を伝えることが、結果的に一番クレームの少ない見せ方だと思います。

ブランドを画面の隅々まで通す

デザイントークンで世界観を統一する

色・余白・角丸・文字サイズといったデザインの構成要素は、すべて「デザイントークン」として一元管理し、各画面での直接指定を禁止しました。静かな高級感を軸に、派手なグラデーションや点滅するボタン、クーポンサイト風の価格強調は使わないと最初に決めています。

予約フォームも例外ではありません。外部サービスの初期デザインのまま使うのではなく、書体・色・ボタンの形まで公開ページと揃えることで、「同じ宿の中にいる」感覚を最後まで保ちます。

優先順位を先に決めておく

デザインの議論は好みの話になりがちです。この案件では「スマホの使いやすさ ＞ 予約完了の分かりやすさ ＞ 読みやすさ ＞ 表示速度 ＞ ブランドの質感 ＞ PCでの装飾」という優先順位を最初に文書化しました。

入力させた情報を失わせない

予約フォームで入力ミスがあったとき、ページを戻ったら全部消えていた — これほど離脱を生む体験はありません。エラー時には入力値をそのまま画面に戻し、検索条件もブラウザに記憶して、次に開いたときに復元されるようにしました。

まとめ

自前の予約画面で大事にしたのは、次の3点です。

1. 最短距離のフロー — 4画面・必須5項目まで削り、迷う余地を減らす
2. 状態を正直に見せる — 満室・決済中・確認不能を区別し、行き止まりを作らない
3. 世界観を最後まで — デザイントークンで予約画面まで公式サイトの空気を保つ

カード登録から自動課金までの決済の仕組みは「宿泊予約のStripe決済設計」で、サイト全体の構成は「予約に最短で辿り着くサイト構成とページ設計」で解説しています。