Webサイトの印象を決める「色」の力

Webデザインにおいて、色は単なる装飾以上の重要な役割を持っています。ユーザーに対して「信頼感」や「活気」といった感情を直感的に伝え、クリックすべき場所を誘導する機能性も担っています。

色の指定方法：3つの基本

CSSでは、状況に応じて異なる色の指定方法を使い分けます。

1. HEX値（16進数）

最も一般的な指定方法です。`#` の後に赤(R)、緑(G)、青(B)をそれぞれ2桁の16進数（00〜FF）で表します。コピペしやすく、短い記述で済むのが特徴です。

2. RGB / RGBA

`rgb(255, 0, 0)` のように、赤・緑・青の強さを0〜255の数値で指定します。直感的に理解しやすい形式です。
末尾に `a` をつけた `rgba` では、不透明度（Alpha）を指定できます。

background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒 */

3. HSL / HSLA

色相 (Hue)、彩度 (Saturation)、輝度 (Lightness) で色を指定します。「少し明るくしたい」「彩度を落としたい」といった調整が人間にとって直感的に行えるため、デザインシステムを組む際におすすめです。

背景（background）の活用

単色だけでなく、画像やグラデーションを使ってリッチな表現が可能です。

グラデーションの魔術

`linear-gradient` を使うと、CSSだけで美しいグラデーションが作れます。

background: linear-gradient(90deg, #38bdf8, #818cf8);

背景画像の設定

画像を表示する際は、繰り返しやサイズの設定もセットで行うのが基本です。

background-image: url('hero.jpg');
background-size: cover;  /* 画面全体を覆う */
background-position: center; /* 中央に配置 */

アクセシビリティへの配慮

文字色と背景色のコントラスト比には注意が必要です。淡い背景に白い文字などは読みにくく、ユーザーにとってストレスになります。誰にでも読みやすい配色を心がけましょう。

まとめ

色はWebサイトの「顔」です。まずはベースカラー（全体の70%）、メインカラー（25%）、アクセントカラー（5%）の3色を決めることから始めてみましょう。統一感のある美しいデザインが生まれます。