BtoB業界トップECの裏側！徹底したUI/UX改善とスマホ最適化

PCサイトは以下４つの調査を実施し、大幅なCVR改善効果を出しています。
それぞれの調査内容について順にご紹介します。

ヒューリスティック評価は認知心理学の応用とユーザビリティ理論に基づく専門家による調査です。
サイト評価を実施した結果、総合評価は「D（問題あり）」と判定しました。

全32項目の課題が抽出され、特に「信頼感・安心感」「フォーム・入力項目」「ナビゲーション」の領域で、新規ユーザーの購入ハードルとなる問題が多く散見されました。
例えば、未ログイン状態で商品をカートに入れても画面に変化がなく戸惑いを生む点や、エラー入力時の警告がページ上部にしか出ず修正箇所が分かりにくい点など指摘が目立ちます。
一方で、テキストや画像、リンク設定などの軽微な修正で対処できる課題も多く、早期の改善による効果が期待できる状態でした。

具体的な課題とその改善案の例は以下の通りです。

【信頼感・安心感】に関する課題
課題: 初回訪問者に実力を示す数値（サロン数や商品点数）がトップページにしかなく、他ページから流入した約8割のユーザーに伝わっていない。
改善案: 自己紹介的な要素として、共通ヘッダーのロゴ付近に実績数値を設置する。

課題: バナーをクリックした際、予告なくログインを要求される遷移があり、ユーザーがクリックを躊躇する原因になる。
改善案: ログイン必須のバナーには「会員限定」などのアイコンを表示する。

【ナビゲーション】に関する課題
課題: ログインしていない状態でカートに商品を入れると、ページが再読込されるだけで何が起こったか分かりにくい。
改善案: ポップアップ表示を自動で閉じないようにするか、カートの位置を明示して変化を分かりやすくする。

課題: ショッピングカート画面で、「カートを空にする」ボタンと「買い物を続ける」ボタンの位置・デザインが同じで隣接しており、誤操作のダメージが大きい。
改善案: 「カートを空にする」ボタンが不要であれば削除し、ボタンのデザインを変更して差別化する。

【フォーム・入力項目】に関する課題
課題: 会員登録の個人情報入力フォームで、ページを下にスクロールすると「※印」が必須であることを忘れてしまう。
改善案: ※印ではなく、項目ごとに「必須」「任意」と明記する。

課題: 配送先の新規登録時に、郵便番号から住所を自動入力するボタンがない（新規会員登録時にはあるのに設定されていない）。
改善案: 新規会員登録時と同様に、住所の自動入力ボタンを設置する。

【サイト内検索 / レイアウト・段組】に関する課題
課題: 共通ヘッダーのキーワード検索のカテゴリ絞り込み（プルダウン）が多すぎて選びにくい。
改善案: プルダウンに表示するのは「大カテゴリ＞中カテゴリ」までにする。

課題: 検索結果一覧ページで、検索機能枠がファーストビューのほとんどを占め、表示要素も重複している。
改善案: 検索結果一覧側では、重複する表示条件（表示順、画像など）を非表示にし、シンプルにする。

これらの課題と改善案は、日々のサイト更新で活用するための「ユーザビリティガイドライン」としても整理・共有されています。

アクセス解析では、全体のアクセスからボトルネックを特定しました。
最大の課題は、全アクセスの約3割を占めるスマートフォンユーザーに対してPCサイトを表示してしまっており、CVRが極端に低くなっていることによる大きな機会損失でした。
また、商品一覧ページでは検索枠が大きすぎてファーストビューに商品が表示されないためCVRが低下していることなどが定量的なデータから裏付けられました。

その他具体的な課題例は以下の通りです。

1. スマートフォンからのアクセス最適化（デバイスの課題）
【課題】
PCサイトへのアクセスのうち、スマートフォン（SP）端末からのアクセスが約27%〜37%と大きな割合を占めているにもかかわらず、
CVR（コンバージョン率）が1.38%と、PC端末（7.08%）の約1/6と極端に低い状態です。
SP端末からのアクセスに対してPCサイトを表示してしまっており、大きな機会損失が発生しています。

2. 閲覧開始ページ（UI・導線）の課題
【課題】
特定の特集ページ（カラーチャート等）や商品一覧ページのCVRが極端に低く、直帰率が高い傾向にあります。
カラーチャート特集： 画像が大きく読み込みが遅い、1枚の画像のように見えて個別の商品ページへのリンクが分かりにくい、購入できるページという認識が薄いことが原因と考えられます。
商品一覧ページ（例：業務用ドライヤー）： 検索条件などの枠が大きすぎ、ファーストビュー（画面を開いて最初に見える範囲）に商品がほとんど表示されていないことがCVR低下の要因です。

3. カテゴリー別パフォーマンスのアンバランス
【課題】
カテゴリーごとの閲覧数（PV）と注文に至る率にギャップが生じています。
「理美容器具・用品」はPVが最も多いものの、注文に至る率が11%と低く、ユーザーのニーズに対して品揃えや商品力が応えられていない可能性があります。
逆に「ネイル・まつげ商材」や「エステ化粧品」は、PVは少ないものの注文に至る率（20%〜30%）が高い状態です。

4. コンテンツ（特集ページ）の貢献度の低さ
【課題】
サイト全体のPVのうち、特集ページが見られている割合はわずか5.5%〜5.7%程度であり、実際に注文したユーザーのPVの中でも特集ページの割合は2.5%〜2.8%に留まっています。全来訪者の約94%以上は特集ページを見ていない状態です。

5. 流入経路と集客の課題
【課題】
昨年同月と比較して、全体の成長率に対して「検索エンジンからの一般ワード（非指名ワード）」および「他社ドメイン（比較サイトやブログ等）」からの流入による受注数の伸びが鈍く、伸びシロを残している可能性があります。

6. サイトの表示速度・パフォーマンス
【課題】
アクセスが集中する時間帯（9時や15時など）において、ページの平均表示時間が長くなる（4秒〜5.6秒など）傾向が見られます。本来は訪問数が多い時間帯でも表示時間が変わらない状態が理想です。

同業他社だけでなく、アスクルやモノタロウといったBtoBの先進サイト、さらにはBtoCトップサイトとの比較調査を行いました。

その結果、商品の説明自体は比較的洗練されており、カテゴリが多い中での検索導線も工夫されていますが、新規来訪者や利用開始から浅いユーザーにとっては利用ハードルが高い状態でした。
他社サイトではファーストビューに「実績を示す数値」や「納期」を明記して安心感を与えていること、カテゴリ名の横に商品点数を表示していること、
エラー時には入力欄のすぐそばにアシスト表示を出していることなど、自社サイトに欠けているベストプラクティスが次々と明らかになり、具体的な改善案の策定に繋がりました。

各プロセスにおける具体的な課題例は以下の通りです。
1. トップページ・ファーストビュー
【課題】
第一印象を形成するファーストビューに、自社の「実績を示す数字」や「納期に関する表示」がありません。
共通ヘッダーに送料や問い合わせ番号などの必要な情報はありますが、文字が少し小さく感じられます。
左カラムにバナーが多すぎて整理されておらず、結果としてメインカラムの下部が大きく空白になってしまっています。

2. 検索機能・カテゴリ選択
【課題】
キーワード検索の精度が低く、表示スピードも遅いという問題があります。また、カテゴリ一覧から各カテゴリの「商品点数」がわかりません。

3. 商品詳細・レビュー・カート追加
【課題】
ユーザーレビュー機能が提供されていません。
商品を「カート」や「マイカタログ」に入れた際の挙動がわかりにくく、ユーザーが不安や戸惑いを覚える可能性があります。

4. カート・入力フォーム（購入プロセス）
【課題】
ショッピングカート画面において、レコメンド（おすすめ商品）が提供されていません。
新規配送先の登録や、配送先を選択する画面のUIが複雑でわかりにくい状態です。
エラーアシストについて、入力エラー時の警告表示が「ページ上部のみ」に出るため不親切です。

実際のユーザ（美容サロン関係者など）6名を対象にタスクを与え、行動を観察しました。結果として、課題の半数近くが「商品を探すプロセス」に集中していることが判明しました。具体的には、理容師であっても「ヘア水物」という独自のカテゴリ名がスタイリング剤等を指す言葉だと理解できず商品を探し出せない事態や、グローバルナビの階層ルールが混在していて迷う様子、カテゴリのプルダウンメニューが長すぎてスクロールに苦労する様子などがリアルに観察されました。これにより、運営者視点では気づきにくい「ユーザの生の声」に基づく改善方針が固まりました。

全課題の半数近く（8項目）が「商品を探す」プロセスに関するものであり、この部分の改善余地（伸びシロ）が大きいことが明らかになっています。

【課題】被験者から挙がった不満一例
グローバルナビから商品が探しにくい
カテゴリ選択のプルダウンメニューが見にくい
絞り込み項目が不足しており、機能に気付きにくい
商品仕様（スペック）が一覧に表示されていない
価格帯検索で全角文字が使えない
レコメンド（関連）商品が少ない
会員登録と契約のフローがわかりにくい
フォーム入力エラーがわかりにくい　　など

抽出された71項目の改善案のうち、39項目を実装した後の効果検証では、劇的な成果が確認されました。目標CVR5.28%に対して実績は5.44%（達成率161%）となり、昨年同月比でも11.5%の改善を達成。
これを経済効果に換算すると、単月で約1,965万円の売上底上げ効果が実証されました。さらに、新規ユーザーのCVRもリピーター以上に向上しており、誰もが使いやすいサイトへと生まれ変わったことが証明されました。

当時はガラケーサイトを単に変換表示しているだけの簡易サイトでユーザビリティが考慮されておらず、スマホ経由の売上がほとんど期待できない状態でした。
また、ビューティガレージ社内では「業務用なのにスマホサイトは重要か？」という議論も湧きましたが、ECマーケティングは当時スマホサイトの成功事例を次々に生み出していたため、強く推奨し理解を得られました。

こういった経緯から現行サイトの修正ではなく、ゼロから新しいスマホサイトを制作する前提でベストプラクティスを出す目的で調査した結果とペルソナ設計を行い、スマホサイト制作の完成度を大きく底上げすることができました。

スマホサイトのベストプラクティスを抽出するため、同業他社にとどまらず、楽天、Amazon、ZOZOなどのBtoC先進サイトや、モノタロウなどのBtoBトップサイト計8サイトを対象に、
22の評価軸によるヒューリスティック評価を実施しました。

この調査から、スマートフォンならではの17の参考要素が導き出されました。
例えば、「プルダウンメニューでの細かなカテゴリ表示はスマホでは使いづらいため、大カテゴリまでに留める」「共通ヘッダーの右肩に検索導線を常に固定表示し、迷子を防ぐ」
「小さな画面で情報が単調にならないよう、商品名や価格のフォントサイズ・色を大胆に変えてメリハリをつける」といった、UI/UXを飛躍的に向上させる具体的なレイアウトや機能のベストプラクティスを獲得しました。
また、BtoBサイト特有の課題として「既存顧客に特化しすぎて新規顧客への導線が弱くなる」傾向も発見し、自社サイト設計における注意点として共有されました。

抽出された具体的な課題例をいくつか紹介します。

1. 商品検索とカテゴリ選択の課題
スマートフォンにおいて、細かな階層まで表示される「プルダウン」でのカテゴリ一覧は使いづらいという前提があります。

2. ナビゲーション（ヘッダー・フッター）の課題
サイト構造が見渡しにくく、検索への移動がスムーズにできないと離脱に繋がります。