Webサイト改善の施策事例
- ECサイト改善
ECカート【makeshop（メイクショップ）】における関連商品表示の導線強化を目的とした機能拡張
概要と担当範囲
makeshopで運営するECサイトにおいて、標準機能の関連商品表示では商品スペックに基づいた細かな出し分けができない制約に対する改善支援です。
makeshopに認定パートナーである当社は、JavaScriptを用いた独自の関連商品出し分けロジックを設計・実装し、特定の条件（CPU・メーカー・画面サイズ等）をトリガーに該当する商品を自動表示する仕組みを構築。購入率・回遊率・回遊数の向上につなげました。
- EC運用改善
- CV最適化
- 導線改善
課題背景
makeshopの標準機能では、関連商品の表示に以下の制約がありました。
- 関連商品の分類軸が限られており、複数の条件を掛け合わせた出し分けができない
- たとえばPC商品の場合、「メーカー」で関連商品を出すと「同スペック帯のPC」を同時に提示できない
- ユーザーが比較検討したい軸（スペック・価格帯・用途等）と、システムが出せる関連商品がずれている
- 結果として関連商品枠がユーザーの購買検討に活かされず、回遊や購入への貢献が弱い
これはmakeshopの標準仕様による制約であり、管理画面の設定だけでは解決できない課題でした。
改善の考え方
makeshopの標準機能を改修するのではなく、フロントエンド（JavaScript）の技術で標準機能の制約を超える仕組みを構築するアプローチを取りました。プラットフォームの仕様を深く理解したうえで、「仕様の外側」で解決する設計です。
当社の関与領域
- 関連商品ロジック設計
- JavaScript実装
- UI設計
- makeshop仕様の技術調査
標準機能では実現できない関連商品の出し分けを実現するため、以下の領域に関与しました。
- makeshopの関連商品機能の仕様調査と制約の明確化
- 商品スペック（CPU・メーカー・画面サイズ等）を条件とした出し分けロジックの設計
- JavaScriptによる条件判定・商品データ取得・動的表示の実装
- ユーザーの比較検討行動に沿った関連商品枠のUI設計
- 商品詳細ページ内での関連商品の配置・表示デザインの最適化
- 実装後の購入率・回遊率・回遊数の効果検証
この実装にはUI設計の知見、JavaScriptのプログラミング技術、そしてmakeshopのシステム仕様への深い理解の3つが同時に求められます。プラットフォームの仕様を熟知したうえでフロントエンド実装ができることが、当社がこの施策を実現できた前提条件です。
主な取り組み
- 商品データから取得可能なスペック情報の洗い出しと、出し分け条件の定義
- 閲覧中の商品のスペックをトリガーに、該当する関連商品を動的に抽出・表示するJavaScriptの開発
- 複数の条件軸（メーカー・CPU・画面サイズ・価格帯等）を組み合わせた柔軟な出し分けの実現
- 「この商品を見ている人はこんな商品も検討しています」のようなユーザー視点のUI設計
- 関連商品枠の表示位置・デザイン・表示件数の最適化
- 施策前後での購入率・回遊率・回遊数の比較検証
makeshopのシステム改修は行わず、フロントエンドの実装だけで標準機能の制約を超えた関連商品表示を実現しています。
変化・成果
- ユーザーの比較検討行動に合った関連商品が表示されるようになり、購入率が向上
- 関連商品経由の回遊率・回遊数がともに改善し、商品詳細ページの価値が向上
- 標準機能では不可能だった複数軸での出し分けが実現し、ECサイトとしての提案力が強化された
- makeshop本体の改修なしにフロントエンドの工夫だけで実現しているため、今後のプラットフォームアップデートへの影響も最小限
※具体的な数値は非公表
Tips
お役立ち情報も発信しています 一覧はこちら
-
BtoB製造業がホームページから問い合わせを増やすために必要な5つのコンテンツを伴走支援会社がご紹介します
View more -
テクニカルSEOとコンテンツSEOの違いとは？現場目線での施策や優先度について所感を交え解説します
View more -
【担当者必見】自社ECサイトに最適なコンサルティング会社とは？運用代行や支援導入で得られる3つの成果と失敗しない選び方
View more -
ECサイトの売上改善法とは？商品数が多い総合通販型で有効な分析方法と施策を解説します
View more -
SEO対策とは？主な種類のご紹介と、同時に行うと効果的な施策をご紹介します
View more -
通販サイト（ECサイト）の種類と特徴について、ビジネスモデル／販売形態／システム構築にわけて解説します
View more