レスポンシブWEBで色の役割を変えないための配色ルール

レスポンシブWEBとは、PCやスマホなどの画面幅に合わせて、情報の並び方や表示方法を変えるWEBデザインです。PCでは「予約する」が青いボタンなのに、スマホでは別の色が主要な操作に使われていると、どこを押せばよいか迷うことがあります。配置が変わっても、色が伝える意味はなるべくそろえましょう。

画面幅ではなく「色の役割」を基準にする

最初に決めたいのは、ページ背景、本文文字、主要な操作、選択中の項目、注意の案内という色の役割です。同じ色を画面のどこにでも使うのではなく、同じ役割の部品に一貫して割り当てます。例えば、PCで予約確定前の「次へ」に使う青を、スマホだけ説明用の飾りに使い、操作ボタンを別の目立つ色にするのは避けたいところです。

ただし、すべての画面で背景色を完全に同じにする必要はありません。PCでは情報カードを淡い背景に並べ、スマホでは白い画面に縦に並べても、主要操作・選択状態・注意表示の色と見せ方が一貫していれば、意味のつながりを保てます。色だけで選択や警告を伝えず、文字やチェックマークも併用します。

レンタルスペース予約ページでPCとスマホをそろえる例

PCでは「設備の説明」と「日時の選択」を左右に配置し、スマホでは説明、日時、予約ボタンの順に縦並びにするページを考えます。HEX（16進数を使ったWEB用の色コード）で、次の色を両方の画面に共通して割り当てます。コントラスト比は隣り合う2色の明るさの差を示す数値です。

• 背景・本文：PCの外側の背景には薄い青灰■#F8FAFC、内容の面には白■#FFFFFFを使います。差は約1.05:1なので、カードのまとまりは余白や見出しでも示します。スマホで白い面をページ全体に広げても、本文の濃い青灰■#24364Bは白に対して約12.32:1、薄い青灰に対して約11.78:1の差があります。
• 主要な予約操作：「日時を確定して次へ」は濃い青■#165B83のボタンと白■#FFFFFFの文字に統一します。文字とボタンの比は約7.35:1です。PCで右側、スマホで日時の下へ移しても同じ色を使い、ボタンは周囲の白に対して約7.35:1、薄い青灰■#F8FAFCに対しても約7.02:1で区別できます。
• 選択した時間帯：選択した枠は淡い青■#EDF5FAの面と、青■#23639Aの枠線・チェックマーク・「選択中」の文字で示します。枠線は内側の淡い青と約5.73:1、隣り合う白■#FFFFFFと約6.32:1です。淡い青と白の面同士は約1.10:1しかないため、色の塗り分けだけで選択を伝えません。
• 注意事項：「キャンセル条件を確認してください」は淡い黄■#FFF2D8の面に、濃い茶■#75501Dの文字と注意アイコンを置きます。両色の比は約6.48:1です。PCでは説明欄の横、スマホでは予約ボタンの手前に移しても、この色を別の意味に使い回さず、「注意」の文字を残します。

主要操作は塗りボタン、選択中は枠とチェック、注意は淡い面と見出しというように、形と色をセットで決めます。どれもPCとスマホで同じ役割を持たせることがポイントです。

背景が変わる場所と切替途中の幅も確認する

色の役割を固定しても、スマホで要素を移動した結果、隣に来る色が変わることはあります。WCAG 2.2（WEBコンテンツを利用しやすくするための指針）では、通常サイズの文字は背景と原則4.5:1以上、操作部品の認識に必要な図形や状態表示は隣接色と原則3:1以上が基準です。PCとスマホの完成形だけでなく、二列から一列に変わる途中の幅でも確認します。

CSS（WEB画面の見た目を指定する仕組み）のメディアクエリーは、画面幅などの条件で配置を切り替える方法です。色を部品の役割ごとに整理しておけば、幅ごとに別の意味の色を増やさずに済みます。色を変える必要がある場合も、操作・選択・注意という役割は変えず、新しい背景との組み合わせを再計算しましょう。

HueRollではHEXで候補色を調整し、選択した色と白・黒とのコントラストを確認できます。ただし、任意の2色同士の比較やWCAGのAA・AAA自動判定はできません。この例のように淡い青と青い枠線を組み合わせる場合は、別途比率を計算し、PCとスマホの両方で表示を確かめてください。