Webデザインの基礎知識 -3- 色の決め方(1)
Webサイトを制作する際に欠かせない要素の一つに「配色」があります。
人は目から入る視覚情報のうちの 80%以上を色から得ていると言われており、色から受ける影響は非常に大きいです。Webサイトにおいても、配色一つで企業や商品のイメージが大きく左右されます。とはいえ、デザインをするうえで「どんな色を選んでいいかわからない…」「色のバランスを取るのが難しい…」と感じている方もいらっしゃるのではないでしょうか？
今回は、目指しているイメージをしっかりと伝えるための配色のコツや、色を決める上での注意点をご紹介いたします。
1.色の比率を決める
Webサイトに使用される色は主に以下の3つの役割を持っています。
ベースカラー
ベースカラーはサイトの背景となる色です。文字の視認性やメインカラー・アクセントカラーとの組み合わせを考慮するため、無彩色である白、黒、グレーが用いられることが多いです。
また、サイトの中で一番大きな割合を占めるベースカラーはそのサイトの印象を大きく左右するため、伝えたいイメージに合わせた色を選ぶことも大切です。
例えば、病院などのサイトは清潔感や安心感を与えるために白をベースに使用していたり、高級自動車メーカーなどのサイトはラグジュアリーさを演出するために黒をベースを使用しています。
ベースカラーは視認性は担保しつつ、伝えたいイメージに合わせた色を選びましょう。
メインカラー
メインカラーはサイトのイメージカラーとなる主役の色です。
サイト全体のトンマナを決めるための重要な色なので、慎重に決めましょう。
また、このメインカラーでは、企業や商品のイメージにあった色を選びましょう。
企業のイメージと大きく異なる配色にしてしまうと、ユーザーを混乱させてしまうので注意が必要です。
アクセントカラー
アクセントカラーは特に目立たせたい箇所に使用する色です。
お問い合わせボタンや購入ボタンといった、ユーザーに特に注目して欲しい箇所に使用することが多いです。
アクセントカラーにはメインカラーの反対色などを使用すると、より引き立ち、サイト全体のメリハリをつけることができます。
そしてこれら3つの色をバランスよく配色するための理想の比率はベースカラー 70%、メインカラー 25%、アクセントカラー 5%と言われています。まずはこの比率を意識し、まとまりのある配色を目指しましょう。
2.色数は極力絞る
色を多く使いすぎてしまうと情報量が多くなり、ごちゃごちゃとしたまとまりのない印象を与えてしまいます。
また、色数が多いとデザインをする際にもレイアウトのバランスを取るのが難しくなります。
ですので、先ほどお伝えした「ベースカラー」「メインカラー」「アクセントカラー」の枠組みに合わせて3〜4色に抑えてデザインしましょう。そうすることで統一感のあるデザインになります。
3.視認性に配慮する
Webサイトでは情報をしっかりと伝えるために、視認性に配慮した色を選定することが大切です。
例えば背景を白にした場合、明度の高い黄色などは視認性が低くなってしまいます。
見づらく読みにくいサイトはユーザーにストレスを与え、サイトの離脱にも繋がります。
そうならないためにも、文字と背景色にはしっかりとコントラストをつけて視認性を高めましょう。
4.色の彩度と明度を統一させる
同じ色でも彩度と明度が変わると全く印象が変わります。
色数を抑えても、色のトーンが違えばまとまりのないデザインになってしまいます。
まとまりのある見やすいサイトにするために、使用する色はそれぞれの同じトーンで統一させましょう。
どのようなトーンにするかは、企業や商品イメージに合わせて決めると良いでしょう。
今回のまとめ
今回はWebデザインの配色についてご紹介しました。
デザインにおける「色」は単なるデザインとしての役割だけではなく、情報を正確に伝えるための機能としての役割もあります。本記事でお伝えしたことに気をつけて、何を伝えたいのか、どんなイメージを与えたいのかを意識しながら配色しましょう。また、下記の記事でもデザインにおける色の役割をご紹介しているので、ぜひ配色の参考にしてみてください。