BtoBサイトの配色はどう決める？情報量が多くても見やすくする方法

BtoB（Business to Business：企業間取引）サイトには、サービス概要だけでなく、製品仕様、導入条件、比較資料、事例、問い合わせ方法など多くの情報が並びます。項目ごとに違う色を付けると、何が重要なのか分かりにくくなりがちです。情報量が多い場合こそ、色を増やすよりも「読む」「比較する」「次の行動を取る」の役割を分けることが大切です。ここでは、法人向け設備保守サービスのプラン比較ページを例に考えます。

色は情報の種類ではなく、画面上の役割で使い分ける

企業向けのページは、現場の担当者が仕様を調べ、別の担当者が費用や導入条件を確認するなど、複数の立場から読まれることがあります。そのため、すべてを強調するよりも、情報を追う順序が分かる配色を作ります。

まず本文と数値は一定の濃い文字色に統一します。セクションの見出しには本文より落ち着いた別の濃色を使い、表の列名だけ背景に淡い色を敷きます。資料請求や見積もり相談のような最重要の操作には、ページ内で共通の強調色を使うと、行動の入口を探しやすくなります。

製品の種類、導入効果、契約条件をそれぞれ赤・緑・紫で塗り分ける必要はありません。まず見出し、余白、罫線で整理し、色は重要度の差を補う用途に限定します。特に比較表では、色よりも項目名、単位、注記の揃え方が判断材料になります。

仕様比較から問い合わせまでを整理する配色例

次の配色は、法人向け設備保守サービスで「対応範囲・訪問頻度・契約条件」をプラン別に比較する画面の一例です。白と淡いグレーを中心に、濃い青を操作の目印として使います。

画面の外側を■#F5F7FA、各プランのカードを■#FFFFFFにします。この2色の差は小さいため、区切りが重要な場所では■#788A9Bの線と十分な余白を併用します。比較表の見出し行には■#E7F1F8を使い、見出し文字は■#203A5Bにします。一方、価格、対応時間、対象設備などの数値は本文と同じ■#263445にして、色を見なくても横並びで比べられる形にします。

CTA（Call To Action：資料請求や相談など次の行動を促すボタン）は■#155E8Aを背景、■#FFFFFFを文字色とする組み合わせです。測定したコントラスト比は約7.00:1です。重要なボタンだけをこの色にし、仕様書のダウンロードなど補助的な操作は文字リンクや枠付きボタンとして、優先順位を分けます。

表が長くなったときの調整と確認事項

項目が増えたら、行ごとに強い色を追加するより、「基本仕様」「サポート」「契約条件」のような見出しでグループを作ります。表の区切り線に■#788A9Bを使う場合、白いセル■#FFFFFFとのコントラスト比は約3.56:1で、淡いページ背景■#F5F7FAに対しても約3.31:1です。線が識別に必要なら、隣接する色との区別を確認しましょう。

小さな文字は特に薄くしすぎないことが大切です。補足文字■#526273と白背景■#FFFFFFは約6.26:1、本文■#263445と白背景は約12.65:1です。WCAG 2.2のレベルAAでは、通常の文字は4.5:1以上、大きな文字は3:1以上が基準です。操作部品の識別に必要な輪郭などにも、隣接色と3:1以上の基準があります。

スマートフォンでは表が横に広がりやすいため、列を省略する際もプラン名と項目名の対応を保ちます。また、対応可否を緑と灰色だけで示さず、「対応」「対象外」などの文字も添えます。HueRollで候補色のHEXコードや濃淡を確認できますが、白・黒以外を含む任意の2色のコントラストは別の方法で検証してください。重要なのは、色の印象だけでなく、実際の情報と操作が迷わず読み取れることです。