PCとスマホで背景色を変えてもいい？レスポンシブ配色の考え方

PCとスマホで同じWEBページを表示するとき、背景色を変えても問題ありません。レスポンシブデザイン（画面幅に合わせてレイアウトや見た目を調整する設計）では、横長の画面と縦に長く読む画面で、色の面積や周囲の情報が変わるためです。ただし、端末が違うという理由だけで色を切り替えるのではなく、読ませたい内容と操作の分かりやすさを基準に決めます。

背景色は変更しても、情報と操作の役割は変えない

PCでは横幅いっぱいの濃い背景に写真と短い見出しを載せ、スマホでは写真の下に説明文が長く続くことがあります。このように情報の並び方が変わるなら、スマホだけ見出し部分を淡い背景にする方法もあります。濃い色を長い範囲に使わず、見出しと本文の区切りを調整できるためです。

反対に、背景色を変更する目的がはっきりしなければ同じ色のままで構いません。重要なのは、背景色に合わせて文字色も見直すことです。PCの濃い背景で使った白い文字を、スマホの淡い背景にそのまま置くと、十分なコントラストを確保できない場合があります。申込みボタンやリンクなど、同じ役割を持つ操作の見た目は、できるだけ一貫させます。

美術館の企画展ページでPCとスマホの色を比較

企画展の写真と開催概要を紹介するページを例にします。ここで使うHEX（#から始まる16進数の色コード）は提案用の配色で、すべての展示サイトに適用する決まりではありません。

PCでは冒頭の大きな見出し領域を深いネイビー ■#20354A にし、展覧会名と開催日を白 ■#FFFFFF で載せます。文字と背景のコントラスト比は約12.58:1です。横長の写真と濃い背景を合わせ、見出し領域だけを印象的に見せる構成です。

スマホでは見出し領域の背景を淡いブルーグレー ■#ECF2F6 に替え、展覧会名と開催日は深いネイビー ■#20354A で表示します。この組み合わせの比は約11.14:1です。写真と説明文が縦に続くため、背景を淡くしても、PCと同じ文字情報や写真を省く必要はありません。

見出し領域の下にある展示解説は、PC・スマホとも白 ■#FFFFFF の背景にスレートグレー ■#2F4351 の本文を使います。比は約10.28:1です。「チケット情報を見る」という主要ボタンも両方で共通にし、白 ■#FFFFFF の案内欄に深いティール ■#125C6A のボタン、白 ■#FFFFFF の文字を組み合わせます。ボタン内の文字と背景の比は約7.60:1で、ボタンと白い案内欄との比も約7.60:1です。

一方、スマホの淡い見出し背景 ■#ECF2F6 と白い解説欄 ■#FFFFFF の比は約1.13:1にとどまります。この薄い色差だけを区切りの目印にせず、見出しの位置、写真の配置、上下の余白も使って構成を伝えます。

背景と文字をセットで切り替え、両方の表示を確認する

実装するときは、CSS（WEBページの見た目を指定する仕組み）のメディアクエリ（画面幅などの条件によって指定を切り替える機能）を利用できます。例えば、狭い画面では淡い背景と濃い文字を基本にし、十分に横幅があるときだけ見出し領域を濃い背景と白い文字に切り替えます。切替位置は「スマホは必ず何ピクセル」と決めつけず、文章や写真の並びが窮屈になる幅を基準に選びます。

確認するときは、PCとスマホのそれぞれで通常の文字と背景を測定します。WCAG 2.2（Webコンテンツのアクセシビリティ指針）では、通常サイズの文字は4.5:1以上、大きな文字は3:1以上が基本です。操作部品を識別するために必要な視覚情報も、原則として隣接色との3:1以上が求められます。文字を拡大した表示、横向き画面、写真が読み込まれない場合も確かめましょう。

HueRollでは選択した色と白・黒のコントラストを確認できますが、任意の2色同士の直接比較や基準の自動判定はできません。スマホの背景 ■#ECF2F6 と見出し文字 ■#20354A のような組み合わせは、別の計算方法でも確認してから採用してください。