背景グラデーションの作り方｜WEBデザインに合う色の組み合わせ

背景グラデーションは、複数の色をなめらかにつなげた背景です。WEBサイトの見出しや紹介エリアに変化を付けられますが、色の差が強すぎると本文やボタンより背景が目立ってしまいます。自然につながる2色の選び方、CSS（WEBページの見た目を指定する仕組み）での作り方、文字を読みやすく保つ確認方法を紹介します。

まず2色を選び、明るさと使う面積を決める

最初に、グラデーションを使う場所を決めます。ページ全体より、サービス紹介の見出しエリアや短い案内セクションなど、役割が明確な場所から試すと効果を比較しやすくなります。周囲の写真やカードにも色が多い場合は、背景の変化を控えめにします。

初心者は、同じ色の明るさを変えた2色か、青から青緑のように近い色相の2色から始めると調整しやすくなります。色相は青・赤などの色の種類です。途中で大きく色相が変わる組み合わせより、変化する方向を把握しやすいためです。ただし近い色でも明るさが異なれば、載せる文字との見え方は変わります。

色は単独の見本ではなく、実際に配置する見出し・説明文・ボタンと合わせて決めます。端から端へ急に明るさを変えると文字の一部が読みにくくなるため、文字を重ねる背景では両端と途中の色を調べる必要があります。

明るい背景と暗い背景の具体的な作り方

例Aは、情報サービスの紹介エリアに使う淡いグラデーションです。開始色を青みのある白 ■#F2F6FA、終了色を淡い水色 ■#DCEAF0 とし、見出し・本文を濃い青灰 ■#263A4C にします。濃い文字と開始色は約10.79:1、終了色は約9.53:1です。色相が近く彩度も控えめなので、カードや文章の邪魔をしにくい組み合わせです。

主要ボタンは深い青緑 ■#255B71、ボタン文字は白 ■#FFFFFF とし、文字のコントラスト比は約7.46:1です。背景が淡い分、濃いボタンを置くことで操作の場所を区別できます。ただし、境界が十分に見えるかは実際の画面で確認してください。

CSSでは、直線方向に色を変える関数「linear-gradient()」を使います。例えば角度120degで2色を指定します。次のコードにあるRGBは赤・緑・青の量を表す書き方で、例Aの開始色と終了色をそれぞれ指定しています。

background: linear-gradient(120deg, rgb(242 246 250), rgb(220 234 240));

例Bは、イベント告知の見出しに使う暗いグラデーションです。開始色を濃い青 ■#173754、終了色を深い青緑 ■#285E77 とし、見出しを白 ■#FFFFFF にします。白文字とのコントラスト比は開始色で約12.27:1、終了色で約7.10:1です。大きな面積に使う場合も色の移り変わりを落ち着かせ、本文を置く位置を確保します。

例Bの申込みボタンは淡いミント ■#E8F1EE と濃い青 ■#173754 の文字を組み合わせると約10.67:1です。淡いボタンと暗いグラデーションの両端との比も確認し、文字だけでなくボタン自体が見つかるようにします。

角度・色数・コントラストを仕上げに調整する

CSSの角度は0degが下から上、90degが左から右への変化です。120degのような斜め方向も選べます。色の開始位置・終了位置や角度を変えると、同じ2色でも目立つ範囲が変わります。最初は2色で作り、必要な場合だけ中間色を追加しましょう。

WCAG（Web Content Accessibility Guidelines、WEBの利用しやすさに関するガイドライン）2.2のAA（適合レベルの一つ）基準では、通常の文字は背景とのコントラスト比が4.5:1以上、規定の大きな文字は3:1以上必要です。今回の数値は指定した不透明な単色同士の計算結果で、グラデーションの全位置を保証するものではありません。文字が載る中央部も含めて実際の表示を調べ、必要なら文字の後ろに単色の面を置きます。

スマートフォンでは文字が折り返され、グラデーションの異なる場所に重なります。見出し、本文、ボタンの位置とコントラストを画面幅ごとに点検しましょう。HueRollではHEXコード（色を16進数で示す表記）で候補色を選び、濃淡や白・黒とのコントラストを確認できますが、任意の2色やグラデーション全体の自動判定には対応していません。