Webサイトの色は何色使えばいい？ベース・メイン・アクセントカラーの考え方

Webサイトを作っていると、

「色って何色くらい使えばいいんだろう？」

「好きな色を組み合わせたら、なんだかまとまりがなくなった…」

と悩むことがあります。

Webデザインでは、ただ好きな色をいくつか選ぶのではなく、それぞれの色に「役割」を持たせることが大切です。

今回はWebサイトの配色でよく使われる、

ベースカラー・メインカラー・アクセントカラー

について、色彩の考え方とあわせてまとめてみます。

Webサイトの配色は「3つの役割」で考える

Webサイトの色を決めるときは、大きく3つの役割に分けて考えるとまとまりやすくなります。

① ベースカラー

ベースカラーは、Webサイトの中で最も広い面積を占める色です。

ページの背景などに使われることが多く、

白

オフホワイト

薄いグレー

淡いベージュ

など、主張の強すぎない色がよく使われます。

ベースカラーが強すぎると、文字や写真より背景の方が目立ってしまうため、コンテンツを邪魔しない色を選ぶことがポイントです。

② メインカラー

メインカラーは、そのWebサイトらしさを表現する中心的な色です。

例えば、

美容系 → ピンク・ベージュ

自然・住宅系 → グリーン

企業サイト → ブルー

高級感 → ブラック・ネイビー

など、サイトのイメージやブランドに合わせて決めます。

ロゴに使われている色をメインカラーにすると、Webサイト全体に統一感を出しやすくなります。

色彩検定で学ぶ色相・明度・彩度を意識すると、同じ「緑」でも印象を大きく変えられます。

鮮やかな緑なら元気で活動的な印象に。

少しくすんだ緑なら、ナチュラルで落ち着いた印象になります。

つまり、

「何色にするか」だけではなく、「どんなトーンの色にするか」も大切

ということですね。

③ アクセントカラー

アクセントカラーは、ユーザーの目を引きたい部分に使う色です。

例えば、

「お問い合わせ」

「予約する」

「詳しく見る」

といったボタンなどです。

アクセントカラーは目立たせることが目的なので、たくさん使ってしまうと効果が弱くなります。

「ここを見てほしい！」という場所に絞って使うのがポイントです。

「70：25：5」は絶対のルールではない

配色について調べると、

ベースカラー70％

メインカラー25％

アクセントカラー5％

という比率を見かけることがあります。

これは配色を考えるときのひとつの目安としては便利です。

ただし、Webサイトを本当に70：25：5で計算して作らなければいけないわけではありません。

例えば写真を大きく使うサイトなら、写真そのものが大きな色面になります。

白を多く使ったミニマルなデザインなら、ベースカラーが画面のほとんどを占めることもあります。

大切なのは数字そのものより、

ベース → 全体を整える

メイン → サイトらしさを作る

アクセント → 注目させる

という役割を意識することです。

「好きな色を3色選ぶ」と失敗しやすい理由

例えば、

「ピンクが好き」

「水色も好き」

「黄色もかわいい！」

という理由だけで3色を選んでしまうと、それぞれの色が同じくらい主張してしまうことがあります。

すると、

どこを見ればいいのか分からないWebサイト

になってしまうことも。

そこで、

「この色はブランドを表す色」

「この色は背景」

「この色はボタンだけ」

というように、先に役割を決めます。

すると複数の色を使っていても、全体をまとめやすくなります。

同じ色でも「明度・彩度」を変えると使いやすい

さらに便利なのが、メインカラーを基準に明度や彩度を変える方法です。

例えばメインカラーを緑にした場合、

濃い緑 → 見出し

通常の緑 → メインカラー

淡い緑 → セクション背景

かなり薄い緑 → 装飾

のように展開できます。

色相をどんどん増やさなくても、同じ系統の色に変化をつけるだけで豊かなデザインになります。

これはWeb制作でもかなり使いやすい方法です。

CSSなら、よく使う色を変数として管理しておくのも便利です。

:root {

  --main-color: #5f7f68;

  --main-light: #e8efe9;

  --accent-color: #d98b5f;

  --base-color: #fafafa;

  --text-color: #333333;

}

こうしておけば、あとからサイト全体の色を調整するときも管理しやすくなります。

色だけでなく「文字の読みやすさ」も大切

デザインとして綺麗な配色でも、文字が読みにくければWebサイトとしては使いにくくなってしまいます。

例えば、

薄いグレーの背景 × 白文字

のように明度差が小さい組み合わせでは、文字が見えにくくなることがあります。

色を決めるときは、

「おしゃれかどうか」＋「情報をきちんと読めるか」

の両方を見ることが大切です。

まとめ

Webサイトの配色では、単純に「好きな3色」を選ぶのではなく、

ベースカラー → 全体を支える色

メインカラー → サイトの印象を作る色

アクセントカラー → 注目させる色

というように、色の役割を考えることがポイントです。

さらに色彩検定で学ぶ、

色相・明度・彩度・トーン

の知識を組み合わせると、同じ色でもさまざまな印象を作れるようになります。

Webデザインを勉強していると、色彩検定で学んだ内容が実際の制作につながる場面がたくさんあります。

「何色を使おう？」と迷ったときは、色を探す前に、

「この色には何の役割を持たせる？」

と考えてみると、配色を決めやすくなるかもしれません😊