【課題制作】THE VEGE LODGE 宿泊施設のUIUX改善

制作時間・制作ツール

制作時間：5日間

制作ツール：figma

課題要件

ペルソナ

UIUX改善

クライアントから提示された課題（離脱率の高いページの改善）から、どうして離脱が生じるのかの仮説を立て、必須要件、推奨要件を整理した上で、UIUX改善の提案をしました。

◼️宿泊日選択ページ(離脱率63%)

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

仮説：宿泊日選択時点で空室状況が分からず、先に進んでも予約できない可能性を感じることで、不安や徒労感が生まれ離脱していると考えられる。

宿泊日選択ページは離脱率が最も高く、「予約できる日程があるのか」「予算内で泊まれるのか」が直感的に把握できない点が、離脱要因になっていると考えました。

そこで、空室状況と価格を一覧で確認できるカレンダー構造を採用しつつ、人数・部屋数によって空室や価格が変動する実態を前提としたUI設計へ改善しました。

初期表示は「大人1名・1部屋」の最小条件とし、日程ごとの空室傾向と最低価格を把握しやすくする一方、条件を変更すると即座に空室状況と料金が反映される構造としています。

これにより、「選べると思ったが実は予約できない」といった認知ズレを防ぎ、振り出しに戻ることなくスムーズに次のステップへ進める体験を目指しました。

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

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

仮説：同一部屋が条件違いで複数並んでいるため、違いが直感的に理解しづらく、 比較コストが高くなることで選択を諦めて離脱していると考えられる。
 また、写真が小さく部屋の雰囲気が伝わらないことも不安要素となっている。

お部屋選択ページでは、同一部屋が条件違いで複数並ぶことで、部屋の違いと条件の違いが混在し、比較・選択の負荷が高くなっている点が課題だと考えました。

そこで、部屋タイプ × 朝食体験を軸にカードを構成し、宿泊体験の違いが視覚的に伝わるよう改善しています。

また、禁煙・喫煙は部屋タイプの違いではなく「環境条件」として整理し、希望する部屋にチェックを入れる方式としました。

体験価値と条件を分離することで、自分に合った部屋を迷わず選択できることを目的とした改善です。

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

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

仮説：プラン内容がテキスト中心で体験イメージがしづらく、プランごとの違いや自分との適合性を判断できないため、選択を先送りして離脱していると考えられる。

宿泊プラン選択ページでは、テキスト中心の情報構成により、各プランで「何が体験できるのか」が伝わりづらく、自分に合ったプランを判断しにくい点が離脱要因だと考えました。

そこで、各プランをカード化し、写真やアイコンを用いて体験内容を視覚的に伝える構成に改善しました。

また、キーワード検索やフィルター機能を設けることで、「何をしたいか」という軸からプランを絞り込める導線としています。

詳細な内容はプルダウンで確認できるようにし、一覧では判断に必要な情報だけを簡潔に提示することで、迷いすぎず、納得して選べる体験を目指しました。

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

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

仮説：入力フォームが長く、完了までの見通しが立たないため、心理的な負担が大きくなり、入力途中で離脱していると考えられる。

お客様情報入力フォームでは、必須項目が分かりづらく、入力ルールも直感的に理解しにくい点が、入力途中のストレスや離脱につながっていると考えました。

そこで、各入力欄に入力例を表示し、記入方法を直感的に理解できるよう改善しました。
また、必須項目には「必須」マークを付与し、入力範囲を明確にしています。

チェックイン時間などの項目はプルダウン式にすることで、入力負荷を軽減し、クレジット決済を選択した場合のみ決済情報入力欄を表示する構造としました。

入力エラーが発生した箇所は色で示すことで、修正すべき点がすぐに分かるUIとし、最後まで迷わず入力できる体験を目指しています。

◼️補足改善

本課題では、予約完了率の向上を目的として、特に離脱率の高い4ページ（宿泊日選択／お部屋選択／宿泊プラン選択／お客様情報入力フォーム）の改善に注力しました。

一方で、課題を進める中で「ページ単体の改善」だけでなく、ペルソナの不安解消や予約導線全体の体験向上も、最終的な予約完了率に影響する要素であると考え、要件外ではあるものの、補足的な改善提案もあわせて行いました。

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

ペルソナ設定の中に「家族に食物アレルギーを持つ人がいるため、食材内容を事前に把握した上で予約したい」という要素がありました。
この不安が解消されないままでは、予約途中での離脱につながる可能性があると考え、ディナー選択ページにおいて以下の改善を提案しました。

• 各ディナープランに「メニューを見る」プルダウンを設置し、料理内容や使用食材を事前に確認できる構造にする

• アレルギーに関する注意書きや対応可否を明記し、不安を感じやすいユーザーでも安心して次のステップへ進めるようにする

これにより、「選ぶ前に不安を解消できる」体験を提供し、予約完了までの心理的ハードルを下げることを狙いました。

◼️補足改善：フォーム全体のUX向上に向けた改善案

予約フォーム全体を通して「次に何をすればいいのか」「あとどれくらいで完了するのか」が分かりづらい状態は、入力途中でのストレスや離脱につながると考え、以下の改善案を追加しました。

• 主要CTAボタンのカラーを白からグリーンに変更し、背景とのコントラストを高めることで、次の行動を直感的に認識できるようにする

• 各フォーム上部に進捗状況がわかるステップバーを設置し、全体の流れと現在地を可視化することで、入力途中の不安や離脱を軽減する

これらはページ単体の改善ではなく、予約体験全体を通したストレス軽減を目的とした提案です。

工夫したこと

今回の改善では、デザインを大きく変更せず、ページ数も増やさないことを前提に取り組みました。既存の構造を活かしながら、情報の整理方法や提示の仕方、選択導線を見直すことで、ユーザーの判断負荷を下げることを意識しています。

また、予約時にユーザーが「どこで迷い、何に不安を感じるのか」を明確にするため、実際に自分自身がユーザーとして操作を繰り返し、その中で感じたストレスや違和感を一つひとつ言語化し、改善案へと落とし込みました。
感覚的な「使いづらさ」で終わらせず、なぜ迷うのか、どうすれば迷わず選べるのかを構造的に整理することで、根拠のあるUI改善提案になるよう努めました。

制作を通して学んだこと

UI/UX改善に初めて取り組む中で、仮説立て → 要件整理 → 改善設計 → デザイン反映までを一貫して言語化することの重要性を強く実感しました。
見た目のデザイン性を優先するのではなく、「なぜこの離脱が起きているのか」「どこでユーザーが迷っているのか」といった課題を起点に考えることで、デザインの方向性が明確になると感じています。

予約完了率の向上という目的に対して、どの情報を、どのタイミングで、どの形で提示すべきかを整理して考えることが、UI/UX改善の本質であり、今後のWeb制作においても軸にしていきたい視点です。