この動画の重要ポイント5つ
- 総合通販ECでは「カテゴリートップ切り替えUI」が重要な導線になる
- ファーストビューのバナー設計は“横幅・余白”でクリック率が変わる
- 大手ECでは「マーケ施策」と「商品企画」の表示バランス調整が発生する
- 閲覧履歴ベースのレコメンド（PVベース）がトップページに反映されている
- 商品数が多いECはランキング・カテゴリタブ設計が重要になる
導入｜DHCオンラインショップのUI/UXリニューアル分析
今回は大手通販ブランドDHCのオンラインショップを対象に、リニューアル後のUI/UXを分析。
DHCは
・化粧品
・健康食品
・サプリメント
・ダイエット商品
などを扱う総合EC。
商品数が非常に多いため、
「カテゴリ導線」
「レコメンド」
「ランキング」
などの設計がUI/UXの重要ポイントとなる。
ヘッダーUIの評価｜リニューアルでも基本構造は維持
ヘッダーやハンバーガーメニューは、リニューアル後も大きく変更されていない可能性が高い。
大規模ECでは、
・ヘッダー変更は影響範囲が広い
・改修コストが高い
ため、
トップページ
商品ページ
カート
などの主要画面を優先して改善するケースが多い。
そのため、ヘッダーは既存UIを維持するリニューアルも珍しくない。
カテゴリートップ切り替えUIの評価｜総合通販ECの重要改善
今回のリニューアルで目立つのが、
トップから
・化粧品
・健康食品
・ダイエット
などのカテゴリートップに直接切り替えられるUI。
総合通販ECではよくある課題として、
「このサイトが何の商品を売っているのか分かりにくい」
という問題がある。
そのため、
カテゴリごとに専用ページを用意し
ユーザーを直接誘導する設計は非常に合理的。
総合ECのUIとしては完成度が高い構造といえる。
ファーストビューのバナー設計｜横幅設計の工夫
ファーストビューのバナーは
・自動スライドではない
・横幅100%ではない
という設計。
バナーを画面いっぱいに表示するのではなく、
左右に次のバナーを少し見せることで
「次のコンテンツがある」
という気づきを与える設計になっている。
このようなUIは
「続きを見たくなる心理」
を利用したクリック誘導の工夫といえる。
大手EC特有のUI事情｜部署間バランスのデザイン
トップページには
・新商品
・コラボ商品
・企画商品
などが表示されている。
大手ECでは、
マーケティング
商品企画
営業
など複数部署の施策が存在する。
そのため、
「売上重視の導線」
「新商品の露出」
のバランスを取る必要がある。
トップバナーのサイズや配置には、こうした内部事情が影響することも多い。
レコメンドUIの評価｜閲覧履歴ベースのおすすめ表示
トップページでは、
ユーザーが閲覧した商品に応じて
表示商品が変化する仕組みが確認できる。
例：
・プロテインを閲覧
→ プロテイン関連商品表示
・美容液を閲覧
→ 美容液関連商品表示
これは
「PVベースレコメンド」
と呼ばれる仕組み。
ユーザー行動データを利用して、興味のある商品を優先表示している。
さらに精度を上げるには、
・購入履歴
・お気に入り登録
・CVデータ
などを組み合わせる方法もある。
人気商品ランキングUIの評価｜総合ECでは必須導線
商品数が多いECでは、
「何を買えばいいか分からない」
という問題が発生する。
そのため、
人気ランキング
カテゴリランキング
は非常に重要な導線。
今回のUIでは、
・カテゴリタブで切り替え
・高さを抑えたカード表示
により、
コンパクトにランキングを表示している。
ランキングから商品を探すユーザーにとっては、非常に分かりやすい構造。
特集コンテンツのUX評価｜記事型コンテンツの導線
トップページには
「特集」
として記事コンテンツも配置されている。
これは
・商品理解
・ブランド理解
・SEO流入
などを目的としたコンテンツ。
キャンペーンとは違い、
読み物コンテンツとして商品を紹介する役割を持っている。
ECサイトでは、
商品ページだけでなく
記事コンテンツ導線も重要になってきている。
まとめ｜DHC ECサイトのUI/UX総評
今回のリニューアルで特に評価できるポイントは
・カテゴリトップ切り替えUI
・閲覧履歴レコメンド
・ランキング導線
・バナー設計
など。
総合通販ECの課題である
「商品数の多さ」
を整理するUI設計がしっかり作られている印象。
今後の改善余地としては、
・ランキング表示数
・キャンペーン導線
・レコメンド精度
などが挙げられる。
大規模ECらしい、完成度の高いUI/UX設計といえる。
