WEB制作に欠かせない、ユーザーフレンドリーな配色の基本とは！2020/12/10

WEBデザインの配色は、サイトの基調となる色の組み合わせです。
WEB制作では、デザインコンセプトに合った、ユーザーフレンドリーな配色が重要！

会社やブランドのカラーや、他の参考サイトの配色など、デザインのコンセプトやワイヤーフレームを制作するときから、色彩は大切な要素です。
そこで、WEB配色の基本や注意点について解説します。

Webデザインに配色は重要？

WEBサイトは多くのページから構成されます。
サイト全体で統一感があるデザインと色彩にすることが大切です。

WEBデザインの色彩には、次のような役割があります。

• コーポレートカラー、ブランドイメージ


• 会社や商品、サービスの雰囲気、消費者の気分


• 視認性、可読性、識別性

配色を考えるための基礎知識

色の3属性として、色相、彩度、明度があります。

色相・彩度・明度

色相とは、赤、黄、青、緑のように、光の波長の違いによる、基本的な色の違いです。

彩度とは、色の鮮やかさのことで、黒やグレーが混ざり、くすんだ色になるほど彩度が低くなります。
もっとも彩度の高い色が、純色です。

明度は、色の明るさのことで、白に近くなるほど明度が高く、黒に近くなるほど明度が低くなります。

基本となる配色は3つのカラー

WEBサイトで使う色彩には、大きく分けて、ベースカラー、メインカラー、アクセントカラーがあります。

とはいっても、何色も使用しているが、全体的に青っぽい背景といったものも含みます。
グラデーションや、背景写真などの場合もあるでしょう。

ベースカラー（基調色）

ベースカラーは、ブラウザに表示されるページ全体の基調となる色彩です。
コンテンツの背景や、コンテンツの外側の余白など、大きい面積に使われる基本色です。

全体の70％前後の面積で使用されますが、デザインやレイアウトにもよるため、次のメインカラーとの合計で90％と考えればいいでしょう。

白やグレー、ベージュなどの目立たない色や、清潔感のある色彩が使用されることが多く、主張しすぎず、コンテンツを引き立てるカラーです。

パステルカラーなども使用されることがあります。

先進的なイメージ、躍動感や、力強さ、芸術性などを打ち出すため、黒、その他の濃い色彩をあえて使うこともあります。

メインカラー（補完色）

ロゴ、見出しやその周辺、ナビゲーションまわりなど、メインカラーはWEBサイトのコンテンツ部分を印象づける色彩です。

一般に25％前後の面積で使用されますが、デザインやレイアウトによります。

アクセントカラー（強調色）

注意を引くためのボタンや、注意書きまわり、その他のポイントとなる部分などに使用される色がアクセントカラーです。ポイントカラーともいいます。

多すぎて主張しすぎないように、全体の10％以内の使用にとどめておくのが普通です。
デザインにメリハリをつけ、目立たせるカラーです。

WEBデザインの配色のポイント

WEBデザインでの配色には、ポイントや注意点があります。

WEBカラーと色見本

古いブラウザでは、色彩を正確に表示できるセーフカラーといわれる216色がありました。
最新のブラウザではそこまでの制限はないものの、WEBカラーの見本帳にあるような、代表的な色彩を使いましょう。

色彩は、htmlやスタイルシートでは、「#数字６ケタのコード」で特定されます。

画像処理ソフトやインターネットでも、WEBカラー見本帳や、配色ツールがあります。
色相と明度をもとに、各色を円状に配置した色相環なども参考になります。

配色ツールや、参考になるWEBサイトを参照して、配色を決めていくのがおすすめです。

ブランドカラー

会社ロゴ、商品やサービスのロゴには、ブランドのコンセプトに基づく指定色が決められています。
商品自体の基調色、シンボルカラーなどが使われることもあります。

ブランドカラー、コーポレートカラーの使用には決まりがあるのが普通。

WEBサイトは、ブランディングをインターネットで行うものでもあるため、制作会社にも伝え、素材や使用規定などを共有することが必要です。

色彩ごとのトーン・印象

色彩には、それぞれのトーン、気分、印象があります。

	トーン、印象	備考
白	清潔感、余白、無色、無垢	テキスト背景色などに多い
グレー	落ち着き、控えめ、穏やか、信頼、上品	テキスト色や背景では視認性に注意
黒	高級、威厳、フォーマル、強さ、夜	高級品・アパレル・芸術などでの使用が多い
青	信頼、安全、安心、知的、誠実、理性、清潔感	ビジネスでの使用が多い ・テキストリンクで使用される
緑	明るい、快活、希望、陽気、若さ	クリニック・美容・介護などでの使用が多い
黄	明るい、快活、希望、陽気、若さ	「黄と黒」で注意の意味（例：工事中）
赤	情熱、エネルギッシュ、インパクト、興奮、怒り	高級品・アパレル・投資・エンタメ・LPなどでの使用が多い
オレンジ	元気、楽しい、快活、活発	子供向け・エンタメ・レストラン・スポーツなどでの使用が多い
茶	落ち着き、安定、フォーマル	高級品・アパレルなどでの使用が多い
紫	高貴、優雅、神秘的	訪問済テキストリンクに使用されることも

ユーザビリティ上の注意点

視認性、可読性、識別性に配慮し、注意することが必要です。

• 色は使いすぎないこと


• ユーザーを惑わせないこと


• リンクカラーは基本的には青を基調とすること,/li>
  
• 文字の見やすさに配慮すること


• 必要なボタンや注意書きなどは目立たせること




まとめ・配色を生かしたWEB制作



注意点でも説明したように、配色を誤ると、視認性、操作性などのユーザビリティを損なうこともあります。
バナーやボタンなどの色彩を変えてA/Bテストをすると、クリック率やコンバージョン率に差が出ることも！

ユニソンプラネット（大阪）では、お客様のイメージをヒアリングし、配色に配慮したWEB制作、デザインを行っています。

優れたデザインの配色は、ブランドイメージをアピールでき、会社や商品、サービスの雰囲気や気分を、ユーザーに伝えるでしょう。