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

1.制作物

Figmaデータはこちら

2.課題要件

クライアントとの打ち合わせ情報を元に要件を整理・要約しました

3.ペルソナ（クライアントからの提供）

・想定ペルソナNo.1

・想定ペルソナNo.2

4.UI/UX改善

予約導線〜特に離脱率の高いページ（以下に記載）に対するUI/UX改善、さらに離脱率を防ぐためのUI/UX改善の提案を行いました。

①予約導線の変更

これまでの導線では「お部屋選択」を先に行う構成でしたが、「まず宿泊日を決めてから予約を検討する」流れの方が自然だと考え、ページ順を「宿泊日選択 → お部屋選択」へ変更しました。

実際の宿泊検討では、空いている日程を起点にプランや部屋を比較するケースが多く、先に日程を確定させることで選択肢を絞り込みやすくなります。

これにより、ユーザーの思考負荷を軽減し、迷いにくいスムーズな予約体験を目指しました。

②宿泊日選択ページの改善（離脱率63%）

③お部屋選択ページの改善（離脱率42%）

④宿泊プラン選択ページの改善（離脱率38%）

⑤お客様情報入力ページ（離脱率24%）

⑥予約フローの可視化、選択内容の確認表示を追加

⑦ディナーの違いが伝わる、迷いにくい選択ページへ改善

⑧入力内容を確認しながら修正できる設計

6.本課題で学んだこと

• UIデザインは見た目を整えるだけでなく、ユーザーが迷わず行動できる「流れ」をつくることが重要だと学びました。

• 情報の出し方や順序、文言の違いによって迷いや不安が生まれ、離脱につながる可能性があることを意識するようになりました。

• 各ページの役割を整理し、表記や導線を統一することで、体験全体がスムーズになると実感しました。

• 常にユーザー視点で考え続けることの大切さを、この課題を通して学ぶことができました。