スマホでは色数を減らすべき？モバイルWEBの配色を整理するコツ

PCではまとまって見えたWEBサイトの配色が、スマホではごちゃごちゃして見えることがあります。だからといって、スマホ版だけ必ず3色に減らす必要はありません。重要なのは色の数そのものより、同じ役割に余分な色を使っていないかです。横並びの情報が縦に続く小画面を想定して、配色を整理する方法を考えます。

減らすのは必要な色ではなく、役割が重複した色

まずページで使っている色を、背景、文字、見出し、操作ボタン、案内ラベル、状態表示に分けて確認します。例えばカードごとに違う背景色を使っていても、どれも同じ種類の商品を紹介しているだけなら、その違いに意味がないかもしれません。背景色を共通にし、商品名や写真で内容を見分けられるようにすると、色の役割を整理できます。

PCでは異なる色のカードを横に並べて比較できますが、スマホではカードが一列に積み重なり、スクロールのたびに違う色が続きます。同じ機能のボタンをページごとに別の色にするのも、どれが主な操作なのか迷わせる原因です。色を削る前に、同じ用途には同じ色を使うというルールを決めましょう。

一方、エラー・完了・選択中などの状態を区別するために必要な色まで機械的に統合しないことも大切です。意味を伝える場合は、色に加えて文言やアイコン、枠なども用意し、色だけを唯一の手掛かりにしないようにします。

書店の新刊一覧を6色で整理する配色例

表紙の色が多彩な本を並べる、書店のスマホ向け新刊一覧を例にします。カテゴリごとに赤・黄・青のカードを作るのではなく、画面で使う色の役割を六つにまとめます。ここで挙げるHEX（先頭の「#」と英数字で表すカラーコード）は、このページ用の提案であり、6色がすべてのサイトの上限という意味ではありません。

ページ背景には淡いグレーグリーン ■#F5F7F6、本を載せるカードには白 ■#FFFFFF を使います。本文と商品名をダークグレー ■#283B42 にすると、ページ背景 ■#F5F7F6 とのコントラスト比（隣り合う色の相対的な明るさの差）は約10.88:1、白いカード ■#FFFFFF とは約11.70:1になります。背景の二色は約1.08:1と近いため、その差だけでカードを識別させる設計にはしません。

「詳細を見る」などの主要ボタンは深いティール ■#12636B を背景とし、文字を白 ■#FFFFFF にします。比は約6.95:1で、通常サイズの文字に求められる4.5:1以上です。カード上の補助リンクにも同じティール ■#12636B を使うなら、下線を付けてボタンと役割を分けます。ティール ■#12636B と白いカード ■#FFFFFF の比も約6.95:1です。

「文庫」「絵本」「実用書」などのカテゴリ名は、共通の淡いミント ■#E8F3F1 のラベルに、ダークグレー ■#283B42 の文字を載せます。この比は約10.32:1です。カテゴリの違いは文字で表し、ラベルごとに色を増やしません。カードの輪郭が必要ならグレーグリーン ■#718583 の線を使います。白いカード ■#FFFFFF との比は約3.90:1、ページ背景 ■#F5F7F6 との比は約3.62:1です。

スマホ表示で残す色と減らす色を見極める

整理後は、同じカードが続く場所をスマホ幅で確認します。商品写真の色はコンテンツそのものなので、画面の操作色を減らすために写真まで単色にする必要はありません。一方、カテゴリラベルや見出し帯を毎回違う色にする装飾は、繰り返し表示されたときの効果を見直せます。色を減らして情報の区切りが弱くなったら、余白、見出しの太さ、枠線を調整してください。

WCAG 2.2（Webコンテンツのアクセシビリティ指針）では、通常サイズの文字と背景のコントラスト比は4.5:1以上、大きな文字は3:1以上が基本です。操作部分を識別するのに必要な線やアイコンなどは、原則として隣接色との3:1以上が求められます。色数を少なくした結果、淡い文字や区切りが見失われないか、実際の背景の組み合わせで確認しましょう。

HueRollでは基準色の明るい色や暗い色を探し、選択した色と白・黒のコントラストを確認できます。ただし、任意の2色同士の比較や基準の自動判定はできません。ページ背景 ■#F5F7F6 と枠線 ■#718583 のような組み合わせは、別の計算方法でも確認してください。