架空宿泊施設のUIUX改善【課題制作】

■制作したもの

• 改善案データ
• クライアント様への提案資料

Figmaで現行のデザインカンプを修正し改善案データを作成。また、クライアント様への提案資料をスライドで作成いたしました。

■課題概要

クライアントは、宿泊サイトの予約完了率低下という課題を抱えていました。提供データから、予約フローの途中で多くのお客様が離脱していることが判明。特に、情報入力前の段階で高い離脱率が見られ、ユーザビリティに大きなボトルネックがあると考えられました。

この問題に対し、各離脱ページに仮説を立て、分析と改善を進めました。

■解決策の特定

予約プロセスの各ページについて、ユーザー行動に基づいた「仮説」と「要件」を設定しました。その仮説を解決に導くため、デザインの必須条件と推奨条件を具体的に定義し、改修の指針としています。

この分析で、予約完了までの遷移数が全7ページと多く、お客様に大きな負担をかけていることが分かりました。そこで、個別のページの問題点を解決することに加え、「ページの統合による遷移数の削減」を今回のUI/UX改善における重要な方針の一つとしました。

■UIUX改善

今回の制作では、一貫して「一目でわかる」「ユーザーが迷わない」というUX原則を第一に設計を工夫しました。

宿泊日選択ページ

■仮説と要件

✓仮説：不安と手間による離脱
空室・料金の確認に手間（クリック数や遷移）がかかることや、エラー発生時のリカバリーの煩雑さにより、予約モチベーションが急速に低下している。

〇必須要件
・カレンダー上で、空室のある日付の「最安値」と「空室/満室」の状態を色や記号で一目でわかる用にする。

・選択中の日程は常に画面上部に固定表示し、確認の手間を省く

〇目指す推奨条件
・満室の日付はクリックさせない（選択できない）ようにし、「空室なし」が理由でエラー画面への遷移はさせない設計にする。

■改善案

予約フローにおいて最初にお客様が詳細な意思決定をするカレンダー画面の認知負荷を軽減しました。

空室状況を示す「〇×△」アイコンを、カレンダー内に色分けして表示することで 、空室状況と最低料金を一目で把握できるようにしました。特に、満室の日をグレーアウトすることで、エラーを事前に回避する設計に変更。

これにより、「空いている日を何度も探す」というストレスが解消され、ユーザーは迷うことなく次のステップへ進めます。

お部屋選択ページ

■仮説と要件

✓仮説：選択コストの増大
類似した情報が並列され、それぞれの部屋の「明確な違い」が一目で判別できないため、選ぶことに疲れて離脱している。

〇必須要件
各部屋の違いを一目で判別できるようにする。

〇目指す推奨条件
ユーザーにあったお部屋をおすすめし、選択の手間を省く。

■改善点

改善前は、同一ルームタイプ内でも条件違いのお部屋が混在しており、お客様を混乱させてしまっておりました。

そこで、お部屋をルームタイプごとに整理・分類し、「朝食の有無」「喫煙・禁煙」などの詳細な区分を明確にすることで、求めるお部屋を瞬時に見つけられるデザインに刷新しました。

さらに、お部屋検索で入力された人数にあわせて「お客様に最適なお部屋はこちら」という帯で案内。探索コストと迷う時間を短縮し、お部屋選びのストレスを軽減を目指した設計にしました。

宿泊プラン選択ページ

■仮説と要件

✓仮説：選択コストの増大
・プラン内容と最終的な支払い総額がすぐに把握できないため、不信感や不安が生じている。
・プランとオプションの違いや選択肢の自由度が不明瞭で混乱する。

〇必須要件
選択した日付とお部屋に基づいた「合計金額」をプラン選択中も画面下部に常に表示。

〇目指す推奨条件

プランが宿泊の基本となるパッケージであることが体感でわかる構成にし、ユーザーの迷いをなくす。

宿泊日の選択直後にプラン選択画面を同一ページに統合し、ユーザーが迷うことなく次のアクションに進めるようにしました。これにより、予約フローの遷移数を削減し、操作の手間を解消します。

また、予約の過程で「最終的にいくら支払うのか」という料金に対する不安は、離脱の大きな要因となります。そこで、画面の下部に合計金額を常に表示する設計にすることで、料金の透明性を高めました。

この「見える化」による安心感が、お客様が自信を持って予約を進められる環境を作り出し、離脱率の低下に貢献すると考えました。

お客様情報入力ページ

■仮説と要件

✓仮説：選択コストの増大
・必須入力の不明瞭さや入力の手間により、入力直前で「面倒くさい」と感じ、離脱に至っている。

〇必須要件
・必須項目には赤字のアスタリスク（＊）をつけ、明確に表示する。
・郵便番号からの住所自動入力を実装し、お客様の入力手間を削減する。

〇目指す推奨条件
・各入力欄の目的（例：半角英数字、姓名など）をプレースホルダーや入力欄の下にわかりやすく表示し、ユーザーが悩む隙を与えない。

お客様情報入力フォームの課題は、入力時のストレスと記入ミスの多さによる離脱と考えました。

改善策として、必須項目に赤字の＊マークを付与し、各項目に記入例を表示することで、ユーザーの入力時の迷いを徹底的に解消しました。特に、郵便番号からの住所自動入力機能と、時刻をドロップダウンにすることで、入力の手間を削減。

また、宿泊人数を「大人・子ども」に区分し、お子様の食事・寝具の要否を詳細に伺うことで、最適なサービス提供を可能にすると同時に、お客様に「しっかり対応してくれる」という安心感を提供します。

各CTAボタンから検索ページへの遷移

CTAクリック時にモーダルで「希望条件のみ」を入力する画面を立ち上げ、ユーザーに「これだけ入れればOK」と安心してもらう設計としました。これにより、初期入力の心理的な障壁を最小限に抑えます。

また、入力された条件は、空室検索ページの上部に表示し続けることで「入力した情報がどこかへ消えていないか」という不安を解消。

「認知負荷の分散」と「情報の可視化」により、検索の開始から予約完了までのプロセス全体におけるストレスが軽減し、離脱率の低下につながると考えました。

ページ遷移数の削減

「宿泊日選択ページにプラン選択」「お部屋選択にディナー選択」を統合することで、既存の予約プロセスにおけるページ遷移数を2ステップ削減し、予約体験を効率化しました。

お客様の認知負荷と入力への心理的ハードルを下げ、予約へのモチベーション高い状態のまま予約完了へと導く導線設計に改善しました。

■今回の課題を通じて学んだこと

・今回の課題を通して、「なぜ離脱が起きるのか」「なぜこのデザインで改善できるのか」という問いに対して、一つ一つ客観的な根拠と仮説を持って分析し、改善案を導き出すプロセスの大切さを深く学びました。先入観にとらわれず、ユーザーの不便を明確に言語化し、提案書に落とし込むことの重要性を実感しています。

・既存の制約と理想的なUXのバランスを取る難しさ、そしてその塩梅を見極める重要性を実感しました。また、Figmaのオートレイアウト機能を実践的に習得できたことは大きな収穫です。今後は、プロトタイプ機能の習熟度を高め、臨場感のある動的なデザインを提案できるデザイナーを目指し、継続して学習を進めていきます。