業務用ECサイトのUI/UX改善とSEO強化リニューアル

TOP > 制作・開発実績 > 法人向けサービス > 業務用ECサイトのUI/UX改善とSEO強化リニューアル

Client

クライアント

株式会社ビーウェイブは、神奈川県横浜市に本社を構え、美容のプロフェッショナル向けに事業を展開する企業です。主力事業として、エステティックサロンや美容クリニックに向けた業務用美容カタログ通販と連動したオンラインショップ「BE-WAVE Style」を運営しています。多彩なブランドの取り扱いや、導入後の手厚いインストラクターサポートを強みとし、業界内の多様なニーズに応えています。

会社名: 株式会社ビーウェイブ
事業内容: 国内外の業務用美容商材や美容機器の卸販売・化粧品や美容機器の企画開発および製造販売・業務用美容カタログ通販オンラインショップ「BE-WAVE Style」の運営
資本金: 1,200万円
社員数: 40名

Result

プロジェクト成果

UI改善と徹底したSEO対策により新規獲得が増加し、潜在層へのアプローチも強化できました。

Solution

プロジェクトの背景

同社は「取り扱いブランドの豊富さ」や「購入後の手厚いサポート」といった強力なビジネス上の強みを持っていました。しかし、既存のECサイトではそれらの魅力がユーザーに十分に伝わっておらず、新規顧客の獲得に大きな課題を抱えていました。
加えて、サイト全体のユーザビリティにも問題が散見される状態でした。一方で、当時利用していたカートシステム（EC-CUBE）の仕様上、機能の追加やUI改善の実装に制約が多く、部分的な改修が困難な状況にありました。そこで、根本的な課題解決のために、要件定義の段階からプロジェクトに参画しました。
既存システムの制約をクリアしつつ、ユーザビリティの向上と確実な集客力アップを実現するため、システム実装からSEO対策までを一貫してサポートする全面的なリニューアルを実施することになりました。

Process

「コンサル型制作・開発」の
取り組み内容

Point.01

機能要件、画面設計、制作

ユーザー視点に立ったUI/UXの課題抽出から始まり、要件定義、画面設計、そしてシステム実装までを一貫して推進しました。特に、利用していたシステムの仕様上の制約を考慮しつつ、戦略的なリニューアルを実現するためのワイヤーフレーム作成に注力しています。

画面設計において最も重視したのは、目的の商品に素早くたどり着けるナビゲーションの構築です。PC・スマートフォンともに追従型のヘッダーメニューを採用し、検索窓と一体化したカテゴリのプルダウンメニューを導入しました。これにより、膨大な商品数の中からでも直感的に商材を探せる環境を整備しています。また、業務用BtoBサイト特有の複雑な要件にも対応しました。

例えば、ログイン前は定価のみを表示し、ログイン後に会員専用の卸価格（BW価格）を表示する動的な価格出し分け機能を実装。さらに、オープン価格や欠品といった商品ステータスに応じた表示切り替えや、サロン認証が必要な商品に対する「問い合わせ」ボタンへの導線変更など、商習慣に合わせた緻密なカートボタンの制御を行っています。
購買体験を向上させる機能として、商品一覧ページに絞り込み検索機能やお気に入り機能を追加しました。くわえて、管理画面で割引率を入力するだけで、フロント側にセールアイコンや割引率のテキストが自動表示される仕組みを構築し、運用側の負担軽減と販促アピールの強化を両立させています。

新規会員登録のフローも見直しを実施しました。プロ向け商材を扱うため、美容サロンの従事者であることを証明する書類（ディプロマやメニュー表など）を複数枚添付できる機能をフォームに追加し、スムーズな審査と本登録への移行を可能にしています。

PC画面設計ワイヤーフレーム1

PC画面設計ワイヤーフレーム2

PC画面設計ワイヤーフレーム3

スマホ画面設計ワイヤーフレーム1

スマホ画面設計ワイヤーフレーム2

フロント側の改善にとどまらず、運用担当者が利用する受注管理画面の仕様変更も実施しました。一覧画面にサロン名を表示させ、商品検索機能の別窓化や、「決算処理中」「一部出荷」「サロン登録確認待ち」といった細かなステータス管理機能を追加しています。これにより、日々の受注処理から出荷・顧客対応に至るバックオフィス業務の効率化とミスの軽減を実現させました。
これらの多角的な機能拡張と画面設計を通じ、ユーザーの利便性向上だけでなく、サイト運営者の業務フロー改善にもつながる強固なECサイトの基盤を制作しています。

ページリスト

商品情報パターン管理表

機能変更要件

Point.02

SEO強化

新規顧客の獲得とサイトの集客力を底上げするため、コーディングの段階から徹底したSEO対策を組み込みました。表面的なキーワード追加にとどまらず、サイト構造の最適化からHTMLのマークアップ、コアウェブバイタルの改善に至るまで、多角的なアプローチを実施しています。

まず、サイト構造設計においてカテゴリの親子関係を論理的に整理しました。検索エンジンがサイトのテーマを正確に理解できるよう、パンくずリストの階層や名称を具体的に修正しています。さらに、新たに「エステ化粧品」や「ドリンク商材」といったカテゴリを新設し、グローバルナビゲーションを最適化させました。一方で、重複していたカテゴリページには301リダイレクトを設定し、検索結果が0件のページにはnoindexタグを実装することで、サイト全体の評価分散や品質低下を防ぐ処置を施しています。

次に、各ページの検索結果におけるクリック率を向上させるため、titleタグとmeta descriptionの詳細な設計ルールを策定しました。全ページで共通のテキストを使い回すことを禁止し、それぞれのページが持つ固有のテーマに合わせた具体的な記述を徹底しています。例えば、トップページのタイトルには「通販」といった検索ニーズの高いキーワードを自然に組み込みつつ、検索結果で省略されない文字数と語順を計算して設定しました。

HTMLマークアップに関しても、検索エンジンのクローラーがコンテンツ構造を正しく解釈できるよう最適化を図りました。h1タグの適切な配置はもちろんのこと、情報の羅列になりがちな箇所にはdl、dt、ddタグやul、liタグを用いた正しいリストマークアップを実施しています。商品画像には具体的なalt属性（代替テキスト）を記述し、視覚的な情報だけでなくコードレベルでの最適化を行いました。
さらに、コンテンツのテキスト解析アルゴリズムに対応するためのキーワードチューニングも実施しました。各カテゴリページの見出し直下に補足説明用のテキストエリアを新たに設け、ユーザーにとって有益な情報を提供しつつ、関連キーワードを文脈の中に自然に配置しています。

加えて、ユーザー体験を評価指標とするGoogleのコアウェブバイタル（Core Web Vitals）指標の改善にも着手しました。ページの読み込み速度やレイアウトの安定性を向上させるパフォーマンス・チューニングを行い、検索エンジンからもユーザーからも高く評価される、集客力に優れたECサイトへと進化させています。