緑を基調にしたWEBサイトの配色｜自然で見やすくまとめる方法
緑を基調にしたWEBサイトは、植物や屋外の写真と組み合わせると、自然を思わせる雰囲気を作りやすくなります。一方、背景も文字もボタンも似た緑にすると、情報の区別が難しくなることがあります。ここでは落ち着いた緑#326A50を基準に、写真を見せる場所と文章を読む場所を分け、自然な印象と見やすさを両立する方法を考えます。HEXとは、WEBの色を16進数で指定するカラーコードです。
緑を使う面積と、文字・操作に使う濃さを分ける
緑を主役にする場合でも、ページ全体を緑色で埋める必要はありません。最初に見える案内エリアや見出し帯にまとまって使い、商品説明や価格表は明るい背景に切り替えると、内容の優先順位を伝えやすくなります。特に家具や植物など、商品写真そのものに緑が含まれる場合は、背景の色が写真と競合しないかも確認します。
深い緑#326A50の上に白#FFFFFFの文字を置くと、コントラスト比は約6.34:1です。コントラスト比は、文字と背景などの相対的な明るさの差を表します。同じ緑系でも色相（緑や青などの色み）だけで選ばず、明度（明るさ）の差まで考えることが重要です。
また、自然な印象を目指すからといって、ボタンまで淡い緑にする必要はありません。濃い色は操作を示すために、淡い色は補助情報をまとめるために使い、ひとつの色へ複数の役割を集中させないようにします。
リユース家具の通販サイトに使う配色例
中古家具の写真、商品の状態、寸法、配送条件を掲載し、購入につなげるページを想定します。緑はサイトの雰囲気を示す部分に使い、商品情報は見比べやすい明るい面に配置します。
- 最初の案内エリア：背景は落ち着いたグリーン#326A50、見出しと短い説明は白#FFFFFFにします。文字と背景のコントラスト比は約6.34:1です。
- 案内エリアの「商品を見る」ボタン：背景は淡い麦わら色#F3DBA3、文字は濃いチャコールグリーン#26372Fにします。文字との比率は約9.27:1で、ボタンと周囲の緑#326A50の差も約4.67:1あります。
- 商品一覧の背景と本文：温かみのあるオフホワイト#F8F6EFを広く使い、文字はチャコールグリーン#26372Fにします。文字との比率は約11.63:1です。商品写真の色が背景とぶつかりにくいよう、面を落ち着かせます。
- 商品カード：白#FFFFFFのカードにチャコールグリーン#26372Fで商品名と価格を表示すると、約12.58:1です。白#FFFFFFと周囲のオフホワイト#F8F6EFは約1.08:1と近いため、間隔だけでなく境界線も付けます。
- カードと入力欄の輪郭：グレイッシュグリーン#728477の線を使うと、白#FFFFFFに対して約3.98:1、オフホワイト#F8F6EFに対して約3.68:1です。
- 商品状態・配送の案内：淡いセージ#E6EEE5の背景にチャコールグリーン#26372Fで説明すると約10.61:1です。輪郭が必要な場合、グレイッシュグリーン#728477とこの背景の差は約3.36:1になります。
- 購入につながるボタン：商品情報エリアでは深いフォレストグリーン#1C573Eを背景に、白#FFFFFFの文字を合わせます。文字との比率は約8.46:1で、周囲がオフホワイト#F8F6EFならボタン面との差も約7.82:1です。
同じ緑系でも、サイトの印象を示す背景と購入ボタンは濃さを分けています。明るい麦わら色は緑の案内エリアだけに少量使い、商品一覧では写真・価格・状態表示を優先します。
自然な色合いを保ちながら、境界と状態を確認する
淡いセージ#E6EEE5とオフホワイト#F8F6EFの差は約1.10:1です。色の違いだけに頼らず、余白や見出し、必要な枠線で案内欄を区切ります。また、薄いグリーン#93B59Aは白#FFFFFFの上で約2.25:1なので、商品の状態を示す小さなアイコンや重要な文字には使わず、装飾に限定します。
WCAG 2.2（WEBコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字と背景に4.5:1以上、大きな文字には3:1以上のコントラスト比が必要です。操作部品の識別に欠かせない輪郭など、非テキストの視覚情報は隣接色との3:1以上が基準です。「在庫あり」「売り切れ」は緑とグレーなどの色だけで分けず、文字でも状態を示します。
スマートフォンでは、商品写真の周りにある細い線や小さな寸法表示、購入ボタンの位置を確認しましょう。HueRollでは選択色と白・黒とのコントラストを確認できますが、任意の2色の比較やAA・AAAの自動判定はできません。ここで示した緑と背景などの組み合わせは別途計算した値です。