ナビゲーションメニューの色はどう選ぶ？見やすさを保つ配色方法

WEBサイトのナビゲーションメニューは、行きたいページを見つけるための案内です。色を目立たせることばかり考えると、すべての項目が強調されてしまい、かえって行き先を選びにくくなる場合があります。まずはメニューの背景と文字を読みやすくし、項目の並びや余白で行き先を分かりやすくすることが大切です。ここでは、移動図書館の巡回案内サイトを例に、通常のメニューとスマートフォンでの見え方を含めて配色を考えます。

メニューの背景と文字を基準に、案内と申込みの役割を分ける

メニューで優先したいのは、サイト内で探せる情報が短い言葉ではっきり分かることです。例えば「巡回予定」「停車場所」「本の借り方」「よくある質問」の4項目なら、すべてを別々の色にする必要はありません。通常リンクは同じ文字色と大きさでそろえ、十分な間隔を設けます。利用登録などの操作は本文中のボタンに分ければ、案内のリンクと申込みの目的を混同しにくくなります。

薄い背景に暗い文字を置く場合は、色が違って見えるかより、文字とその直下の背景の明暗差を確認します。コントラスト比は隣り合う色の相対的な明るさの差を示す数値です。また、ヘッダーと本文を色で強く分ける必要はなく、必要なら細い境界線や余白で区切れます。

一時的にマウスを重ねたホバー、今いるページを示す表示、キーボードで操作対象になったフォーカスは別の状態です。通常のメニュー全体が読めることを先に確認し、特別な状態の色はその上に追加して考えます。

移動図書館の巡回案内サイトで使う配色例

巡回カレンダー、停車場所、貸出方法、よくある質問、利用登録の案内を掲載する仮想のサイトを想定します。HEXはWEBで色を指定する16進数のコードです。広いメニュー面は淡い色、リンク文字は濃い色にし、行動を促すボタンを別の役割色にします。

• メニュー全体の背景：淡いセージ■#EAF0E9を使い、本文のオフホワイト■#F9F7F2と分けます。この2色の比率は約1.08:1と小さいため、区切りが必要な場合はグレーグリーン■#70847Aの下線を設けます。線とメニュー背景■#EAF0E9の差は約3.44:1です。
• 通常の4つのリンク：「巡回予定」「停車場所」「本の借り方」「よくある質問」の文字を深い緑■#244E42で統一します。淡いセージ■#EAF0E9とのコントラスト比は約8.09:1です。項目ごとに新しい色を増やさず、言葉と余白で区別します。
• マウスを重ねたメニュー：背景を少し濃いミント■#D4E4DAにし、文字は深い緑■#244E42を維持します。文字との比率は約7.09:1です。ミント■#D4E4DAと通常のセージ■#EAF0E9の差は約1.14:1なので、下線を加えるなど色以外でも反応を示します。これは現在のページを示す表示とは別です。
• スマートフォンの開閉ボタン：狭い画面で項目を折りたたむなら、三本線のアイコンだけでなく「メニュー」の文字も付けます。アイコンと文字には深い緑■#244E42、背景にはセージ■#EAF0E9を使い、約8.09:1を確保します。ボタンの操作で一覧が開くようにします。
• 開いたスマートフォンのメニュー：リンク一覧の面は白■#FFFFFF、文字は深い緑■#244E42で約9.36:1です。白い面の輪郭が必要ならグレーグリーン■#76867Cを使い、白■#FFFFFFと約3.84:1の差を付けます。デスクトップ版と同じ言葉・順番で案内します。
• キーボード操作時のフォーカス：Tabキーでリンクへ移動したときは、濃い青■#21475Bの輪郭線を出します。セージ■#EAF0E9の上では約8.57:1、白■#FFFFFFの上では約9.92:1です。ホバーの色だけで代用せず、どのリンクを操作中か分かるようにします。
• 巡回予定の見出しと本文：本文背景のオフホワイト■#F9F7F2に濃いグレー■#283638で案内すると約11.71:1です。見出しは深い緑■#275A4Cにし、同じ背景で約7.39:1にします。メニューの文字色と近い系統にすると、サイト全体のまとまりを保てます。
• 停車場所のカード：白■#FFFFFFの面に濃いグレー■#283638で時刻や場所を書けば約12.54:1です。白■#FFFFFFと周囲のオフホワイト■#F9F7F2は約1.07:1と近いため、必要なカード枠にグレーグリーン■#76867Cを使います。枠線と白■#FFFFFFは約3.84:1です。
• 貸出方法の補足案内：淡いグレー緑■#EDF3EEに濃いグレー■#283638で説明すると約11.14:1です。案内面とオフホワイト■#F9F7F2は約1.05:1なので、必要に応じてグレーグリーン■#76867Cで輪郭を付けます。枠線と案内面■#EDF3EEは約3.41:1です。
• 利用登録の案内ボタン：本文中の「利用登録について確認する」は赤茶■#93442Fの背景に白■#FFFFFFの文字を使います。文字とボタンは約6.76:1、ボタンとオフホワイト■#F9F7F2は約6.31:1です。主要なメニューリンクと同じ色にせず、次の行動として区別します。補足文字にはグレー緑■#53635Fを使えば、同じ背景と約5.91:1です。

この例ではメニューの各項目を一色でそろえ、背景と余白で一覧を整理しました。本文を読む場所、停車場所のカード、利用登録へ進む操作はそれぞれ適した色にしています。ナビゲーションを見やすくするのは、リンクすべてを強調することではなく、探す場所をすぐ見つけられるようにすることです。

画面幅と操作方法を変えて、見やすさを確認する

スマートフォンでメニューを閉じたり開いたりするときは、文字が折り返されて読みにくくならないか、開いた項目が画面外に隠れないかを確かめます。HTML（WEBページの構造を記述する言語）のボタンで開閉する場合は、aria-expanded 属性によって開閉状態を支援技術にも伝えられます。見た目の色だけを切り替えるのではなく、ボタンと一覧の動作も一致させます。

WCAG 2.2（WEBコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字と背景に4.5:1以上、大きな文字に3:1以上のコントラスト比が原則必要です。操作に必要な非テキストの表示にも隣接色と3:1以上が基準で、キーボードのフォーカスは見える必要があります。メニューの通常時・ホバー中・フォーカス中を確認し、タッチ操作でもすべてのリンクへ進めることを確かめましょう。

HueRollでは選択色と白・黒のコントラストを確認できますが、任意の2色の比較やAA・AAAの自動判定には対応していません。この記事で示した色同士の比率は別途計算しています。