スマホのメニュー画面は何色がいい？開いたときに見やすい配色

スマホのメニューを開くと、画面の大部分がリンク一覧に切り替わります。そこで大切なのは、鮮やかな色で目立たせることより、文字・現在地・閉じる操作を迷わず見つけられることです。写真の多いサイトでも使える、開いた状態のメニューの配色を具体例で考えます。

開いたメニューは背景を安定させ、文字を先に決める

写真や記事の上に重ねて開くメニューでは、まずメニュー本体の背景を不透明にする方法があります。半透明の背景だと、背後の写真の明るい部分や文字が透け、同じメニュー文字でも場所によって見え方が変わります。広いメニュー面には落ち着いた明るい色を使い、リンク文字との明るさの差を確保します。

通常のリンクを項目ごとに違う色へ変える必要はありません。「イベント」「見どころ」「アクセス」「利用案内」のように短い名前を縦に並べ、文字色を統一します。開閉ボタンは右上など決まった場所に置き、×印だけでなく「閉じる」という文字も添えると動作が伝わります。

現在開いているページは背景色を少し変えるだけでなく、太字の文字や左側の太い線を組み合わせます。背景の淡い色差だけでは、現在地が分かりにくいことがあるためです。申し込みなどの主な行動が必要な場合だけ、一般のページリンクとは別にボタンとして示します。

植物園のイベント案内サイトで考える配色例

植物園のスマホサイトでメニューを開き、「イベント」を表示中の場面を想定します。以下のHEX（先頭の#と6桁の英数字で表す色コード）は、このメニュー向けの配色例です。

メニュー全体の背景を淡いグリーングレー ■#F7F9F6、通常リンクの文字を深いグレーグリーン ■#243A32 にします。この文字と背景のコントラスト比は約11.49:1です。背景を不透明にすれば、背後に色鮮やかな花の写真があっても、メニュー文字の背景色は一定に保てます。

現在地の「イベント」には淡いミント ■#DFECE5 の行背景を使い、文字は深いティールグリーン ■#315D50 の太字にします。文字と行背景の比は約6.14:1です。さらに左側に同じティールグリーン ■#315D50 の太い縦線を付けると、線と行背景 ■#DFECE5 の比も約6.14:1です。ミントの行背景 ■#DFECE5 とメニュー背景 ■#F7F9F6 の比は約1.15:1なので、背景色の違いだけを選択状態の目印にはしません。

メニューを閉じる×印もティールグリーン ■#315D50 とし、淡いメニュー背景 ■#F7F9F6 との比は約7.05:1です。長いリンク一覧を「園内を楽しむ」「ご利用案内」といったまとまりに分ける場合は、グレーグリーン ■#728579 の区切り線を使えます。線とメニュー背景 ■#F7F9F6 の比は約3.71:1ですが、細すぎると実際の表示では弱く見えるため、線の太さも確認します。

「入園チケットを見る」という主なボタンを置くなら、背景にティールグリーン ■#315D50、文字に白 ■#FFFFFF を使います。この組み合わせは約7.47:1、ボタンとメニュー背景 ■#F7F9F6 の比も約7.05:1です。普通のリンクをすべて塗りつぶさず、チケットの操作だけを区別できます。

開閉時の操作とスマホ幅での見え方も確認する

メニューを開いた直後は、見出しや閉じるボタンが画面上部で見つかるかを確認します。縦に長い一覧では、閉じる操作がスクロール先で消えないようにし、文字を拡大しても項目名が切れない余白を取ります。写真の上に重ねる方式なら、メニューを開いている間は背後のページを誤って操作しない設計も必要です。

キーボード操作では、メニューを開いたときに操作位置（フォーカス）が分かり、閉じた後に元の開くボタンへ戻れるか確認します。WCAG 2.2（WEBコンテンツのアクセシビリティ指針）では、通常サイズの文字と背景は4.5:1以上、状態を表すのに必要な線やアイコンなどは原則として隣接色との3:1以上が基準です。色の数値に加え、言葉・位置・操作の一貫性も点検しましょう。

HueRollでは選んだ色と白・黒とのコントラストを確認できますが、任意の2色の直接比較や基準の自動判定には対応していません。今回のメニュー文字 ■#243A32 と背景 ■#F7F9F6 のような組み合わせは、別の手段でも比を確かめてください。