大きな数字を使うWEBデザイン｜数字と背景の配色を整えるコツ
WEBページで「1,280」などの大きな数字を見せると、ページの中に強い視覚的な目印を作れます。ただし、数字だけを明るい色にしたり極端に大きくしたりすると、何を表す数値なのか分かりにくくなることがあります。今回は架空の地域文化イベントの活動報告を例に、数字の色・周囲の背景・単位や説明ラベルの関係を整理します。価格や購入ボタンではなく、実績や活動内容を伝える数字の見せ方がテーマです。
大きな数字は色を決める前に、意味・単位・集計期間をそろえる
仮の活動報告として「延べ来場者 1,280人」「体験講座の開催 24回」という2つの数字を使います。どちらも実在のイベントの実績ではありません。大きく見せる主役を「1,280」としても、「人」と「延べ来場者」を近くに置かなければ、来場者なのか参加団体なのか判断できません。集計期間も「2026年4月～9月」のように明記します。
先に、もっとも伝えたい指標を1つ決めましょう。ここでは来場者数を大きくし、講座の開催回数はその下で少し小さく見せます。両方を同じ大きさ・同じ強い色にすると、何から読めばよいか迷う場合があります。数字が2種類あることを色だけで示さず、「延べ来場者」「体験講座の開催」という説明を必ず添えます。
例えば主役の数字を48～64px程度、単位の「人」を20～24px程度、説明ラベルを16～18px程度から試せます。px（ピクセル）はWEB上の文字や余白の寸法を示す単位です。これらは固定の推奨サイズではなく、使用する書体と画面幅に合わせて調整します。まずは単位を数字から離しすぎず、拡大しても全体が同じ情報として読める配置にします。
白背景と濃い背景で、大きな数字の配色を比較する
具体例の色はHEX（「#」に続く0～9とA～Fの6桁で表すカラーコード）で示します。コントラスト比とは、文字色と背景色の相対的な明るさの差を表す数値です。以下の値は、不透明な単色同士の組み合わせで計算しています。
案A：白背景なら数字だけ深い青緑にする
- 活動報告の背景は白#FFFFFF、説明文の文字は濃い青灰色#243846にします。文字と背景のコントラスト比は約12.14:1です。
- 主役の「1,280」と単位「人」には深い青緑#165766を使います。白#FFFFFFとの比は約8.11:1です。数字の大きさで強調し、周囲を色の付いた面で埋めなくてもよい構成です。
- 「延べ来場者」と「2026年4月～9月」のラベルには落ち着いた青灰色#566875を使います。白#FFFFFFとの比は約5.78:1です。小さくなりやすい説明にも十分な差を残します。
一方、説明ラベルを薄い灰青色#A7B7BEまで明るくすると、白#FFFFFFとのコントラスト比は約2.07:1しかありません。通常サイズの文字に必要な4.5:1を下回るため、数字の意味や期間を伝える文字色としては避けます。「24回」という補助の数字も、その単位と項目名が分かる濃さで示しましょう。
案B：濃い色の背景では数字とラベルを明るくする
記事の冒頭など、活動の特徴を一か所にまとめたい場合は、深い青灰色#193C4Bの背景を使う方法があります。主役の数字は明るい白に近い色#F8FCFDにすると、背景#193C4Bとの比は約11.36:1です。「延べ来場者」や集計期間は淡い青緑灰色#D7EBE8にし、同じ背景#193C4Bとの比は約9.47:1です。
補助の「24回」には少し落ち着いた水色#8EC0BEを使う案があります。この文字色と濃い背景#193C4Bの比は約5.83:1です。いずれも文字として必要な明暗差を確保しつつ、主役の数字と補助の数字を色と大きさの両方で区別します。ただし暗い背景をページ全体へ広げる必要はなく、数字を見せたい範囲だけに使って本文へ自然につなげます。
スマートフォンでは数字・単位・説明のまとまりを優先する
PCでは横に並べた「1,280人」と「24回」を、スマートフォンでは縦に配置しても構いません。ただし「人」「回」が次の行に離れてしまわないよう、数字と単位のまとまりを保ちます。数値の桁区切りを入れ、説明ラベルと集計期間も数字の近くに置きます。見栄えのために期間だけをページの離れた場所へ移動すると、数値の意味があいまいになります。
濃い背景のブロックは、スマホで画面いっぱいに広がると数字だけで大きな面積を占める場合があります。数字の大きさ・行間・上下の余白を調整し、その後の説明文に無理なく視線を移せるか確認しましょう。色や大きさだけで「増えた」「良い結果だ」と判断させず、比較する数値がある場合は何と比較したかを文章で示します。
WCAG（WEBコンテンツのアクセシビリティに関する指針）のレベルAAでは、通常サイズの文字に背景との4.5:1以上、大きな文字に3:1以上のコントラスト比が原則として求められます。ここでは大きな数字だけでなく、単位やラベルも通常文字の基準を上回る色を選んでいます。写真上に数字を重ねたり、透明な背景を使ったりする場合は、実際の色で別途確認してください。数字を目立たせる目的は、情報を大きく飾ることではなく、意味を素早く正確に伝えることです。