【課題制作】宿泊予約サイト　UI/UX 制作

《課題要件》

《ペルソナ》（提供）

《改善案》

・まず最初に空室の有無を確認できる導線に配置を変更。

• 最初に宿泊日を選択することで空室状況を先に確認できるようにし、ユーザーが予約可能な条件を把握してから部屋を選べる設計にしています。

• 部屋選択後に予約不可と表示されるストレスを防ぎ、スムーズな予約体験につながる導線に改善しました。

◼️宿泊プラン選択ページ(離脱率38%)

課題：ページの離脱率が38％と高く、改善したい

仮説：・希望日の空き状況がわからない。

　　　・２家族で行くから２室取りたいのに部屋数が選べない。

　　　・子供の料金設定がわからない

・カレンダーに○×、部屋の残数を追加し、空き状況を一目でわかるように変更しました。

・必要部屋数や男女比率、子供の有無の入力欄を追加しました。

・このページだけ「到着日」と記載されていたので「チェックイン」に変更し他ページと統一させました。

◼️お部屋選択ページ(離脱率42%)

課題：ページの離脱率が42％と高く、改善したい

仮説：・ルーム名が同じで詳細が小さく違いが分かりずらい

　　　・スクロールをしないと希望の部屋まで辿り着かない

• 絞り込み機能を追加
  希望のお部屋タイプのみ表示できるようにし、一覧から探す手間を減らしました。

• 部屋の条件（禁煙・朝食有無など）をカード内で明確に表示
  詳細ページを開かなくても、部屋の違いが一目でわかるよう設計しました。

• 残室数を表示
  空室状況を視覚的に把握できるようにし、ユーザーの意思決定をサポートしました。

• 満室時はカードをグレーアウト
  選択できない状態を一目で理解できるようにし、無駄な操作を防ぎました。

◼️宿泊プラン選択ページ(離脱率38%)

課題：ページの離脱率が38％と高く、改善したい

仮説：・文字ばかりでイメージが膨らまない。

　　　・プランの詳細がわからずどのようなスケジュールか想像がつかない

・各プランに写真を入れ、体験時のイメージがでつきやすいように工夫しました。

・各プランの詳細が見れるようアコーディオンを設置し、プラン内容や詳細がよりわかりやすくなり1日のスケジュールがたてやすいよう工夫しました。

・絞り込み検索を追加しユーザーの迷いを軽減させるよう工夫しました。

◼️お客様情報入力フォーム(離脱率 24%)

課題：ページの離脱率が24％と高く、改善したい

仮説：・具体的に入力する内容がわからない

　　　・入力する項目が多くて後回しにしてしまう

・プレースホルダーを設置し入力ミスを軽減するよう工夫しました。

・お名前の入力欄を１行にまとめ、タブ変更の手間を短縮する工夫をしました。

・郵便番号入力のみで、住所を自動反映させ入力箇所を短縮する工夫をしました。

・チェックイン時間をタブで選択できるように改善しました。

◼️補足改善：ディナー選択ページ（ペルソナ課題の解消）

本課題では、予約完了率の向上を目的として、特に離脱率の高い4ページ（宿泊日選択／お部屋選択／宿泊プラン選択／お客様情報入力フォーム）の改善に注力しましたが、課題を進める中でペルソナの不安解消も、最終的な予約完了率に影響する要素であると考え、要件外ではあるものの、補足的な改善提案もあわせて行いました。

・各プランに写真を入れ、料理のイメージがでつきやすいように工夫しました

・各プランの料理詳細が見れるようアコーディオンを設置し、当日出てくる料理を想像してワクワクできる楽しみを追加しました。

・子供メニューも追加し、「子供が食べられるか不安」という心理的ハードルを下げるよう工夫しました。

《本課題で学んだ事》

見た目の美しさだけでなく、「なぜ離脱が起きるのか」を分析し、ユーザーの行動に沿って導線を設計することの重要性を学びました。

また、全体最適だけでなく、お子様連れやアレルギーをお持ちの方など、特定のユーザーへの配慮も設計に組み込むことで、より信頼される体験を生み出せると実感しました。