WEBページの左右カラムで色を変えるときの配色ポイント
WEBページを左右の2カラム（縦方向に区切った2つの表示領域）に分けると、記事本文と補足情報、商品一覧と絞り込み条件などを並べられます。ただし、左右の背景を別の色にするだけでは、どちらが重要なのか伝わらない場合があります。配色を決める前に、主役となる情報と、それを支える情報を分けて考えましょう。ここではHEX（16進数で色を表すコード）を使い、具体的な組み合わせも紹介します。
左右の役割を決めてから背景色を選ぶ
最初に、読者に優先して見てもらいたい「主カラム」を決めます。記事ページなら本文、商品ページなら商品説明などが候補です。目次、関連情報、絞り込み条件などを置く側は「補助カラム」として整理すると、色の役割も決めやすくなります。
主カラムは白や控えめな背景で文章と写真を見せ、補助カラムに淡い色を加えると、内容の違いを自然に示せます。反対に、左側がナビゲーションで右側が本文なら、左を濃色にして右の本文を明るく保つ組み方もあります。必ず左が主役という決まりはありません。
色の違いを大きくするほど分かりやすいわけでもありません。左右とも鮮やかな背景にすると、見出しやボタンより背景が目立つことがあります。まず幅・余白・情報量を整え、そのうえで背景色に役割を持たせるのが基本です。
左右カラムで使える2つの配色例
例1：左に本文、右に補足情報を置く場合
- 左の本文エリア：白 #FFFFFF を背景に、濃い青みのグレー #243447 を文字色として使います。
- 右の補足エリア：淡い青みのグレー #EAF2F8 を背景に、同じ文字色 #243447 を使って統一感を保ちます。
- 右側の小見出し：深い青 #1D466A を使い、補足の項目を探しやすくします。
- 右側の操作ボタン：青 #175F89 の背景に白 #FFFFFF の文字を組み合わせます。
この例では、本文の文字と白背景のコントラスト比は約12.67:1、右側の文字と淡い背景は約11.20:1です。右の小見出しと背景は約8.68:1、ボタンの白文字と青背景は約6.92:1です。色を分けても、文章の読み取りや操作のしやすさを優先できます。
例2：左にナビゲーション、右に本文を置く場合
左のメニュー部分には深い青 #1D466A を使い、項目の文字は白 #FFFFFF にします。右の本文は白 #FFFFFF の背景と濃いグレー #243447 の文字で、長い説明を読む領域として落ち着かせます。左側の白文字と背景のコントラスト比は約9.83:1です。
この組み合わせでは左の濃色が視覚的な目印になり、右側の文章を独立した領域として見せられます。ただしメニューの幅が広すぎると濃色の面積が増えるため、本文の表示幅を圧迫しないよう調整します。
境界線・スマホ表示・文字の見え方を確認する
背景色の差が小さいときは、カラムの間隔を広げたり、それぞれに見出しを付けたりします。必要なら区切り線を加えてもよいですが、線だけを唯一の目印にしないことが大切です。反対に色の差が大きいときは、余白を十分に取り、見出しやボタンまで強い色にしすぎないようにします。
スマホでは左右2カラムが上下に積み重なる構成も一般的です。主カラムと補助カラムの順序が意図どおりか、背景の切り替わりで情報が途切れて見えないか、見出しから内容まで無理なく追えるかを確認してください。色だけで役割を伝えず、「関連情報」「絞り込み」などの見出しも残します。
文字のコントラストは、WCAG（ウェブコンテンツのアクセシビリティに関するガイドライン）のAA基準では通常の文字で4.5:1以上、大きな文字で3:1以上が基本です。操作に必要なアイコンや境界などにも別の基準があります。ここで示した数値は各色を不透明な状態で重ねた場合の計算値です。実際の画面では文字サイズ、重なり、写真や半透明の背景も含めて確認しましょう。