この動画の重要ポイント5つ
- ファーストビュー直下に高CV導線を置く設計はCVR改善に直結する
- ブランド世界観と視認性はトレードオフになりやすく、UI設計の判断が重要
- CTAサイズ・色・配置は「目立たせすぎない」最適解が存在する
- 定期コース・商品数が多い場合は「絞り込みUI」がUXを大きく左右する
- LP・EFO・CRM(LINE連携)まで一貫したUX設計がCVR最大化の鍵
導入|バルクオム(BULK HOMME)ECサイトのUI/UXを検証する背景
本動画は、コンバージョンレート改善に特化したマーケティングファームの視点から、
株式会社バルクオムが運営するECサイトのUI/UXを実際に操作しながらレビューする内容。
一般ユーザー視点で
「どこが良く、どこに改善余地があるのか」
をリアルな導線で検証していく構成となっている。
ファーストビュー設計のUI/UX評価|高CV導線の置き方
ファーストビューのUI/UX評価|良い点
一般的なECサイトでは、
- ヘッダー
- メインビジュアル(スライダー)
が最上部に配置されるケースが多い。
一方バルクオムでは、
- ヘッダー
- メインビジュアルの直下に定期コース・商品導線を配置
という特徴的な設計が採用されている。
これは、
- CVRが高いと想定される導線を
- あえて最短距離に置いている
点が非常に印象的だと評価されている。
ブランドトンマナ設計|ECサイト全体のUI統一感
バナー・クリエイティブのUI/UX評価
- バナーごとに「VIEW MORE」を明示
- 押せる要素が直感的に分かる
- 商品が増えてもトンマナが崩れていない
モール型ECにありがちな
「商品ごとにデザインがバラつく問題」がなく、
ブランドレギュレーションが徹底されている点が高評価。
ヘッダー・追従ナビのUI/UX設計
回遊性を高めるUI/UXの工夫
- スクロール時にメニューが追従
- 必要なタイミングでヘッダーが再表示
常時固定ではなく、
「見せるタイミング」を設計している点がUX的に優れていると指摘される。
商品一覧・コース一覧のUI/UX評価
商品一覧ページのUI/UX評価|良い点
- コースごとに明確にカテゴリ分け
- 画像を大きく使ったリッチなUI
- ブランド感が強く伝わる構成
商品一覧ページのUI/UX評価|改善点
一方で、
- 画像+文字の構成により視認性が下がる
- 装飾が強く、伝えたい情報が埋もれる
- 商品数が多いことで選択コストが上がる
といった課題も挙げられる。
商品選択体験のUI/UX改善案|絞り込み設計
改善案として、
- シャンプー
- 洗顔
- プロテイン
など、用途別に一度絞らせてから商品を表示するUIが提案されている。
商品数が多いECサイトでは、
「最初に迷わせない設計」がCVR改善の鍵となる。
LPのUI/UX評価|CTA設計と世界観のバランス
LPのUI/UX評価|良い点
- キャッチコピーのABテストが前提の構成
- CTAカラーがプライマリーとして明確
- 小さめCTAでコンテンツ可読性を確保
LPのUI/UX評価|改善余地
- CTAカラーと背景色が競合する場面がある
- 強調しすぎると視認性が下がるリスク
CVRと可読性のトレードオフを理解した設計が随所に見られる点が特徴。
CRM・Web接客のUI/UX設計
LINE連携・ポップアップの活用
- 滞在時間に応じたポップアップ表示
- LINE追加によるナーチャリング導線
今すぐ購入しないユーザーを
CRMに取り込む設計として有効だと評価される。
動きのある表現によるUI/UX最適化
- 動画
- GIF
- グラフアニメーション
を活用し、
- 使用感
- 質感
- 効果イメージ
を「読ませずに伝える」工夫がなされている。
ページ全体にリズムが生まれ、
最後まで見たくなるUXにつながっている点が評価される。
EFO・カートUIの評価|外部カートの課題
カート画面のUI/UX評価|課題点
- 外部カートによる世界観の分断
- 入力項目は一般的で改善余地あり
一方で、
- 独自カード特典の表示
- 購入後メリットの明示
など、最後の後押しUIは効果的とされている。
まとめ|CVR改善におけるUI/UX設計の本質
この動画を通して一貫して語られているのは、
- とにかく1コンバージョンを取りに行く設計
- そのためのUI/UX上の細かい意思決定
完成度の高いECサイトであっても、
- CTA
- 商品一覧
- LP
- CRM
- EFO
それぞれにCVR改善の余地は必ず存在するという示唆で締めくくられる。