宿泊予約サイトUI/UX改善
UI/UX改善
自主制作
SHElikes PROデザイナーコースの課題として、UIUX改善に取り組みました。宿泊予約フローを対象に、ユーザーが迷いやすい「日付選択・部屋比較・プラン選択・情報入力」を中心に改善しました。エラーを減らし、必要な情報を適切なタイミングで提示することで、安心して予約を進められる体験を目指しました。
- 制作時期
- 2026年8月
- 使用ツール
- Figma
- 制作期間
- 10日間
- 担当範囲
- UIUX改善／提案資料制作
課題要件
要件書
| クライアント |
クライアント名：THE VEGE LODGE（ザ・ベジ・ロッジ） ※架空の企業
「THE VEGE LODGE（ザ・ベジ・ロッジ）」は、長野県の郊外に位置する宿泊施設です。“野菜がたのしい”をテーマに、自家菜園での収穫体験や、野菜をふんだんに使用したコースディナーを提供しており、自然と食を楽しむことができる点が特徴です。日常から少し離れた環境で、訪れた人が「普段の生活では味わえない食と暮らし」を体験できるよう工夫されています。
|
| 目的 |
予約率の改善：予約途中の離脱を減らし、スムーズに予約を完了できる導線・画面へ改善すること。
訪問自体は比較的多く、お部屋選択ページまで進む方も多いものの、その後の離脱が目立ち、予約完了に結びついていない状況です。下記のページでの離脱が目立っています。
- お部屋選択ページ：離脱率 42%
- 宿泊日選択ページ：離脱率 63%
- 宿泊プラン選択ページ：離脱率 38%
- お客様情報入力フォーム：離脱率 24%
|
| ターゲット |
- 主に20代後半〜40代前半の都市部在住の方々を想定。特に、忙しい日常から離れて自然の中でリフレッシュしたい女性や、子どもと自然体験をしたいご家族層の利用が多い。
- Instagramなどで施設の写真を見て興味を持つ方が多く、ビジュアル訴求が重要。
|
| トンマナ |
- 既存サイトのルールに合わせて進める。
- ブランドガイドラインの配布あり。
|
想定ペルソナ
想定ペルソナ No.1：高橋 すみれ（28）
| 基本プロフィール |
- 東京都狛江市在住
- 出版社の編集者（6年目）
- 一人暮らし独身
|
| 背景や行動 |
- 忙しい日々に癒しを求め、自然の中でリセットしたいと思っている
- 部屋が空いている日程で有給を取る予定である
- InstagramやPinterestで「自然に癒される宿」などをよく検索
- THE VEGE LODGEは前から気になっていて、写真を見て即「ここに行こう」と決めた
|
| ニーズ |
- 都会の喧騒から離れて、ひとりで静かに過ごしたい（禁煙・1人部屋）
- 自然に囲まれた空間で、きれいな写真をたくさん撮りたい
- 野菜たっぷりのフルコースディナーで心身を満たしたい
|
想定ペルソナ No.2：大野 翔太（38）
| 基本プロフィール |
- 神奈川県横浜市在住
- IT系企業のマネージャー職（12年目）
- 妻（36）と小学生の子ども2人（7歳・9歳）の4人家族
|
| 背景や行動 |
- 年1〜2回の家族旅行が楽しみ
- 今回の旅行はすでに日付が決まっている
- 今回は「自然体験ができる」「食事が安心・充実」「子どもが退屈しない」宿を探している
- 3つの候補宿を比較検討し、価格・施設内容・レビューを冷静に見比べている段階
- 妻が軽度の食物アレルギー（ナッツ系）を持っているため、食事対応に配慮があるかも重視
- 条件下で最安値の自然体験を親子で楽しみたいと思っている
|
| ニーズ |
- 家族全員が快適に過ごせる環境が欲しい（禁煙・4人部屋）
- ナッツ系の原材料表記があるかどうかを確認し、安心してバイキングを楽しみたい
- 子どもたちに自然体験をさせながら、親もリラックスできる旅にしたい
|
UI/UXの改善
「前に出す」情報設計に変更
-
予約動線の変更
従来の「お部屋選択 → 宿泊日選択」を「宿泊日選択 → お部屋選択」に変更。希望する日程を起点に、予約可能なお部屋のみを表示することで、比較対象を絞り、ユーザーの迷いや日程の選び直しを減らす。
現在の予約導線
- 各ページ
CTA
- お部屋
選択
- 宿泊日
選択
- 宿泊プラン
選択
- ディナー
選択
- お客様情報
入力
- ご予約内容の
確認
- ご予約
完了
改善後の予約導線
- 各ページ
CTA
- 宿泊日
選択
- お部屋
選択
- 宿泊プラン
選択
- ディナー
選択
- お客様情報
入力
- ご予約内容の
確認
- ご予約
完了
選択順序を変更したステップ
-
ステップインジケーターの設置
予約ステップを可視化することで、現在の進行状況を把握しやすくし、予約完了までの見通しを持てるようにする。
- 宿泊日
- お部屋
- プラン
- ディナー
- 予約確認
-
選択内容の可視化
予約中に選択した宿泊日・人数・お部屋などの条件を確認できるようにすることで、現在の予約条件を把握しながら次のステップへ進めるようにする。
現在の選択条件
2025/05/11(木)〜2025/05/13(土)変更
1 部屋・大人2名 子供0名変更
日付選択・お部屋比較・プラン選択・情報入力の4つの場面を中心に、予約を進めやすい画面を検討しました。
01宿泊日選択ページ
- 課題
- 宿泊日選択ページの離脱率が63%と高く、予約を進めやすい体験への改善が必要。
- 仮説
- カレンダーを操作するまで予約可能日が分からず、「選択 → エラー → 再検索」を繰り返している可能性がある。
- エラーメッセージが、次に取るべき行動につながっていない。
- 必須要件
- 予約可能日を一目で直感的に判別できるようにする。
- 選択中の宿泊条件を把握しやすくする。
- 次の予約ステップへスムーズに進めるようにする。
- 推奨要件
- 柔軟に日程を検索できるようにする。
- エラー画面を、次の行動を促すポジティブな案内にする。
- 途中で予約を諦めにくい導線にする。
改善前
宿泊日選択
宿泊日を入力してください
‹5月›
SunMonTueWedThuFriSat3112345678910111213141516171819202122232425262728293031123
予約へ進む
宿泊日お部屋プランディナー予約確認
宿泊日選択
宿泊日・人数を選択してください
チェックイン
2025/05/11(木)
宿泊数
2 泊 ‹5月›
SunMonTueWedThuFriSat311○2○3△4×5×6×7×8△9△10○11○12○13○14○15○16○17△18○19−20×21△22○23○24○25○26−27×28○29○30○31○123
○ 空室あり△ 残りわずか× 満室− 選択不可
前後の日程をチェック5/10(水) ～
5/12(金)2 泊¥18,000～
5/11(木) ～
5/13(土)2 泊¥19,000～
5/12(金) ～
5/14(月)2 泊¥21,000～
お部屋選択へ進む
改善案1：予約条件の表示と入力サポート
室数・利用人数・チェックイン日・宿泊数を確認しながら操作できるようにし、条件の思い違いや入力ミスによる誤予約を防ぐことを目指しました。
- 選択中の予約条件を常に確認でき、スムーズに操作できるようにする。
- 手入力と選択式入力の両方に対応し、柔軟に入力できるようにする。
- 「正しく選択できている」という安心感を与え、ページからの離脱を防ぐことを目指す。
改善案2：直感的な空室カレンダー
カレンダー内の空室状況を記号で視覚化し、「いつ予約できるか」を一目で判断できるようにしました。
- 「○：空室あり」「△：残りわずか」「×：満室」「−：選択不可」で、日ごとの予約可否を分かりやすく表示する。
- 日付を選ぶ前に空室状況を把握できるようにし、再検索の手間やストレスの軽減を目指す。
改善案3：前後日程の空室ナビゲーション
希望日の前後にある日程と宿泊金額を並べ、空室を探しながら日程と予算を比較できるようにしました。
- 前後の日程と宿泊金額を一目で比較できるようにし、柔軟に日程を変更できる選択肢を提供する。
- 代替日程と料金をあわせて提示し、別の日程での予約検討へスムーズに進めるようにする。
- 希望日の再検索によるストレスを減らし、予算やスケジュールに合う予約につなげることで、予約完了率の向上を目指す。
02お部屋比較
改善前お部屋選択
検索するお部屋を選択してください
この下にもお部屋の選択肢が続きます…
宿泊日お部屋プランディナー予約確認
お部屋選択
検索するお部屋を選択してください
現在の選択条件
2025/05/11(木)〜2025/05/13(土)
変更1 部屋・大人2名 子供0名
変更
改善案1：並べ替え機能の設置
条件に合うお部屋が複数ある場合でも、希望に合うお部屋を探しやすくしました。
- 「おすすめ順」「人気順」「料金が安い順」「料金が高い順」で並べ替えられるようにする。
- 「並べ替え」ボタンを押すと下に選択肢が展開し、矢印をもう一度押すと閉じられるようにする。
- 選択中の項目を緑色で表示し、現在の並べ替え条件を一目で把握できるようにする。
改善案2：予約条件の選択と予約ボタンの整理
条件の選択方法と予約への入口を整理し、次のステップへ進みやすくしました。
- 「禁煙／喫煙」「朝食あり／なし」を、それぞれラジオボタンで1つ選べる形式に整理する。
- 「予約する」ボタンを1つにまとめ、次に進む操作を分かりやすくする。
- 「お部屋の詳細を見る」ボタンを設置し、必要なときに詳細情報へ戻りやすくする。
03宿泊プラン選択ページ
- 課題
- 宿泊プラン選択ページの離脱率が38%と高く、プランを比較・選択しやすい体験への改善が必要。
- 仮説
- 文字中心の情報設計で、プランごとの特徴や違いを直感的に把握しづらい。
- プランの種類が多く、違いを比較しにくいため、自分に合うプランを見つけるまでに迷いが生じ、離脱につながっている可能性がある。
- 必須要件
- プランの特徴や違いを把握し、迷わず比較・選択できるようにする。
- 自分の目的や希望に合うプランを探しやすくする。
- 推奨要件
- 視覚的に比較しやすいレイアウトにする。
- おすすめプランや人気プランを把握しやすくする。
改善前
改善後宿泊日お部屋プランディナー予約確認
宿泊プラン選択
宿泊プランを選択してください
現在の選択条件
2025/05/11(木)〜2025/05/13(土)
変更1 部屋・大人2名 子供0名
変更
ソロ・グリーンルーム
変更
改善案1：目的・特徴から探せるタグの設置
目的や特徴を起点に、自分の希望に合うプランを絞り込めるようにしました。
- 「ペット」「ワーケーション」「ヨガ」「体験」「ワークショップ」「サウナ」などのタグを設置する。
- タグは複数選択できるようにし、希望に合うプランを直感的に探せることで、選択時の迷いを減らす。
改善案2：カードデザインの変更
文字中心の構成を見直し、各プランのイメージ写真を配置するデザインに変更しました。
- 写真からプランの特徴を直感的に把握できるようにする。
- プラン同士を視覚的に比較しやすくし、自分に合うプランを選びやすくする。
改善案3：表示件数・ページ数の可視化
表示中の件数とページ数を示し、プラン全体の量と現在位置を把握できるようにしました。
- 「12件中6件表示」やページ番号を表示し、現在の表示状況を分かりやすくする。
- ページ上部と下部にページ切り替えを設置し、ほかにもプランがあることを伝える。
- 今後プラン数が増えた場合にも対応しやすい設計にする。
04お客様情報入力ページ
- 課題
- お客様情報入力ページの離脱率が24%と高く、入力を完了しやすいフォームへの改善が必要。
- 仮説
- 入力項目が多く、何をどのように入力すればよいか分かりにくいため、途中で負担を感じて離脱している可能性がある。
- エラー箇所を自分で探して修正する必要があり、手間がかかる。
- 必須要件
- 入力すべき項目を明確にする。
- 入力エラーの発生箇所と原因を明確にする。
- エラーが発生しても、迷わず修正できるようにする。
- 推奨要件
- 入力時の心理的・操作的な負担を軽減する。
- 現在の入力状況を把握できるようにする。
- 食事の要望など、利用者が伝えたい情報を適切に入力できるようにする。
改善前改善後宿泊日お部屋プランディナー予約確認
お客様情報入力
お客様情報を入力してください
改善前：エラー時お客様情報入力
お客様情報を正しく入力してください。
お客様情報を入力してください
宿泊日お部屋プランディナー予約確認
お客様情報入力
お客様情報を入力してください
!入力内容をご確認ください。
- お名前（カナ）を入力してください
- メールアドレスが正しくありません
- 電話番号を入力してください
改善案1：入力サポートによるフォーム離脱の軽減
入力例と選択式の操作を取り入れ、入力時の迷いや負担を減らしました。
- 入力欄にプレースホルダーで入力例を表示し、何を入力すればよいか分かりやすくする。
- チェックイン時間はプルダウンから選べるようにし、入力の手間や誤入力を防ぐ。
改善案2：アレルギー情報の事前案内
アレルギーや食事の要望を伝える場所を事前に案内し、予約時の不安を減らしました。
- 備考欄に、アレルギーや食事に関する要望を記入できるようにする。
- 食事選択ページでも備考欄への記入を案内し、「どこに伝えればよいか」が分かるようにする。
- アレルギーのある利用者も、要望を伝えながら安心して予約を進められる体験を目指す。
改善案3：エラー発生時の入力サポート
エラー箇所と修正すべき内容を明確にし、迷わず入力を修正できるようにしました。
- 必須項目の未入力や入力内容の不備がある場合、エラー内容をフォーム上部でまとめて表示する。
- 該当する入力欄にもエラーの理由を表示し、修正する場所と内容を分かりやすくする。
本課題で工夫したこと
目的に立ち返って改善を考えること
- 目標とする数値の改善につながるかを常に意識し、課題の本質を見失わないようにしました。
実機で使いやすさを確認すること
- Figmaでプロトタイプを作成し、スマートフォンのミラーリング機能を使って、ボタンの押しやすさや操作の流れを確認しました。
