この記事でわかること
EC-CUBEの親カテゴリーページに、子カテゴリーの画像リンクを追加したカスタマイズ事例を紹介します。商品一覧との役割分担、画像・名称・表示順の管理、スマートフォンでの見せ方、カテゴリー変更時の確認と導入後の効果測定を整理します。
子カテゴリー表示は、商品を一つずつ見る前に「探したい商品の種類」を選べるようにする導線です。画像リンクを追加する際は、利用者にとっての探しやすさと、運営担当者が更新を続けられる管理方法を一緒に考えます。
子カテゴリーへの入口と商品一覧の役割を分ける
商品数が多いECサイトでは、一つの親カテゴリーに複数の種類の商品が含まれることがあります。例えば、アパレルの「アウター」にはコートとジャケット、「トップス」にはシャツやTシャツなどの子カテゴリーを設ける構成が考えられます。
親カテゴリーページで商品をまとめて見せることには、幅広く比較できる利点があります。一方、探したい種類が決まっている利用者には、子カテゴリーへ進む入口があると、対象を絞る手がかりになります。
| 表示するもの | 利用者ができること | 設計で確認すること |
|---|---|---|
| 子カテゴリーの画像・名称 | 探したい商品の種類を選ぶ | 名称と画像から、リンク先に何があるか分かるか |
| 親カテゴリーの商品一覧 | カテゴリー全体の商品を見比べる | 表示対象の商品と、並び替え・絞り込みの使い方が分かるか |
| 検索・絞り込み | 品番やサイズ、用途などの条件で探す | カテゴリーだけでは分けにくい条件を補えるか |
卸売サイトでも、品番を知っている購買担当者と、商品名や仕様をまだ把握していない担当者では探し方が異なります。カテゴリーの画像リンクは選択を助ける方法の一つとして検討し、品番検索など既存の探し方との組み合わせを考えます。
子カテゴリー画像の下に商品一覧を置いた事例
サンクユーでは、EC-CUBEの親カテゴリーページに子カテゴリーの画像リンクを並べ、その下に商品一覧を表示するカスタマイズを行いました。以下は、理化学製品を扱うサイトの過去の実装画面です。
掲載画面では、「メスシリンダー」「メスフラスコ」「ホールピペット」など、6つの子カテゴリーへの入口を確認できます。利用者は種類を選んで子カテゴリーページへ進むことも、下に続く商品一覧を見ることもできます。
この事例では、子カテゴリーへの画像リンクと商品一覧を同じページに配置した構成を紹介しています。画像を管理画面から更新する機能や、自動的な表示対象の抽出、会員別の表示制御まで必要な場合は、別途対応範囲を整理します。
画面内の価格・件数・商品構成は掲載当時の例です。以降では、同様の仕組みを導入・改修する際の確認事項を説明します。
標準のカテゴリ管理と画像リンクの管理を確認する
確認したEC-CUBE 4.3.1-p1版の公式マニュアルでは、カテゴリに階層を持たせ、名称や順序を管理する機能が説明されています。商品とカテゴリの紐付けは、商品登録・編集画面で行います。
カテゴリを登録・管理することと、親カテゴリーページに画像付きのリンクを並べることは別です。利用中のテンプレート、プラグイン、既存カスタマイズを確認し、表示処理と画像の管理方法を検討します。
| 管理方法の例 | 特徴 | 更新時の確認 |
|---|---|---|
| カテゴリ情報に連動させる | 親子関係をもとに表示対象を取得し、画像など必要な情報を組み合わせる | 新規カテゴリの画像未登録、並び順、名称変更の反映範囲 |
| 画像・名称・リンクを別に登録する | 表示する入口を個別に選び、編集する | カテゴリ側の変更に合わせた修正、リンク切れ、登録漏れ |
表は管理方法の選択肢であり、掲載事例の内部仕様を示すものではありません。どちらの場合も、誰が画像を用意し、どこから更新するか、確認後にいつ公開するかを決めます。
カテゴリをCSVで更新する運用がある場合も、追加した画像や表示用の名称まで同時に更新されるとは限りません。確認した公式のカテゴリCSV登録では、カテゴリID・カテゴリ名・親カテゴリID・削除フラグが項目として掲載されています。追加項目の取り込みと画像の登録方法は別途確認します。
画像・名称・表示順とスマートフォン表示を整える
画像を並べる際は、見た目を揃えるだけでなく、行き先が伝わるか、押しやすいか、商品一覧まで進みやすいかを確認します。
画像と名称で、カテゴリーへの入口だと伝える
画像には、そのカテゴリーの内容を表すものを選び、近くに名称を表示します。代表商品の写真を使う場合は、商品詳細へ進むリンクと混同されないよう、「カテゴリーから探す」などの見出しや配置を検討します。
名称は購入者が使う言葉をもとにし、社内だけで通じる略称になっていないかを確認します。画像が読み込まれない場合にも行き先が分かるようにし、画像と名称のリンク先を揃えます。
画像の比率・余白・明るさを揃えつつ、商品の形が分からなくなる切り抜きは避けます。容量の大きな画像をそのまま多数並べず、表示サイズに合う画像を用意します。
表示順と、カテゴリー数が多い場合の見せ方を決める
管理画面のカテゴリ順序を使うのか、画像リンク用に別の順序を持つのかを決めます。名称順、用途順など、利用者が探しやすい並び方を検討し、変更する担当者と手順も揃えます。
子カテゴリーが多い場合は、画像だけでページの大半を占めないようにします。関連する種類をまとめる、名称の一覧を併用するなどの方法を検討し、商品一覧までの移動量を確認します。直下の子カテゴリーだけを表示するのか、さらに下の階層も含めるのかも明確にします。
スマートフォンで名称とリンクを押しやすくする
パソコンで横に並べた画像を、そのまま小さく縮めるだけでは、文字が読みにくくなったり隣のリンクを誤って押しやすくなったりします。画面幅に合わせて列数と間隔を調整し、長いカテゴリー名でも途中で切れないかを確認します。
画像と名称をまとめて押せる配置、リンクの境界が分かる見せ方を検討します。スマートフォンでも操作できるよう、マウスを重ねたときだけ現れる説明やリンクに依存しない構成にします。
商品がない場合と、会員限定表示の条件を揃える
子カテゴリーがない最下層ページでは、不要な空の枠や見出しを表示しない設計を検討します。カテゴリはあるものの商品がない場合は、非表示にするか、入荷予定や代替カテゴリを案内するかを運用に合わせて決めます。一時的な欠品と、取り扱い終了も区別します。
会員限定の商品や取引先別の表示条件を設けているサイトでは、画像・名称・商品件数も含めて公開範囲を確認します。リンクを隠すだけにせず、リンク先へ直接アクセスした場合も意図した閲覧条件が適用されるかを確認します。
カテゴリー変更時の整合と導入後の効果を確認する
カテゴリーを追加・移動・削除した際は、画像リンクだけでなく、パンくずリスト、メニュー、商品との紐付け、リンク先の一覧が同じ構成を示しているか確認します。URLが変わる改修を伴う場合は、古いURLからのアクセスも含めて対応範囲を整理します。
Googleの公式資料では、カテゴリから子カテゴリ、商品ページへリンクをたどれる構成が案内されています。画像リンクも通常のリンクとして行き先を持たせ、公開する商品への経路が途中で途切れていないかを確認します。
画像リンクを追加しただけで、検索順位や売上が上がるとは断定できません。必要な計測を設定したうえで、導入前後の同じ範囲・条件を比較します。
- 親カテゴリーページから、どの子カテゴリーへ進んだか
- 子カテゴリーの先で商品詳細まで到達し、カート追加や注文につながったか
- パソコンとスマートフォンで、使われ方に違いがあるか
- 画像の読み込みで表示が遅くなっていないか、商品一覧が見つけにくくなっていないか
- 商品数、在庫、価格、広告流入など、同時に変わった条件がないか
閲覧ページ数が増えたことだけを成果にはしません。少ない操作で目的の商品へ進めた場合もあるため、購入までの動きや利用者の声と合わせて評価します。掲載事例について、売上や回遊の改善を示す実測値は本記事では提示していません。
子カテゴリー表示の相談前に整理したいこと
現在のカテゴリ構成と、購入者が商品を探す場面を整理すると、必要な表示と管理方法を具体的にできます。
- EC-CUBEのバージョン、利用中のテンプレート・プラグイン・既存改修
- 画像リンクを表示したい親カテゴリーと、子カテゴリーの数・階層
- 商品一覧、検索、絞り込みと組み合わせたい探し方
- 画像・名称・表示順を更新する担当者と、カテゴリCSVなどの利用状況
- 商品がない場合、画像未登録の場合、会員限定商品がある場合の表示条件
- スマートフォンでの利用状況と、導入後に確認したい行動
サンクユーでは、商品構成と運用の確認から、EC-CUBE構築・カスタマイズ、BtoB-EC構築までご相談に対応しています。現在のカテゴリーページと更新作業を確認し、商品を探す導線と管理方法を検討します。
卸売ECの商品表示・販売条件に関する解説
子カテゴリー表示に関するよくある質問
EC-CUBEの親カテゴリーページに子カテゴリーの画像を表示できますか？
サンクユーでは、親カテゴリーページに子カテゴリーの画像と名称を並べ、それぞれのカテゴリーページへのリンクを設置した事例があります。掲載事例では、その下に親カテゴリーに属する商品の一覧も表示しています。現在の環境での実装方法は、バージョンやテンプレート、既存機能を確認して判断します。
標準のカテゴリ管理で登録すれば、画像リンクも自動表示されますか？
確認したEC-CUBE 4.3.1-p1版の公式マニュアルでは、カテゴリの階層・名称・順序の管理が説明されています。カテゴリを登録することと、親カテゴリーページに画像付きのリンクを並べることは別です。画像の保存場所や表示処理、管理画面からの更新方法が利用環境にあるかを確認します。
子カテゴリーを増やしたとき、画像リンクも自動で増やせますか？
カテゴリ情報に連動して表示対象を取得する設計は検討できますが、画像や表示順をどこで管理するかも決める必要があります。手動でリンクを登録する方法では、カテゴリ追加時にリンク側の更新が必要です。自動追加や画像管理画面の対応範囲は、個別に確認します。
商品がないカテゴリーや会員限定カテゴリーはどう表示しますか？
商品のないカテゴリーを非表示にするか、入荷予定などを案内するかは運用に合わせて決めます。子カテゴリーがない最下層ページでは、不要な空の表示枠を出さない設計を検討します。会員限定の表示がある場合は、画像・名称・商品件数とリンク先の閲覧条件を揃えます。
スマートフォンでも画像リンクを使えますか？
画面幅に合わせて画像の列数や大きさを調整し、名称が読めて押しやすい配置にします。パソコン用の横並びをそのまま縮小せず、商品一覧までのスクロール量も確認します。文字切れ、画像の読み込み、リンクの押し間違いが起きないかを実機で確かめます。
子カテゴリーの画像リンクを追加すると、SEOや売上は改善しますか？
画像リンクの追加だけで、検索順位や売上の向上を保証することはできません。商品へ進む経路を整えたうえで、必要な計測を設定し、子カテゴリーへの遷移、商品詳細への到達、カート追加や注文を確認します。閲覧ページ数だけでなく、目的の商品を見つけやすくなったかを評価します。
EC-CUBEのカテゴリーページ改善をご相談ください
子カテゴリーの画像リンク、商品一覧との配置、画像や表示順の管理方法を整理します。現在のページと、商品を探す際の課題をお聞かせください。
投稿者プロフィール
- サンクユーのEC-CUBE担当。15年以上にわたりEC-CUBE開発に従事し、2系・3系・4系すべてに精通。難易度の高いカスタマイズや、他社構築サイトの改修・再設計も多数対応しています。
Javaでの業務システム開発を起点に、PHP・Perl・フロントエンド・CMSまで横断的に対応。基幹システム連携や業務フローを踏まえた設計を得意とし、複雑な要件にも柔軟に対応可能です。
ChatGPT CODEXを活用し、開発スピードと品質の両立を実現しています。
