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

【制作時間】30時間

【制作年】2025年2月

【使用ツール】Figma

|  制作物

|  課題要件

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

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

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

| ペルソナ

ペルソナ①｜自然の中でリフレッシュしたい都市部在住の女性年齢・属性
30代前半／都内在住／会社員

ライフスタイル・価値観
平日は仕事に追われがちで、週末や連休は自然のある場所で気分転換したいと考えている。
SNSやWebで宿を探すことが多く、「どんな時間が過ごせるか」を重視している。
細かく決めるのは苦手で、比較しながらゆっくり検討したいタイプ。

宿泊時のニーズ・行動
・日付が未定のまま宿探しを始めることがある
・食事内容や過ごし方を重視
・途中で条件を変えながら検討したい
・予約途中で迷うと離脱しやすい

ペルソナ②｜家族で自然体験を楽しみたいファミリー層

年齢・属性
40代前半／都市部在住／共働き／子どもあり

ライフスタイル・価値観
子どもに自然体験をさせたいと考え、休日は家族で出かけることが多い。
宿泊先選びでは、部屋の広さや定員、食事内容などを事前にしっかり確認したい。
「家族で安心して過ごせるか」を重視する現実的な判断軸を持っている。

宿泊時のニーズ・行動
・人数や部屋条件が合うかを早い段階で確認したい
・選択肢が多すぎると比較に疲れてしまう
・条件に合うものだけを絞り込んで見たい
・入力や選択の手戻りが多いとストレスを感じやすい

|  UI/UX改善提案

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

①予約導線の変更

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

課題

予約導線の途中で、各ページごとに決定を求められる一方、前の選択に戻って見直すことができない構造になっている。

仮説

• 他に確認したい情報があっても「決めないと先に進めない」状態が生まれ、ユーザーの不安や迷いが離脱につながっていると考えた。
• 最初に宿泊条件をまとめて選択できる設計とし、予約完了までの導線を短縮。途中で条件が変わった場合も、すぐに修正できる導線を目指した。

 目指す必須要件

• 条件設定画面で、予約に必要な選択項目を一覧で確認できること。
 これにより、ユーザーは選択事項の全体像を把握でき、同時に施設で体験できる内容を具体的にイメージしながら予約を進められる状態を目指す。

 目指す推奨要件 

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

②宿泊日選択ページ

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

仮説 

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

目指す必須要件 

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

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

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

目指す推奨要件

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

③宿泊プラン選択ページ 

仮説

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

目指す必須要件

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

目指す推奨要件

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

＜＜画像＞＞

④お部屋選択ページ 

課題

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

仮説

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

目指す必須要件

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

目指す推奨要件

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

＜＜画像＞＞

⑤お客様情報入力ページ  

課題

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

仮説

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

目指す必須要件

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

目指す推奨要件

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

＜＜画像＞＞

|  工夫したこと

・日付・人数・部屋数・過ごし方など、宿泊に必要な条件を最初にまとめて設定できる画面を設け、途中でも条件を変更できる導線に再設計した。

・各ページで求められる判断を明確にし、「今なにを考えればいいのか」が伝わる構成を意識している。また、写真を中心に、タグやアイコンで情報を整理し、比較しやすくした。

・家族向け・カップル向けといった属性ではなく、「どう過ごしたいか」を軸に表現することで、誰でも自分ごととして選べるよう工夫した。

|  まとめ

当初離脱しているページ内で課題解決を図ろうと模索していたが、UI改善は見た目を整えることではなく、ユーザーが迷わず選択できるように情報を整理し直すことだと感じた。特に、決めきれない状態や途中で考えが変わることを前提に設計する視点は、大きな学びだった。難しくとらえず、「使う人がどう感じるか」を言葉にしながら考えることで、自分なりの改善の視点を持つことが大切だと感じた。