【実践課題】ECサイトのUI/UX改善

制作期間：2週間

制作範囲
ペーパープロトタイプ・デザインカンプ・提案資料（PDF）

制作に使用したツール：Figma

目次
1.要件（課題の内容）
2.UI/UXの改善提案
3.制作したFigmaデータ
4.制作をする上で工夫した点
5.制作を通して学んだこと

1.要件（課題の内容）

クライアントから提供された依頼資料とデザインルール、修正前のデザインカンプです。

依頼資料の「03 クライアントが抱えている課題」より、3つの課題のうち下記の2つの課題を選択し、UIの改善と提案資料の作成を行いました。

①フォームでの離脱率が大きくカートに商品が入っても購入完了まで至っている人が少ない
②ほしい商品が見つけづらく、商品をカゴに入れずに離脱している人が多い

2.UI/UXの改善提案

上記で選択した2つの課題に対し、課題が発生している要因とそれらの解決策を考え、以下の資料にまとめました。

⚫︎課題①の解決策（必須要件）
・入力フォームにプレースフォルダーを設定する。
・郵便番号からの住所検索を出来るようにして、手動で住所を入力する手間を削減する。
・都道府県や数字はプルダウンリストで入力できるようにする。
・記入必須項目を明確にする。

⚫︎課題①の提案資料（全4P）

⚫︎課題②の解決策（必須要件）
・検索フォームを設置する。
・カテゴリごとに商品を表示させる。

⚫︎課題②の提案資料（全5P）

3.制作したFigmaデータ

全体のUI、修正したデザインカンプは以下から確認いただけます。

4.制作をする上で工夫した点

• クライアントが抱えている課題に対し、他の競合サイトがどのようなUIで対処しているのか、リサーチを徹底して行いました。
• ECサイトのトンマナを崩さぬようデザインルールに則りつつ、「ユーザーに起こして欲しいアクションは何か？」「最重要ではないが目立たせたい箇所は？」ということを考えながらボタンやアイコンのカラーを選定しました。
• 課題が発生している要因に対し、どんな解決策を提案したのか見やすく分かりやすい資料の作成を心掛けました。（3〜4色で色分けした図形と線を使用）

5.制作を通して学んだこと

• UIデザインを考える際は、サイトを利用するユーザーの立場になって仮説を立て、検証していくことの大切さを学びました。
• アイコンを効果的に使用することで、直感的にどんなアクションが起こるのかが分かり、ストレスなくサイトの操作ができることを学びました。
• ボタンの色の使い分けで、起こしてほしい行動を適切に促せることを学びました。
  例：購入手続きをする、注文を完了するボタンの背景色は濃い色にする／フォームでの入力エラーがあるときは、非アクティブのカラーにしてクリックできないことを明示する
• アイコンやボタンの大きさを統一したり、要素同士の余白を適切に設けることで、見やすく操作のしやすいサイトになることを学びました。