WEBデザインで強調色を使いすぎない方法｜本当に目立たせたい場所の決め方
WEBページの見出し、価格、ラベル、ボタンをすべて鮮やかな色にすると、本当に目立たせたい部分が埋もれることがあります。強調色は、注目してほしい場所に使う色ですが、塗る場所を増やすほど効果が高まるとは限りません。ここでは文具を扱うECサイト（ネット通販サイト）の商品詳細ページを例に、すでに使いすぎている色を整理し、必要な場所へ残す方法を紹介します。
色を減らす前に「今してほしい行動」を一つ決める
まず、ページ内で強調色を使っている要素をすべて書き出します。例えば「新着」「送料無料」「価格」「レビュー」「関連商品」「カートに入れる」が同じオレンジなら、どれも同じ強さで主張している状態です。最初から配色を作り直すのではなく、各要素に強調が必要な理由を確認しましょう。
判断の目安は、利用者に今してほしい操作か、購入を判断するために確認してほしい情報か、後で読めばよい補足かの違いです。商品詳細ページで主な操作を「カートに入れる」と決めた場合、価格や送料は隠さず、文字の大きさ・見出し・余白で読めるようにします。一方、レビューや関連商品は通常のリンクに戻すことができます。
ただし、在庫切れや注文条件など、見落とすと困る状態を弱くしてよいわけではありません。必要な注意は「在庫なし」「配送対象外」などの明確な文言で示し、主な購入ボタンとは別の意味を持たせます。強調色を減らすことと、重要情報を消すことは違います。
文具の商品詳細ページで強調色を整理する前後の例
例えばノートの商品写真、価格、サイズ選択、配送案内、購入ボタンが並ぶページを想定します。HEX（#に続く6桁の数字・英字で色を示すWEBカラーコード）を使い、実際の文字と背景の組み合わせも示します。コントラスト比は、隣り合う色の相対的な明るさの差を示す数値です。
- 改善前：新着ラベルやレビュー、価格、購入ボタンに明るいオレンジ#F6A94Dを繰り返し使い、白文字#FFFFFFを載せていたとします。この2色のコントラスト比は約1.96:1で、小さな白文字には不十分です。色の面積が広いだけでなく、文字も読み取りにくい例です。
- 共通の土台：ページ背景は柔らかな白#FAF8F4、本文と価格は濃い青灰#25313Bにします。比は約12.52:1です。商品名の見出しを深い青緑#1D4954にすると背景との比は約9.28:1。価格は同じ濃い文字色のまま大きさと太さで区別し、新しい強調色を増やしません。
- 情報と選択：配送目安は淡いグレー#F0F2EEの案内欄に置き、文字を濃い青灰#25313Bにすると約11.79:1です。「レビューを見る」は青系#27556Aの下線付きリンクにし、ページ背景#FAF8F4との比は約7.63:1。サイズ選択肢の白い面#FFFFFFには濃い文字#25313Bを使い約13.28:1とし、選択中だけ青灰#475569の枠と「選択中」の表示を加えます。枠と白い面の比は約7.58:1です。
- 主な購入操作：「カートに入れる」ボタンにだけ深いオレンジ#AA4919を使い、文字は白#FFFFFFで約5.71:1にします。ページ背景#FAF8F4とボタンとの比も約5.39:1です。配送条件などの補足リンクは同じオレンジの塗りボタンにせず、青系#27556Aの下線付き文字に戻します。
これで色を減らしながら、価格・サイズ選択・購入操作をそれぞれ確認できます。強調色を1ページで1回しか使えないという決まりはありません。同じ購入操作を別の位置にも設ける場合は、同じ役割に同じ色を使うと一貫性を保ちやすくなります。
減らした後は、文字と操作状態が伝わるかを確認する
WCAG 2.2（WEBコンテンツのアクセシビリティに関する指針）のレベルAAでは、通常サイズの文字には背景とのコントラスト比が原則4.5:1以上、規定の大きな文字には3:1以上必要です。改善前の明るいオレンジ#F6A94Dと白#FFFFFFの約1.96:1は、どちらの文字サイズの基準にも届きません。改善後の深いオレンジ#AA4919と白#FFFFFFの約5.71:1は、通常サイズの文字の数値基準を満たします。
また、選択中のサイズや在庫の状態を色だけで伝えないことが大切です。枠線に加えて選択マークや文言を付け、購入ボタンの前に必要な選択が済んだかを確認できる配置にします。スマートフォンでは商品写真の下に情報が縦に並ぶため、購入ボタンと補足リンクが同じ強さに見えないかも見直しましょう。
HueRollではHEXコードから関連色や濃淡候補を探し、選択色と白・黒とのコントラストを確認できます。ただし任意の2色の比較やAA・AAAの自動判定はできません。この記事の白・黒以外の組み合わせは別途計算しています。削る場所を決めてから色を調整すれば、必要な情報を残したまま強調を整理できます。