【課題制作】UI/UX 制作

OVERVIEW

SHElikes PRO デザイナー6つめの課題。架空クライアントの依頼内容をもとに、課題が発生している要因を考え、それを解決するUIを提案。既存のUIルールやトンマナに沿って制作する事を習得しました。 使用ツール |figma 制作期間|2週間

YEAR 2026

《課題要件》

《ペルソナ》

《改善案》

・まず最初に空室の有無を確認できる導線に配置を変更。
・選択後に「予約できない」ストレスを防ぐUXを意識しました。

◼️宿泊プラン選択ページ(離脱率38%)

課題:ページの離脱率が38%と高く、改善したい

仮説:・希望日の空き状況がわからない。

   ・2家族で行くから2室取りたいのに部屋数が選べない。

   ・子供の料金設定がわからない

・カレンダーに○×、部屋の残数を追加し、空き状況を一目でわかるように変更しました。

・必要部屋数や男女比率、子供の有無の入力欄を追加しました。

・このページだけ「到着日」と記載されていたので「チェックイン」に変更し他ページと統一させました。

◼️お部屋選択ページ(離脱率42%)

課題:ページの離脱率が42%と高く、改善したい

仮説:・ルーム名が同じで詳細が小さく違いが分かりずらい

   ・スクロールをしないと希望の部屋まで辿り着かない

・絞り込み検索を設置し、希望のお部屋のみで検索できるように改善しました。

・ルーム名に違いを入力し絞り込まれたあと、細かい詳細を読み込まなくても、一目でわかるよう設計しました。

・部屋の残数を設定し、ユーザーの決断スピードを早める工夫をしました。

・満室時、カードをグレーアウトし一目で選択不可がわかるよう改善しました。

◼️宿泊プラン選択ページ(離脱率38%)

課題:ページの離脱率が38%と高く、改善したい

仮説:・文字ばかりでイメージが膨らまない。

   ・プランの詳細がわからずどのようなスケジュールか想像がつかない

・各プランに写真を入れ、体験時のイメージがでつきやすいように工夫しました。

・各プランの詳細が見れるようアコーディオンを設置し、プラン内容や詳細がよりわかりやすくなり1日のスケジュールがたてやすいよう工夫しました。

・絞り込み検索を追加しユーザーの迷いを軽減させるよう工夫しました。

◼️お客様情報入力フォーム(離脱率 24%)

課題:ページの離脱率が24%と高く、改善したい

仮説:・具体的に入力する内容がわからない

   ・入力する項目が多くて後回しにしてしまう

・プレースホルダーを設置し入力ミスを軽減するよう工夫しました。

・お名前の入力欄を1行にまとめ、タブ変更の手間を短縮する工夫をしました。

・郵便番号入力のみで、住所を自動反映させ入力箇所を短縮する工夫をしました。

・チェックイン時間をタブで選択できるように改善しました。

◼️補足改善:ディナー選択ページ(ペルソナ課題の解消)

本課題では、予約完了率の向上を目的として、特に離脱率の高い4ページ(宿泊日選択/お部屋選択/宿泊プラン選択/お客様情報入力フォーム)の改善に注力しましたが、課題を進める中でペルソナの不安解消も、最終的な予約完了率に影響する要素であると考え、要件外ではあるものの、補足的な改善提案もあわせて行いました。

・各プランに写真を入れ、料理のイメージがでつきやすいように工夫しました

・各プランの料理詳細が見れるようアコーディオンを設置し、当日出てくる料理を想像してワクワクできる楽しみを追加しました。

・子供メニューも追加し、「子供が食べられるか不安」という心理的ハードルを下げるよう工夫しました。

《本課題で学んだ事》

見た目の美しさだけでなく、「なぜ離脱が起きるのか」を分析し、ユーザーの行動に沿って導線を設計することの重要性を学びました。

また、全体最適だけでなく、お子様連れやアレルギーをお持ちの方など、特定のユーザーへの配慮も設計に組み込むことで、より信頼される体験を生み出せると実感しました。