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

📝制作情報

使用ツール：Figma

作成時期：2026年1月

作成時間：10日間

🗂️目次

• 制作物

　プロトタイプ

　クライアント提案資料

　要件

　ペルソナ

　予約導線の見直し

　各ページの仮説・目指す要件/改善ポイント

• 制作を通して

　工夫したこと

　課題を通して学んだこと

　講師からのFB

🎨制作物

📌プロトタイプ

改善案でのWebサイトの動きがわかるようにFigmaにてプロトタイプ作成を行いました。

📌提案資料

📌要件

クライアント情報

クライアント名：THE VEGE LODGE（ザ・ベジ・ロッジ）

「THE VEGE LODGE（ザ・ベジ・ロッジ）」は、長野県の郊外に位置する宿泊施設。

“野菜がたのしい”をテーマに、自家菜園での収穫体験や、野菜をふんだんに使用したコースディナーを提供しており、自然と食を楽しむことができる点が特徴。日常から少し離れた環境で、訪れた人が「普段の生活では味わえない食と暮らし」を体験できるよう工夫されている。

メインターゲット

 20代～40代前半の都市部在住の方々
 忙しい日常から離れてリフレッシュしたい方
 子どもと自然体験をしたいというご家族層

プロジェクトの目的

既存のWebサイトページにおいて離脱率の高いページを改善し、予約完了率の向上を目指す

【離脱率の高いページ】

お部屋選択ページ（離脱率42%）
宿泊日選択ページ（離脱率63%）
宿泊プラン選択ページ（離脱率38%）
お客様情報入力フォーム（離脱率24%）

📌ペルソナ（参考資料）

📌予約導線の見直し

競合の宿泊予約サイトを調査すると、基本的に「宿泊日・人数選択」を最初に行い、その情報から部屋などの絞り込みをする事が多かった為、予約導線の順序を変更しています。

またユーザーの負担感が多い、「お客様情報の入力」の前に一度予約内容の確認のページを追加しました。

📌各ページの仮説・目指す要件/改善ポイント

①宿泊日選択ページ（離脱率63%）

【仮説】

• 入力する項目がわかりづらく、直感的に入力できず離脱している
• 選択した日付が空室なのか、どのくらいの値段なのか、現在の進捗状況なのか分からず先に進む不安感があり、離脱している

【目指す必須要件】

• ユーザーが直感的に必要項目を入力できるようにすること
• ユーザーが欲しい情報をリアルタイムで提供し不安なく進める様にすること

【目指す推奨要件】

• ユーザーが不安感なく次の選択ページに進める様に、予約完了までの全体像をわかりやすいようにすること
• ユーザーが少ないステップで予約できるように促すこと

②お部屋選択ページ（離脱率42%）

【仮説】

• それぞれの部屋の区別がつきにくく離脱している
• トップページに戻らないと部屋の詳細が分からず、離脱している
• 希望する部屋で空室が見つからず、離脱している

【目指す必須要件】

• ユーザーが希望する部屋を直ぐに見つけられるようにすること
• 部屋の詳細が簡単に見られるようにすること
• 空室スケジュールをすぐに見つけられるようにすること

【目指す推奨要件】

• 希望する条件で空室が見つからなかった場合でも、直ぐに宿泊日・人数選択に戻ることができるようにすること

③宿泊プラン選択ページ（離脱率38%）

【仮説】

• 文章だけの構図の為、ユーザーがイメージしづらく離脱している
• プラン数が多く、選ぶのが億劫となり離脱している

【目指す必須要件】

• ユーザーがプランを視覚的にイメージしやすくすること
• ユーザーが希望するプランがすぐに目に留まるようにすること

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

【仮説】

• どのように入力すればいいか分からず、億劫になり離脱している

【目指す必須要件】

• ユーザーが分かりやすく入力できるようにすること
• ユーザーが必要最低限の情報を入力できるようにすること

💡制作を通して

💭工夫したこと

• 二人のペルソナの希望や、想定できる様々なユーザー視点を意識し、どのような導線であれば使いやすいかを考えながら、修正を行いました。
• 予約完了までの工程が分かりづらいと不安につながるため、現在地が把握できるナビゲーションを設けました。
• 途中で内容を修正できる導線をいくつか用意することやなるべくユーザーが入力する項目や見る項目を減らす等、ユーザーが不安やストレスを感じにくい設計になる様に工夫しました。

💭課題を通して学んだこと

UIUX改善課題を通して、デザインは見た目の美しさだけでなく、ユーザーが迷わず行動できる流れを設計することが重要だと学びました。特に今回の課題のように工程が多い画面では、入力順や現在地が分かるナビゲーションがあることで、ユーザーの安心感につながると感じました。これまでは参考サイトのボタンやナビゲーションをそのまま真似していましたが、今回の課題を通して、サイトの目的やユーザー視点を考えて設計する意識が以前より強くなりました。

🌟講師からのFB

• 提案内容、UIデザインについて
  ヒアリングの内容を踏まえ、要因の分析、解決策の提示、アウトプットの提案まで論理的に流れを組み立てられていると思います。
  サービスや予約システムの特性も取り入れた提案になっており、クライアントにあったオリジナリティのある提案になっていると感じました。
• 資料のアウトプットについて
  要件定義から課題・仮説・改善案の整理、UIの提案まで、トンマナを踏襲してわかりやすく整理できていると思います️。細部まで整え、見やすく工夫されている点もいいですね！