まずは卸売ECを小規模でスタートしたい方へ。リーズナブルなSaaS(ASP)版『EC-Rider Primo(プリモ)』誕生! 詳しくはこちら

BtoB EC商品比較機能の設計要件とは

◆監修・編集責任者 小園 将隆 

B2B EC-COLUMN

この記事のポイント

  • BtoB EC(企業間取引を対象とする電子商取引)の商品比較機能は、比較列に表示できる項目が商品マスタの属性設計に左右されます。
  • 取引先別価格・在庫・納期といったBtoB固有の情報を、比較列にどう載せるかを事前に決める必要があります。
  • 比較UIの要件は、表構造・レスポンシブ・表示速度という3つの観点から具体化できます。
比較のイメージ
▽ 写真の出典元

BtoB ECの商品比較機能とは、仕様・価格・納期を同一画面で見せ発注判断を支える機能

BtoB ECの商品比較機能とは、複数商品の仕様・価格・入数・在庫・納期を同一画面に並べ、発注する1点を選び切るための機能です。日本国内のBtoB-EC市場規模は2024年に514.4兆円に達しています*1

図
目的とユーザーの定義から計測・改善まで、5段階で進めます

BtoB ECの商品比較機能とは、購買担当者が複数の候補商品の仕様・価格・入数・在庫・納期を同一画面に並べ、発注する1点を選び切るための機能です。

比較列に表示できる項目は、商品マスタが持つ属性の範囲を超えられません。そのため設計は画面ではなく、属性の棚卸しから始まります。

BtoCとの違いは価格が取引先ごとに変わる点

一般消費者向けEC(BtoC-EC)の比較機能は、全訪問者に同じ価格・在庫を表示すれば足ります。BtoB ECでは取引先ごとに価格や数量割引が異なるため、比較列に「誰にとっての値か」を明示する設計が欠かせません。

比較機能が使われる3つの場面――代替品探索・相見積の下準備・型番確認

比較機能は、代替品を探す場面、相見積の下準備をする場面、再発注時に型番を確認する場面の3つで主に使われます。場面ごとに重視する比較列が異なるため、次章で「誰が・何を比較するか」を先に特定します。

前提となる市場動向――BtoB-EC市場514.4兆円・EC化率43.1%

経済産業省の令和6年度電子商取引に関する市場調査によると、2024年の国内BtoB-EC市場規模は514.4兆円でした*1。前年は465.2兆円で、前年比10.6%増です*1。EC化率は43.1%(前年比3.1ポイント増)に達しています*1

電子受発注への対応も進んでいます。中小企業庁の令和3年度取引条件改善状況調査では、中小企業の受注側の48.5%が電子受発注に対応しています(2021年時点)*6。市場拡大に伴い、比較機能の設計要件を固める必要性が高まっています。

設計の出発点は「誰が・何を比較して・何を決めるか」の特定

マスタのイメージ
▽ 写真の出典元

購買担当・技術担当・承認者で見たい列が異なる

比較機能の要件定義は、利用者像の特定から始めます。購買担当者は単価と入数を、技術担当者はスペック適合を、承認者は納期と与信条件を重視する傾向があり、同じ比較表でも見たい列は一様ではありません。

比較目的別に必要な列を決める――スペック適合・単価と入数・納期

比較の目的を「スペック適合の確認」「単価と入数の比較」「納期の確認」のいずれに絞るかで、必須列と任意列の線引きが変わります。目的を1つに絞り切れない場合は、タブや並び替えで列の優先度を切り替える設計も選択肢になります。

同時比較点数の上限と比較対象の選び方を先に決める

比較列の数が多いほど、1画面で同時に扱える商品点数は少なくなります。列数を先に確定したうえで、比較対象を絞り込む導線(カテゴリ・型番検索・絞り込み条件)を設計すると、比較表が横に長くなりすぎる事態を避けられます。

比較機能の完成度は商品マスタの属性設計で決まる

発注のイメージ
▽ 写真の出典元

比較列は商品属性そのもの――属性のない商品は比較できない

比較表の各列は、商品マスタが持つ属性データをそのまま表示したものです。属性を持たない商品は、どれほど画面を作り込んでも比較列が空欄のままになります。設計の起点は画面仕様ではなく、商品マスタの属性一覧です。

属性は数値・単位付き数値・選択肢・自由文の4分類で粒度を揃える

比較列に使う属性は、性質によって扱い方が変わります。以下の4分類で粒度・単位・データ型を揃えると、比較列の設計がぶれにくくなります。

分類 定義 具体例 比較列での扱い
数値 単位を伴わない純粋な数値 型番の桁数、重量の数値部分 ソートに使える。同一単位への統一が前提
単位付き数値 単位とセットで意味を持つ数値 入数(個/箱)、最小発注単位、納期(営業日) 単位表記を統一しないと比較が成立しない
選択肢 あらかじめ定義した候補から選ぶ値 素材、規格グレード、対応電圧 表記ゆれ(例:SUS304とステンレス304)を統合する
自由文 定型化しにくいテキスト 用途メモ、備考 比較列には不向き。要約するか列から除外する

商品コード・商品分類はGS1のGTIN・JICFS/IFDBに寄せる

商品コードと商品分類は、独自体系ではなく標準に寄せると属性の突き合わせが楽になります。代表例が、GTIN(Global Trade Item Number、GS1が定める国際的な商品識別コード)です*2

もう1つの代表例が、GS1 Japanが運営するJICFS/IFDBです*2。これは、JANコードとこれに付随する商品情報を一元的に管理するデータベースサービスです*2

属性欠損時の表示ルールを空欄・「―」・注記から先に決める

すべての商品で全属性が揃うとは限りません。属性が欠けている商品をどう表示するか(空欄のままにする、「―」を入れる、注記を添える)を先に決めておくと、比較列の実装がぶれません。

商品マスタと価格マスタを基幹システムと連携させる設計は、事業側の判断だけでは完結しないケースもあります。属性の追加や定義変更が基幹システム側の改修を伴うかどうかを、要件定義の早い段階で情報システム部門と確認しておくと、後工程での手戻りを避けられます。

BtoB固有の価格・在庫・納期を比較列にどう載せるか

在庫のイメージ
▽ 写真の出典元

取引先別価格・数量割引はログイン後に出す

BtoB ECでは、取引先ごとに価格や数量割引が変わるのが通常です。未ログイン時にどこまで価格情報を見せるかを先に決めないと、比較列の設計が途中で行き詰まります。取引先別価格を未ログイン時にも表示すると、価格体系が競合や別の取引先に見えてしまう可能性があります。

比較列に表示するコストを自社の数字で確かめるには、無料相談で要件を整理するのが近道です。

在庫・納期は「いつ時点の情報か」を併記する

在庫数や納期は時間の経過とともに変わる値です。比較列に表示する際は、更新時点を併記しないと、発注担当者が古い情報のまま判断してしまいます。属性が欠けた比較列を空欄のまま表示した場合も同様に、型番を誤って選び、再発注や返品対応が発生する可能性があります。

入数・最小発注単位・荷姿を比較列に入れないと単価比較が成立しない

単価だけを比較列に並べても、入数や最小発注単位が異なれば単純比較はできません。入数・最小発注単位・荷姿をセットで比較列に含めることで、実質的な単価差を読み取れる表になります。

比較UIの要件は表構造・レスポンシブ・表示速度の3点で決める

よくある質問のイメージ
▽ 写真の出典元

比較表はHTMLテーブルで組み見出しセルを機械可読にする

比較表はHTMLのtable要素で組み、見出しセルをプログラムで判定可能な形にします。W3CはWCAG(Web Content Accessibility Guidelines)を策定しています*3。ウェブアクセシビリティの国際基準であるWCAG 2.2は、達成基準1.3.1を定めています*3。この基準は、情報や構造、関係性がプログラムで判定可能であるか、テキストで利用可能であることを求めています*3

320CSSピクセル幅で表示を検証する――データ表は1.4.10の例外にあたる

WCAG 2.2の達成基準1.4.10リフローは、320CSSピクセル相当の幅でも垂直方向のみのスクロールで表示できることを求めています*3。ただし同基準は、データ表のように二次元配置を要する用法を例外として認めています*3。比較表はこの例外に該当し得るため、横スクロールを許容する設計も取り得ますが、その場合でも320CSSピクセル幅での表示検証は設計段階に組み込む必要があります。

差分ハイライトと項目名の固定表示で違いを見つけやすくする

比較列の値が商品ごとに異なる行を強調表示し、項目名の列を固定表示にすると、横スクロール中でも「今どの項目を見ているか」が把握しやすくなります。これは比較表特有の視認性課題であり、通常の一覧表とは別に設計する必要があります。

表示速度はLCP2.5秒・INP200ms・CLS0.1以下を75パーセンタイルで狙う

Googleが定めるCore Web Vitalsには3つの指標があります*4。LCP(Largest Contentful Paint、表示速度を示す指標)は2.5秒以内が目安です*4。INP(Interaction to Next Paint、操作の応答性を示す指標)は200ミリ秒以内が目安です*4。CLS(Cumulative Layout Shift、表示のずれを示す指標)は0.1以下を、いずれも75パーセンタイルで満たすことが目安とされています*4

指標 目標値 評価方法
LCP 2.5秒以内 75パーセンタイルで評価*4
INP 200ミリ秒以内 75パーセンタイルで評価*4
CLS 0.1以下 75パーセンタイルで評価*4

他社商品を並べる比較表示には実証・正確な引用・公正な方法の3要件がある

景品表示法は一般消費者に対する表示を規律する法律であり、事業者間取引のみを対象とするサイト表示に直ちに適用されるとは限りません。ただし、消費者庁が示す比較広告の考え方は、比較表示を設計するうえで参照できる指針です*5。個別の判断が必要な場合は法務担当者への確認をおすすめします。

主張内容は客観的に実証されている必要がある

比較表で主張する内容は、客観的に実証されている必要があります*5。自社が卸・商社として複数メーカーの商品を並べる場合は、この点を特に意識する必要があります。

実証された数値・事実を正確かつ適正に引用する

実証されている数値や事実を引用する際は、正確かつ適正に引用することが求められます*5。一部条件下の数値をすべての条件に適用されるかのように引用しないことが要件の1つです。

比較対象を恣意的に選ばず公正な方法で比較する

比較の方法が公正であることも要件の1つです*5。比較対象商品を恣意的に選び出す方法や、重要でない事項を重要であるかのように強調する方法は避ける必要があります。

商品比較機能の設計は5ステップで進める

商品比較機能を設計する5つのステップ/順位根拠:手順(実施順序)

  1. 比較の目的とユーザーを定義します。購買担当・技術担当・承認者のどれを主対象にするかで、比較列の優先順位が変わります。
  2. 比較軸(属性)を確定します。スペック適合・単価と入数・納期のうち、どの軸を必須列にするかを決めます。
  3. 商品マスタを整備します。属性の粒度・単位・データ型を揃え、GTIN*2など標準コードへの対応状況を確認します。
  4. UI・表仕様を確定します。見出しセルの機械可読化と320CSSピクセル幅のリフロー*3を満たす設計にします。
  5. 計測と改善します。比較利用率・比較からのカート投入率・比較利用者の再訪を指標として運用します。

既存の受発注業務・EDIとの接続を同時に検討する

比較機能は単独の画面では完結しません。既存の受発注業務やEDI(Electronic Data Interchange、電子データ交換)と接続して、初めて発注につながります。中小企業庁の同調査では、2021年時点で中小企業の受注側の48.5%が電子受発注に対応しています*6。比較機能の設計段階から、受発注の接続方式を合わせて検討する価値があります。

社内だけで商品マスタの属性整備を進める場合、商品情報部門・基幹システム担当・EC担当の連携が必要です。属性ごとの定義やデータ移行、表示ルールの合意形成に工数が発生します。外部パートナーに設計を依頼する場合は、属性定義のたたき台作成や基幹システムとの連携仕様の整理を、専門知見をもとに進められる違いがあります。

リリース後に見る指標――比較利用率・比較からのカート投入率・比較利用者の再訪

比較機能はリリースして終わりではありません。比較利用率、比較からのカート投入率、比較利用者の再訪を継続的に計測し、比較列の過不足を見直す運用が必要です。

まとめ

本稿では、BtoB ECの商品比較機能を設計する際に決めるべき要件を整理しました。要点は3つに集約できます。第一に、比較列に表示できる項目は商品マスタが持つ属性の範囲を超えられないため、設計は属性の棚卸しから始まります。第二に、取引先別価格や在庫・納期といったBtoB固有の情報は、表示のタイミングと時点表記を先に決める必要があります。第三に、比較UIの要件は表構造・レスポンシブ・表示速度の数値目標*3*4で具体化できます。


ご不明な点はお問い合わせフォームからもご連絡いただけます。

BtoB通販システムのご相談

貴社の商習慣に合わせたご提案をいたします。

無料相談はこちら

よくある質問

商品比較機能は初期リリースに入れておくべきですか?

必須ではありません。比較対象になり得る商品点数が少なく、型番検索だけで発注先が一意に決まる業態では、比較機能より先に商品マスタの属性整備を優先する判断も成立します。属性データが一定量そろってから比較機能を追加する進め方も選択肢です。

比較できる商品点数は何点までにするのが妥当ですか?

点数の妥当性を示す一次情報はなく、画面幅と比較列の数に応じて決めます。列数が多い比較表では、同時に並べる商品点数を絞るほうが1画面内で差分を把握しやすくなります。まず比較列数を確定したうえで、点数の上限を検証する進め方をおすすめします。

商品マスタの属性が揃っていない状態でも比較機能は作れますか?

画面自体は作れますが、属性が空欄の比較列が並ぶ状態になります。属性が欠けている商品をどう表示するか(空欄・「―」・注記)を先に決め、優先度の高い属性から整備を進める進め方が現実的です。

取引先別価格を比較表に表示しても問題ありませんか?

表示すること自体に一律の問題はありませんが、未ログイン時にどこまで見せるかを先に決める必要があります。価格を表示する場合は、在庫・納期と同様に「いつ時点の情報か」を併記すると、発注判断の誤りを避けやすくなります。

◆監修・編集責任者

小園 将隆

株式会社フライトソリューションズ ECサービス部 マネージャー

BtoB通販のパッケージシステム「EC-Rider B2B Ⅱ」の導入支援をはじめ、製造業、卸売業をはじめとした法人向け通販サイト構築を多数手掛ける。卸売領域の専門知識をもとに、日本の商習慣に固有の課題をパッケージシステムの機能追加によって解決。BtoB流通の販路拡大を支援する。

  1. *1 出典:経済産業省「令和6年度電子商取引に関する市場調査」(2025年8月26日公表) https://www.meti.go.jp/press/2025/08/20250826005/20250826005.html
  2. *2 出典:GS1 Japan(一般財団法人流通システム開発センター)「JANコード統合商品情報データベース(JICFS/IFDB)」 https://www.gs1jp.org/database_service/jicfsifdb/
  3. *3 出典:W3C「Web Content Accessibility Guidelines (WCAG) 2.2」(2024年12月12日) https://www.w3.org/TR/WCAG22/
  4. *4 出典:Google(web.dev)「Web Vitals」 https://web.dev/articles/vitals
  5. *5 出典:消費者庁(原案:公正取引委員会事務局)「比較広告に関する景品表示法上の考え方」(昭和62年4月21日、平成28年4月1日改正) https://www.caa.go.jp/policies/policy/representation/fair_labeling/guideline/pdf/100121premiums_37.pdf
  6. *6 出典:中小企業庁「中小企業の受発注デジタル化(中小企業共通EDI)」引用数値は「令和3年度取引条件改善状況調査」(中小企業庁、2021年) https://www.chusho.meti.go.jp/keiei/gijut/digitalization/index.html

画像の出典元

  1. 比較のイメージ/Photo by Richard WILSON on Unsplash
  2. マスタのイメージ/Photo by Lukas on Unsplash
  3. 発注のイメージ/Photo by Jesus Hilario H. on Unsplash
  4. 在庫のイメージ/Photo by Lance Chang on Unsplash
  5. よくある質問のイメージ/Photo by Stephen Harlan on Unsplash

◆この記事について

独自調査以外の一次情報は、省庁・公的機関を中心とした信頼性の高い情報源から引用し、出典を明記しています。
年次更新される統計については、引用元の最新版を確認したうえで掲載しています。

※この記事は上記の監修・編集責任者がAIの協力を得て制作しています。

監修確認日:

記事内容に関するお問い合わせ:お問い合わせフォーム

BtoB EC(受発注)サイト構築システム「EC-Rider B2B Ⅱ」への
各種お問い合わせ

ページTOPへ戻る
無料相談を予約 お見積
平日10:00~18:00
page
top