ネイビーを基調にしたWEBサイトの配色｜落ち着きとメリハリを作る方法
ネイビーをWEBサイトの基調色にすると、落ち着いた雰囲気を作りやすい一方で、背景から見出し、ボタンまで濃い青でそろえると、画面が重く見えることがあります。ネイビーは濃い青を指す呼び名で、特定の1色に決まっているわけではありません。ここでは深いネイビー#152B43を例に、濃色と明るい面を切り替えながら情報の強弱を付ける方法を紹介します。HEXとは、WEBで色を指定する16進数のコードです。
ネイビーはページ全体ではなく、重要な面にまとめて使う
最初に決めたいのは「何色を加えるか」よりも、ネイビーを置く面積です。例えば、ページ上部のファーストビュー（最初に目に入る主要な表示領域）とヘッダーを濃い色でまとめ、その下のサービス内容や料金説明は明るい背景へ切り替えます。濃い面は短いメッセージを印象付ける役割、明るい面は文章や数字を続けて読む役割に分ける考え方です。
ネイビー#152B43の背景に明るいオフホワイト#F6F8FBの文字を合わせると、コントラスト比は約13.53:1です。コントラスト比は前景と背景の相対的な明るさの差を示します。十分な明暗差がある組み合わせでも、濃い背景を長く続ければすべてが同じ強さに見えることがあります。見出しの大きさ、余白、背景の切り替えを併用しましょう。
法人向け物流サービスのサイトで考える配色例
サービス概要、配送エリア、導入事例、問い合わせ導線を載せるWEBサイトを想定します。以下はそれぞれの色に役割を持たせた一例で、ブランドの印象や写真に応じて調整できます。
- ヘッダーとページ上部：深いネイビー#152B43を背景に、オフホワイト#F6F8FBでナビゲーションと見出しを表示します。文字とのコントラスト比は約13.53:1です。
- サービス説明の背景と本文：淡いブルーグレー#F4F7FAの背景に、濃いグレー#263849の文字を使います。コントラスト比は約11.20:1で、長めの説明を明るい面に置けます。
- 配送サービスのカード：白#FFFFFFのカードに濃いグレー#263849の文字を置くと約12.04:1です。ただし白#FFFFFFと周囲の淡いブルーグレー#F4F7FAの差は約1.08:1しかありません。境界にはグレイッシュブルー#718293の線を使うと、白#FFFFFFに対して約3.95:1、周囲の背景#F4F7FAに対して約3.67:1です。
- 配送エリアの案内欄：青みのある淡いグレー#E4ECF2の面に、濃いグレー#263849で情報を載せます。文字との比率は約10.08:1です。
- ページ上部の「資料請求」ボタン：ネイビー#152B43の上では、落ち着いたアンバー#E6B85Cをボタン背景に使い、文字はネイビー#152B43にします。文字とボタン、およびボタンと周囲のネイビーの比率は、どちらも約7.80:1です。
- 明るい面に置く問い合わせボタン：ネイビー#152B43の背景にオフホワイト#F6F8FBの文字を使用します。文字との比率は約13.53:1で、周囲の淡いブルーグレー#F4F7FAとも約13.39:1の差があります。
- 本文中のリンク：少し明るい濃青#245B7Cを白#FFFFFFのカード内に使うと約7.34:1です。下線を付け、色だけに頼らずリンクと分かるようにします。
上部ではネイビーの面とアンバーのボタンを対比させ、説明部分では明るい面と濃い文字を中心にします。同じブランド色を使いながらも、見る場所によって必要な情報と操作の優先順位を変えられます。
濃い背景の重さを減らす調整とチェック
ネイビーが重く感じられる場合は、色を明るくする前に、濃い背景の連続を減らしてみます。写真、カード、説明文のすべてを濃色の上に重ねず、文章の多い部分は明るい面へ移します。また、上部で使ったアンバー#E6B85Cを淡いブルーグレー#F4F7FAの上にそのままボタンとして置くと、面同士の比率は約1.72:1です。この場所では濃いネイビーのボタンへ切り替えたほうが境界を識別しやすくなります。
WCAG（WEBコンテンツのアクセシビリティに関するガイドライン）2.2のレベルAAでは、通常サイズの文字に4.5:1以上、大きな文字に3:1以上が求められます。操作に必要な入力欄の輪郭や状態を示す要素など、非テキスト情報は隣接色に対して3:1以上が基準です。例えば境界用のグレイッシュブルー#718293は、淡い案内面#E4ECF2に対して約3.31:1です。ただし、ホバー・選択・フォーカス状態などは色の変化だけに依存させず、線や形でも区別してください。
最後にスマートフォンで、長い濃色セクションやナビゲーションの文字、ボタン間隔を確認しましょう。HueRollでは色のHEX値からティント・シェードなどの候補や、選択した色と白・黒とのコントラストを見られます。ただし任意の2色間の比較やAA・AAAの自動判定はできないため、ここで示した色の組み合わせは別途比率を計算した値です。