WEBデザインで使う色の決め方｜最初に考えたい基本ルール
WEBデザインで使う色は、好みの配色を先に探すより、「何を最初に読んで、次に何をしてほしいか」から決めると整理しやすくなります。見た目がきれいでも、重要な文字や操作が周囲に埋もれてしまえば目的を果たせません。地域の路線バスの時刻表ページを例に、制作の初めに考えたい色の決め方と、完成前に確認するポイントを紹介します。
最初のルールは、配色より先に情報の優先順位を決めること
路線バスのページなら、利用者がまず探すのは「乗る停留所」「出発時刻」「次の便」です。その後に、経由地や運休のお知らせ、路線図などを確かめます。初めにこうした行動の順番を書き出し、重要な情報を文字の大きさ・配置・余白で区別しておきます。色はその順序を助けるために使い、色だけで読み順を作ろうとしません。
次に、長い文章や時刻表を載せる背景と文字を一組で選びます。色相（青や赤などの色の種類）や彩度（色の鮮やかさ）が違っていても、明るさが近い2色は見分けにくいことがあります。コントラスト比は2色の相対的な明るさの差を表す値です。本文、リンク、ボタンなど、隣り合う場所ごとに確認するのが基本です。
ベース・メイン・アクセントといった配色の名称は、その後で整理しても構いません。最初から決まった色数や面積比率に合わせるより、画面上で実際に必要な情報と操作を優先します。
路線バスの時刻表ページで、順番に色を決める例
以下のHEXは、WEB上の色を16進数で指定するカラーコードです。時刻を読む面、選択する部品、運行情報を同じ画面に置く想定で、色の役割とコントラスト比を確認します。
1．時刻と本文が読める背景・文字を先に選ぶ
ページ背景は明るい青灰 ■#F5F7F8、時刻と本文は濃い青灰 ■#24343Cにします。文字と背景は約11.98:1です。路線名などの見出しには濃い青 ■#235B72を使い、同じ背景 ■#F5F7F8と約6.95:1にします。停留所の補足説明は少し柔らかな青灰 ■#35505Bでも、背景 ■#F5F7F8と約7.98:1です。
出発時刻のような最重要情報は、色を増やす前に行の位置や文字の太さも調整します。実際の時刻を読み間違えないことを優先し、背景に写真を敷いて文字の後ろの明るさを変えない構成にします。
2．表の色分けと操作できる場所を区別する
時刻表の行を淡い青灰 ■#E9F0F2で交互に塗る場合、ページ背景 ■#F5F7F8との差は約1.07:1しかありません。これは行を追いやすくする補助で、選択できる部品の境界としては十分ではありません。行内の補足文字 ■#35505Bは淡い青灰の面 ■#E9F0F2と約7.43:1を確保します。
停留所を選ぶ白いカード ■#FFFFFFには、グレー青 ■#697F88の枠線を付ける案があります。枠線は白いカード ■#FFFFFFと約4.21:1、ページ背景 ■#F5F7F8とも約3.91:1です。「路線図を見る」は濃い青 ■#235B72の下線付きリンクとし、淡い行背景 ■#E9F0F2に対して約6.48:1です。
主要な「次の便を探す」ボタンには深い青緑 ■#1B5D69と白文字 ■#FFFFFFを使います。文字とボタンは約7.46:1、ボタンとページ背景 ■#F5F7F8は約6.94:1です。単なる案内リンクとは塗りつぶしの有無でも区別します。
3．運休・変更は色だけでなく言葉で伝える
運休や時刻変更の案内には、淡いクリーム色 ■#FFF3E8の面と赤茶色 ■#94402Cの文字を使う案があります。文字と案内面の比率は約6.35:1です。周囲のページ背景 ■#F5F7F8と案内面 ■#FFF3E8の差は約1.02:1と小さいため、必要なら赤茶色 ■#94402Cの枠線を加えます。枠線とページ背景 ■#F5F7F8は約6.45:1です。
ただ赤くするのではなく、「運休」「時刻変更」などの状態名、対象路線、日付を文字で示します。これは架空の配色例であり、実際の運行情報を示したものではありません。
決定前には薄い文字・境界・操作中の見え方を点検する
淡いグレー ■#B1BDC2を本文に使うと、ページ背景 ■#F5F7F8と約1.79:1しかなく、通常サイズの文字として不十分です。白いカード ■#FFFFFFに薄い線 ■#D5DEE2を引いても約1.37:1で、操作範囲を示す重要な枠線には向きません。デザインを淡くしたい場合でも、読む文字と必要な境界は別に調整しましょう。
ボタンのホバー（マウスを重ねた状態）を濃い青緑 ■#194E5Aにすると、白文字 ■#FFFFFFと約9.22:1です。フォーカス（キーボードなどで現在操作している場所を示す状態）には、少し離した濃い青 ■#114B60の輪郭を付けられます。輪郭はページ背景 ■#F5F7F8と約8.89:1、淡い表の行背景 ■#E9F0F2とも約8.28:1です。
WCAG 2.2（Web Content Accessibility Guidelines：WEBコンテンツのアクセシビリティ指針）のAA水準では、通常サイズの文字に原則4.5:1以上、大きな文字に3:1以上が必要です。操作の識別や状態表示に欠かせない非テキスト情報には、隣接色との3:1以上が求められます。色だけを情報の唯一の手がかりにしないことも大切です。スマートフォンで時刻表を横にスクロールする場合や、文字が折り返される場合も確認してから色を確定しましょう。