カラー別にみてみる！WEBデザインにおける配色パターン

WEBサイトをデザインするにあたり、メインカラーを決めることはとても重要ですが、メインカラーを決めても「他の色がなかなか決まらない」といった配色について頭を悩ませる方も多いのではないでしょうか。

今回は、世の中のサイトをカラー別に見ていき、
・配色の基本
・カラーのもつイメージとは？
・どういうカテゴリーのサイトによく使われている？
・配色パターン
以上4点ついてまとめていきたいと思います！

色に関する基礎知識

まず一口に色と言いましてもその数は膨大で、よく使われる色でも数百色、名前が付いてるいる色に至っては数千色にのぼります。
当然これだけの色の中から適当に組み合わせて目的にかなった配色を作り出すというのは至難と言えるでしょう。
とは言え、色は無秩序に存在しているわけではなくある種のパターンと構成要素によって分類されています。
配色においてはこれらのパターンと構成要素を把握することが第一です。

色の構成要素

色というものは「色相」「彩度」「明度」の三つの要素によって構成されています。
まず色相は「赤」「青」「黄」といったようにどの色の系統に属しているかを示します。色の最も基本的な要素と言えるでしょう。
次に彩度は色の鮮やかさ、力強さを表しており彩度が高いほど鮮明に見えます。色相上で最も彩度が高い色は純色と呼ばれ、純色から離れるほど彩度は下がります。
最後に明度は色の明暗を示す指標です。白に近いほど明度は高くなり、黒に近くなるほど明度が低くなります。

色相環（hue circle）。これはあくまで一例で色相環には様々な種類が存在しいています。
（https://color.adobe.com/ja/create/color-wheelより。以下の同じ色相環を用いた画像についても同様）

基本的な配色パターン

人間の知覚に訴えかけ、狙った心理効果を発生させるためには色の使い方や組み合わせが重要です。
オーソドックスなものとしては色相環上の位置関係による配色が挙げられ、色相環上で規則的あるいは幾何学的な関係にある色の組み合わせることによって調和のとれた配色になるという考え方です。

アイデンティティ（ドミナントカラー）配色

同一の色相のみを使った配色をアイデンティティあるいはドミナントカラー配色と呼びます。同じ系統の色のみを使うので統一感が出やすく、色の個性を前面に押し出せるためコーポレートカラーやブランドカラーを引き立たせたいときに有用です。
反面、変化に欠ける組み合わせなのでアイデンティティ配色をする際は明度や彩度でメリハリをつけるようにしましょう。

アナロガス（アナロジー）配色

色相環上で隣り合う色相の組み合わせをアナロガス（アナロジー）配色と呼びます。
アイデンティティ配色に比べて多くの色味が使えることによる色調の変化と類似色相を複数扱うことによる安定感のある色合いが特徴です。対照色相を用いる配色に比べてコントラストは低くなりますが全体的に柔らかく穏やかな印象を与えることができます。

ダイアード（コンプリメンタリー）配色

色相環上でちょうど対角線同士になる二色の組み合わせを指します。
色相環上で反対の位置にあるということは補色の関係にあり、ダイアード配色は基本的に鮮明かつ強い印象を閲覧者に与えます。
長所はコントラストによってメインカラーを引き立て、力強いインパクトを与えられる点ですが、高彩度の組み合わせはキツすぎる印象になるため注意してください。逆に彩度が低めの組み合わせはある程度この欠点を補いつつそれなりに印象の強い組み合わせとなります。

トライアド配色

色相環上で正三角形を形成する三色による組み合わせの配色です。ダイアード配色のように補色関係ほど離れてはいませんがそれぞれの色が対照色相に属するためバランスの良さと明瞭さを両立する組み合わせと言えるでしょう。
とはいえこちらも色同士のコントラストが出やすい配色なので高彩度の組み合わせはややうるさいものになりがちです。どのようなサイトにするかによって彩度を調整することがトライアド配色のコツと言えます。

スプリットコンプリメンタリー配色

特定の色一つと補色と隣り合う二色の三つの色を用いた組み合わせです。対照色相と類似色相の配色であるため変化と統一感を同時に出せます。また完全な対照色相同士の組み合わせであるトライアド配色に比べ、類似関係にある色相が含まれますのでより柔らかい印象を閲覧者に与えることができます。

テトラード配色

補色関係にある二組の色同士を使い、四角形を描く組み合わせをテトラード配色と呼びます。補色同士の配色であるためはっきりとした色合いになりやすく、色彩豊かな印象になりやすいです。
テトラード配色には色相環を四等分し、正方形を形作る組み合わせであるスクエアとそれ以外のレクタンギュラーが存在します。
スクエアは補色関係にある二組の色相を使い、なおかつ色相環上で最も離れた四色を使うのでかなりカラフルな印象を与えることができます。
反面、色相としては遠い色同士の配色となるので統一感を出すことが難しく、失敗すればちぐはぐな印象を与えてしまう可能性がありますので上級者向けの配色と言えるでしょう。
一方レクタンギュラーも補色同士の組み合わせなのでスクエアと同様の特徴がありますが、スクエアと比べて色味が近くなるので幾分長所も短所もマイルドになる傾向があります。

配色まとめ

ここで配色パターンを幾つか紹介してきましたが上記で挙げたものはあくまで基本的なものでしかありません。
色の数が少ない／類似の色を使う場合は単調になりやすく、色の数が多い／対照的な色を使う場合はちぐはぐでうるさい印象になりやすい傾向にあります。
対処法としては前者の場合、各色の彩度や明度で差をつけるようにすればコントラストが出て変化を生み出すことができ、後者の場合は何色かの彩度や明度を下げれば色味のキツさを緩和することができます。
配色パターンを変えることなく印象を変化させたいときは彩度や明度をいじることが有効に働く場合が多いので覚えておくと良いでしょう。

色ごとの特徴と配色

次に色ごとの特徴と配色の仕方について触れます。

では早速赤色からです。

赤

赤のカラーイメージ

強いインパクト、情熱的、購買意欲を高める、興奮、愛、食欲増進

こんなサイトによく使われていました！

採用サイト、食品関係、ECサイト、スポーツ

赤の配色パターン

1)無彩色(白ベース)×赤のアクセントカラー

2)無彩色(黒ベース)×赤のアクセントカラー

3)赤ベース×黒のアクセントカラー

4)赤ベース×アクセントカラー

5)彩度の低い赤ベース×赤のアクセントカラー

赤配色のまとめ

赤はインパクトがあるが故にどう扱ってよいのか悩む方も多いかもしれません。しかしそのインパクトや、カラーイメージからロゴマークに赤色を使用した企業やブランドはたくさんあり、今回の検証では、その多くのサイトでボタンやメニュー、リンクなどパーツに赤を使用しているケースが大変多い事がわかりました。また他のカラーに比べると、圧倒的に無彩色との組み合わせが多かったように感じます。
無彩色と合わせると洗練された印象になります。ただ、前述の通り、色自体にインパクトがあり、「危険」とうイメージも持つ色なので画面上で使用する面積には注意しましょう。

オレンジ

オレンジのカラーイメージ

おいしい・健康的・幸福感・楽しい・若々しい・親しみやすい・あたたかい

こんなサイトによく使われていました！

比較的幅広い業種のwebサイトでメインカラーとして使われていますが、特にこどもや動物のクリニック、企業の採用サイトなど、親しみやすさを伝えるデザインに多く採用されているようでした。

オレンジの配色パターン

1)同系色でまとめる

2)無彩色×オレンジアクセント

3)柔らかい印象のオレンジ使い

4)補色の緑をアクセントカラー

オレンジ配色のまとめ

ビタミンカラーとも言われるオレンジ色はポジティブな印象を与えることが多いカラーであることから、アクセントカラーにもベースカラーにも比較的使いやすい色です。
赤色と黄色というインパクトのある色の中間のために、配色のパターンでは類似色でまとめているものも多くみられました。(配色パターン1参照)
また、エネルギッシュな印象が強いですが、彩度の低いオレンジに全体のカラートーンを合わせると柔らかく落ち着いた印象になります。
一方で赤色に近くし、高彩度オレンジをアクセントカラーにすると、赤と同じぐらいインパクトのある使い方もできます。トーンや、赤か黄色のどちらに寄せるかにより、だいぶ印象を変える事の出来るカラーです。

黄

黄のカラーイメージ

明るさ、希望、陽気、幸福感、若々しい、警告、好奇心、かわいらしさ

こんなサイトによく使われていました！

黄色ベースのサイトは非常に目立つため、コーポレートサイトよりは、プロモーションサイトやLP（ランディングページ）に多く見られました。
アクセントカラーとして使用されているものはジャンル問わず幅広く使われていますが、制作会社やアパレルといったセンスの良い会社が多かったように感じます。

黄の配色パターン

1)黄色ベース×黒

大胆な黄色ベースのサイトは、しっかりとしたウェイトの黒文字を使うことで締まります。

2)アクセントカラー

3)彩度が低い黄色のパターン

4)高明度の黄色に合わせる有彩色パターン

黄の配色のまとめ

色相の中でもっとも明度が高い色の為、黒などの明度の低い色との配色がほとんどでした。#FCFF03のようなハイトーンの黄色が意外にどんな色とも合うのも、明度が高いからかもしれません。
明度が高く彩度の低い黄色には、こどもらしく可愛らしい配色を。反対に明度がひくく、彩度も低い黄色は無彩色ベースの配色をとると上品に仕上がります。

緑

緑のカラーイメージ

健康、リラックス、安らぎ、穏やか、若さ、調和、保守的、ナチュラル、安心、わかりやすさ

こんなサイトによく使われていました！

比較的幅広い業種のwebサイトでメインカラーとして使われていますが、特に介護や病院サイト、健康食品、ローカル情報サイトなど、わかりやすさや優しさを伝えるデザインに多く採用されているようでした。

緑の配色パターン

1)青みがかったグリーン×鮮やかなイエロー

2)無彩色(黒)×緑

3)無彩色(白)×緑

4)彩度の低い緑のナチュラル配色

5)補色のアクセントカラーで賑やかな配色

緑配色のまとめ

青と黄色の中間色である緑は色の幅も大きく、明度と彩度によってもだいぶイメージが変わります。
黄色に近い緑は暖色に近い為、ポディティブな印象を与え、明度が低い深緑は高級感の訴求に使われます。
しかしどのトーンであっても、あまり主張がないカラーの為使いやすく、幅広い業種のサイトに使用されていました。
緑がメインカラーの場合のアクセントカラーには、黄色や青といった類似色を使うパターンも見られましたが、意外にも緑と無彩色というシンプルなサイトも多かったのが印象的でした。

青

青のカラーイメージ

信頼感、安心感、知的、誠実、清潔感、涼しさ、透明感

こんなサイトによく使われていました！

清潔感や信頼感、誠実を感じる色の為、赤色と同様に多くの企業のブランドロゴに見られます。中でも金融や、行政といった信頼性を伝えたいサイトはもちろん、教育関係のサイトやメーカーなど、業種を問わず多くのコーポレートサイトに使われています。ペコプラのサイトもメインカラーはブルーです！

青の配色パターン

1)明度の高い青色×アクセントカラー

カジュアルな印象。メーカー等のコーポレートサイトに多い。

2)無彩色×青

明度の高い青と白の組み合わせは爽やかで透明性の高い印象。

明度の低くネイビーに近くになるにつれ、知的、安心感のある印象になる。

3)高彩度の青色のアクセントカラー

アクセントカラーに彩度の高い青と黒の組み合わせはスポーティーな印象に。

青配色のまとめ

空や海の色でもある青色は、自然界に存在する色であれば比較的どんな色とも合わせやすいカラーかと思います。例えば青と黄色。通常補色の関係にあると使うのが少し難しいですが、空と太陽のカラーで馴染みがあるおかげであまり悩まず合わせやすかったりします。
また明度が高い白寄りの青色は爽やかで清涼感のある印象に、明度の低いネイビーのような青は重厚な印象といったように、色に幅があるのでイメージによって調整しやすいですし、かなり配色をとりやすいカラーと言えるでしょう！

まとめ

実際のWEBサイトを参考に配色パターンをいくつか紹介させていただきましたが、いかがだったでしょうか。
今回わかったことは
・WEBデザインにおいては圧倒的に無彩色との配色が多い。
・ロゴマークの色をメインカラーにしているサイトが多い。
という点。つまり、「ロゴマークの色をメインカラーとし、無彩色でまとめれば、そこそこまとまりのある配色になる。」という事ですね。
もちろん、こんな一言で言える程配色は簡単ではなくとっても奥が深い分野なのですが…
ただ、例えば黄色ベースの大胆なベースカラーに対して目立つアクションボタンをどうしようかと考える時に、「目立たせないといけないから赤を使おう」ではないという事です。目立たせる為の手法は色だけではなく、文字だったり、形状、線、余白の使い方というように、他にも様々なデザインの要素と手法があるという事を忘れないようにしましょう。

▼関連記事