【自主制作】宿泊施設WebサイトのUI/UX改善

【制作時間】30時間

【制作年】2025年2月

【使用ツール】Figma

|  課題要件

◾️クライアント
THE VEGE LODGE（ザ・ベジ・ロッジ）
長野県郊外に位置し、「野菜がたのしい」をテーマに、自然体験や野菜中心の食事を提供する宿泊施設。

◾️メインターゲット
20代後半〜40代前半の都市部在住者。
自然の中でリフレッシュしたい女性や、子どもと自然体験を楽しみたいファミリー層。

◾️本プロジェクトの目的
Webサイトからの予約完了率が低いという課題に対し、UI/UXの改善によって予約までの導線をわかりやすくし、離脱を減らすこと。

| ペルソナ

参考資料 「想定ペルソナ」としてあらかじめ設定されていたもの。

|  UI/UX改善提案

課題要件およびペルソナの情報をもとに、ユーザーの行動や迷いを仮説として整理し、それに基づいた改善提案を行いました。 

①予約導線の変更

離脱ページ単体ではなく、予約体験全体を見直しました。

課題

ページごとにその都度決定を求められ、前の選択を見直ししづらい流れになっていた。

仮説

• 「一度決めないと先に進めない」仕組みが不安や迷いを生み、途中離脱につながっていると考えた。
• 最初に宿泊条件をまとめて選べるようにし、途中で変更したい場合もすぐに修正できる流れに見直した。

 目指す必須要件

• 予約に必要な条件（日付・人数・食事など）をひとつの画面でまとめて確認・設定できること。
• 「どんな滞在になるのか」をイメージしながら安心して予約を進められる状態を目指しました。

 目指す推奨要件 

• 条件設定画面で選択した内容が、以降のページでも常に確認・変更できること。
• 選択した条件に応じて、該当するプランや選択肢のみを表示すること。

現在の予約導線

現在の予約導線

初期段階で条件を整理する導線へ改善

プラン選択画面における絞り込み選択

②宿泊日選択ページ

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

仮説 

• 部屋の予約状況（空室、満室）が事前に確認できないため、入力後に満室と判明し再検索が発生している。この手間によりユーザーが離脱していると考えられる。
• 宿泊日選択時に空室状況を確認できるUIに改善することで、離脱率の低下が期待できる。

目指す必須要件 

• カレンダー上で日付ごとの空室状況が確認できること

　（例：〇＝空あり　△＝残り２室　×＝満室）

• 満室の日付は選択不可であることが視覚的に分かること

目指す推奨要件

• チェックイン／チェックアウト形式で宿泊日数を自動算出できること
• 人数変更時に空室状況が即時反映されること

③宿泊プラン選択ページ 

仮説

• 宿泊プラン数が多い一方で、構成や表示順に一貫性がなく、各プランの違いや特徴が把握しづらい。 ユーザーが「自分に合うプラン」を判断できず、比較検討の途中で離脱していると考えられる。

目指す必須要件

• 各宿泊プランの特徴が一目で把握できること
• プラン同士の違いを比較できること
• 写真や価格を見ただけでは分かりにくい価値が補足されていること

目指す推奨要件

• 人数構成や利用シーンを限定せず、ユーザー自身が状況に当てはめて解釈できる表現であること
• 「どう過ごしたいか」を軸に判断できるラベルになっていること
• 多数のプランの中から、自分に合うものを効率よく絞り込める導線があること

④お部屋選択ページ 

課題

ページの離脱率が42%と高く、改善したい

仮説

• 部屋ごとの違いが比較しづらく、文字情報も多いため、ユーザーが自分の希望条件に合う部屋を判断しづらいと考えられる。

目指す必須要件

• 事前に設定した希望条件（人数など）に合う部屋だけを表示できること
• 部屋ごとの主な違いが確認できること
• 各部屋の特徴が短時間で理解できること

目指す推奨要件

• 部屋の特徴や違いが一目で把握できる視覚表現になっていること
• 比較・選択の決め手となる情報が簡潔に提示されていること

希望条件の変更・絞り込める機能の追加

⑤お客様情報入力ページ  

課題

ページの離脱率が24%と高く、改善したい

仮説

• お客様情報の入力項目において、入力項目の区別が分かりづらく、何をどこまで入力すればよいか判断しにくいため、入力に迷いや手戻りが発生していると考えられる。また、すでに入力済みの情報が再度求められることで、離脱につながっている可能性がある。

目指す必須要件

• 各入力欄において、入力内容がイメージでき、迷わず記入できること
• 必須項目と任意項目が明確に区別されていること
• すでに取得済みの情報を重複して入力させないこと

目指す推奨要件

• 入力時の心理的負担を軽減し、スムーズに記入を進められること
• ユーザーが「なぜこの情報が必要か」を直感的に理解できる構成
• 利用者ごとの事情（アレルギー等）を伝えることができること

|  まとめ

当初、離脱しているページ内で課題解決を図ろうと模索していましたが、UI改善は見た目を整えることではなく、ユーザーが迷わず選択できるように情報を整理し直すことだと実感しました。

特に、決めきれない状態や途中で考えが変わることを前提に設計する視点は、大きな学びでした。難しくとらえず、「使う人がどう感じるか」を言葉にしながら考えることで、自分なりの改善の視点を持つことが大切だと感じました。