宿泊施設のUI/UX改善

制作日:

2026年5月

使用ツール

  • Figma

制作時間

1週間


担当領域

UX /UX改善

目次

Figmaページ

制作したFigmaデータ  Figmaプロトタイプ

制作物

THE VEGE LODGEご提案資料_近藤響.pdf

課題要件・ペルソナ

改善提案 宿泊日選択ページ

仮説

  • 空室状況や価格が分からず、運任せの選択となり、満室表示で意欲を失って離脱している

  • 入力内容とカレンダーの連動が弱く、現状を直感的に把握できていない

目指す必須要件

  1. 選択中の期間と入力内容が連動し、現在の選択状態が常に明確であること

  2. 日付ごとの空室状況が、選択前に一目で分かること

改善点
【日程の設定を選択したタイミングで確認できるよう変更】
予約完了までに必要な項目や金額などが常に切り替わることで安心して予約が進められる設計にした。

改善提案 お部屋選択ページ

仮説

  • 部屋の全容や詳細が不明瞭なため、不安が拭えず離脱

  • 同じ名前の選択肢が繰り返されることで、比較を放棄して離脱

  • 「選ぶための決定打」が得られないため、次に進む動機が生まれない

目指す必須要件

  1. 予約完了までのステップにおける自分の立ち位置を常に把握できる状態

  2. 宿泊先を決めるための必須項目を選択する段階で全て開示する

  3. 部屋情報が異なる点を明確にし構造的に理解できる状態にすること

改善点
【安心して予約が進められるようなし構成に変更】
予約完了までに必要な項目や金額などが常に切り替わることで安心して予約が進められる設計にした。

改善提案 宿泊プラン選択ページ

仮説

  • 金額や内容の違いが整理されておらず、比較できずに離脱している

  • 前の選択との紐付けが弱く、内容に不安を感じて離脱している

  • 選択の必須度や全体の流れが不明で、負担を感じて離脱している

目指す必須要件

  1. 各プランの違いが構造的に整理され、直感的に比較できること

  2. 選択済みの客室や日程が常に確認でき、現在の条件を把握できること

  3. 選択の必須性と全体数が分かり、進捗を把握できること

改善点
【視覚的にプランの比較ができるような設計に変更】
プランのカードに写真とカテゴリーを加え内容の違いを把握できるようにした。また、おすすめ順や絞り込みをつけることで自身に必要な情報を取得しやすくした。

改善提案 お客様情報入力ページ

仮説

  • 入力の終わりや必須項目が不明で、不安から離脱している

  • 入力形式の指示が不足し、迷いやエラーを招いている

目指す必須要件

  1. 必須項目が一目で判別できる状態であること

  2. 入力例が示され、迷わず入力できること

改善点
【プレイスホルダー活用】
入力欄にあらかじめ記入例を入れることでエラーを回避できるようにした。迷わず入力したり、必須項目も可視化した。

制作を通じて学んだこと

UI/UX設計において、情報の優先順位を整理し、ユーザーの迷いを排除する重要性を学びました。特にスマホ画面では表示領域が限られるため、情報を詰め込むのではなく、スクロール量と認知負荷のバランスを考慮した設計が不可欠だと実感しました。また、プロトタイプの作成を通じて、ユーザーがどこで躓くかを事前に予測し、視線の流れを止めない一貫性のある設計を構築する意義を深く理解できました。