製造業のWEBサイトに合う配色は？BtoBサイトを見やすくする方法

製造業のBtoB（企業同士が製品やサービスを取引すること）サイトでは、会社の雰囲気に加えて、発注を検討する担当者が対応内容や仕様を確認し、相談先を見つけられることが重要です。設備写真や製品画像を目立たせるだけでは、図面の有無や希望数量など、見積前に必要な情報を整理できない場合があります。架空の部品加工会社を例に、技術情報と問い合わせを読み分けやすい配色を考えます。

製造業では、色より先に「確認する情報」の順序を決める

まず訪問者が知りたい内容を「どのような相談ができるか」「依頼前に何を確認するか」「どこから問い合わせるか」に分けます。図面、材質、数量、希望時期などの項目は、同じ位置と見出しで示すと比較しやすくなります。対応可能な加工や設備の仕様は企業ごとに異なるため、実際のサービス範囲や性能を確認して記載してください。

配色は会社の目印になるヘッダー、仕様を読む表、補足情報、見積相談の操作に役割を分けます。試作を青、継続発注を緑と塗り分けるだけでは、色を見分けにくい人に違いが伝わりません。「試作の相談」「継続発注の相談」と文章でも示し、見出しや表の列をそろえます。

大量の技術情報をすべて強調すると、重要な条件を探しづらくなります。本文を読める濃さに保ち、色を変えるのは表の見出しや主要な操作など、区別する理由がある場所に絞りましょう。

部品加工会社の仕様確認と見積相談を整理する配色例

架空の会社では、ヘッダーを濃い青緑 ■#173D4C、メニュー文字を白 ■#FFFFFF とし、コントラスト比は約11.61:1です。HEX（#に続く6桁の英数字で色を指定する形式）で各色を記録します。コントラスト比は、隣接する2色の相対的な明るさの差を示す数値です。ページ背景を薄い青灰色 ■#F5F8FA、仕様表の面を白 ■#FFFFFF にすると、広い部分の色を控えめにできます。

表の列見出しの背景は淡い青灰色 ■#E6F0F3、見出し文字は濃い青灰色 ■#283744 にします。この組み合わせは約10.54:1です。通常の説明文は青灰色 ■#334155 で、白い面 ■#FFFFFF との比率は約10.35:1です。次の表は閲覧と問い合わせの流れを説明する架空の例であり、特定企業の対応可否を示しません。

表の必要な境界線には灰色 ■#738492 を使う例があります。白い面 ■#FFFFFF との比は約3.86:1、見出しの淡い背景 ■#E6F0F3 とは約3.33:1です。線に加えて列見出しと余白を使い、表の関係が色だけに依存しないようにします。

見積相談へ進むボタンは濃い赤茶色 ■#9A4E22 と白文字 ■#FFFFFF を組み合わせ、「仕様を伝えて相談する」と表示します。文字との比率は約6.02:1、周囲の薄い背景 ■#F5F8FA とは約5.65:1です。仕様の説明へ進む通常リンクは下線付きの文字リンクにし、見積依頼とは操作の優先度を分けます。

小さな注記と見積フォームを実際の画面で確認する

補足文字を薄い灰色 ■#A9B9C3 にして表見出しの背景 ■#E6F0F3 に載せると、比率は約1.74:1にとどまります。濃い青灰色 ■#526273 に替えると同じ背景に対して約5.40:1になり、項目の注意書きを背景を変えずに改善できます。

白い表の面 ■#FFFFFF と外側の背景 ■#F5F8FA は約1.07:1しか違いません。区切りに意味がある箇所は、必要な線や見出しも用います。また、問い合わせフォームでは「図面あり・なし」「希望数量」などを色だけで区別せず、ラベルと入力例を示します。エラーがあれば項目名と直し方を文字で伝え、入力済みの内容をできるだけ保持します。

スマートフォンでは表の列や数値の単位が見切れないか確認し、横に広い表ならスクロールや縦並びへの切り替えを検討します。キーボード操作中のフォーカス表示も必要です。WCAG 2.2（WEBコンテンツの利用しやすさに関するガイドライン）のAA水準では、通常サイズの文字は背景と原則4.5:1以上、識別に必要な操作部品の輪郭などは隣接色と原則3:1以上が基準です。

HueRollではHEXの調整、配色候補、選択色と白・黒のコントラストを確認できます。ただし任意の2色の比較やWCAGのAA・AAA自動判定には対応していません。ここでの比率は不透明な単色同士を別途計算したものであり、完成画面では実際の文字・表・ボタンの組み合わせを確認してください。