【ECサイト UI/UX改善】SHE loves様

OVERVIEW

架空ECサイトのUI/UX改善ならびに改善提案資料を作成。 課題の発生要因を追求→分析→解決するためのUI/UX作成を学びました。 ※オンライン デザインスクール「SHElikes PRO デザイナー」実践課題

YEAR 2025

制作時期 :2025年7月

制作時間 : 約8時間

制作範囲 :既存ECサイトのUIデザイン改修、提案資料の作成

ツール  : Figma、Good Notes (ペーパープロトタイプ)



【制作物】


実際のUI (Figma)

【概要と情報設計】


クライアント情報

SHE株式会社様

サービス名:SHE loves (ECサイト)

現在はSHE likesのCIを展開したグッズがメインだが、今後コスメや日用品、家具など生活に関わる商品の開発をしていく予定。


依頼内容

SHElikes株式会社様のブランド展開として、ECサイト「Sheloves」を運営。

売り上げを伸ばすためにUIUX改善に取り組み、以下2つの課題を解決したい。

・フォームでの離脱率が大きくカートに商品が入っても購入まで至っている人が少ない


・ほしい商品が見つけづらく、商品をカゴに入れずに離脱している人が多い




ターゲット

・SHElikesの会員


・まだ会員ではないがSHElikesに興味がある人


・SHElikesの世界観が好きな人



ペルソナ

小宮 れい (29)|夫と2人暮らし|IT企業で事務職|東京都在住|SHElikes会員
・将来はフリーランスのWebデザイナーになりたいと思い入会。Webデザインコースを中心に受講中
・他スクールもいろいろとみたが、SHElikesの世界観に惹かれ入会を決める
・会員さん同士でも繋がりが多くプライベートでもよく交流している

・SHElikesの受講モチベーションを高めたい

・SHElikesの世界にもっと触れたい



情報設計のポイント

・クライアントが視覚的に理解しやすいよう提案資料を作成した

→直感的に一目で、どんな問題をどのようにして解決するのか分かりやすいようにした。

・発生している要因と解決するための要件は表で表す

・UIの工夫点を箇条書きにし、線や色を使ってビジュアルで示す



・カスタマージャーニーに基づいて改善を行なった

→当該ECサイトの理想「SHElikesの世界観に共感しているユーザーが、“ストレスなく”スムーズに買い物体験をし「購買欲」を向上させながら、購入完了へと辿りつくこと」と今の現実を比較した際のギャップから見えてくる課題の要因に対して、課題解決のための必須要件と推奨要件を考えた



【解決する課題① 】

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



01. カスタマージャーニー比較 (理想と現実)



02. 課題が発生している要因と解決するための要件 

03. ペーパープロトタイプ


04 完成したUI (解決方法)



05. 完成したUI




【解決する課題②】

「ほしい商品が見つけづらく、商品をカゴに入れずに離脱している人が多い」


01. カスタマージャーニー比較 (理想と現実)


02. 課題が発生している要因と解決するための要件 

03. ペーパープロトタイプ


04 完成したUI (解決方法)



05 完成したUI




【気付き・学び】

普段何気なく使っているECサイトには、明確な設計の意図とユーザー視点の使いやすさを重視した工夫がされている

・ECサイトの規模、商品数、取り扱い商品など様々なシチュエーションによって使用するUIが異なり、その時の最適なUIを選択していくことが重要

・UI/UXデザインは「ユーザーが迷わず、ストレスなく使えること」が大前提でで、バナーやLP制作とは異なった設計の仕方やデザインの工夫が求められる