2026年4月14日

こんにちは！ Laf Design の後藤（弟）です。

Webサイトを見たときに「なんだかおしゃれ」「なんとなくちぐはぐ」と感じること、ありませんか？

実はその印象の多くは、配色によって決まっています。デザインの配色というと難しく聞こえますが、基本はとてもシンプルで、色を「ベースカラー」「メインカラー」「アクセントカラー」の3つに分けて考えるだけです。

この3色の役割と黄金比を理解すれば、誰でも統一感のある配色ができるようになります。

今回は、この配色の基本ルールについて分かりやすく解説していきます。

1. 配色の基本は「3色・黄金比」で考える

デザインの配色でまず覚えておきたいのが、色を3つの役割に分けて、それぞれに適切な比率を割り当てるという考え方です。

よく使われる黄金比が「ベースカラー70%・メインカラー25%・アクセントカラー5%」です。色数を増やすほどデザインは複雑になり、まとまりのない印象になりがちです。

逆に、この比率を意識するだけで、使う色数を絞りながらも単調にならない、メリハリのあるデザインが作れます。

まずは「どの色を、どれくらいの面積で使うか」を意識するところから始めてみましょう。

2. ベースカラー：全体の土台となる色

ベースカラーは、Webサイトの背景や余白など、面積として最も広い部分に使う色です。

全体の約70%を占めるため、主張の強い色ではなく、白・グレー・ベージュといった落ち着いた色を選ぶのが基本です。

ベースカラーが安定していると、その上に配置されるテキストや画像が引き立ち、サイト全体が読みやすくなります。

逆にベースカラーに彩度の高い色を使ってしまうと、コンテンツより背景が目立ってしまい、伝えたい情報が伝わりにくくなるので注意が必要です。

3. メインカラー：サイトの世界観を作る色

メインカラーは、そのサイトやブランドを象徴する色で、全体の約25%を占めます。

ヘッダー、ナビゲーション、見出し、ロゴなど、ユーザーの目に触れやすい部分に使われることが多く、いわば「サイトの顔」となる色です。

企業サイトであればコーポレートカラー、個人のブログやポートフォリオであれば自分らしさを表現できる色を選ぶとよいでしょう。

メインカラーが定まっていると、ページを増やしていっても世界観がぶれにくくなり、サイト全体に一貫性が生まれます。

4. アクセントカラー：行動を引き出す色

アクセントカラーは全体のわずか約5%ですが、デザインの中でもっとも重要な役割を担っています。

ボタンやリンク、キャンペーンの告知など、ユーザーに「気づいてほしい」「押してほしい」部分に使う色だからです。

ベースカラーやメインカラーと対照的な色相・彩度を選ぶことで、視線を自然に引きつけることができます。

例えば落ち着いたトーンのサイトに、鮮やかなオレンジや赤のボタンを配置すると、クリックしてもらいやすくなります。

使いすぎると本来の効果が薄れてしまうため、「ここぞ」という場所に絞って使うのがポイントです。

まとめ

今回は、配色の基本となる「ベースカラー・メインカラー・アクセントカラー」の役割と比率について解説しました。

• ベースカラー：全体の約70%、土台となる色
• メインカラー：全体の約25%、世界観を作る色
• アクセントカラー：全体の約5%、行動を促す色

配色というと感覚的なものだと思われがちですが、実際にはこうした型に沿って考えることで、誰でも一定レベルの完成度に近づけることができます。

私自身、日々デザインの仕事をしていても、この3色の比率を最初に意識するかどうかで、その後の作業のスピードも仕上がりの印象も大きく変わると感じています。

配色に悩んだときは、まずこの黄金比に立ち返ってみてください。きっと、迷いなく色を選べるようになるはずです。

今後も、デザインをもっと身近に感じてもらえるような発信を続けていきますので、楽しみにしていてくださいね。

check

あわせてチェック

制作を依頼したい方へ

テンプレじゃない「御社専用のWebサイト提案」を無料で作成します。
まずはお気軽にご相談ください。

Webデザインやコーディングスキルを学びたい方へ

転職・副業・社内スキルアップに。作れる力が身につく実践型スクール。
まずは無料体験で雰囲気を確認できます。