ネイビーとオレンジの配色はどう使う？ボタンを目立たせる色の配分

ネイビーとオレンジを組み合わせるとき、オレンジをボタンにも見出しにも使うと、肝心の操作が埋もれることがあります。ボタンを目立たせるには、ネイビーを文字や広い背景に使い、オレンジを主要な操作に集中させるのが一つの方法です。ここでは資料ダウンロードページと料金案内ページを例に、色の面積とボタンの文字色を具体的に比べます。

オレンジは主要ボタンに集め、ネイビーは画面を支える

まずCTA（Call To Action、資料請求や申し込みなど、次の行動を促すボタン）の役割を一つ決めます。ネイビーはヘッダーや見出し、本文などに繰り返し使い、オレンジはそのCTAに優先的に割り当てます。装飾や複数のボタンまで同じオレンジで埋めると、どこを押してほしいのかが伝わりにくくなります。

基準となるネイビーを ■#172D49、ページの明るい背景をオフホワイト ■#FAF8F4 とします。HEX（ヘックス）は「#」と6桁の英数字などでWebの色を指定するカラーコードです。濃いネイビーと淡い背景の明るさに差をつけると、ボタン以外の情報も整理できます。

色の面積は「オレンジを何割使えば必ず目立つ」という決まりではありません。以下の割合は、ページを開いて最初に見える範囲での配置例です。写真の大きさや端末に合わせて調整してください。

背景を変えた2つの配色と面積の例

濃いネイビーの紹介画面：明るいオレンジを一点に置く

サービス資料のダウンロードページでは、最初の画面をネイビー ■#172D49 約40％、オフホワイト ■#FAF8F4 約58％、明るいオレンジ ■#F39B45 約2％の面積で考えます。上部の濃い紹介エリアに白 ■#FFFFFF の見出しと説明文を置き、そのすぐ下にオレンジ ■#F39B45 の「資料をダウンロード」ボタンを一つ配置します。ボタンの文字はネイビー ■#172D49 にします。

この配置ではオレンジ ■#F39B45 がネイビー ■#172D49 の広い面に接するため、小さなボタンでも色の違いが分かります。下部の説明欄をオフホワイト ■#FAF8F4 にすれば、資料の内容を落ち着いて読める領域も確保できます。

明るい料金案内画面：オレンジを少し暗くする

料金プランを比べるページでは、オフホワイト ■#FAF8F4 約80％、ネイビー ■#172D49 約18％、オレンジ 約2％を目安にします。見出しと価格はネイビー ■#172D49、主要ボタンの背景は少し暗いオレンジ ■#B55018、ボタン文字は白 ■#FFFFFF にします。「このプランを申し込む」という具体的な文言を使い、補助的な「詳細を見る」はオフホワイト ■#FAF8F4 の背景にネイビー ■#172D49 の文字リンクとして置きます。

明るい背景では、前の例と同じ明るいオレンジ ■#F39B45 を使うより、濃いオレンジ ■#B55018 にした方がボタンの輪郭を区別しやすくなります。オレンジを価格、アイコン、見出しのすべてに広げず、申し込み操作に残すのがポイントです。

文字の読みやすさとボタンの輪郭を別々に確認する

コントラスト比は、隣り合う色の明るさの差を表す数値です。明るいオレンジ ■#F39B45 とネイビー ■#172D49 は約6.36:1で、濃い紹介エリア上のボタンの輪郭と、ボタン内のネイビー ■#172D49 の文字を区別できます。ネイビー ■#172D49 と白 ■#FFFFFF の文字・背景の組み合わせは約13.93:1です。

明るい料金画面では、白 ■#FFFFFF の文字と暗いオレンジ ■#B55018 のボタンが約5.09:1、オレンジ ■#B55018 とオフホワイト ■#FAF8F4 の背景が約4.80:1です。一方、白 ■#FFFFFF の文字を明るいオレンジ ■#F39B45 に載せると約2.19:1、同じオレンジ ■#F39B45 とオフホワイト ■#FAF8F4 の境界も約2.07:1にとどまります。

WCAG 2.2（Webコンテンツのアクセシビリティ基準）では、通常サイズの文字は背景と4.5:1以上、操作に必要なボタンの視覚的な境界などは原則3:1以上が目安です。文字とボタン背景、ボタンの外側の背景は別々に確認します。また、キーボード操作時のフォーカス表示、スマートフォンでのボタン位置や余白も確かめましょう。

HueRollではHEXを入力して色を調整し、選択色と白・黒のコントラストを確認できます。今回のようなネイビーとオレンジなど任意の2色の比較は別途計算し、実際のページ上で判断してください。