カラー別にみてみる!WEBサイトにおける配色パターン

WEB制作・開発実例・コラム
2019.01.31

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

今回は、世の中のサイトをカラー別に見ていき、
・カラーのもつイメージとは?
・どういうカテゴリーのサイトによく使われている?
・配色パターン

以上3点ついてまとめていきたいと思います!

では早速赤色からです。

赤のカラーイメージ

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

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

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

以前に配色の基本的なコツについてまとめた記事もあるので合わせて参考にしてみてください!

コラム

最新コラム

人気コラム

ご質問やご相談などお気軽にお問い合わせください。

お電話でのお問い合わせはこちら

03-5829-9912

受付時間:平日10:00~19:00(土・日・祝日を除く)