技術商社のホームページ カテゴリ整理入門｜迷宮化する前に知る階層設計

取扱製品が100種類を超えた技術商社のWebサイト担当者が、「とりあえずページを増やしてきたら、どこに何があるか自分でもわからなくなった」と相談に来るケースは珍しくありません。

ホームページのカテゴリ整理は、Webの専門知識がなくても「考え方の順番」さえ押さえれば対処できます。このコラムでは、技術商社特有の「製品が多すぎる問題」を起点に、サイト構造の基本を順を追って説明します。難しいHTML用語やCMSの操作方法より先に、「どう分けるか」の考え方を理解することが先決です。

以下では、産業用センサーや電動アクチュエーター・制御盤周辺機器などを扱う技術商社「仮称：ミツワテクノス」を例にしながら話を進めます。実在の企業ではなく、あくまで話をわかりやすくするための架空の例です。

ホームページ カテゴリ整理が技術商社で難しい理由

一般的な小売サイトなら「家電」「衣類」「食品」と分けられますが、技術商社の製品分類はそう単純ではありません。同じ「センサー」でも、温度センサー・圧力センサー・近接センサーと用途が異なり、さらにメーカーブランドごとに仕様が違います。整理の軸が「メーカー別」なのか「用途別」なのか「業種別」なのかが決まっていないと、ページを作るたびに分類がバラバラになります。

ミツワテクノスの例でいえば、担当者が代わるたびに「制御機器」「自動化部品」「FA関連」という似たカテゴリが別々に作られ、気づけば同じ種類の製品が3箇所に散らばっていました。これが「迷宮化」の典型的な経緯です。

迷宮化したサイトは、訪問した製造業のバイヤーが「この会社は何が得意なのかわからない」と感じて離脱する原因になります。営業担当が「うちのサイトを見てください」と言えなくなるのも、この状態が多いです。

整理を始める前に「軸を1つ」決める

カテゴリ設計で最初にやることは、分類の軸を1つに絞ることです。技術商社の場合、主な軸の候補は次の3つです。

• 用途・機能軸：検知する・動かす・制御する・固定する、など製品が何をするかで分ける
• 導入業種軸：食品機械向け・半導体装置向け・自動車部品向け、など顧客の業種で分ける
• 取扱メーカー軸：A社製品・B社製品、など仕入れ先で分ける

どの軸が正解かは「誰がサイトを使うか」で決まります。既存客がメーカー名で製品を探すなら取扱メーカー軸が便利です。一方、新規の製造ラインの設計担当者が「こういう動きをさせたい」と探して来るなら、用途・機能軸の方が刺さります。

ミツワテクノスは「新規の設計担当者からの問い合わせを増やしたい」という目標があったため、用途・機能軸をメインの分類として採用しました。取扱メーカー一覧は別のページに設けて、サブの導線として残しています。軸は1つ選んでも、補助的な別軸を設けることは可能です。

「3階層まで」で設計する理由と具体例

サイトの階層とは、トップページを1階層目としたときの「深さ」のことです。技術商社のサイトでよくある失敗は、階層を深くしすぎることです。5階層・6階層まで潜らないと製品ページに辿り着けない構造は、訪問者が途中で諦めます。

目安は「トップページから製品詳細まで3クリック以内」です。階層に換算すると次のようになります。

• 1階層目：トップページ
• 2階層目：大カテゴリ（例：検知・センシング）
• 3階層目：製品詳細ページ（例：温度センサー TH-200シリーズ）

製品数が多い場合は、2階層目と3階層目の間に「中カテゴリ」を1つ入れる3.5階層的な設計も現実的です。ただし4階層・5階層にはしない、というルールを最初に決めておくことが重要です。ミツワテクノスでは「大カテゴリ5種・中カテゴリ各3種以内・製品詳細」という上限ルールを設定し、新製品を追加するたびに既存カテゴリに収めるか上限を見直すかを判断するフローにしました。

グローバルメニューに何を並べるかの決め方

グローバルメニューとは、サイトの上部に常に表示されるナビゲーションのことです。ここに表示される項目数は、5〜7個程度が使いやすいとされています。技術商社のサイトでありがちな失敗は、取扱製品の大カテゴリをそのまますべてメニューに並べてしまうことです。

メニューに入れる項目は「製品カテゴリ」だけではありません。技術商社のサイトであれば、次のような構成が訪問者にとってわかりやすいです。

• 製品を探す（用途・機能軸のカテゴリへの入口）
• 取扱メーカー一覧
• 技術サポート・選定相談（差別化になる導線）
• 導入事例・実績
• 会社情報
• お問い合わせ

「製品を探す」を1項目にまとめてドロップダウンメニューで展開する設計にすると、メニューがすっきりします。ドロップダウンとは、メニュー項目にマウスを合わせると下にサブメニューが展開される仕組みのことで、ほとんどのCMSで標準的に設定できます。

CMS初心者が整理を始める実務的な手順

設計の考え方がわかっても、「実際にどこから手をつければいいか」で止まってしまう担当者は多いです。以下の順番で進めると、現状のサイトを壊さずに整理できます。

1. 現状のページを全部リストアップする：CMS管理画面の「全ページ一覧」をスプレッドシートにコピーするだけで構いません。
2. 似ているページをグループにまとめる：スプレッドシートで色分けするだけでOKです。この段階では新しい名前をつけなくていいです。
3. グループに名前をつける（大カテゴリ）：5種類以内になるよう意識します。
4. グループの中をさらに分けられるか確認する（中カテゴリ）：必要なければ中カテゴリは不要です。
5. メニュー構成案を紙や図で書いてみる：この段階でCMSをいじる必要はありません。
6. Web制作会社や社内のWeb担当者に構成案を見てもらう：構成が固まってからCMSの設定変更に入ります。

よくある失敗は「CMSをいじりながら考える」ことです。構造を決める前に操作を始めると、中途半端な状態のページが量産されて余計に迷宮化します。

BtoB企業の技術発信と採用コンテンツを、制作から月次運用まで担当しています。まず現状のサイトを無料で診断します。