leango
UI/UXレビュー動画

【後編】健康食品ECのUI/UX改善レビュー|DHCの検索・絞り込み・カート導線を解説

この動画でわかること

健康食品・化粧品ECの「DHC」のUI/UXとCVR改善ポイントを、CVR改善ツールDejamを提供するLeanGo代表が解説。CVRの高い検索導線の位置、SKUの多いカテゴリの絞り込みUX、カート導線のCTA文言の改善余地を事例ベースで紹介します。

健康食品・化粧品ECのUI/UX改善|レビューの概要

この動画は後編として、健康食品・化粧品ECの「DHC」を題材に、UI/UX と CVR(コンバージョン率)改善の観点からレビューしている。商品数(SKU)の多い大規模ECで、ユーザーが目的の商品へ最短で到達できるかという探索UXに焦点を当てているのが特徴。

結論として、DHCはカテゴリ設計やランキング・閲覧履歴レコメンドなど基本設計は整っている一方、CVRの高い検索導線の配置、SKUの多いカテゴリの絞り込み、カート導線のCTA文言には改善余地があると評価されている。

・CVRの高い検索導線の位置とレコメンド検索
・商品カテゴリとショートカット導線
・SKUが多いカテゴリの絞り込みUX
・商品ページの可読性とコンテンツ量
・カート導線のCTA文言と配送・決済情報


この動画の重要ポイント5つ

・ECサイトでは検索導線は使用率は低いがCVRが高い重要機能
・商品数が多いECではカテゴリ設計とショートカット導線が重要
・SKU数が多い商品カテゴリでは絞り込みUXが成果を左右する
・商品ページの文字サイズはターゲット年齢層を考慮する必要がある
・カート導線とCTA文言の不一致は購入体験を混乱させる可能性がある


商品検索UIのUX評価|CVRが高い検索導線が下に配置されている

DHCのトップページでは「商品を探す」エリアに検索機能が配置されている。一般的なECサイトでは検索の使用率はそこまで高くない一方、検索ユーザーのCVRは非常に高いという特徴があるため、検索機能はヘッダー付近やファーストビュー周辺など目立つ位置に置くことが多い。

今回のUIでは検索エリアが比較的下部にあるため、より上部に配置する改善余地があると考えられる。どの導線がどれだけ使われ、どこで離脱しているかはヒートマップで確認すると配置判断がしやすい。


検索UIの改善ポイント|レコメンド検索の導入余地

検索機能では人気検索ワードやサジェストが表示されている。さらに改善する場合、検索入力時におすすめ商品・人気商品・関連商品などを表示するレコメンド検索を導入すると、検索経由のコンバージョン率向上が期待できる。


商品カテゴリUIの評価|ショートカット導線の改善余地

トップページには商品カテゴリ一覧が2カラム構造(カテゴリ画像+カテゴリ名)で配置されている。より良いUXにする場合、カテゴリ内の人気商品や主要サブカテゴリをカテゴリ横にショートカット表示する方法も考えられる。ECサイトでは「欲しい商品に最短で到達できるか」が非常に重要なポイントとなる。


商品数が多いECの課題|SKU数の多さと検索性

DHCのサプリメントカテゴリには300以上の商品(SKU)が存在しており、これだけ商品数が多い場合はカテゴリ検索・絞り込み・成分検索などの機能が重要になる。今回のUIでは価格絞り込みなどはあるが、「成分から探す」「効果から探す」といった検索方法があれば、さらに商品探索体験が向上する可能性がある。


絞り込みUIの改善点|フィルター追従の必要性

商品一覧ページには絞り込み機能が用意されているが、スクロールすると絞り込みUIが画面外に消えてしまう。商品数が多いECではフィルターの追従表示や絞り込みパネルの固定などのUX設計が重要で、ユーザーが何度もスクロールして戻る必要がある場合は離脱率が上がる可能性がある。


商品ページUIの評価|文字サイズの可読性

商品ページのテキストサイズは比較的小さめ。DHCのユーザー層は健康食品やサプリメントを購入する層が多く比較的年齢層が高い可能性もあるため、フォントサイズ・行間・情報の強調などを調整することで読みやすさを改善できる余地がある。


商品ページコンテンツの特徴|CMSによる情報量差

商品によって画像枚数や説明量に差があり、これはおそらくCMSで優先商品・人気商品に多くのコンテンツを投入する仕組みになっていると考えられる。人気商品では画像枚数が多く説明も充実しており、購買判断を後押しする構造になっている。


カート導線のUX評価|CTA文言と挙動の不一致

商品ページで「購入する」ボタンを押してもカートページには遷移せず、モーダルでカート追加される仕様になっている。ボタン文言と実際の挙動が一致していないため、ユーザーが混乱する可能性がある。一般的なECサイトでは「カートに追加」「購入手続きへ進む」など選択できるUIが多い。

どの文言や挙動がコンバージョン率に効くかはABテストで比較検証するのが確実だと考えられる。


カートページの改善ポイント|配送・決済情報の明確化

カートページでは「いつ届くのか」「どの決済方法が使えるのか」などの情報が分かりづらい。購入直前のユーザーにとって配送情報や支払い方法は重要な判断材料のため、注文ボタン付近に配送目安・決済方法・送料条件を明示すると購入率の改善につながる。


よくある質問(FAQ)

Q. ECサイトで検索導線はどこに置くべきですか?

A. 検索は使用率こそ高くないものの検索ユーザーのCVRは高いため、ヘッダー付近やファーストビュー周辺など上部の目立つ位置に置くのが基本。レコメンド検索を加えるとさらに効果的。

Q. SKU(商品数)が多いECで離脱を防ぐには?

A. 成分・効果などの軸で探せる絞り込みを用意し、スクロールしてもフィルターが追従・固定されるようにすること。目的の商品へ最短で到達できる探索UXが離脱率を下げる。

Q. カートに追加するボタンの文言で注意すべき点は?

A. 「購入する」と書いてあるのにモーダルでカート追加されるなど、文言と挙動がずれるとユーザーが混乱する。挙動に合わせた文言にし、配送・決済情報も近くに示すと購入率が上がりやすい。


まとめ|DHC ECサイトのUI/UXに学ぶCVR改善

DHCのECサイトは、カテゴリ設計が整理され、ランキング導線や閲覧履歴レコメンドが機能しているなど大規模ECとして基本設計は整っている。一方で検索導線の位置、SKUが多いカテゴリの検索性、絞り込みUX、カート導線の分かりやすさには改善余地が残っている。

商品数の多さに対する探索UXをどう磨くかが要点であり、こうした仮説検証はABテストヒートマップを備えたCVR改善ツールで効率化できる。健康食品・化粧品ECのUI/UX改善・LPOの参考になる事例といえる。

関連動画

関連記事

あわせて読みたいお役立ち資料

この動画に関連するDejamの機能