ボトムナビゲーションの色はどう決める？スマホUIの配色方法

スマホ画面の下部に並ぶボトムナビゲーションは、主要なページへ移動するためのメニューです。予約や購入を促す固定CTA（行動を促すボタン）とは役割が異なり、いま見ている場所と移動先が分かることが重要です。UI（ユーザーインターフェース、操作画面）の色は、選択中と未選択を無理なく区別できるように決めましょう。

背景・未選択・選択中の色の役割を分ける

まず、ナビゲーション全体の背景色、選ばれていない項目の文字とアイコン色、現在のページを示す色を分けて考えます。画面下部の背景を白に近い落ち着いた色にすると、本文や写真を必要以上に邪魔せず、複数の移動先を同じ場所にまとめられます。

未選択の項目は文字とアイコンを共通の濃いグレー系で統一し、選択中の項目だけ色や太さを変えます。ただし、青になった項目が現在地だと色の違いだけで伝えるのは避けます。選択中だけ文字を太くし、短い線やアイコンの形の違いを加えると、色を見分けにくい人にも状態を知らせやすくなります。

また、項目ごとに赤・青・緑と別々の色を割り振る必要はありません。移動先の分類よりも「いまどこにいるか」が主題なら、ナビゲーション内では一つの選択色を繰り返し使った方が、操作のルールが明確になります。

イベント案内サイトの4項目で考える配色例

地域イベントを探すスマホサイトに「探す・予定・保存・設定」の4項目を置き、「予定」を開いている場面を想定します。次に挙げるHEX（#から始まる16進数のカラーコード）の数値は、この画面向けの配色例です。

ページ背景はごく淡いブルーグレー ■#F5F8FA、本文は濃いスレート ■#23384B とし、文字と背景のコントラスト比は約11.32:1です。ナビゲーションのバーは白 ■#FFFFFF にして、上端をグレーブルー ■#7D8995 の線で区切ります。この線のコントラスト比は、白いバー ■#FFFFFF に対して約3.57:1、ページ背景 ■#F5F8FA に対して約3.35:1です。

「探す・保存・設定」のアイコンと文字はブルーグレー ■#536372 に統一し、白いバー ■#FFFFFF との比は約6.18:1です。選択中の「予定」は深い青 ■#164D78 のアイコンと太字ラベルを、淡い青 ■#E5F0F7 の背景に載せます。文字と背景の比は約7.66:1で、同じ青のアイコンにも十分な明るさの差があります。

選択中の項目には、さらに深い青 ■#164D78 の短く太めの上線を付けます。淡い選択背景 ■#E5F0F7 に対する線の比も約7.66:1です。一方、淡い選択背景 ■#E5F0F7 と白いバー ■#FFFFFF の比は約1.16:1しかないため、淡い色面だけを選択表示の唯一の目印にはしません。

小画面・文字拡大・操作状態で最終確認する

4項目を均等に並べても、文字が長いとラベルが折り返して窮屈になります。アイコンだけに頼らず短い名称を添え、文字を大きくした画面でも押し間違えにくい幅と間隔を保ちます。ナビの下端は端末の操作領域を避け、ページ末尾の内容が隠れないようにします。

WCAG 2.2（Webコンテンツのアクセシビリティ指針）では、通常サイズの文字は背景とのコントラスト比4.5:1以上、状態を見分けるのに必要なアイコンや線などは隣接色との比3:1以上が基本です。操作対象の大きさも原則24×24 CSSピクセル以上（画面の表示寸法。例外あり）とされています。これらは最低限の確認事項であり、実機での操作もしっかり試してください。

タップ後に現在地の表示が切り替わるか、キーボード操作ではどの項目に焦点が当たっているかも確認しましょう。見た目だけでなく、選択中のページを画面読み上げでも把握できる設定があると、さらに分かりやすくなります。

HueRollでは選択した色と白・黒のコントラストは確認できますが、任意の2色の比較や基準の自動判定には対応していません。今回の選択色 ■#164D78 と淡い背景 ■#E5F0F7 のような組み合わせは、別の手段で数値を確かめてから採用しましょう。