レモンイエローとグレーの資料配色｜強調したい箇所の色分け

レモンイエローとグレーを資料に使うと、落ち着いた画面の中で重要な数字や結論を強調できます。ただし、黄色をあちこちに使うと、どこを見ればよいのか分かりにくくなります。月次報告のスライドを例に、背景・文字・グラフ・強調欄の色を分ける方法を紹介します。

レモンイエローは結論、グレーは情報の土台に使う

最初に色の役割を固定しましょう。今回はレモンイエローの参考色として、明るく少し緑みのある■#FFF44Fを選びます。色名に対して唯一のコードが決まっているわけではありません。HEXコードは、画面上の色を「#」と6桁の英数字で示す方法です。

スライドの背景は薄いグレー■#F4F5F6、見出しと本文は濃いグレー■#2D3540、比較対象となるグラフの棒には中間のグレー■#66717Eを使います。レモンイエロー■#FFF44Fは、結論を示す短い囲みや、一つだけ注目してほしい棒に限定します。

淡い背景と濃い文字を先に決めれば、色を増やさず情報の階層を作れます。黄色は背景全体を塗るよりも、何を強調するか決めてから小面積に置く方が意図を伝えやすくなります。

月次報告の表紙・グラフ・結論で色を分ける

例えば、4月100件、5月115件、6月128件という架空の申込数を示す資料を考えます。表紙には薄いグレー■#F4F5F6を広く使い、タイトル「申込数の月次報告」を濃いグレー■#2D3540にします。「6月が最多」の一文だけにレモンイエロー■#FFF44Fの小さな帯を添えると、読む順序を整理できます。

棒グラフでは4月・5月を中間のグレー■#66717E、6月をレモンイエロー■#FFF44Fにします。ただし黄色と薄いグレーの背景は明るさが近いため、6月の棒には濃いグレー■#2D3540の枠線を付け、「6月・128件」と直接ラベルを書きます。縦軸の目盛りや単位も濃いグレーで統一し、黄色だけで数値の意味を伝えないようにします。

最後の結論スライドでは「6月の申込数が最多」「次月は流入経路を確認」など、伝える事実と次の行動を別々の行に置きます。結論の短い囲みだけを黄色にし、補足説明は通常の濃い文字のままにすると、強調の理由が明確になります。

文字とグラフのコントラストを確認する

色同士の明るさの差を数値にしたものがコントラスト比です。Web向けのアクセシビリティ指針WCAG 2.2のAA基準では、通常の文字は4.5対1以上、大きな文字は3対1以上、意味を伝える図形は隣接色に対して3対1以上が基準です。資料にも確認の目安として応用できますが、数値だけで投影時の見やすさまで保証されるわけではありません。

濃いグレー■#2D3540の文字と薄いグレー■#F4F5F6の背景は約11.35対1、中間のグレー■#66717Eと同じ背景は約4.55対1です。後者は通常文字の基準に近いため、小さな注記や離れた席から読む見出しには濃いグレーを優先しましょう。

レモンイエロー■#FFF44Fの背景に濃いグレー■#2D3540の文字を載せると約10.80対1ですが、白■#FFFFFFの文字では約1.15対1にしかなりません。また、黄色■#FFF44Fと薄いグレー■#F4F5F6の背景の差も約1.05対1と小さく、黄色の棒や囲みは輪郭だけでは見落とされる可能性があります。濃い枠線・ラベル・数値を併用し、実際の投影画面でも確かめてください。