初心者必見！Webデザインの配色の基本や選び方の注意点

Webデザインで重要な配色の基礎

Webデザインの配色を学ぶ上で重要なのは、3つのカラーです。
カラーは、メインカラー、ベースカラー、アクセントカラーに分けられます。

メインカラー

メインカラーとは名前の通り、Webサイトの主要な部分の配色を指します。トップページを見て瞬時に判断できる色合いがメインカラーです。例えば、ロゴやメニューの色などがメインカラーに該当します。全体で見てメインカラーの割合は約25％ほどを占めます。

ベースカラー

Webサイトの多くの配色を占めるのがベースカラーです。ベースカラーは背景色に該当し、全体の70％ほどを占めています。つまり、ベースカラーの色合いによってはWebサイトの雰囲気が全く異なるというわけです。ほとんどのWebサイトの背景は白が多く、ジャンルによっては黒などで統一する場合があります。白と黒とでは雰囲気が全く異なるので、ベースカラーの存在はかなり重要です。

アクセントカラー

アクセントカラーは、Webサイト全体で見ると5％ほどしかありませんが、だからこそアクションを起こしてほしい場所に配置するケースが多いです。例えば、お問い合わせや購入のバナーなどが該当します。たったの5％ではありますが、直接の問い合わせや購入につながるものですから、とても大切です。

Webデザインの重要な配色の属性

まったく同じ色でも、明るかったり暗かったりするものです。それらを表すのが、明度、彩度、色相です。

明度

明度は色の明るさのことで、高くすればするほど真っ白になり、低くすればするほど真っ暗になります。明度が高ければ清潔感がありますし、低ければかっこよさを感じられます。

彩度

彩度は、その名の通り色の鮮やかさのことを指します。例えば中間を茶色系統にした場合、彩度を高めると真っ赤になり、低くすると灰色になります。色を派手にしたい場合は彩度を高め、落ち着かせたい場合は彩度を低くします。

色相

赤やオレンジ、緑のように色の違いのことを色相と言い、それぞれの色を円のような形にしたものを色相環と言います。例えば、赤の反対にあるのが緑ですが、この対に位置する色が補色です。色相環と補色を知っておけば、色の相性が分かるため、Webサイトのメインカラーやベースカラーを決めやすくなります。

Webデザインの配色の種類について

みなさんご存知の通り、色には赤や緑、白、青などたくさんあります。実はそれぞれの色に特徴がある、ということをご存知でしたでしょうか。

赤

情熱の赤と言われるように、多くの人がよく利用する色です。暖かく、情熱や愛情を感じられる色でもあります。赤はかなり目立つ色のためベースカラーには不向きですが、バナーなどのアクセントカラーやメインカラーに最適です。また、色合い的に落ち着いたWebサイトには不向きのため注意しましょう。

緑

緑は植物や草など、私たちが普段から見る馴染みの色です。緑はリラックスした印象を与えると言われています。これは、緑に目の負担がないため、穏やかな気分を感じさせてくれるからです。緑色は、メインカラーやアクセントカラーに向いている配色です。

青

青色は空や海など自然環境で広く見られるため、緑同様に私たちに馴染みのある色だと言えます。青は一般的に冷静で安定した印象を与えますので、コーポレートサイトのカラーなどによく使われます。ですが、反対に青一色になると冷たさや孤独感を引き起こす可能性もあります。青色はメインカラーに最適な色だと言えます。

黄

とても明るく派手な印象を与えるのが黄色です。黄色は目立つ色のため、信号機の色にも使われるほど重要な役割を果たしています。ですが、黄色を過剰に使用してしまうと目がチカチカするため、Webサイトの場合はメインカラーやアクセントカラーにとどめるくらいがいいでしょう。

黒

黒は落ち着き、かっこいい印象を与えます。黒はあらゆるところで使われている色のため、Webサイトにおいても絶対に外せない色です。黒色は、Webサイトによってはベースカラーでも使えるため、幅広く使用できます。

白

清潔感と言えば白ではないでしょうか。白は、医療機関や結婚式場などの清潔感を重視しているところでよく利用されています。例えば白衣やウェディングドレスの白が該当します。また、ほとんどのWebサイトのベースカラーが白のため、どの色よりもよく使います。

無料相談会で話を聞いてみよう！

Webデザインの配色を決める際に注意するべきこと

Webデザインの配色を決める場合、いくつかの注意事項があります。

色は使いすぎない

とにかく良いWebサイトにしたいと考え、さまざまな色で展開してみようとお考えではありませんか。もし、コーポレートサイトなどの真面目なWebサイトであれば色を多く使うと見づらくなってしまう可能性があります。たくさんの人が見やすいように、色は多くても3色以内におさめるようにしましょう。

色の相性を考える

Webデザインは、色の相性がとても重要です。例えば、背景が蛍光色で文字が白だとしたらどうでしょうか。おそらく見ただけで目がチカチカして、二度と見たくないと思われてしまいます。ですから、色の組み合わせや相性を意識して配置するといいでしょう。

コーポレートカラーを意識する

コーポレートカラーとは、その企業の色のことを指します。企業や組織を象徴する色のため、とても大切なことです。もともとコーポレートカラーが決まっているのであれば、それに従って配色を考え、決まっていない場合は、ヒアリング等でイメージを聞きだします。

Webデザインの配色を完璧にするためには？

配色を考える際には、さまざまなやりかたや考えかたにより進められますが、ではより完璧に仕上げるためには何をすればいいのでしょうか。

色相環を使って色の組み合わせを考える

配色を考えるのであれば、色相環は絶対に使うべきです。

色相環で見るべきところは、補色や同系色です。補色であれば、その色の反対に位置する色との相性がいいという特徴があります。例えば、赤であれば緑、オレンジであれば青のように、円状になった色の反対側に位置する色を組み合わせるといいでしょう。同系色は、その色の隣に位置するものですから、積極的に選ぶことで統一感がうまれます。

配色ツールを使って色選びを完璧にする

配色を考える場合、色相環だけではなく配色ツールも使うべきです。配色ツールは名前の通り、色選びのサポートをしてくれるツールのことを指します。例えば、Adobe Color CCが該当します。自分で配色を考えるのもいいですが、ツールを使いこなせればより確実に失敗のない色選びができるでしょう。

まとめ

Webデザインを考えるうえで配色はとても大切な要素になっています。なぜなら、適当な色を組み合わせると、見た目が悪くなってしまいますしセンスを疑われてしまうからです。ですから、Webデザインを学びたいとのことであれば、まずは配色を勉強してはいかがでしょうか。配色を理解すれば、正しい色使いができますのでセンスもアップするでしょう。

無料相談会で話を聞いてみよう！