「Webサイトの色使い」とは、コーポレートカラーを軸に、ベースカラー・メインカラー・アクセントカラーという役割ごとに色を割り当て、サイト全体で一貫したルールに沿って配色を決めることを指します。単に「好きな色を選ぶ」ことではなく、色相・明度・彩度という3つの要素と、70:25:5という使用比率の目安を理解したうえで、コントラスト比などの見やすさの基準に沿って設計する作業です。
この記事では、ロゴやコーポレートカラーは決まっているものの、サイト全体の配色まではまだ整理できていない、かつデザイナーに発注する予算もない担当者に向けて、自分で配色を整理するための考え方と具体的な手順を解説します。
1. 色使いとは
色使いとは、Webサイトの中でどの色をどこに、どれくらいの分量で使うかを決めるルールのことです。個人のセンスの話ではなく、「背景に使う色」「ロゴやボタンなど主張したい部分に使う色」「特に注目してほしい部分に使う色」を役割ごとに分け、サイト全体で一貫させる設計の話だと捉えてください。
「色使いが良い」と言われるサイトは、必ずしも使っている色数が多いわけではありません。むしろ使う色を絞り込み、役割を明確にしたうえで一貫して適用しているケースがほとんどです。逆に「なんとなくちぐはぐ」に見えるサイトの多くは、ページによって色の使い方が違う、目立たせたい情報とそうでない情報が同じ強さの色で表現されている、といった役割の混在が原因になっています。
配色を整理する作業は、センスの有無ではなく、役割を決めて型に当てはめる作業に近いものです。次の章から、その型を順番に解説していきます。
2. Webデザインで使う基本色
Webサイトの配色は、通常「ベースカラー」「メインカラー」「アクセントカラー」という3つの役割に分けて考えます。
| 色の種類 | 役割 | 使用比率の目安 | 具体例 |
|---|---|---|---|
| ベースカラー | 背景・余白など画面の大部分を占める、サイトの土台となる色 | 約70% | 白や生成り色、薄いグレーなど、圧迫感を与えない色を選ぶ |
| メインカラー | コーポレートカラーやロゴの色を使う、サイトの世界観を決める中心の色 | 約25% | ロゴカラーやブランドカラーをそのまま展開するのが基本 |
| アクセントカラー | ボタンや見出しなど、行動や注目を促したい部分に使う色 | 約5% | メインカラーの補色系統やビビッドな差し色で視線を集める |
コーポレートカラーがすでにある場合、それをそのままメインカラーとして採用するのが最もシンプルな進め方です。新たに色を選び直す必要はなく、ロゴと同じ色をボタンやリンク、見出しなどサイトの主要な要素に展開していくだけで、ブランドの一貫性を保てます。
ただし、コーポレートカラーの彩度が高い場合、そのままベースカラー（背景）に広く使うと圧迫感が出たり、文字が読みにくくなったりします。背景には彩度を落とした薄い色や白系の色を使い、コーポレートカラーはロゴ・見出し・ボタンなど「主張したい部分」に絞って使うのが基本です。
3. 色相・明度・彩度の基礎
配色を自分で調整するには、色相・明度・彩度という3つの要素を理解しておくと判断がしやすくなります。色は「何色か」という1つの軸だけでなく、この3つの軸の組み合わせで成り立っています。
- 色相（Hue）: 赤・青・緑といった「色みの種類」を表す軸。色相環と呼ばれる環状の図で表され、隣り合う色は似た印象を、反対側にある色（補色）は対照的な印象を与える
- 明度（Brightness）: 色の明るさを表す軸。同じ色相でも明度を上げると白に近づき、下げると黒に近づく
- 彩度（Saturation）: 色の鮮やかさを表す軸。彩度を上げるほど鮮やかで主張の強い色になり、下げるほどグレーに近いくすんだ色になる
同じメインカラー（色相）でも、明度・彩度を変えるだけで印象は大きく変わります。例えばコーポレートカラーが濃い青の場合、明度を上げて彩度を落とせば圧迫感のない薄い水色になり、背景やホバー時の色として使いやすくなります。逆に彩度を保ったまま明度だけ下げれば、落ち着いた紺色になり、フッターや見出しの背景に向いた色になります。
「メインカラーの派生色を作る」という発想を持つだけで、色数を増やさずに配色のバリエーションを広げられます。
4. 配色の決め方（70:25:5、実例つき、ツール比較表）
配色の決め方の基本は、前述のベースカラー70%・メインカラー25%・アクセントカラー5%という比率を目安に、各役割へ色を割り当てていくことです。これは学術的に定められた法則ではなく、Web業界で経験則として広く使われている目安ですが、色数と分量に迷ったときの基準として実務上とても有効です。
具体的な当てはめ方の例として、コーポレートカラーが青（#2C5FD9）の企業サイトを考えてみます。
- ベースカラー（約70%）: 背景・余白 → 白（#FFFFFF）や薄いグレー（#F7F8FA）
- メインカラー（約25%）: ヘッダー、フッター、見出し、ロゴ周り → コーポレートカラーそのもの（#2C5FD9）
- アクセントカラー（約5%）: CTAボタン、強調テキスト、通知バッジ → 反対系統の色（#FF7A3D）
この配分をコーディング前のワイヤーフレーム段階で確認しておくと、「ボタンの色が背景に埋もれて目立たない」「メインカラーを使いすぎてページ全体が重い」といった手戻りを防げます。
配色ツールを使えば、コーポレートカラーからパレット候補を機械的に生成できます。無料で使える主なツールは以下の通りです。
| ツール名 | 特徴 | 使い方 | こんな人におすすめ |
|---|---|---|---|
| Adobe Color | 色相環上でカラーホイールを操作しながら、類似色・補色・トライアドなど配色理論に沿ったパレットを作成できる | HEXコードを入力し、配色ルールを選ぶと候補が並ぶ | 色相環の理論から根拠を持って選びたい人 |
| Coolors | パレットをワンクリック（スペースキー）で次々生成でき、気に入った色だけ固定して再生成できる | スペースキーで色を入れ替え、決めた色は鍵アイコンで固定する | とにかく手数を減らして直感的に選びたい人 |
| Canvaカラーホイール | 色を1つ選び、補色・類似色・トライアドなどのパレットタイプを選ぶと、そこから展開した配色パターンを提案してくれる | 色を選択し、補色・単色調・類似色・三角配色などのパレットタイプを選ぶと候補が表示される | コーポレートカラーを起点にすぐ候補が欲しい人 |
作ったパレットは、HEXコード（例: #2C5FD9）の形でメモしておき、そのまま制作会社やコーダーに共有すれば、認識のズレなく実装してもらえます。
5. 色がユーザーに与える印象
色は、サイトの世界観だけでなく、訪問者が抱く印象や信頼感にも影響します。ここで紹介するのは統計的な調査結果ではなく、色彩心理として一般的によく語られる傾向です。業種やターゲットに応じたメインカラー選びの参考にしてください。
| 色 | 与えやすい印象 | 使われやすい業種の例 |
|---|---|---|
| 青 | 誠実、信頼、冷静という印象を与えやすい | 金融・医療・ITなど、信頼性を重視する業種で使われやすい |
| 緑 | 安心、自然、健康という印象を与えやすい | 環境関連・食品・医療福祉など、安心感を伝えたい業種で使われやすい |
| 赤 | 情熱、緊急性、活力という印象を与えやすい | 飲食・セール訴求・スポーツなど、活力を伝えたい業種で使われやすい |
| オレンジ | 親しみ、活発さ、温かさという印象を与えやすい | 教育・子ども向け・地域密着型サービスなど、親しみを伝えたい業種で使われやすい |
| 紫 | 高級感、上品さ、独自性という印象を与えやすい | 美容・ラグジュアリー・クリエイティブ系など、独自性を打ち出したい業種で使われやすい |
| 黒・グレー | 洗練、フォーマルさという印象を与えやすい | ハイブランド・士業・BtoBなど、フォーマルさを重視する業種で使われやすい |
こうした印象は文化や個人差によっても変わるため、絶対的な正解ではありません。ただし、業種のイメージから大きく外れた色（例えば医療機関で刺激の強い赤を全面に使うなど）を選ぶと、ユーザーに違和感を与えるリスクがあります。メインカラーを決める際の参考情報として活用してください。
6. 見やすい配色にするポイント
配色は印象だけでなく、情報の伝わりやすさにも直結します。特に重要なのが、文字色と背景色の「コントラスト比」です。
WCAG（Web Content Accessibility Guidelines）2.1の基準（Success Criterion 1.4.3 Contrast (Minimum)）では、通常サイズの文字は背景に対して4.5:1以上、大きな文字（18pt以上〈24px以上〉、太字なら14pt以上〈約19px以上〉が目安）は3:1以上のコントラスト比を確保することが推奨されています。この基準を下回ると、色弱の人や高齢者だけでなく、屋外でスマートフォンを見ているような一般的なユーザーにとっても文字が読みづらくなります。
見やすい配色にするための実務上のポイントは次の4つです。
- 背景と文字は必ず明度差をつける。同系色の濃淡だけで済ませない
- 純粋な黒（#000000）を本文に使うと圧迫感が出やすいため、ダークグレー（#333333前後）を使う
- 色だけで情報の違いを伝えない。「赤字はエラー」といった表現には、アイコンやテキストによる補足も添える（色覚多様性への配慮）
- リンクや操作可能な要素の色は、サイト全体で統一する。ページによって「青がリンク」「緑がリンク」のように変わるとユーザーが混乱する
これらの考え方は「Webアクセシビリティ義務化とは」でも詳しく解説しているので、あわせて確認してください。
7. 自社サイトの配色を今すぐチェックする方法（WebAIM Contrast Checker）
自社サイトの配色が見やすさの基準を満たしているかは、無料のツールで今すぐ確認できます。代表的なのが、WebAIMが提供する「Contrast Checker」です。
- サイトで使っている文字色のHEXコードを確認する（ブラウザの検証ツールやデザインデータから取得する）
- 背景色のHEXコードも同様に確認する
- WebAIM Contrast Checker（webaim.org/resources/contrastchecker/）に、それぞれの色をForeground Color（前景色＝文字）、Background Color（背景色）として入力する
- 表示されるコントラスト比の数値と、WCAG AA/AAAの合格・不合格の判定を確認する
通常テキストであれば4.5:1以上、見出しなど大きな文字であれば3:1以上を目安に、不合格の場合は文字色を濃くする、または背景色を薄くするなどの調整を行います。特にメインカラーをそのまま文字色として使っている見出しや、薄い色のボタンに白文字を乗せているようなケースで基準を下回っていることが多いため、優先的にチェックすることをおすすめします。
8. 内製担当者が陥りやすい配色の失敗
デザイナーではない担当者が自社で配色を整理する際、繰り返し起きやすい失敗がいくつかあります。
- 使う色を増やしすぎる: 「ここも目立たせたい」「あの部分にも色をつけたい」と少しずつ色を追加した結果、統一感のないサイトになるパターン。色を増やす前に、本当にメインカラー・アクセントカラーのどちらの役割かを確認する
- コーポレートカラーを背景に広く使いすぎる: ロゴの色をそのまま大きな面積に使うと圧迫感が出て、文字も読みにくくなる。コーポレートカラーは「メインカラー」として面積を絞って使うのが基本
- ページごとに配色のルールがぶれる: トップページとサービスページでボタンの色が違う、見出しの色が統一されていないなど、担当者や制作タイミングによってルールが変わってしまう
- アクセントカラーを複数作ってしまう: 「注目してほしい」箇所が増えるたびに新しい色を足すと、結局どこが本当に重要なのか伝わらなくなる。アクセントカラーは原則1色に絞る
- 見た目の好みだけで色を決める: 担当者個人の好きな色を選んでしまい、ターゲット層や業種のイメージとズレるケースがある。色を決める前に、5章で紹介したような色の印象とターゲット像を照らし合わせる
これらの失敗の多くは、色を選ぶ前に「ベースカラー・メインカラー・アクセントカラー」の役割を決め、それぞれに使ってよい色を1色ずつ決めておくルール（配色ガイドライン）を作ることで防げます。
9. 制作会社へ依頼するときに決めておくこと
配色の整理を自社である程度進めたうえで、実装や最終調整を制作会社に依頼する場合、事前に以下を決めておくとスムーズです。
- メインカラーのHEXコード: コーポレートカラーの正式なカラーコード（HEX、可能であればRGB・CMYKも）
- アクセントカラーの方向性: 「目立たせたい」という要望だけでなく、候補となる色や参考サイトを共有する
- 使ってほしくない色: 業界のイメージや過去の経緯などから、避けたい色があれば伝える
- 参考にしたいサイトのURL: 「この配色バランスが近い」という具体例を3〜5件用意する
- ロゴ・ブランドガイドラインの有無: すでにカラーパレットを文書化している場合は共有する。ない場合は、この記事の2〜4章の内容をもとに簡易的な指定だけでも用意しておく
配色は「なんとなくいい感じにしてください」という依頼が最もすれ違いを生みやすい領域です。色のコード、比率、参考サイトという具体的な情報を渡すことで、認識のズレを防ぎ、修正のやり取りも減らせます。外注全般の準備については、「ホームページ制作会社の選び方」でも詳しく解説しています。
10. まとめ
Webサイトの配色は、センスではなく型で決められます。ベースカラー70%・メインカラー25%・アクセントカラー5%という比率を土台に、コーポレートカラーをメインカラーとして展開し、色相・明度・彩度を調整して派生色を作る、という手順を踏めば、デザイナーでなくても一貫した配色を組み立てられます。
本記事の要点を整理します。
- 色使いとは、色をどこに・どれだけ使うかという役割設計のこと
- 配色はベースカラー・メインカラー・アクセントカラーの3つの役割で考える
- 色相・明度・彩度を理解すると、メインカラーから派生色を作れる
- 70:25:5の比率とAdobe Color・Coolorsなどのツールを使えば、配色の候補を機械的に作れる
- コントラスト比はWebAIM Contrast Checkerで無料チェックできる
- 色数を増やしすぎない、ルールを統一するという2点を守るだけで、内製担当者の失敗の多くは防げる
自社での整理が難しい場合や、決めた配色を実装まで一貫して依頼したい場合は、RINIAの「UIデザイン」サービスでもご相談を承っています。ロゴ・コーポレートカラーを起点にした配色設計から、コーディングまで対応可能です。
よくある質問
サイト全体の配色は何色くらいに絞るべきですか？
ベースカラー・メインカラー・アクセントカラーの3色を基本に考えます。テキスト用のニュートラルカラー（黒に近いグレーなど）を加えても、実質3〜4色程度に絞るのが基本です。色数を増やすほど統一感が失われやすくなります。
コーポレートカラーとメインカラーは同じ色にすべきですか？
多くの場合、コーポレートカラーをそのままメインカラーとして使うのが自然です。ロゴのブランドイメージとサイトの印象を一致させられ、非デザイナーでも判断に迷いません。彩度が高すぎて背景やボタンに使いづらい場合は、明度・彩度を調整した派生色を作って使い分けます。
70:25:5の配色比率は必ず守らなければいけませんか？
絶対的なルールではなく、Web業界で経験則として広く使われている目安です。ページの内容によっては多少前後しても問題ありませんが、迷ったときの出発点として活用すると、色数や分量のバランスを取りやすくなります。
コントラスト比はどうやって確認すればいいですか？
WebAIM Contrast Checkerなどの無料ツールに、文字色と背景色のカラーコードを入力するだけで確認できます。通常の文字は4.5:1以上、大きな見出し文字は3:1以上を目安にしてください。
配色ツールで作ったパレットを、そのままコーディングしてもらえますか？
可能です。Adobe ColorやCoolorsなどで決めた色をHEXコード（#から始まる6桁のコード）の一覧にして制作会社に共有すれば、そのコードをもとに実装してもらえます。色の名前や印象だけで伝えるより、認識のズレが少なくなります。
配色の相談だけでも制作会社に依頼できますか？
可能です。ロゴやコーポレートカラーを起点に、サイト全体の配色ルールだけを整理する依頼も一般的です。すでに自社である程度の方向性を整理できている場合は、その分見積もりや打ち合わせもスムーズに進みます。
無料相談する