重要なコンテンツだけ背景色を変える方法｜WEBで自然に強調するコツ
WEBページには、営業時間や料金、利用方法など複数の情報があります。その中で一つだけ見落としてほしくない内容があるとき、背景色を変える方法が考えられます。ただし、重要そうな部分をすべて色付きにすると、どれが最優先なのか分からなくなります。ここでは架空のレンタサイクル案内ページを例に、返却場所に関する案内だけを自然に強調する手順と配色を紹介します。
背景色を変えるのは、行動に影響する一つの情報に絞る
最初に、読者が見落とすと行動を間違えそうな情報を選びます。たとえば、架空のレンタサイクルサービスで「借りた場所と返却場所が異なる」という条件がある場合、料金や車種の説明と同じ見せ方にすると見過ごされるかもしれません。返却先の説明だけを独立した案内欄にすると、確認してほしい箇所を示せます。
選ぶ基準は、文章が長いかどうかではなく、内容が利用者の判断や行動を左右するかどうかです。料金表、利用方法、施設紹介などの通常の説明はそのままにし、返却場所の条件だけに別の背景を付けます。複数の注意事項がある場合でも、一つの色付き欄に関係する条件を整理できるか検討します。
また、色だけで重要性を伝えないことも大切です。案内には「返却場所の確認」という見出しを付け、本文で「貸出場所とは異なる指定の返却ポートに戻す」と明記します。背景色が見えなくても内容を理解できるようにしておきましょう。
レンタサイクル案内で使う背景色と文字色の具体例
ここではHEX（「#」の後に0〜9とA〜Fの6桁を並べて色を指定する形式）を使用します。コントラスト比とは、文字や図形と背景の相対的な明るさの差を示す数値です。
普段の説明部分は控えめな配色のままにする
- ページ全体の背景はごく淡い青灰色#F8FAFCにし、本文には濃い青灰色#273948を組み合わせます。コントラスト比は約11.37:1です。
- 料金表や利用方法の情報は白#FFFFFFの面にまとめ、本文の文字色#273948を共通で使います。白背景とのコントラスト比は約11.90:1です。
- 補足の短い文章も、灰青色#526570をページ背景#F8FAFCに載せて約5.81:1を確保します。重要ではない文章だからといって、極端に薄くしません。
通常の項目は、見出しの位置や間隔で区別します。ここに別々の背景色を追加しないことで、後から登場する返却案内の背景に役割を持たせます。
返却場所の案内だけを淡い青の面で囲む
- 重要な案内欄の背景には淡い青#EAF3F8を使い、見出し「返却場所の確認」は深い青#164E73にします。見出しと背景のコントラスト比は約7.87:1です。
- 「借りた場所ではなく、指定された返却ポートに戻してください」という本文は濃い青灰色#273948で、淡い青#EAF3F8とのコントラスト比は約10.58:1です。
- 必要なら案内の左側に青#356D8Dの縦線を添えます。この線と淡い青#EAF3F8のコントラスト比は約5.02:1です。線は見出しや文章を補助する目印にします。
- 「返却場所を確認」というボタンは濃い青#19587Bの背景に白#FFFFFFの文字を使います。文字とボタンのコントラスト比は約7.71:1、ボタンと案内背景#EAF3F8の差は約6.86:1です。
案内欄の淡い青#EAF3F8とページ背景#F8FAFCは約1.07:1と近いため、色差だけでは境界が十分に分からない場合があります。欄の上下に余白を設け、見出しと短い説明をセットにして独立した内容だと伝えます。
強調した部分が浮きすぎないように調整する
色付きの欄は、返却方法の説明と確認ボタンを含む程度にとどめます。ページ幅いっぱいの長い背景帯にする必要はありません。周囲の見出しや本文と左右の位置をそろえ、案内欄だけ極端に余白が狭くならないようにすると、ページの流れを保ちやすくなります。
スマートフォンでは、背景色の付いた案内が画面を大きく占めていないか、貸出・返却の違いが文章でも伝わるか、ボタンまで無理なく進めるかを確認します。また、返却先が変更になる場合は文章自体を更新する必要があります。色を変えるだけでは変更内容を正確に伝えられません。
WCAG（WEBコンテンツのアクセシビリティに関する指針）のレベルAAでは、通常の文字と背景のコントラスト比は原則4.5:1以上、大きな文字は3:1以上です。操作の識別に必要な図形などには隣接色と3:1以上の基準が関係する場合があります。上記の数値は不透明な単色で計算したもので、写真・透明度・ボタンの操作状態が加わる場合は別途確認が必要です。大切なのは、背景の違いだけでなく、その案内を読んで何をすればよいかが明確なことです。