送料無料バッジは何色がいい？ECサイトで自然に目立たせる方法
ECサイト（インターネットで商品を販売するサイト）の商品一覧で、「送料無料」が大きく目立ちすぎると、商品名や価格、購入ボタンよりもバッジに目が向いてしまいます。反対に淡すぎる色では送料の案内を見落としがちです。送料無料バッジは、濃い文字と控えめな背景を組み合わせ、実際に送料が無料になる条件を近くに示すと、自然に見つけやすくなります。
送料無料バッジは淡い面と濃い文字で役割を分ける
まず、バッジは送料に関する情報を知らせるための小さな表示と考えます。購入するためのボタンではないので、画面で最も鮮やかな色や大きな面積を使う必要はありません。白い商品カードには淡い青緑などの低彩度カラーを合わせ、文字を濃くする方法が候補です。低彩度とは、色の鮮やかさを抑えた状態を指します。
重要なのは、バッジの色ではなく「送料無料」という言葉と、その適用条件を読めることです。一定金額以上の購入が必要なら、「送料無料」だけではなく「税込5,000円以上で送料無料」のように条件を表示します。配送先や配送方法に例外がある場合も、利用者が見落とさない場所に示しましょう。消費者庁は、送料などの取引条件を正確かつ明瞭に表示することを求めています。
WCAG 2.2（WEBコンテンツを利用しやすくするための指針）では、通常サイズの文字は背景とのコントラスト比が原則4.5:1以上必要です。コントラスト比は2色の相対的な明るさの差を表します。淡いバッジを使うときほど、文字とその内側の背景を組み合わせて確かめます。
生活雑貨ECサイトで使う送料無料バッジの配色例
ギフト用のグラスセット（税込5,400円）とハンドタオル（税込2,700円）を販売する架空の店舗を想定します。この店では「対象地域への通常配送は、税込商品合計5,000円以上で送料無料」という条件で、一部の地域と配送方法を対象外とします。HEX（16進数でWEBの色を指定するカラーコード）を使った例です。
- 商品カードの背景：ページを淡いグレー#F7F9FB、カードを白#FFFFFFにします。両色の比は約1.06:1と小さいため、余白や商品名の配置でも区切ります。写真が主役になるよう背景の色数を増やしません。
- 送料無料バッジ：白#FFFFFFのカードに淡い青緑#E5F3F5の面を置き、濃い青緑#195866で「税込5,000円以上で送料無料」と書きます。文字とバッジ面の比は約7.03:1です。通常の青い操作ボタンとは役割を分け、ラベルは写真や価格を邪魔しない場所に配置します。
- 境界を明確にしたい場合：淡い青緑#E5F3F5と周囲の白#FFFFFFの差は約1.14:1です。バッジの輪郭も見せたい場合は、青灰#647E89の枠線を付けると、内側の青緑とは約3.78:1、外側の白とは約4.30:1になります。バッジ自体は操作ボタンではないため、文字だけで内容が分かるなら濃い枠線が必須とは限りません。
- 価格と補足文：白#FFFFFFのカードで価格を濃い青灰#294051にすると約10.79:1、「対象地域・通常配送のみ」などの補足を青灰#4A5C6Dにすると約6.90:1です。グラスセット単品は金額条件を満たしますが、対象地域・配送方法の確認は必要です。ハンドタオル単品は金額条件を満たさず、ほかの商品との合計額で判断します。
- 購入ボタン：白#FFFFFFのカードでは濃い青#205772の「カートに入れる」ボタンに白#FFFFFF文字を合わせます。どちらの境界も約7.87:1です。送料案内は淡いラベル、購入操作は濃い塗りボタンと分け、視線が価格から操作へ進むようにします。
この例では、5,400円の商品でも配送条件が確定する前から無条件の「送料無料」とは書きません。商品一覧で条件付きの案内を示し、配送先と注文内容が確定した後に、注文確認画面で実際の送料を表示する構成です。
写真・スマホ表示・送料条件の変更に合わせて調整する
商品写真の上にバッジを重ねると、背後の色や柄で文字が見づらくなる場合があります。まずは写真の外に配置し、重ねる必要があるときは半透明を避け、背景を不透明な単色にして確認します。淡い青緑#E5F3F5に薄い水色#92B9C4の文字を置くと約1.85:1しかなく、小さな送料案内には不向きです。
スマホではバッジの幅が狭くなります。「税込5,000円以上」と「送料無料」の関係が途中で分断されないよう、2行表示にする場合も条件をまとめて読める配置にしましょう。税込合計額の計算方法や対象外地域、配送方法が変われば表示も更新します。単にバッジを目立たせるより、注文確認時の送料と説明が一致することが重要です。
HueRollではHEXで候補色を調整し、選択色と白・黒のコントラストを確認できます。ただし任意の2色間の比較やWCAGのAA・AAA自動判定には対応していません。青緑のバッジと文字、枠線などの組み合わせは別途計算し、実際の画面でも確認してください。