「WEBデザインの配色選びでいつも失敗しちゃう・・」
「配色が1番難しい！」
という方向けに、この記事ではWEBデザイナーの方が知っておくべき配色と、配色別WEBデザインの参考例を紹介します。
WEBサイトの配色は見た目の印象やユーザビリティに大きく関わる重要な要素で、WEBデザイナーのセンスが問われます。
配色が適当なサイトは、ブランドイメージを下げてしまったり、売上を落としてしまいます。
反対に配色が上手なサイトは、ブランドイメージを作ることができ、ユーザーの行動を促し売上を増やすことができます。
「配色を上手く決められない」という方は、この記事で解説する3つのカラーバランスを意識してデザインしてみてください。
記事後半ではWEBデザインの配色で注意すべきことも紹介しています。
WEBデザインで知っておくべき配色
まずはWEBデザインで知っておくべき配色を解説します。
配色選びが上手くできない方や、いつも適当に配色を選んでしまっている方は、以下の3つのカラーを覚えておきましょう。
- メインカラー
- ベースカラー
- アクセントカラー
WEBデザインでは基本的にメイン・ベース・アクセントの3つに分類してカラーを決めていきます。
配色の美しいサイトのほとんどは、この3つのカラーを明確にカテゴリーしているサイトです。
メインカラーはサイトの印象を決めるメインの色のことで、サイト全体の25%ほどをメインカラーで構成するようにします。
色によってサイトの印象は大きく変わるので、記事中盤の配色別WEBデザイン参考例を確認してください。
次に、ベースカラーはサイト全体の70%を占める基本色で、余白や背景などに使用します。ベースカラーはメインカラーとアクセントカラーを引き立てる目的で決めるようにします。
また、ベースカラーによってサイトの見やすさや使いやすさが大きく変わってくるので、慎重に決定しましょう。
最後に、アクセントカラーはユーザーの注目を集めて、最も目立つ色を使用します。
コンバージョンボタンなどに使用するので、サイト全体の5%ほどを目安に配色してください。
このように目的の違う3つのカラーを、メイン25%・ベース70%・アクセント5%の割合で配色することで、美しい見た目かつユーザビリティの高いサイト作ることができます。
メインカラーの決め方
3つのカラーを決める時は、サイトのイメージを決定するメインカラーを最初に決めます。
メインカラーの色によってユーザーに与える印象は大きく変わるので、ブランドや業種、ターゲットユーザーなどに合わせて慎重に検討してください。
一般的には企業ロゴの色やブランドカラーを元にして、サイトのメインカラーを決めることが多く、サイトを見やすくするために明度を下げた色を使用しています。
ベースカラーの決め方
メインカラーが決まったら、次にサイト全体の70%を占めるベースカラーを考えていきます。
ベースカラーは余白やサイト背景色に使用するので、白や黒・グレーなど、メインカラーやアクセントカラーより目立たないシンプルな色を選びます。
特に理由がない場合は、明度の高い白や淡い色を使用することが一般的で、サイトで使用する写真や動画に注目を集めたい場合は、あえて黒を使用する場合もあります。
最近ではスマートフォンのダークモードが普及したことによって、暗い色で目に優しい配色を選ぶサイトが増えてきています。
アクセントカラーの決め方
アクセントカラーはお問い合わせボタンや商品購入ボタンなど、ユーザーの注目を集めてクリックしてもらう目的のカラーなので、最も目立つ色を選びます。
アクセントカラーの色がメインカラーよりも目立っていない場合は、商品を購入したいユーザーにとってボタンを探す手間がかかることになり、親切ではありません。
なので、アクセントカラーはメインカラーとベースカラーの配色から最も目立つ色を探して決めるようにしてください。
WEBデザインの配色別の特徴と参考例
では解説した3つのカラーを上手く活用した、配色別のWEBデザイン参考例とその特徴を解説します。
赤(暖色)
「READYFOR」
赤はユーザーにエネルギッシュ・情熱・興奮・怒り・心拍数を高める色・強いインパクトを与える特徴があり、ユーザーの行動を促しやすいです。
キャンペーンの告知やセールなどは赤で表現して、購買意欲を高めることができます。
上記のREADYFORというクラウドファンディングのサイトでは、サイトメインカラーに赤を使用して、参加者や支援者を多く集めることができています。
ロゴに赤を使用している企業も多く、非常に使いやすい色です。
青(寒色)
「ミュゼ」
青はユーザーに知的・誠実・清潔感・理性・安心感・信頼と安全の色という印象を与える特徴があります。
青には清潔感や夏の涼しさを表現できる効果があるので、脱毛サービスを提供しているミュゼは、サイトのメインカラーに青を使用しています。
サイト全体が涼しく爽快感のある印象で、夏に向けて脱毛する意欲を増進させます。
オレンジ(暖色)
「クックパッド」
オレンジはユーザーに親しみ・活発・活動・楽しい・元気という印象を与える特徴があり、ネガティブなイメージを与えづらい特徴もあります。
レシピサイトとして人気のクックパッドは、親しみを感じやすい配色で、部分的にオレンジを使用しています。
初めてクックパッドを使用する方でも安心して楽しむことができるイメージを抱くことができます。
食欲を高める効果もあるので、食品の宣伝に優れています。
黄色(暖色)
「明光義塾」
黄色はユーザーに楽観的・明るい・若々しさ・陽気・希望という印象を与える特徴があります。学習塾の明光義塾はロゴやアクセントカラーに黄色を使用しています。
集中力をアップさせる効果もあるので、学習に関連したサイトで多く使用されています。
明度の高い色なので、ベースカラーやアクセントカラーとして使用する場合は、視認性を下げないような工夫が必要なので覚えておきましょう。
緑(中性色)
緑はユーザーにリラックス・安らぎ・穏やか・健康という印象を与える特徴があります。
SEOツールを提供するSEARCH WRITEでは緑をベースカラーにして、落ち着きのあるデザインになっています。
ユーザーの警戒心を解いたり、安心安全のイメージを感じられるので、何かサービスを提供したい場合に購入ハードルを下げることができるでしょう。
紫(中性色)
「MY FEEL」
紫はユーザーに神秘的・高貴・不安・癒し・宇宙・優雅という印象を与える特徴があり、女性がターゲットの化粧品やダイエット関連のサイト、高級感や上品さのあるサイトに使用されています。
紫をアクセントカラーに使用しているサイトは少ないですが、メインカラーやベースカラーに使用しているサイトは多いです。
大人の女性らしさを表現したい場合は、MY FEELのサイトのようにベースカラーとして思い切って紫を使用しても良いでしょう。
グレー(無彩色)
「ZUTTO」
グレーはユーザーに信頼・上品・安定・迷い・穏やか・落ち着きという印象を与える特徴があり、ベースカラーやメインカラーとして良く使用されています。
他の色との相性が良いので、どんなメインカラーやアクセントカラーでも馴染むことができます。
白を使用しているサイトは、総合通販サイトやニュースサイトなど、余計な情報を与えずに、商品やニュースをシンプルに見てもらいたい場合に使われています。
黒(無彩色)
「NETFLIX」
黒はユーザーに神秘・高級・威厳・極限・自信という印象を与える特徴があり、ベースカラーとして使用した場合は、写真や動画、商品などの注目を集めることができ、サイト全体を引き締めて高級感を作り出すことが可能です。
メイン・ベース・アクセントの全てで使用されています。
黒をベースカラーに使用している有名なサイトとしては動画配信サービスのNETFLIXです。
黒を背景にすることで、まるで映画館で見ているような印象を与えることができ、映像に集中させることができています。
NETFLIXを始めとして、動画配信サービスは黒背景を使用していることが多いです。
WEBデザインの配色で注意すること
最後にWEBデザインの配色で注意することを解説します。
初心者の方は、配色選びを間違ってデザインすることが多く、ユーザビリティを下げてしまっています。
良いWEBデザインはユーザビリティが高く、行動を促すことのできるデザインです。
どれだけカッコいいデザインやおしゃれなデザインだとしても、ユーザーが見やすく使いやすいデザインでなければ意味がありません。
見た目のおしゃれなデザインを作ろうとして、初心者の方がする失敗として多いのは以下の通りです。
- 文字色に青を使う
- 薄すぎる色を使う
- 色の差異が明確ではない
- オレンジや黄色の背景に白文字を使う
- 配色で全てを表現しようとする
この失敗をしないように注意して配色選びを行ないましょう。
文字色に青を使わない
初心者の方の失敗として多いのが、文字色を青にしてしまうことです。
なぜ文字色に青を使用してはいけないのかというと、ほとんどのサイトでリンクテキストのカラーには青が使用されていたので、ユーザーがリンクと勘違いしてクリックしてしまうからです。
文字色に青を使用して、リンクテキストにも青を使用している場合は、ユーザーを困惑させてしまい、本来クリックしてもらいたいリンクもクリックされなくなってしまいます。
なので、テキストを強調したい場合は、太字にしたり青以外の色を使用するようにしてください。
薄すぎる色は使わない
ベースカラーやメインカラーに薄すぎる色は使わないようにしましょう。
グレーなど明度の低い色を活用すれば、ユーザーの資格的な負担を下げることができ、アクセントカラーを強調させることができるので有効的です。
しかし、ユーザーが使用するデバイス環境によっては、薄い色の識別が難しく、背景色と同じ色で表示されてしまったり、要素ごとの色の差異が分からなくなり、かえって見づらくなってしまいます。
薄い色が全て同じ色で表示されてしまうと、ユーザーに正しい情報が伝わらずに、間違って操作してしまったり、離脱されてしまう原因になります。
そうならないように、デザインが完成したら自分のパソコンだけでなく、他のパソコンやディスプレイで表示を確認して、使用したイメージ通りの色が正しく表示されているかをチェックするようにしてください。
色の差異を明確にする
ラジオボタンや選択タブ、カーソルポインターの設定では色の差異を明確にして、ユーザーにとって今どんな状態なのか分かりやすいようにしておきましょう。
上記の要素の色の差異が明確でない場合は、ボタンは今オンなのか、オフなのか分かりづらいですし、間違って選択した状態で商品を購入してしまうなどトラブルの原因にもなります。
なので選択する必要がある要素の色は、誰が見ても違いが分かるようにしておきましょう。
オレンジや黄色の背景に白文字を使わない
オレンジや黄色をベースカラーに使用している場合に、白文字を使わないようにしましょう。
オレンジや黄色など明度の高い色の上に、同じく明度の高い白文字を使うと視認性が非常に悪くなり、目がチカチカしてしまいます。
なのでベースカラーにオレンジや黄色などの明度の高い色を使用している場合は、文字色を明度の低い黒やグレーを使うようにしましょう。
もしくはメインカラーのボックスなどを使用した上に文字を配置すると良いでしょう。
アクセントカラーにオレンジや黄色を使用した場合も、コンバージョンボタンで同様の問題が生じるので注意してください。
配色で全てを表現しようとしない
最後に配色を決める上で忘れてはならない注意点が、配色で全てを表現しようとしないことです。
例えば、解説した通り、青を使用すれば清潔感があったり、赤を使用すれば情熱的なイメージを与える特徴がありますが、その特徴は心理学的に傾向があるというだけで、全てのユーザーに同じ印象を与えられる訳ではありません。
また、青の清潔感の裏には冷徹な印象もあり、赤の情熱的な裏には暑苦しいような印象もあるので注意が必要です。
人によってはネガティブな印象を感じることも可能性としては十分考えられるからです。
配色でユーザーに印象を与えられることは間違いありませんが、あくまでも配色はデザインのひとつの要素として考えて、全てを表現しようとすることのないようにしましょう。
まとめ
今回はWEBデザイナー必見の配色選びのポイントや、配色別のWEBデザイン参考例を紹介し、配色を決める上で注意すべきことを解説しました。
WEBデザインの配色が悪ければユーザビリティを下げてしまい、結果としてサイトの売上も下げてしまうことになるので、この記事で解説した内容を意識して、配色を上手に選んでみてください。
配色も学べる週末WEBデザイナーコースを行っております。
無料のLINE講座を期間限定でしているので、ご登録くださいね。
