EC-CUBEの商品一覧・商品詳細ページのカスタマイズ事例｜在庫表示・規格選択・品番順の並べ替え

「黒のMサイズを探しているのに、商品詳細を開くたびに売り切れている」。この場合、最初に見直したいのは商品一覧で分かる情報です。一方、黒のMに在庫があっても、お客様がSとMのどちらを選ぶか迷っているなら、商品詳細のサイズ表が役立ちます。

EC-CUBEの商品ページを改善する際は、お客様が商品を探す・比べる・注文する操作のどこで困っているかを確かめると、手を入れる画面が決まります。サンクユーの関連記事15本から、アパレルの商品選びと卸売・BtoB-ECの品番発注を例に、課題に合うカスタマイズを紹介します。

どの画面を直す？ 商品ページ改善の早見表

商品一覧で希望サイズの在庫を確かめられるようにする

商品に「在庫あり」とだけ表示しても、黒のMを探している方にとっては情報が足りません。白にだけMの在庫がある場合、黒の写真の下に単に「M」と出すと、詳細を開いて初めて希望の組み合わせが買えないと分かります。表示中の色に対応するサイズを出すか、色を選ぶとサイズ表示も切り替わるようにします。

商品一覧に在庫のあるサイズを表示する事例では、画像にマウスを合わせるとサイズが見えます。スマートフォンでは同じ操作ができないため、サイズを短く常時表示するか、「在庫サイズを見る」をタップして確認できる構成が考えられます。

一覧に何を出すかは、商材と画面幅で変わります。次の3つは、いずれも一つの商品を詳しく見るための方法ですが、解決する手間が違います。

• 画面幅に合わせて1行の商品数を変える：品番やサイズを並べると文字が折り返される店舗で、スマートフォンの列数と文字の読みやすさを調整します。
• 商品写真と着用画像を切り替える：平置き写真では判断しにくい丈やシルエットを、候補同士で比べられます。タップで画像を切り替える操作と詳細ページを開く操作を分けます。
• 一覧から商品詳細をプレビューする：素材や寸法など数項目を確認するたびに一覧へ戻る店舗向けです。閉じた後も、元の商品から比較を続けられるようにします。

商品詳細の規格選択｜プルダウン、色×サイズの表、規格別ボタン

EC-CUBE 4系の標準画面では、1商品に「色」「サイズ」など最大2種類の規格を設定できます。規格が2つの場合は、1つ目を選んでから2つ目を選び、数量を指定してカートに入れます。標準テンプレートでは、商品一覧からも規格を選んでカートに追加できます。まず自店のテーマでどの操作ができるかを確認してください。EC-CUBE公式マニュアル「商品一覧・商品詳細」 ／ 規格の選択とカートへの追加

例えば、黒・白の2色にS・M・LがあるTシャツなら、組み合わせは6通りです。欠品している組み合わせまで一目で比較したいときは、規格のプルダウンを色×サイズの表にする方法があります。縦に色、横にサイズを並べ、各マスに「選択可」「売り切れ」などの文字を出すと、色の違いを見分けにくい方にも状態が伝わります。

買う規格がすでに決まっている場合には、SKUごとに「カートに入れる」ボタンを設ける方法もあります。SKUは在庫を区別する商品単位で、この例では「黒・M」が1つのSKUです。規格表で一つを選んで共通のボタンを押す方式と、各行のボタンからそのSKUを直接追加する方式では、必要な操作が変わります。組み合わせが多く表がスマートフォンからはみ出す場合は、先に色を絞って、その色のサイズだけを見せる方が選びやすくなります。

表示例を作るときは、「在庫あり」「売り切れ」「その組み合わせは取り扱っていない」の3通りを用意します。「黒・M」が売り切れていて「白・M」は買える場合に、正しい規格と価格でカートに入るかまで確かめます。ページを開いた後に在庫が変わる場合も、カート追加時や注文手続きで最新の販売可能数を確認できる設計にします。

サイズ表・動画・レビューで、購入前の疑問に答える

「Mサイズの身幅は何センチですか」とよく聞かれるなら、サイズ選択欄のそばに商品実寸と測り方を載せます。登録済みのサイズ表を商品ごとに選んで表示する事例では、共通のサイズ表を毎回作り直す手間を省いています。同じブランドでも型が違えば寸法は変わるので、どの型に適用する表かを管理します。

静止画では伝わりにくい組み立て方や、生地が動いたときの様子には、商品詳細に紹介動画を掲載する方法が向いています。寸法や対応品番など、購入直前に読み返す情報は動画の近くに文字でも残しておくと、該当箇所を再生し直す手間がありません。

購入者の感想を生かす方法には、複数商品のレビューを一覧で読めるようにする方法と、商品詳細に星の評価別の件数を表示する方法があります。EC-CUBE 4.2／4.3系でレビューを新設する場合は、株式会社イーシーキューブの商品レビュー管理プラグインが候補です。投稿を受け付ける機能と、評価別の件数をどこに表示するかは分けて検討します。

BtoB-ECの商品一覧｜紙カタログの品番順で探し、投入済み数量を確かめる

卸先の担当者が発注書を見ながら買う場合、一覧に載せたいのは、手元の品番と照合できる情報です。サンクユーの商品コード順を一覧に追加した事例では、価格順・新着順に加えて品番順を選べるようにしています。例えば「A-2」と「A-10」をカタログに合わせて並べるには、末尾の数字を数値として扱うかを決めます。1商品が複数の規格別品番を持つ場合には、親商品をどの品番で並べるかも決めておきます。

カートに入っている商品を一覧で見分ける工夫は、明細の多い発注で役立ちます。実際の事例では、背景色を変えるとともに、カートに入っている数量も表示しています。これを色・サイズのあるケース販売に応用するなら、黒・Mの行に「カート内：2ケース」と出します。どの規格をいくつ入れたかが、一覧に戻っても分かります。カートで数量を変えたり削除したりしたときも、一覧の表示と一致させます。

SKU別の商品ページとURL変更を検討するとき

サイズごとに寸法や付属品が大きく異なり、それぞれを案内したい場合には、SKUごとに商品ページを設けて、別サイズへ移動できるようにした事例が参考になります。この事例では、別々に登録した商品を共通項目で関連付けています。1商品の規格を表で見せる方法とは、商品登録や説明の更新にかかる手間も変わります。

書籍ではISBNで商品ページを開けるようにした事例もあります。元記事と商品詳細URLを変更する方法の解説にあるURLは過去の実装例です。今の店でURLを変更するなら、旧URLと新URLの対応を商品ごとに作り、恒久的な移転は旧URLから対応する新URLへ転送します。一覧のリンクやサイトマップも新URLにそろえます。

色別のURLを共有する設計なら、そのURLを開いたときに該当色の画像・価格・在庫が表示されるかを確認します。Googleも、商品のバリエーションを識別できるURLの作り方を案内しています。ISBNをURLに使うかは、紙の書籍目録から該当の版を直接開く必要があるか、版ごとに番号を管理できるかで判断します。Google 検索セントラル「eコマースサイトのURL構造」

改修の効果は、対象商品と操作を絞って確かめる

在庫サイズの表示を試すなら、まず一つのカテゴリーで、一覧を見たセッションのうち、そのカテゴリーの商品を1点以上カートに追加した割合を比べます。スマートフォンとパソコンを分け、改修前後で欠品の多さに差がなかったかも確認します。その数字だけでは希望サイズが見つかったかまでは分からないので、操作テストでは「黒のMで、今日買える商品を一つ探してください」と条件を指定します。

品番順や投入済み表示なら、店舗・卸先の担当者に、同じ発注明細を改修前後の画面で入力してもらいます。完了までの時間、品番や単位の選び直し、最終的なカート明細を比べると、次に直す場所が分かります。