BtoB向けの製品カタログでは、製品数が増えるほど「目的の製品にたどり着けるか」が成果に直結します。 型番を知っているユーザーなら検索窓で探せますが、比較検討中のユーザーは、用途・カテゴリ・仕様値・認証区分などを手がかりに製品を絞り込みます。
問題は、条件を増やせば使いやすくなるわけではないことです。 思いついた項目をすべて並べると、画面が複雑になり、社内側のマスタ管理も重くなります。 絞り込み条件は、ユーザーが製品を選ぶ順番と、社内で維持できるデータ構造の両方を見ながら設計する必要があります。
製品検索の条件は、まず大きく3つに分けて考えると整理しやすくなります。 製品スペック検索の項目設計テンプレート でも扱うように、条件の意味を分けておくと、画面設計とマスタ設計の両方が進めやすくなります。
| 軸 | ユーザーの考え方 | 条件例 |
|---|---|---|
| 用途軸 | どんな場面で使いたいか。 | 屋外、高温環境、食品工場、省エネ、既存設備更新。 |
| カテゴリ軸 | どの製品群から探したいか。 | ポンプ、センサー、制御盤、シリーズ名、ライン名。 |
| スペック軸 | 必要な仕様条件を満たしているか。 | 温度範囲、流量、圧力、サイズ、材質、認証。 |
ユーザーが最初に考えるのは、必ずしも製品カテゴリではありません。 「屋外で使えるもの」「食品工場で使えるもの」「既存設備に入るサイズのもの」のように、用途や制約から探すケースも多くあります。 カテゴリだけで入口を作ると、製品知識がある人にしか使いやすくならない点に注意が必要です。
絞り込み条件は、すべてを同じ重さで表示すると画面が読みにくくなります。 最初に見せる条件は、ユーザーが判断しやすく、検索結果に大きく影響するものに絞ります。 専門的な仕様値や細かい認証条件は、詳細条件として折りたたむ構成が現実的です。
画面例 BtoB製品カタログの絞り込みUI
屋外設備や工場外周の温度監視に使いやすい、防水・防塵対応モデル。
制御盤内や小型装置への組み込みに向いた省スペースタイプ。
用途や認証のように選びやすい条件はチップ型、温度やサイズのような数値条件は範囲指定にすると、条件の性質に合ったUIになります。
用途軸は、ユーザーが「何のために探しているか」を表す条件です。 製品名や型番に詳しくない人でも選べるため、検索の入口として重要です。
たとえば、製造業向けWebシステム活用アイデア のような製造業向けサイトでは、 「設備保全」「品質管理」「新規ライン」「省人化」など、担当者の業務目的に近い切り口を入口にすると、製品を選びやすくなります。
カテゴリ軸は、製品の置き場所を決める条件です。 大分類・中分類・シリーズ名などを使い、製品群を段階的に絞り込みます。
カテゴリは、Webサイトだけで完結するものではありません。 紙カタログ、営業資料、基幹システム、社内の商品マスタと大きく違う構成にすると、更新時の負担が増えます。 製品カタログのカテゴリ構造テンプレート集 で扱うように、既存の分類を活かしながら、Web上で探しやすい横断条件を追加する形が扱いやすくなります。
スペック軸は、製品の仕様条件を表します。 ここは、数値で指定する条件と、選択肢で指定する条件を分けるとUIを決めやすくなります。
| 種類 | 条件例 | 向いているUI |
|---|---|---|
| 数値条件 | 温度範囲、流量、圧力、トルク、サイズ、重量。 | 最小値・最大値入力、範囲指定、スライダー。 |
| 区分条件 | 材質、認証、防水等級、電源方式、対応規格。 | チェックボックス、チップ型フィルター、プルダウン。 |
| キーワード条件 | 型番、シリーズ名、旧品番、用途語。 | 検索窓、サジェスト、品番検索。 |
数値条件のUIは、数値条件の絞り込みUI（スライダー・範囲指定）の設計 のように、範囲指定と入力欄を組み合わせると扱いやすくなります。 一方で、材質や認証のような区分条件は、チップ型フィルターUIの設計パターン のようなチップ型UIと相性が良いです。
BtoB製品では、CE、UL、RoHS、防水・防塵等級、医療機器関連規格など、認証や規格が重要な条件になることがあります。 ただし、認証条件は専門的なため、一覧に並べるだけでは意味が伝わりにくい場合があります。
認証・規格条件では、次のような見せ方を検討します。
特に海外向け製品や業界規格が絡む製品では、認証条件を間違えると問い合わせ後の確認が増えます。 検索条件として出すだけでなく、製品詳細や比較表にも同じ情報を表示することが大切です。
条件候補を洗い出すと、すぐに20項目以上になります。 しかし、初期画面にすべて並べると、検索画面が重くなります。 まずは、どの条件を最初に出すべきかを決めます。
| 判断基準 | 採用しやすい条件 | 後回しにしやすい条件 |
|---|---|---|
| ユーザーが自分で判断できるか | 用途、設置場所、材質、サイズ。 | 内部仕様、専門的な制御条件。 |
| 検索結果が大きく変わるか | カテゴリ、温度範囲、対応環境。 | ほとんどの製品に共通する条件。 |
| 営業・技術が最初に確認するか | 用途、型式、必要スペック、認証。 | 問い合わせ後に確認すればよい詳細情報。 |
| マスタとして維持できるか | 既に商品マスタにある項目。 | 担当者のメモやExcelにしかない項目。 |
最初から完璧な条件セットを作ろうとするより、まずは上位5〜8項目程度に絞り、利用状況や問い合わせ内容を見ながら調整する方が現実的です。
絞り込み条件のラベルは、検索結果の使いやすさを大きく左右します。 社内では通じる用語でも、ユーザーにとって分かりにくい場合は、検索条件として機能しません。
「A仕様」「標準型」「特殊環境対応」など、社内では意味が分かっても、初見のユーザーには判断しづらい表現。
「屋外で使える」「高温環境に対応」「食品工場向け」「防水・防塵対応」など、利用場面が分かる表現。
ただし、技術者向けの製品では、専門用語をすべて避ける必要はありません。 重要なのは、検索する人がその条件を見て、自分で選べるかどうかです。 専門用語を使う場合は、補足テキストやヘルプを併記すると、誤選択を減らせます。
絞り込み条件は、画面上のUIだけでなく、裏側の商品マスタと直結します。 「屋外対応」「IP65」「高温環境」などの条件を表示するには、各製品に対してその情報が正しく登録されている必要があります。
マスタ側で決めておきたいのは、次のような点です。
検索UIだけを整えても、マスタが不正確だと結果は信用されません。 製品カタログ検索を作る場合は、画面設計と同じタイミングで、商品マスタの項目・選択肢・更新ルールも確認する必要があります。
スマホでは、PCと同じ条件数をそのまま表示すると、検索結果にたどり着く前に画面が長くなります。 よく使う条件だけをチップ型で表示し、詳細条件は「絞り込み」ボタンから開く構成が扱いやすくなります。
検索UI全体の考え方は、絞り込み検索UIのパターンと実装の考え方 と合わせて見ると整理しやすくなります。 PCでは比較しやすさ、スマホでは条件選択のしやすさを優先すると、画面ごとの役割が明確になります。
製品カタログ検索の絞り込み条件は、用途・カテゴリ・スペックの3軸で分けると設計しやすくなります。 そのうえで、最初に表示する条件と、詳細条件として隠す条件を分けます。 用途や認証のような選びやすい条件はチップ型、温度やサイズのような数値条件は範囲指定にするなど、条件の性質に合わせてUIを変えることも重要です。
条件を増やす前には、ユーザーが自分で判断できるか、検索結果に意味のある差が出るか、社内でマスタ管理できるかを確認します。 株式会社インテンスでも、製品カタログ検索を設計する際は、画面だけでなく、商品マスタ・営業現場の確認項目・問い合わせ後の運用まで含めて検討します。 検索条件は、製品を探すためのUIであると同時に、社内の商品情報をどう管理するかを決める設計でもあります。