この動画でわかること
スキンケアD2C「DUO」のUI/UXとCVR改善ポイントを、CVR改善ツールDejamを提供するLeanGo代表が解説。商品一覧のファーストビュー、色分け比較デザイン、診断導線、定期購入フォームの改善余地を事例ベースで紹介します。
スキンケアD2CのUI/UX改善|レビューの概要
この動画では、スキンケアD2Cブランド「DUO(デュオ)」のクレンジングバームのECサイトを題材に、UI/UX と CVR(コンバージョン率)改善の観点からレビューしている。複数あるバームの違いを「サイトのUI/UXだけで理解できるか」という実際のユーザー視点を起点に分析しているのが特徴。
結論として、DUOは商品一覧ページで色分けにより各商品の違いを直感的に伝える完成度の高いUIを備える一方、ファーストビューの情報量、選択を支援する診断導線、定期購入フォームやカート周りに改善余地がある。
・商品一覧ページの違いの伝わりやすさ
・ファーストビューの情報量とスクロール負荷
・色分けデザインによる比較のしやすさ
・診断導線と定期購入・カートのUX
この動画の重要ポイント5つ
・商品一覧ページで商品の違いが一瞬で分かるUIはCVR改善に直結する
・情報量が多すぎるとユーザーは説明文を読まなくなりファーストビューが間延びする
・色分けは比較を助ける一方、CTAと混同すると認知負荷が上がる
・「どれを選べばいいか」を支援する診断導線は一覧ページ上に置くのが理想
・定期購入導線は世界観の分断と心理的ハードルへの配慮が必要
商品一覧ページのUI/UX評価|違いが一瞬で伝わる設計
メニューにアイコンが添えられタップ領域も広く、スマホ操作に配慮されている。一覧ページの初期表示だけで「黒=毛穴・炭ケア」「緑=保湿・肌荒れケア」といった違いが直感的に理解でき、ユーザーの目的達成が早い完成度の高いUIだと評価されている。
商品点数が限られるD2Cでは、この「違いを一目で伝える」一覧設計がそのままコンバージョン率(CVR)に効く。
商品一覧の改善余地|ファーストビューの情報量
一方で、ファーストビュー内に見える商品数が少なく、カテゴリー説明など縦に長いテキストでスクロール負荷が高い点が課題として挙げられる。テキスト情報はほとんど読まれていない可能性が高い。
情報を畳む、カルーセル化する、コンパクトにして「下にまだ商品がある」ことを示すなどのファーストビュー最適化で回遊率を高められる。実際にどこまで読まれ、どこで離脱しているかはヒートマップで可視化すると改善点を特定しやすい。
色分けデザインのUI/UX評価|比較しやすさと迷わせないバランス
商品ごとに赤・黒・緑で特徴を表現する設計は比較を助ける一方、特徴エリアまで色を強く効かせると「色の意味の違い」を考えさせてしまい、CTAボタンの色とも混同して認知負荷が上がる可能性がある。
比較しやすさと「迷わせないデザイン」のバランスが論点で、配色の良し悪しはABテストで検証するのが確実だと議論されている。
商品選択を支援するUX|診断コンテンツと一覧からの導線
ユーザーが「どれを選べばいいか迷う」状態に対し、美容診断・タイプ診断や「あなたに合うクレンジングバーム」といった導線があれば、納得感と選択ストレスの軽減につながりCVR向上が期待できると指摘される。
実際には商品詳細ページに診断UIが存在するものの、商品一覧ページからの導線が弱い点が改善余地として挙げられている。
商品詳細ページのUI/UX評価|定期購入と世界観の分断
商品詳細では定期/通常購入をラジオボタンで切り替えられ、価格差や割引は分かる一方、送料条件が直感的に分かりにくい。さらに定期購入の説明が別サイト(コーポレート側)へ遷移し、世界観が急に変わる点はUXを損ねる可能性があると指摘される。
カート画面も金額情報が縦に並びすぎて高さを取り、注意文言の中央寄せ・改行過多で読みにくい。金額項目の2カラム化や注意文言の簡潔化など、入力完了率を落とさないEFO(入力フォーム最適化)の調整余地がある。
よくある質問(FAQ)
Q. スキンケアD2CのECでCVR改善の余地が大きいのはどこですか?
A. 商品一覧のファーストビュー情報量と、選び方を支援する診断導線です。違いを一目で伝えつつ、迷うユーザーを次の行動へ導く設計がコンバージョン率に効きます。
Q. 商品の色分けデザインで気をつける点は?
A. 比較を助ける反面、特徴エリアやCTAまで色を強く効かせると意味の違いを考えさせ認知負荷が上がります。効果はABテストで検証するのが確実です。
Q. 定期購入・カートで離脱を防ぐには?
A. 送料条件を分かりやすくし、別サイトへ飛ばさず世界観を保つこと。金額表示の整理や注意文言の簡潔化などEFO観点の調整も有効です。
まとめ|スキンケアD2CのUI/UXから学ぶCVR改善
DUOのUI/UXに一貫しているのは「商品の違い・選び方・次の行動を、迷わせずに提示する」という考え方。商品点数が限られるD2Cだからこそ、違いを一瞬で理解させる一覧設計と選択支援がコンバージョン率を左右する。
一方でファーストビューの情報量、定期購入・カートのEFO、診断導線には伸びしろがある。こうした仮説検証はABテストやヒートマップを備えたCVR改善ツールで効率化でき、スキンケアD2CのUI/UX改善・LPOで成果を出しやすくなる。
関連動画
関連記事
【2026年最新】BtoBサイトのCVR改善ガイド|業界別平均・低い5つの原因とリード獲得を増やす施策15選
【2026年最新】BtoBサイトのCVR改善ガイド|業界別平均・低い5つの原因とリード獲得を増やす施策15選
【2026年最新】ECサイトのCVR改善ガイド|業界別平均・カゴ落ち対策と売上を伸ばす施策15選
【2026年最新】ECサイトのCVR改善ガイド|業界別平均・カゴ落ち対策と売上を伸ばす施策15選
【2026年最新】不動産サイトのCVR改善15施策|業界平均と原因も解説
【2026年最新】不動産サイトのCVR改善15施策|業界平均と原因も解説
【2026年最新】保険サイトのCVR改善15施策|業界平均と原因を徹底解説
【2026年最新】保険サイトのCVR改善15施策|業界平均と原因を徹底解説
あわせて読みたいお役立ち資料
【登壇資料公開】BtoBマーケター必見!CROの定石と裏技を大公開!▼登壇資料抜粋はこちら▼ B2Bサイトでは、費用対効果や苦労対効果の問題で実施が後回しされがち、 しかしアクションをしないと永遠に機会損失をします。 ↓ 定石パート 1.簡単でもい… 無料ダウンロード
【2024年版】LPO(サイト改善)ツール最新カオスマップを公開カオスマップ作成の背景 近年、LPの最適化はWebマーケティングや広告運用において、CVR改善・PDCA高速化のために必要不可欠なプロセスとなっています。 しかし、その最適化プロセ… 無料ダウンロード
総合通販サイト10社のWEBサイトCVR改善案を40件考えてみた総合通販サイトCVR改善事例40選総合通販会社CVR改善事例集を作成してわかったこと ほとんどのWebサイトでは基礎的な改善ポイントが見つかった ex.不要な高さを取っている、CTAボタンを設置していないなど 共通… 無料ダウンロード



