Webデザインの配色｜ベース・メイン・アクセント色の決め方
Webデザインの配色は、ベース・メイン・アクセントの役割分担と、文字・背景のコントラストが重要です。ブランド色を起点に、UIで使える色体系へ落とし込む手順を解説します。
はじめて読む方へ｜まず知っておきたい基本
この記事で出てくる基本用語を先に確認します。ここだけ押さえておけば、専門知識がなくても本文を読み進められます。
配色とは、複数の色を目的に合わせて組み合わせることです。色相だけでなく、明るさ・鮮やかさ・面積・文字とのコントラストも見やすさに影響します。
コントラストは、文字と背景など2つの要素の見え方の差です。デザインでは印象だけでなく、文字の読みやすさやアクセシビリティにも関わります。
Webデザインの配色では、「おしゃれな色を3色選ぶ」だけでは足りません。背景、文字、リンク、ボタン、境界線、成功・警告など、役割ごとに色を設計する必要があります。
最初にブランドや主役となるメイン色を決め、次に背景・文字のベース色、最後にCTAなどのアクセント色を設計します。色数を増やす前に、同じ色の明暗バリエーションを用意するとUI全体を整理しやすくなります。
記事テーマを視覚的に理解するための色見本です。概念に固定の公式色がない場合は教材表示として扱います。
#3F6682#DDB04F#70A477#C96567#7862A1同じ色でも、面積比で印象は変わる
配色は色の選び方だけでなく、どの色をどれだけ使うかでも見え方が変わります。
Web配色の基本は「役割」で分ける
| 役割 | 主な用途 | 考え方 |
|---|---|---|
| ベース | 背景、余白、カード | 長時間見ても疲れにくい |
| メイン | 見出し、ブランド、主要UI | サイトらしさを作る |
| アクセント | CTA、重要リンク | 小面積で目立たせる |
| テキスト | 本文、補足 | 背景との明暗差を優先 |
| 状態色 | 成功、警告、エラー | 色だけで意味を伝えない |
「70・25・5」などの比率は目安
Web配色ではベース・メイン・アクセントの面積比が紹介されることがありますが、固定比率ではありません。重要なのは、背景色とCTA色が同じ面積・同じ強さにならないよう、視覚的な優先順位をつけることです。
ブランド色1色からUIカラーを広げる
- 基準となるブランド色を決める
- 明るい版・暗い版を作る
- 背景用の低彩度色を作る
- CTA用に十分目立つ色を決める
- 成功・警告・エラーは別の意味色として設計する
文字と背景のコントラストを優先する
淡い背景に淡い文字、鮮やかなボタンに細い白文字などは、見た目が整っていても読みにくくなることがあります。配色理論より先に、本文・ボタン・入力欄などの可読性を確認します。
エラーを赤だけ、成功を緑だけで示すと、色覚特性や表示環境によって判別しにくくなることがあります。アイコン・ラベル・文章を併用します。
ダークモードでは別パレットとして考える
ライトモードの色を単純に反転するだけでは、彩度が強すぎたり、境界線が消えたりします。背景、カード、文字、ブランド色をダーク背景用に再調整する方が安全です。
実務で確認する順番
- PCだけでなくスマホ幅で確認する
- 通常・hover・focus・disabledを確認する
- ボタンと背景の区別を確認する
- 表・カード・フォームの境界が見えるか確認する
- グレースケールでも情報の優先順位が分かるか確認する
よくある質問
Webサイトは何色くらい使えばいいですか？
色数より役割分担が重要です。基準色を絞り、必要に応じて明暗バリエーションと状態色を追加すると整理しやすくなります。
アクセント色は補色がいいですか？
補色は目立たせやすい選択肢の一つですが、必須ではありません。ブランドや可読性、周囲の色との関係で決めます。
背景は真っ白がいいですか？
用途によります。白は明快ですが、長文や大画面ではオフホワイトや薄いグレーの方が穏やかに見える場合もあります。
コメントを残す