左右非対称レイアウトに合う配色｜色でバランスを整える方法
左右の幅をそろえない「左右非対称レイアウト」は、写真を大きく見せながら、横に短い案内を置きたいときなどに使えます。ただし、広い側も狭い側も強い色にすると、どこを見るべきか迷う場合があります。左右を同じ色の量にする必要はありません。大切なのは、幅・写真・文字の密度に合わせて、色が与える存在感を調整することです。ここでは陶芸体験の予約ページを例に、異なる幅の領域を自然につなぐ配色を考えます。
左右の幅よりも、色と情報の「視覚的な重さ」を見る
視覚的な重さとは、濃い背景や写真、目立つ文字などによって、その部分に視線が向きやすくなる度合いのことです。例えば左を広い写真、右を狭い予約案内にすると、写真の情報量が多く、左側ばかり目立つことがあります。この場合、右の小さな領域に濃い背景を使い、予約案内の位置を分かりやすくする方法があります。
一方、左に長い説明文があり、右に短い補足情報を置くなら、右側まで強い背景色にする必要はありません。淡い面を使い、見出しと余白で区別する方が自然な場合もあります。濃い色が狭い側に合うという固定ルールではなく、内容の密度と色の面積を一緒に判断しましょう。
色を選ぶ前に、左右の上端や見出しの位置を整えることも重要です。どちらかの領域だけ極端に詰まっていると、色で差を付けてもバランスが取りにくくなります。
陶芸体験の予約ページを左右非対称にする2つの配色例
次の割合はパソコン画面での設計例です。HEXとは、先頭の「#」に続けて0〜9とA〜Fの6桁で色を示すコードの形式です。コントラスト比は、隣接する色の相対的な明るさの差を数値にしたものです。
例1：広い写真65％＋狭い予約案内35％
左に陶芸体験の写真を広く置き、右側に開催日・料金・予約ボタンをまとめます。写真の上には文字を重ねず、案内は背景色のある右側で読ませる構成です。
- 写真の周囲とページの背景：温かみのあるオフホワイト#F7F3EC。通常の説明文には濃い青灰色#283A3Eを合わせ、コントラスト比は約10.76:1です。
- 右の予約案内：深い緑#24473Fを背景に、見出しを白#FFFFFFにします。コントラスト比は約10.25:1です。
- 予約案内の補足文字：淡い灰緑#DDE7E1を深い緑#24473Fの上に置き、約8.10:1のコントラスト比を確保します。
- 「体験を予約する」ボタン：白#FFFFFFの背景に深い緑#24473Fの文字を使います。文字とボタン背景、ボタンと周囲の深緑のどちらも約10.25:1です。
広い写真に対して濃い予約欄が小さな目印になります。ただし、写真自体が暗く鮮やかな場合は両側が強く見えることもあるため、写真の選び方や予約欄の幅を調整してください。
例2：広い説明70％＋狭い補足欄30％
左に体験内容や当日の流れを置き、右に持ち物やアクセスをまとめる場合は、広い本文をオフホワイト#F7F3ECの背景と濃い青灰色#283A3Eの文字で見せます。コントラスト比は約10.76:1です。
- 右の補足欄：淡いセージグリーン#E8EEE7を背景にし、見出しには深い緑#24473Fを使います。見出しと背景のコントラスト比は約8.70:1です。
- 補足本文：濃い青灰色#283A3Eを淡いセージグリーン#E8EEE7の上に置き、約10.09:1のコントラスト比です。
- 右側に予約ボタンが必要な場合：落ち着いた赤茶色#954B36の背景に白#FFFFFFの文字を使います。文字とのコントラスト比は約6.29:1、ボタンと淡い補足欄の背景との差は約5.34:1です。
補足欄の色を控えめにすると、長い説明を読む左側と、必要なときに見る右側を区別できます。予約ボタンはページ内で主要な操作を示す場所に絞り、同じ強調色を多用しないこともポイントです。
スマホで縦並びにしたときも、情報の順序を保つ
65対35や70対30は目安であり、最適な割合を保証する数字ではありません。文章が折り返して読みにくい、予約欄が窮屈になるといった場合は、横幅より内容の読みやすさを優先して調整します。左右の間隔を確保し、境界の色差だけで内容の役割を伝えないよう、見出しやラベルを付けます。
スマートフォンでは左右が上下に並ぶ場合が多くなります。大きな写真を最初に置くと開催日や予約ボタンが遠くなることもあるため、表示順序を確認しましょう。写真の色や明るさは画像ごとに変わるので、写真上に文字を重ねる場合は単色背景の計算値を流用せず、実際の重なりで検証します。
WCAG（WEBコンテンツのアクセシビリティに関する指針）のレベルAAでは、通常の文字と背景は原則4.5:1以上、大きな文字は3:1以上のコントラスト比が求められます。操作の識別に必要な図形や境界には、隣接色との3:1以上が適用される場合もあります。上記の値は不透明な単色同士の計算結果です。左右の見た目だけでなく、文字とボタンの見え方、キーボードで選択した際の表示まで確認してください。