【UI/UX改善】架空ECサイト商品発見・フォーム改善 | 実践課題

制作時間：約15時間

制作期間：約2週間

制作範囲：ペーパープロトタイプ・Figmaでのデザインカンプ・提案資料

使用ツール：Figma

目次

• 課題内容／要件
• 制作物
  • 課題①提案資料
  • 課題②提案資料
• 工夫したポイント
• 課題を通して学んだこと

課題内容／要件

制作物

①フォーム離脱改善、②商品発見改善の2つの課題に取り組みました。

・課題① 提案資料

制作したFigmaのプロトタイプはこちらよりご覧いただけます。

・課題② 提案資料

▼TOPページ

▼商品一覧ページ

▼商品詳細ページ

▼お気に入り機能

制作したFigmaのプロトタイプはこちらよりご覧いただけます。

工夫したポイント

• 根拠の言語化⋯提案資料作成時は、それぞれの画面に対して「なぜこのUIにしたのか」を言語化することに力を入れた
• ユーザー視点での整理⋯工夫ポイントをただ列挙するのではなく、ユーザー目線でどう役立つのかを意識して整理した
• 全体導線の設計⋯お気に入り機能や検索絞り込みのように、新規で追加した要素は「サイト全体の導線」としてどう機能するかを考え、全体の一貫性を意識してデザインした
• 運用を考慮した設計⋯実装時や運用していく際にはパターン分けしておくとより管理しやすいので、一覧画面作成の際には静的ページ・動的ページなどのURL構造も考えて複数パターンをFigmaで用意した

課題を通して学んだこと

• UI改善においては「見た目」だけでなく、なぜそのUIにしたのか／ユーザーにどう役立つのか を明確に説明できることが重要だと学んだ。
• 検索やフォーム入力のように「ユーザーが離脱しやすい部分」は、小さな改善の積み重ねで大きく体験が変わることを実感した。
• UIを検討するときは、完成形を考えるだけでなく、0件時やエラー時など例外パターン まで考慮することで、安心感や信頼感のある体験になると理解できた。