製品カタログをWebに載せる：製品検索・仕様表・資料の設計

製品の数が多いメーカーや商社では、紙やPDFのカタログをそのままホームページに置いていることがよくあります。しかし、取引先の設計者や購買担当者は、型番や寸法、材質で製品を探したいと考えています。PDFを開いて何十ページもめくってもらう形では、比較や見積もりの依頼につながりにくくなります。

この記事は、製品数が数十から数千あるBtoB企業で、カタログのWeb化やホームページのリニューアルを担当する営業企画・マーケティング・情報システムの担当者向けです。結論を先に言うと、カタログのWeb化はデザインの作業ではなく、データの設計の作業です。項目と分類を先に決めれば、ページのデザインと検索の機能は後から整えられます。

PDFのカタログだけでは足りない理由

PDFのカタログは、印刷物と同じ内容を早く公開できるという利点があります。一方で、ホームページで使う場合には次のような弱点があります。

• 型番や寸法で探せない。サイト内検索の対象にならないことも多い。
• スマートフォンで読みにくい。ファイルが大きいと開くまでに時間がかかる。
• 製品ごとのページがないため、検索エンジンから製品名や型番で見つけてもらいにくい。
• 改訂のたびにPDFを差し替えるため、古いファイルが残りやすい。
• どの製品が見られたかをアクセス解析で把握しにくい。

PDFをやめる必要はありません。印刷やまとめて保存したい人のために残しつつ、製品ごとのページと検索を用意するのが現実的な形です。

製品カタログのWeb化を構成する4つの部品

カタログのWeb化は、次の4つの部品を組み合わせて考えます。すべてを一度に作る必要はなく、製品の数と、見る人の探し方に合わせて範囲を決めます。

製品ページの見出しの順番や書き方はBtoBの製品・サービスページの書き方で、8つのブロックに分けて例文と一緒に紹介しています。

最初に決める製品データの持ち方

検索のしやすさと更新の手間は、製品データの持ち方でほぼ決まります。社内の基幹システムや表計算ソフトに製品の情報があれば、それを出発点にします。次の点を最初に決めておきます。

1. 分類: 見る人が探すときの切り口で分けます。社内の事業部の分け方と、取引先の探し方が違う場合は、取引先の探し方を優先します。
2. 項目と単位: 寸法、材質、耐荷重、対応規格など、絞り込みや比較に使う項目を決めます。単位（mm、kgなど）と、数値か文字かも決めます。
3. 共通の項目と製品群ごとの項目: すべての製品に共通する項目と、製品群ごとにしかない項目を分けます。
4. 識別子: 型番を製品の識別子にするか、社内のコードを使うかを決めます。URLにも使うため、後から変えないものを選びます。
5. 正とするデータ: Webのデータと、基幹システムや紙のカタログのどれを正とするかを決めます。

この作業は、制作会社だけではできません。製品を知っている営業や技術の担当者が加わり、項目の一覧を一緒に作ります。最初の打ち合わせで、既存の製品一覧の表を渡すと話が早く進みます。

絞り込み検索とURLの設計

型番や仕様で絞り込む検索は便利ですが、絞り込みの組み合わせごとにURLが生まれるため、検索エンジンのクロールに負担をかけやすい仕組みです。GoogleはファセットナビゲーションのURLのクロール管理の中で、組み合わせが膨大になると無駄なクロールが増え、新しい有用なページの発見が遅れることがあると説明しています。

対策として、検索結果に表示させる必要がない絞り込みのURLは、robots.txtでクロールさせない、URLのフラグメント（#以降）で絞り込む、といった方法が案内されています。絞り込みのURLをクロールさせる場合は、パラメータの区切りに標準の「&」を使い、条件の順番を一定にし、結果が0件の組み合わせには404を返すことが勧められています。

URLの付け方の基本は、GoogleのURL構造のベストプラクティスも参考になります。

仕様表・CADデータ・カタログPDFの扱い

仕様表は画像ではなく、テキストの表で載せます。画像の表は検索の対象にならず、スマートフォンで拡大しないと読めないためです。製品群ごとに項目が違う場合も、同じ製品群の中では項目の順番をそろえると比較しやすくなります。

CADデータや詳しい仕様書は、設計者にとって最も価値のある資料です。誰でもダウンロードできるようにするか、会社名やメールアドレスの登録を求めるかは、営業の方針で決めます。登録を求めると見込み客の情報は得られますが、手間を嫌って離れる人もいます。カタログのPDFは自由に、CADデータは登録制に、と分ける方法もあります。資料ダウンロードの作り方は資料ダウンロードページの作り方で解説しています。

更新の体制と、紙のカタログとの関係

製品のWeb化で一番多い失敗は、公開後に更新されなくなることです。新製品の追加や廃番、仕様の変更があったとき、誰がWebを更新するかを決めておきます。

• 製品群ごとに更新の担当を決め、CMSの権限を分ける。
• 新製品の発表や価格改定の手順の中に、Webの更新を組み込む。
• 廃番の製品は、すぐに削除せず「販売終了」と後継品の案内を載せる。過去に型番で検索した人や、取引先の社内資料からのリンクを受け止めるため。
• 紙のカタログの改訂と同時に、Webのデータを正として印刷用のデータを作る流れにできると、二重管理が減る。

製造業のサイト全体の構成は製造業のホームページ制作で、設備や加工事例のページと一緒に説明しています。海外の取引先向けに英語の製品情報を載せる場合は製造業の英語サイトの作り方も参考にしてください。

見積もり依頼につなげる導線

製品ページを見た人が次にしたいのは、価格や納期の確認、サンプルの依頼、図面を添えた相談です。製品ページの下と、仕様表のそばに「この製品について問い合わせる」ボタンを置き、フォームにはどの製品からの問い合わせかが自動で入るようにします。営業担当が問い合わせを受けたときに、どの製品を見て連絡してきたかが分かると、最初の返信の質が上がります。図面を添付できる欄も用意しておくと、見積もりまでのやり取りが減ります。

アクセス解析では、製品ページの閲覧数、資料のダウンロード数、製品ページからの問い合わせ数を分けて計測します。よく見られているのに問い合わせが少ない製品は、仕様表や価格の目安、納期の情報が足りていない可能性があります。

公開までの進め方

製品カタログのWeb化は、次の順で進めると手戻りが少なくなります。特に最初の2段階は、社内の製品担当者の協力が欠かせません。

よくある失敗と防ぎ方

製品のWeb化でよく見られる失敗は、次の3つです。いずれも最初の設計で防げます。

• 社内の分け方のまま公開する: 事業部の名前や社内の製品コードで分類すると、取引先には分かりません。分類は営業に「お客様は何と言って問い合わせてくるか」を聞いて決めます。
• 仕様の項目が製品ごとにばらばら: 同じ製品群なのに、ある製品は寸法がmm、別の製品はインチ、といった表記の揺れがあると、絞り込みが使えません。データを入れる前に表記のルールを決めます。
• 写真がそろわない: 製品写真の有無や撮り方がばらばらだと、一覧の見た目が崩れます。写真がない製品には共通の図を使うなど、ルールを決めてから撮影を計画します。
• 公開して終わりになる: 公開直後は情報がそろっていても、半年後には新製品が載っていない、という状態になりがちです。製品の発表の手順にWebの更新を組み込み、四半期ごとに全製品の掲載状況を点検する日を決めておきます。

よくあるご質問

製品が数千点あります。すべてのページを手作業で作るのですか？

製品データを表計算ソフトやCSVの形で用意できれば、CMSに一括で取り込み、同じ型のページを自動で作る方法があります。最初に項目をそろえる作業は必要ですが、一つずつ手で作るより早く、更新も楽になります。

価格は載せた方がよいですか？

標準品で価格が決まっているなら、目安を載せると比較の段階で選ばれやすくなります。数量や仕様で変わる場合は「数量・仕様により見積もり」とし、見積もりに必要な情報をフォームの項目にしておきます。

基幹システムの製品データと連携できますか？

連携の方式（定期的なファイルの受け渡し、APIなど）によって費用と期間が大きく変わります。まずは手動での取り込みで始め、更新の頻度が高い場合に自動の連携を検討する進め方もあります。

英語の製品情報も同時に作るべきですか？

海外からの引き合いがある、または増やしたい場合は、最初のデータ設計で英語の項目を持てるようにしておくと、後から追加しやすくなります。公開は日本語を先にし、問い合わせの多い製品群から英語を足す進め方もあります。

既存のPDFカタログはどうすればよいですか？

残して構いません。製品ページから該当するカタログのPDFへリンクし、改訂日を明記します。古い版のPDFは、検索で見つからないよう削除するか、最新版へ案内します。

製品カタログのWeb化を相談する場合

フェニックスデザインでは、製品データの項目の設計から、検索と製品ページの制作、資料のダウンロード、見積もり依頼の導線、公開後の更新の仕組みまでを担当しています。製造業のサイト制作の考え方は製造業のホームページ制作、規模の大きい案件の進め方は中堅・大手BtoB企業のサイト制作でご覧いただけます。

まとめ

• 製品カタログのWeb化は、一覧と検索、詳細ページ、資料、問い合わせの4つの部品で考えます。
• 分類、項目と単位、識別子、正とするデータを最初に決めると、検索と更新が楽になります。
• 絞り込み検索はURLが増えやすいため、Googleの案内に沿ってクロールのさせ方を設計します。
• 仕様表はテキストの表で載せ、CADデータなどの資料は公開範囲を営業の方針で決めます。
• 更新の担当と、紙のカタログとの関係を決め、廃番の製品は後継品へ案内します。
• 進め方は、現状の整理とデータ設計から始め、製品担当者の確認を経て公開します。