この動画の重要ポイント5つ
- 商品一覧ページで差分が一瞬で分かるUIはCVR改善に直結する
- 情報量が多すぎるとユーザーは説明文を読まなくなる
- 比較・診断導線は一覧ページ上に設置するのが理想
- 定期購入導線は世界観と心理的ハードルへの配慮が必要
- UI改善は「削る」「畳む」「迷わせない」が基本原則
導入｜DUO（デュオ）クレンジングバームのUI/UXを検証する背景
動画の冒頭では、出演者が実際のユーザーとしてDUOのクレンジングバームを長年使っている体験談からスタート。
緑・黒など複数ある商品の違いを「自分は説明できない」という状態を起点に、ECサイトのUI/UXだけで違いが理解できるのかを検証していく流れが提示される。
ユーザー視点でのサイト回遊｜商品一覧ページのUI/UX評価
実際にユーザーになりきり、メニューから「クレンジングバーム」へ遷移。
- メニューにアイコンがあり分かりやすい
- タップ領域が広く、スマホ操作に配慮されている
- 一覧ページの初期表示だけで
- 黒：毛穴・炭ケア
- 緑：保湿・肌荒れケア
が直感的に理解できる
商品一覧ページのUI/UXとしては完成度が高く、ユーザーの目的達成が早いという評価。
商品一覧ページのUI/UX改善ポイント｜ファーストビューの情報量
一方で、CVR改善視点では課題も指摘。
- ファーストビュー内で見える商品数が少ない
- カテゴリー説明・情報量が縦に長く、スクロール負荷が高い
- テキスト情報はほとんど読まれていない可能性
改善案として、
- 情報を畳む
- カルーセル化する
- コンパクトにして「下にまだ商品がある」ことを示す
といったファーストビュー最適化が提案される。
商品比較のUI/UX設計｜色分けデザインのメリットと注意点
商品ごとに色（赤・黒・緑）で特徴を表現している点は評価される一方、
- 特徴エリアまで色を強く変えることで
「意味の違い」を考えさせてしまう - CTAボタンの色と混同し、認知負荷が増える可能性
比較しやすさと迷わせないデザインのバランスがUI/UX上の論点として語られる。
商品選択を支援するUI/UX｜診断コンテンツの必要性
ユーザーが「どれを選べばいいか迷う」状態に対して、
- 美容診断・タイプ診断
- 「あなたに合うクレンジングバーム」導線
があれば、
納得感＋選択ストレス軽減＋CVR向上につながると指摘。
実際、商品詳細ページには診断UIが存在するが、
商品一覧ページからの導線が弱い点が改善余地として挙げられる。
商品詳細ページのUI/UX評価｜定期購入と通常購入の設計
商品詳細ページでは、
- 定期／通常の切り替えがラジオボタンで可能
- 価格差・割引は分かるが、送料条件が直感的に分かりにくい
特に、
- 定期購入説明が別サイト（コーポレート側）に遷移する
- 世界観が急に変わる
点はUXを損ねる可能性があると指摘される。
カート画面のUI/UX改善｜情報量とレイアウト最適化
カート画面では、
- 金額情報が縦に並びすぎて高さを取っている
- 注意文言の中央寄せ・改行過多で読みにくい
改善案として、
- 金額項目を2カラム化
- 注意文言の左寄せ・簡潔化
など、CVRを落とさないUI調整の重要性が語られる。
アップセル・レコメンドのUI/UX設計
購入導線の中で、
- 関連商品
- おすすめアイテム
- 追加購入提案
が表示されるが、
- 回遊させすぎて離脱するリスク
- 逆に購入意欲を高める可能性
このバランスを取るために、
行動データを元にした出し分けUXの可能性が示唆される。
まとめ｜UI/UX改善で重要なのは「違いを一瞬で理解させること」
動画全体を通しての結論は、
- 商品数が少ないからこそ
- 「違い」「選び方」「次の行動」を
迷わせずに提示するUI/UXが重要
という点。
完成度の高いECサイトでも、
CVR改善の余地は細部にまだ残っているという示唆で締めくくられる。
