宿泊サイトの予約ページ(自主制作)

OVERVIEW

SHElikes PROデザイナーの課題にて作成した宿泊サイトの予約ページです。予約前に離脱率の改善を目的に作成いたしました。

YEAR 2025

🌸対応範囲🌸

・情報設計

・デザイン制作

・WFのブラッシュアップ

🌸情報設計🌸

1.サイトの目的

・宿泊利用者の獲得

2.ターゲット

・主に20代後半〜40代前半の都市部在住の方々を中心に想定

・特に、忙しい日常から離れて自然の中でリフレッシュしたいという女性や、子どもと自然体験をしたいというご家族層

・Instagramなどで施設の写真を見て興味を持ってくださる方が多い

🌸ペルソナ🌸

・東京都在住一人暮らし女性

・InstagramやPinterestで「自然に癒される宿」などをよく検索

・都会の喧騒から離れて、ひとりで静かに過ごしたい

🌸工夫したところ🌸

①お部屋選択画面でオプションも選択できるようにしてページ遷移を少なく

・禁煙/喫煙の選択はトグルボタン、オプションの選択はプルダウンにして、お部屋を選択しながら選択できるように。そうすることでページ遷移を少なくし、ユーザー負担を軽減



②すべて選択しないと次に進めないようにする

・未選択の部分があるときは白ベース、選択がすべて終わったら濃い緑にすることで、視覚的に次に進めることを伝える



③選択した到着日と出発日をわかりやすく

・カレンダーで線選択した日付は緑の背景になるようにする

・カレンダー下部に選択した到着日と出発日が自動入力される仕様にし、自動入力される文言を追加

④お客様情報それぞれに入力例を追加

・グレーで入力例を記載しておくことで、入力する際にユーザーが迷うことを回避する

⑤お客様情報に入力エラーがあったときは、それぞれ赤背景と赤字でエラーの場所の内容を表示させる

・エラー内容を詳しく記載することで、ユーザーが何が原因で次に進めないのかをわかりやすくする

🌸学習を通して学んだこと🌸

・すべての工程を1ページするわけではなく、1ページ内に収められる工程は収めるようにすることで、ユーザーストレスを緩和することができること

・ユーザー情報の入力画面に記入例を記載することで、ユーザーの離脱率を下げる効果があること