WEBサイトのデザインでおさえるべきカラー配色の決め方

webサイトの印象を決定づける一つの要素にデザインがあります。中でもカラーの配色はかなり重要です。本記事ではwebサイトにおける配色の基本的な知識からコツなどをご紹介します。

■webサイトにおける色の重要性

お店や商品、サービスなどを検索するとき、私たちはさまざまなwebサイトにたどり着きます。 

普段何気なく見ているサイトでも、ある程度決まった法則で構成されていることが多く、たくさんの人に見てもらうwebサイトを制作するために、この知識は欠かせません。 

中でも配色の持つ役割は重要で、webサイトを閲覧するユーザーに与える印象を大きく左右します。 色による心理効果はとても大きく、イメージや雰囲気、感情を奮起させることもあります。

例えば、白は清潔感などを彷彿させるため白衣などに使用されていますし、黒は高級感や重厚感を持たせることができ、ブランド価値を高めるために使用されることも。

人の感情を動かし、欲求を掻き立てる効果を引き出すためにも、ユーザーに届けたい企業や商品のイメージを色によって適切に表現することをおすすめします。

■おさえておきたい3つの基礎知識

色を理解するための基礎知識として、まずおさえておきたいのが3属性です。

色相、明度、彩度と呼ばれ、明度と彩度が同じ色相グループを「トーン」と呼びます。一度は耳にしたことがあるかもしれませんが、きちんと理解するだけでも色の知識が大きく変わります。

まずは、この3つのポイントをそれぞれご説明します。

色相

赤・青・黄・緑など他の色と区別するための基となる色の違い、色合い、色味を表します。

虹のように赤・橙・黄・緑・青・紫の順番に見える色を「光のスペクトル」といい、その色の違いが「色相」です。

色相を円状に表したものは「色相環」と呼ばれ、赤・青・黄の3原色を軸に綺麗に色が繋がったひとつの輪になります。

色相環の正反対に位置する色を「補色」といい、補色同士を並べて配置するとコントラストが強く鮮やかになります。また、色相環上で隣の位置にあるよく似た色を「類似色相」といいます。

明度

色の明るさの度合いをあらわし、より明るい色ほど明度が高いと表現します。明度が高くなると明るい色の白になり、低くなると暗い色の黒になります。

例えば赤の場合、明度が高いと白味が混ざったピンク色になり、明度が低いと黒味のある赤になるのです。

明度はwebサイトでの文字や表、図の表現に大きく関わる要素となります。

文字を読みやすくするためには、背景の色と文字の色の明度差を大きくするのが良いとされています。差が大きいほどはっきりと見やすくなるためです。

ただし、コントラストの差が大きいと目に負担がかかり疲れやすくなるとも言えます。商品紹介やブログ記事など文字数の多いコンテンツを載せる際は、離脱を防止する意味でもユーザーに寄り添ったコントラストを心がける必要があります。

彩度

彩度は色の鮮やかさを指します。彩度が低いと色味を感じにくい白や灰色、黒などの「無彩色」になります。無彩色を合わせるほど彩度は落ち、地味な落ち着いた色になるのです。

無彩色以外の色を「有彩色」と呼び、彩度が高くなると鮮やかな色、いわゆる「ビビットカラー」になり、力強い印象を与えることができます。ただし、目立たせようとして彩度の高い色ばかりを組み合わせてしまうと、目がチカチカしてしまう「ハレーション」が起こりやすくなるため注意が必要です。

彩度の中でも鮮やかな赤系統の色を「興奮色」といい、落ち着いた印象を与える青系統の色を「鎮静色」といいます。

■配色を決めるコツ

webサイトのデザインの際、重要となる配色ですが、中でもベースカラー、メインカラー、アクセントカラーの3つのカラー配色がポイントです。

最もキレイで見やすい配色にするための黄金比率は、ベースカラー70％、メインカラー25％、アクセントカラー5％と言われています。この比率で配色すると、統一感のある見やすいwebサイトを製作可能です。本章では3つのカラー配色について解説していきます。

ベースカラー

70％と大きく占めるベースカラーは、基本となる色で、主に余白や背景などに使用されます。

メインカラーやアクセントカラーの引き立て役にもなり、無彩色である灰色や白か、メインカラーやアクセントカラーの明度をあげた色を使うとデザインしやすいです。

メインカラー

メインカラーはその名のとおり、メインとなる色、つまり全体の印象を決める主役となる色です。主にロゴや見出し、キャッチフレーズなどに使用されることが多く、明度の低い色が見やすいとされています。企業や商品、サービスなどの印象やメッセージを的確にユーザーへ訴求するために、それぞれの色が持つイメージをうまく活用するよう心がけましょう。

アクセントカラー

アクセントカラーはそのものを目立たせたい、購入ボタンや問い合わせフォームなど見落とされたくない大事なコンテンツに使用します。メインカラーと反対の色を使用するとメリハリがつき、見やすくなります。

失敗しない配色の大事なポイントは、「できるだけ色の数を増やさない」です。

あれもこれも使いたいとたくさんの色を使用してしまうと、webサイト全体が雑然とした印象となり、見にくいサイトになってしまいます。難しく考える前に、多くとも4種類にとどめるよう心がけるだけでも、まとまりのあるバランスのよいサイトを作成できます。

また、webサイトの利便性を考えるうえで近年、アクセシビリティにも注目が集まっています。アクセシビリティは、高齢者や身体に障害のある方でも多くの人が同じようにwebサイトを閲覧できるかどうかを指します。

国際標準のガイドラインとして、webの世界標準を目指す国際的団体が作成しているWCAG（ウェブコンテンツ・アクセシビリティ・ガイドライン）によると「テキスト及び画像化された文字の視覚的な表現には、4：5：1のコントラスト比がなければならない」とされています。こういった点にも考慮して制作することが望ましいです。

■まとめ

いかがでしたか。今回は、webサイトの配色のコツについてご説明しました。色の持つそれぞれのイメージや心理的効果を理解し、ベースカラー、メインカラー、アクセントカラーを意識することで、ユーザーにとって見やすく、目にとまりやすいサイトが作成可能です。

さまざまなサイトを参考に見てみるのも良いと思います。本記事が配色を決める際の手助けとなれば嬉しいです。

最後までご覧いただき、ありがとうございました。