UIUX改善｜ECサイト SHElovers 課題解決

【制作物】

・提案資料
・Figmaでのデザインカンプ

【制作情報】

制作時期：2025年7月
制作時間：2週間
使用ツール：Figma

【課題の目的】

・課題が発生している要因を考え、それを解決するUIを提案する力を身につける。
・既存のUIルールやトンマナに沿ってUIを制作することを学ぶ。

【課題要件】

【成果物】

制作したFigmaデータ

■課題①
フォームでの離脱率が大きくカートに商品がはいっても購入完了まで至っている人が少ない

■課題➁
欲しい商品が見つけづらく商品をかごに入れずに離脱している人が多い

【工夫したこと】

・フォーム入力の離脱防止策：
購入フローの途中離脱を防ぐため、必須項目の精査により入力負担を軽減し、さらに全体の進行状況がひと目で分かるステップ表示を導入。これにより、残り作業量が可視化され安心感が生まれ、入力継続率の向上を狙いました。

・商品発見性の改善：
ユーザーが目的の商品へ素早くたどり着けるよう、カテゴリ別ボタンの配置の追加や、検索バーを設置しました。商品の見せ方を整理してサイト内の回遊性を高めました。

・デザインの一貫性：
既存のブランドカラーやUIルールを踏襲しながら、各要素の配色やサイズ、ナビゲーションの配置を最適化。Figma上で統一感と視認性を両立させ、ユーザーが迷わず操作できる画面設計に落とし込みました。

【学んだこと】

ユーザーの視点でサイトが使用しやすいか否かで考えて解決するための提案を考えるのがよいと感じました。独自性を出すことよりも一般的に馴染みのあるデザインの方が使いやすいので、他サイトのUIUXデザインを数多くリサーチするべきだと学びました。
今回は、ZOZOTOWNやand ST、楽天、Amazon、無印良品などのサイトを参考にし、どのサイトも導線がはっきりしており購入完了までスムーズに感じました。
UIUXデザインは日々の中でたくさん触れる機会があると感じたのでサイトを利用する際はUI目線で見て研究をしていきたいと思いました。