色の統一感とは?サイト全体で色のトーンを揃える方法

記事内に広告が含まれています。

色数は絞っているはずなのに、なんとなくまとまりがない。そう感じるときは、色相や明度・彩度の「トーン」がバラバラになっているのかもしれません。

この記事では、色の統一感とは何か、そしてサイト全体や複数の制作物を通じて統一感を出す方法を、初心者向けに解説します。

基本の理解

まずは色の統一感とは何を指すのか、そしてなぜ大切なのかを押さえましょう。

色の統一感とは、デザイン全体、あるいは複数のページ・制作物を通じて、使う色の系統やトーンを揃え、バラバラな印象にならないようにすることです。

※色は「色相」「明度」「彩度」の3つの要素で表せます。色相は赤・青・緑といった色みの種類、明度は色の明るさ、彩度は色の鮮やかさのことです。そしてトーンとは、このうち明度と彩度の組み合わせによって決まる「色の調子」(淡い・濃い・くすんでいる・鮮やかなど)を指します。

トーンには、明るく淡い色をまとめた「パステルトーン」、鮮やかで濃い色をまとめた「ビビッドトーン」、暗く落ち着いた色をまとめた「ダークトーン」のように、呼び名がついています。

例えば、淡いピンクと淡いブルーは色相こそ違いますが、どちらも「パステルトーン」の仲間なので、並べても統一感が出やすくなります。

トーンについてさらに詳しく知りたい方は、PCCSとはという記事も参考にしてください。

統一感のある色使いは、見る人に「きちんと作られている」という信頼感を与えられます。また、サイトやサービス全体を貫く世界観(ブランドカラー。企業やサービスを象徴する色として、ロゴやサイト全体で一貫して使われる色のことです)が伝わりやすくなるという効果もあります。

色数が絞られていても、明度・彩度の傾向(トーン)がバラバラだと、全体としてまとまりのない印象になってしまいます。複数のページや制作物(Webサイト・SNS・バナーなど)を横断して見た際、色の使い方に一貫性がないと、同じサービスだと認識されにくくなってしまいます。

実践としては、サイト全体で使う色の色相・明度・彩度の範囲をあらかじめ決めておき、そこから逸脱しないようにする方法があります。

色相環(色相を順番に並べて輪にした図)で隣り合う同系色を使う(類似色配色)ことで、統一感を出しやすくすることもできます。例えば、青をベースカラーにする場合、色相環で隣り合う水色や青緑をサブカラーに選ぶと、色は変えつつも統一感を保ちやすくなります。

複数の写真・イラストを使う場合も、色調を揃えることで統一感を保てます。具体的には、同じクリエイターのイラスト素材を使う、写真には同じフィルターや色補正をかける、明るさや背景色が似ている写真を選ぶ、といった工夫があります。

また、こうしたトーンの合わせ方に加えて、「ベースカラー70%・メインカラー25%・アクセントカラー5%」という色の使用比率の目安を意識すると、実際にどれくらいの分量で色を使えばいいかの指針にもなります。

統一感を保つときに陥りやすい失敗と、よくある疑問をまとめます。

ページを追加するたびに、その時の気分で新しい色を足してしまい、気づけば統一感が崩れていることがあります。新しいページを作る際も、既存の色のルールに立ち返って確認しましょう。
単発のバナーやSNS投稿では良くても、複数の制作物を並べたときに色のトーンが揃っていないことに気づきにくいものです。時々、過去の制作物と並べて見比べる機会を作りましょう。

Q. 統一感を保つための色のルールは、どこにまとめておくといい?
A. 使ってよい色のHEXカラーコード(#FF6600のように、Webで色を指定するときに使う6桁の英数字の記号)や、色相・明度・彩度の範囲を、デザインガイドラインやスタイルガイドとして文書化しておくと、複数人での制作でも統一感を保ちやすくなります。
Q. 統一感を出しつつ、単調にならないようにするには?
A. 「トーンを揃える」ことと「バリエーションを持たせる」ことは、実は矛盾していません。ポイントは、色そのもの(色相)を増やすのではなく、同じ色の明るさ(濃淡)を変えることです。例えば、ベースとなる色を濃い青に決めたら、ボタンには明るい青、背景にはごく薄い青を使うというように、同じ色の濃淡でメリハリをつけます。こうすれば、色数を増やさずに単調さを防げます。具体的な濃淡の作り方はブランドカラーをWebに展開する方法の記事も参考にしてください。