配色の選び方 — Webサイトの色使いガイド
配色の選び方 — Webサイトの色使いガイド
> このページのURL: https://lite-word.com/manual/color-guide/
> こんな質問に答えます:
> - サイトの色をどう決めればいいかわからない
> - 色の組み合わせがチグハグになってしまう
> - メインカラーやアクセントカラーって何？
> - 業種に合った色の選び方を教えてほしい
「なんとなく色を決めたけど、チグハグになってしまう」「どの色を組み合わせればいいかわからない」という方のために、Webサイトの配色の基本ルールをまとめた。デザイナーでなくても、このページのルールに沿えば統一感のあるサイトが作れる。
配色の基本ルール（3色ルール）
Webサイトの配色は 3色 に絞るのが鉄則。色を増やすほどまとまりがなくなる。
| 役割 | 割合 | 使う場所 | 例 |
|---|---|---|---|
| メインカラー | 約70% | 背景・余白・ベースとなる色 | 白、薄いグレー、アイボリー |
| サブカラー | 約25% | ヘッダー、見出し、ナビゲーション、フッター | ブランドカラー（青、緑など） |
| アクセントカラー | 約5% | ボタン、リンク、注目させたい部分 | オレンジ、赤、黄色など目立つ色 |
ポイント:
- メインカラーは白や薄いグレーなど「背景として邪魔にならない色」が基本
- サブカラーがサイトの「顔」になる。ブランドカラーやイメージに合う色を選ぶ
- アクセントカラーはサブカラーと反対の色相（補色）を選ぶと目を引きやすい
- 迷ったら 白ベース + ブランドカラー1色 + アクセント1色 で十分
色が与える印象
色にはそれぞれ心理的な効果がある。サイトの目的やターゲットに合った色を選ぶことが大切。
| 色 | 印象・イメージ | 向いている用途 |
|---|---|---|
| 赤 | 情熱・緊急・エネルギー | セール、期間限定、飲食、スポーツ |
| 青 | 信頼・冷静・誠実 | 企業サイト、金融、医療、IT |
| 緑 | 自然・安心・健康 | 医療、オーガニック、教育、不動産 |
| 黄 | 明るい・注意・楽しい | 子ども向け、注意喚起、カジュアルなサービス |
| 黒 | 高級・モダン・洗練 | ファッション、ブランド、高級サービス |
| 白 | 清潔・シンプル・広がり | どんなサイトにも使える万能な背景色 |
| オレンジ | 親しみ・活力・創造 | 飲食、旅行、エンタメ、EC |
| 紫 | 高貴・創造性・神秘 | 美容、スピリチュアル、クリエイティブ |
| ピンク | 女性的・優しい・愛情 | 美容サロン、ウェディング、女性向けサービス |
業種別おすすめ配色
「自分の業種に合う色がわからない」という方は、以下を参考に。
| 業種 | メインカラー | サブカラー | アクセントカラー | イメージ |
|---|---|---|---|---|
| 企業サイト | 白 | 青 | グレー | 信頼感・誠実さ |
| 美容サロン | 白 | ピンク | ゴールド | 華やかさ・上品さ |
| 飲食店 | 白 | 赤 | 茶 | 食欲・温かみ |
| 医療・クリニック | 白 | 青 | 緑 | 清潔感・安心感 |
| IT・テック | 白 | 濃紺 | 水色 | 先進性・知性 |
| 教育・スクール | 白 | 緑 | オレンジ | 成長・親しみやすさ |
| 士業（弁護士・税理士） | 白 | 紺 | ゴールド | 信頼・格式 |
| ECサイト | 白 | オレンジ | 赤 | 活力・購買意欲 |
これはあくまで一般的な傾向。業種にとらわれず「自分のサービスをどう見せたいか」で選んでも問題ない。
無料の配色ツール
自分でゼロから色を考える必要はない。以下のツールを使えば、プロのような配色が簡単に作れる。
Coolors
- URL: https://coolors.co/
- スペースキーを押すだけで配色パターンが自動生成される
- 気に入った色をロックして、残りだけ変更できる
- 最も手軽でおすすめ
Adobe Color
- URL: https://color.adobe.com/
- カラーホイールで補色・類似色などの配色理論に基づいたパレットが作れる
- 写真からカラーパレットを自動抽出する機能もある
Color Hunt
- URL: https://colorhunt.co/
- デザイナーが投稿した配色パレットのコレクション
- トレンド・人気順で探せるので「今っぽい配色」が見つかる
Happy Hues
- URL: https://www.happyhues.co/
- 配色パレットを選ぶと、実際のWebサイトに適用されたプレビューが見られる
- 「この配色がサイトでどう見えるか」をイメージしやすい
使い方の流れ
- 上記のツールで気に入ったパレットを見つける
- メイン・サブ・アクセントの3色を決める
- カラーコード（例:
#3B82F6）をメモする - LiteWordのカスタマイザーで設定する
配色の失敗パターンと対策
失敗1: 色を使いすぎている
症状: ページがガチャガチャして落ち着かない。どこを見ればいいかわからない。
対策:
- 使う色は 3色まで に絞る（メイン・サブ・アクセント）
- 「もう1色足したい」と思ったら、既存の色の 濃淡（明るさ違い） で対応する
- グレーの濃淡はカウントしなくてOK（テキストや区切り線に自由に使える）
失敗2: コントラストが弱い
症状: 薄い色同士の組み合わせで文字が読みにくい。ボタンが目立たない。
対策:
- 背景が明るい色なら文字は暗い色、背景が暗い色なら文字は明るい色
- ボタンは背景と はっきり違う色 にする
- WebAIM Contrast Checker（https://webaim.org/resources/contrastchecker/）でチェック
失敗3: テキストが読みにくい
症状: 色付きの背景に色付きの文字を載せて、視認性が悪い。
対策:
- 本文テキストは 黒（#333）または濃いグレー が最も読みやすい
- 背景は 白または薄いグレー が無難
- 色付きの文字は見出しやリンクなど 短いテキスト に限定する
失敗4: 全ページで色がバラバラ
症状: トップページと下層ページで使っている色が違う。統一感がない。
対策:
- 最初に3色を決めたら 全ページで統一する
- LiteWordのカスタマイザーで一括設定すれば、自動的に統一される
アクセシビリティ（色のバリアフリー）
色の選び方は「見た目の好み」だけでなく、すべての人が読めるかどうか も考慮する必要がある。
コントラスト比のルール
Webアクセシビリティの国際基準（WCAG 2.1）では、テキストと背景のコントラスト比に以下の基準がある。
| テキストサイズ | 最低コントラスト比 |
|---|---|
| 通常テキスト（18px未満） | 4.5:1 以上 |
| 大きいテキスト（18px以上の太字、24px以上） | 3:1 以上 |
チェック方法:
- WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
- 2色のカラーコードを入力するだけで、基準を満たしているか判定してくれる
色覚多様性への配慮
日本人男性の約5%、女性の約0.2%が色覚特性を持っている。20人に1人は「赤と緑の区別がつきにくい」可能性がある。
配慮のポイント:
- 色だけで情報を伝えない（例: エラーは赤色だけでなく、アイコンやテキストも併用する）
- 赤と緑を隣り合わせにしない（OK/NGの表現など）
- グラフやチャートは色だけでなく、パターン（斜線・ドットなど）も併用する
- Chrome拡張「Colorblindly」で、色覚特性の方にどう見えるか確認できる
既存のブランドカラーがある場合
会社やサービスのロゴに使われている色（ブランドカラー）がある場合は、それを軸に配色を組み立てる。
手順
- ブランドカラーをサブカラー（25%）に設定する — ヘッダーやナビゲーションに使う
- メインカラー（70%）は白系にする — ブランドカラーを引き立てる
- アクセントカラー（5%）を決める — 以下の方法で選ぶ
アクセントカラーの選び方
| 方法 | やり方 | 効果 |
|---|---|---|
| 補色を使う | カラーホイールで正反対の色を選ぶ | コントラストが強く目立つ |
| 同系色の濃淡 | ブランドカラーを明るく/暗くした色 | 統一感がありまとまる |
| 無彩色を使う | 黒・グレー・白 | 落ち着いた印象。失敗しにくい |
迷ったら: Adobe Color（https://color.adobe.com/）にブランドカラーを入力し、「補色」や「類似色」の配色ルールを適用すると、相性の良い色が自動で提案される。
LiteWordでの色設定
LiteWordでは、カスタマイザーからサイト全体の配色を簡単に変更できる。
設定場所
外観 > カスタマイズ > カラー設定 から以下の色を設定できる:
- サイト全体のメインカラー
- リンクの色
- ボタンの色
- ヘッダー・フッターの背景色
- 見出しの色
詳しい設定手順はこちら:
よくある質問
Q. 色のセンスがないのですが、大丈夫ですか？
配色に「センス」は必要ない。このページで紹介した 3色ルール と 配色ツール を使えば、誰でもまとまりのある配色が作れる。プロのデザイナーも配色ツールを使っている。
Q. 黒背景のサイトはかっこいいですが、やめたほうがいいですか？
黒背景はインパクトがあるが、長文を読むサイトには不向き。目が疲れやすく、離脱率が上がる傾向がある。ファッションやポートフォリオなど、ビジュアル重視のサイトなら効果的。一般的な企業サイトやブログは白背景が無難。
Q. 途中で配色を変えても大丈夫ですか？
LiteWordなら、カスタマイザーで配色を一括変更できるので、途中で変更しても問題ない。ただし、画像内に使っている色は手動で作り直す必要がある。配色は なるべく早い段階で決める のがおすすめ。
Q. グラデーションは使っていいですか？
グラデーションは同系色（青→水色、ピンク→紫など）なら失敗しにくい。ただし、テキストの背景にグラデーションを使うと読みにくくなることがあるので注意。ヒーロー画像やボタンなど、限定的に使うのがおすすめ。
Q. 競合サイトと同じ色になってしまいます
同じ業種なら似た配色になるのは自然なこと。差別化したい場合は、アクセントカラーで個性を出すか、写真やフォントで差をつけるほうが効果的。無理に奇抜な色を選ぶと、かえって信頼感を損なう。
Q. ロゴの色とサイトの色は合わせるべきですか？
合わせるのが基本。ロゴのメインカラーをサイトのサブカラーに使うと統一感が出る。ロゴが複数の色を使っている場合は、その中から1色を選んでサブカラーにする。
最終更新: 2026-03-17