この動画の重要ポイント5つ
- ブランド横断ECならではの「情報量設計」がUXを左右する
- 絞り込みUIはデザイン性より“直感性”が最優先
- 商品詳細はタブ設計によりスクロール負荷を軽減できている
- カート導線はアップセル設計が優秀だがUI崩れが課題
- ログイン／新規登録の見せ方次第でCVRはさらに改善できる
導入｜うさぎオンラインのECサイトをUX視点で分析する背景
今回取り上げられたのは、株式会社うさぎオンラインが運営するECサイト。
ジェラートピケやスナイデルなど複数ブランドを横断的に扱うモール型ECであり、
・ブランド数の多さ
・アパレル×コスメの複合展開
・アプリ強化施策
が特徴的。
実店舗体験からのサイト訪問という流れも踏まえ、
「ブランド横断ECのUX設計」がテーマとなっている。
トップページのUI/UX評価｜ブランドモール型設計の強み
第一印象として、
・多数ブランドロゴの回転表示
・メンズ／レディース両対応
・フリーワード検索をヘッダー上部に配置
など、基本設計はセオリー通り。
特に評価できる点は、
「アパレル＋コスメ同時購入でポイント10%還元」
というアップセル施策をファーストビュー近くに置いている点。
単価差が大きい商材構成のため、
クロスセル設計は合理的。
一方で、
・カテゴリ導線がやや弱い
・新規ユーザー向けの入口が少し分かりにくい
という課題も見られる。
ランキング・新着導線のUI設計｜回遊性向上施策
ランキングはカテゴリ別に切り替え可能。
ただし、
・6商品表示はやや少ない
・View Moreの視認性が弱い
・センタリング配置でCTAが埋もれている
といった改善余地がある。
例えば、
・9商品デフォルト表示
・「もっと見る」右寄せ＋矢印アイコン追加
などでCTR向上が期待できる。
絞り込みUIのUX評価｜独特だが直感性に課題
一覧ページで特に特徴的だったのが、
サイドから出現する絞り込みUI。
構造自体は合理的だが、
・カテゴリ切替時の表示変化が分かりづらい
・ブランド／カラー等の区分が直感的でない
・現在の検索条件表示が弱い
など、「デザイン優先で理解負荷が高い」可能性がある。
改善案として、
・見出し強調
・アイコン追加
・現在の検索条件の常時表示
・並び替えを上部へ移動
などが挙げられる。
UXは“おしゃれさ”より“即理解”。
ここが最大の論点。
商品一覧のUI設計｜3列表示と独特なコンテンツ挿入
3列表示への切替はスムーズで好印象。
一方、
商品サムネイル左下に表示される独自UI（着用事例導線）は、
・クリック率は高そう
・しかし戻った際の表示挙動が不安定
という印象。
ABテスト前提の可能性はあるが、
UXとしてはやや独特。
商品詳細ページのUI/UX評価｜タブ設計は優秀
特に良かった点は、
「商品説明」と「サイズ」をタブで切り替え可能にしていること。
多くのアパレルECが縦長スクロール型である中、
・情報を即座に切替可能
・スクロール負荷軽減
・必要情報へ即到達
という点で優秀。
関連商品・ランキング・レコメンドも適切に配置され、
回遊設計はセオリー通りで安定感がある。
カート導線のUX評価｜アップセル設計とUI崩れの課題
カート追加時、
・中間ポップアップで購入継続を促す
・即遷移せず回遊を促進
という設計はアップセル視点で合理的。
一方で、
・一部デザイン崩れ
・ボタン横の矢印が窮屈
・横幅いっぱいのボタンがやや重たい印象
などUI微調整の余地がある。
また、
「カートグループ」というブランド別配送概念は
多ブランドECならではの設計。
ロジック上は正しいが、
説明の分かりやすさは改善余地あり。
ログイン・新規登録のUX設計｜CVR改善余地が大きい領域
ログインと新規登録が縦並び構成。
改善案として、
・タブ切替形式
・ファーストビュー内に両フォーム表示
・見出しデザイン強化
などが考えられる。
コピー面では、
「ログイン（新規会員登録してレジに進む）」
と両者を明記している点は評価できる。
会員登録時の
・500円クーポン常時表示
・インセンティブ訴求
はコンバージョン後押しとして良い設計。
まとめ｜うさぎオンラインECのUX総評
強み：
・ブランド力
・タブ設計の活用
・アップセル施策
・レコメンド設計
改善余地：
・絞り込みUIの直感性
・一覧ページの導線整理
・カートUI微調整
・ログイン／新規登録動線最適化
全体として完成度は高いが、
「情報量の多さをどう整理するか」
が今後のCVR改善ポイント。
