メイン / サブ / アクセントカラー

基本的な意味と「黄金比」の定義

サイト全体の配色設計の出発点となる 3 段構成のルールです。ここを明確に決めずに作り始めると、ページや担当業者ごとに色がバラつき、ブランドイメージが崩壊します。Web デザインでは以下の面積比が美しく見える「黄金比」とされています。

• ベースカラー(約 70%)：最も面積が広い背景色(余白)。主に白や薄いグレーなど、コンテンツを邪魔しない色が選ばれます。
• メインカラー(約 25%)：ブランドの顔となる基準色。ヘッダーや大きな見出しなど、サイトの世界観を決定づける領域に使います。(※これに加えて、メインを補助する「サブカラー」を定義することもあります)
• アクセントカラー(約 5%)：CV ボタン(購入・お問い合わせ)など、ユーザーの注意を強烈に引きたい箇所に絞って使う差し色。メインカラーの補色(反対色)や暖色を選ぶと視線が止まりやすくなります。

実務における設計論点と現場のルール

• カラーコードでの厳格な管理：業者間のブレを防ぐため、Figma などのデザインツールで「#FF5733」といった HEX 値(カラーコード)でスタイル登録し、プロジェクト全体で一元管理するのが現代の定石です。
• アクセシビリティとクロスプラットフォーム：ボタンの背景色(アクセント)×白テキストで「コントラスト比 4.5:1 以上」を確保すること。さらに、印刷物や SNS、ダークモード時でもブランドカラーの印象が崩れないか(またはダークモード用に色を再定義するか)の検証が必須です。

Web 担当者が陥りやすい落とし穴とリアルな対策(NG 事例)

① アクセントカラーの乱用による優先順位の消失
「ここも目立たせたい」とアクセントカラーを乱用した結果、一番押してほしい CV ボタン(CTA)が埋もれてしまい、コンバージョン率(CVR)が低下する悲劇。アクセントは「1 ページに数カ所」と絞るのが鉄則です。

② UI 状態色(セマンティックカラー)との衝突
サイトには「エラー(赤)」「成功(緑)」「警告(黄)」「無効(グレー)」など、システム状態を示す色が必要です。もし自社のブランドカラーやアクセントカラーが「赤」だった場合、エラー表示と CV ボタンの見分けがつかなくなり、ユーザーを極度に混乱させます。設計の初期段階で「UI の状態色」と「ブランドカラー」のパレットをどう共存させるか、デザイナーと合意しておく必要があります。

③ ベースとメインの混同
ブランドの顔であるメインカラーを背景(70% の領域)に敷き詰めてしまい、サイト全体に強烈な圧迫感が生まれ、文字が読めずにユーザーが即離脱してしまうケース。余白(ベースカラー)の重要性を理解することが重要です。