【UI/UX 改善提案】SHE lovers（ECサイト）

【所要時間】　約2週間

【使用ツール】Photoshop、Figma

| 目次

• 要件
• UI/UX改善提案
• 工夫したポイント
• 今後に活かせること

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

| 要件

クライアントが抱える課題に対し、ECサイトのUI/UXを改善する提案資料を作成。
ゴールは「フォーム離脱の低減」と「商品発見のしやすさ向上」。

| UI/UX改善提案

既存のECサイトのブランドイメージやクオリティを損なわないよう、既存のデザインルールに則ってトンマナを揃えた上で、改善提案を実施しました。
クライアントの課題に対しては、発生要因を仮説立てて検討し、それに基づく具体的な解決策を資料としてまとめました。

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

◾️課題②：ほしい商品が見つけづらく、商品をカゴにいれずに離脱している人が多い

| 工夫したポイント

◾️ログイン画面

ユーザーの利用状況に応じた優先順位を考慮し、以下の順でボタンを配置しました。

①会員ユーザー → ②ゲストユーザー → ③新規会員登録

これにより、既存ユーザーが素早くログインできる動線を確保しつつ、ゲストユーザーや新規ユーザーにも対応した、スムーズでストレスのない導線設計を実現しています。

◾️お客様情報入力画面

＜ステップインジケーター＞

画面上部にはステップインジケーターを設置し、現在のステップが視覚的に認識できるように色分けで表示しています。

当初は「1/3」のような分数表記の案も検討しましたが、今回はステップ数が少ない構成であるため、直感的に流れが把握しやすいビジュアル型のインジケーターを採用しました。

これにより、ユーザーが現在位置を一目で把握でき、安心して購買プロセスを進められる設計になっています。

◾️ホーム画面

＜ランキングやお気に入りアイコン＞

ランキング表示では、1位をゴールド、2位をシルバー、3位を銅色のアイコンで表現することで、視覚的にランキング順位が一目でわかるようにしました。視認性を高めることで、ユーザーの注目を集め、購買意欲の促進を図っています。

また、お気に入りアイコンには色の変化を加え、ユーザーが「お気に入り済み」であることを直感的に把握できるようにしました。これにより、操作結果が即座に伝わり、ユーザー体験の向上につながっています。

＜パンくずリスト＞

キーワード検索やカテゴリ検索を実行した際には、検索結果画面の上部に「ホーム ＞ 検索『キーワード名またはカテゴリ名』 結果：X件」といった形でパンくずリストを表示するように設計しました。

これにより、ユーザーは現在どの検索経路にいるのかを即座に把握でき、サイト内での位置づけを明確に認識できます。視認性と操作性の両面から、ストレスの少ない検索体験を実現しています。

| 今後に活かせること

ユーザーの離脱要因を分析し、課題解決型のUI/UX設計の重要性を学びました。

シンプルで直感的なデザインを意識し、スムーズな購買導線を構築。検索機能や視認性の向上を図り、快適なショッピング体験を提供できるよう改善を続けます。