【SHElikes PROデザイナーコース実践課題】 改善目的選定・UI改善
【実施時期】2026/1月
【制作概要】・UI改善デザイン作成・提案資料作成・モックアップ作成 (任意)
【制作期間】18時間(改善案/デザイン作成)・2時間(提案資料作成)
【使用ツール】Figma目次
課題要件
ペルソナ
提案資料・改善デザイン
予約導線
現行の「日程選択後に満室だとわかる」という二度手間の解消のため、最初に「人数・宿泊日」の条件を入力したのち連動したカレンダーで"条件に合う部屋"のみ選択可能に。
その後、お部屋、プラン選択と進める流れで離脱防止になると考えました。
宿泊日選択ページ
現行のデザインでは、予約完了までのステップが分からない上に直前のページで自分の選択した内容が確認できずページ戻りが発生すると過程。全ページ上部にステップバーを追加し、またタブ下に選択済みの項目がストックされることでサマリーも確認できるよう改善しました。
お部屋選択ページ
現行は写真が小さくテキストが多いため、部屋のイメージがしにくい・それぞれのプランの違いがわからないことが課題でした。 そこで写真を大きく配置し、詳細条件はタグにし整理しています。 情報を視覚化することで、比較検討のストレスを減らし、離脱防止につながると考えました。
宿泊プラン選択ページ
「野菜がたのしい。」のコンセプトで惹かれたユーザーに対し、最も重要な宿泊プランのデザインがテキストのみになっていたため、体験イメージが湧きにくい状態でした。そこで、写真を複数配置して視覚的な魅力を伝えるよう工夫しました。また、豊富なプラン数による「スクロール疲れ」を防ぐため、絞り込み機能を追加し、 ユーザーが自分にぴったりの体験を迷わず見つけられる設計を目指しています。
ディナープラン選択ページ
以前はテキストのみで食事のイメージが湧きにくかったため、写真を大きく配置して食事スタイルの魅力を伝えています。 また、重要なアレルギー対応については、案内をトップに配置し安心感を高めました。 申込みフォームへの誘導もスムーズにし、ユーザーの不安を解消する動線を設計しています。
お客様情報入力ページ
入力時のストレスを最小限に抑え、スムーズに予約を完了できる設計を目指しました。 常に予約内容を確認できるようサマリーを表示し、ユーザーの安心感を高めるよう工夫しました。 また、郵便番号からの住所自動検索やプレースホルダーを導入し、入力の手間を大幅に削減。 「何を入力すべきか」を迷わせない設計でフォームの離脱率低下目指しています。
課題を通して学んだこと
クライアントの課題から課題解決の仮説と要件を立てるプロセス
「サイトからの予約完了率の低さ」という課題に対し、まずはユーザー目線で現行デザインを徹底的に分析。 「どこで、なぜ離脱するのか」という仮説を立てることで、根拠のある改善案をデザインに落とし込めるようになった。
既存のUIルールやトンマナに沿ってUIを作成すること
ブランドの世界観を崩さない、一貫性のあるデザイン制作を学んだ。 クライアントから提供されたブランドガイドラインから既存のUIルールを徹底。追加ページや要素の作成においてもサイト全体のトーン＆マナーに馴染ませることで、ユーザーが違和感なく操作できるデザインを意識して制作した。