Webサイトの配色の決め方

Webサイトの配色を「なんとなく好きな色」で決めていませんか。
配色は見た目の好みだけでなく、ブランドの印象・読みやすさ・問い合わせのしやすさまで左右します。
この記事では、カラーコーディネーターの視点から、迷わず配色を決めるための手順を3ステップで解説します。

配色を決める前に押さえる3つの原則

具体的な色選びに入る前に、判断の軸を先に決めておくと迷いません。

目的から逆算する：何を伝えたいサイトか（信頼／親しみ／高級感など）を先に言語化する。
ブランドに合わせる：ロゴや既存の販促物がある場合は、そこから色を引き継ぐと一貫性が出る。
可読性を最優先にする：どんなに美しい配色でも、読みにくければ本末転倒。文字と背景のコントラストは必ず確保する。

ステップ1：ベースカラー（ブランドカラー）を決める

最初に決めるのは、サイトの土台となるベースカラー（＝ブランドカラー）です。
既にロゴやブランドカラーがあるなら、それを起点にします。無い場合は「サイトで与えたい印象」から選びます。
目安として、暖色系（赤・オレンジ・黄）は活動的で親しみやすい印象、寒色系（青・緑）は信頼感や清潔感につながりやすいと言われています。
とはいえこれは絶対的なルールではなく、あくまで一つの判断材料として、ブランドの方向性と合わせて選ぶのがおすすめです。

ステップ2：メインカラーとアクセントカラーを決める（比率の考え方）

ベースカラーが決まったら、全体を構成する色の比率を意識します。
よく知られた目安として、ベース70：メイン25：アクセント5（あるいは60：30：10とも言われます）の配分があります。アクセントカラーは、ボタンやリンクなど「押してほしい場所」に絞って使うと、視線を誘導できます。

色数を増やしすぎると散らかった印象になります。まずは3色前後に絞るのが扱いやすい出発点です。

ステップ3：トーンを揃えて統一感を出す

複数の色を使っても「まとまって見える」のは、多くの場合トーン（色の調子＝明度と彩度の組み合わせ）が揃っているからです。色相がバラバラでも、トーンを合わせるだけで一気に整います。

PCCSトーンで色調をコントロールする

日本でよく使われるPCCS（配色を体系化した色の物差し）では、色を「トーン」で整理して考えられます。トーンごとのRGB値やカラーコードは、PCCSトーンのRGB値一覧にまとめています。実際の配色作業では、この一覧から近いトーンを選ぶと、統一感を出しやすくなります。たとえば、はっきりした印象を出したい部分には彩度の高い「ビビッドトーン」、やわらかく親しみやすい印象を出したい部分には淡い「ペールトーン」や「ソフトトーン」を選ぶと、狙った雰囲気に近づけやすくなります。