Webサイトデザインの為の「配色」の基本

Webサイトデザインの為の「配色」の基本
色はデザインにおいて重要な役割をもち、色の組み合わせひとつで注意を引いたり、
雰囲気を作ったりするだけなく、感情にさえ影響を与えると言われています。
しかし、いざ配色を決めるとなるとなかなか難しく、悩んでしまいますよね?
今回はそんなWebサイト制作のお悩みを解決する為のお話です。
まずWebサイトの配色を決めるためには、それぞれの色の特徴・効果とあわせて
効果的な配色パターンを知っておくことが大切です。
使う色と言っても色には計り知れない色数があり悩んでしまうのは当然です。
ですが、Webサイト制作で使う色は多くても3色なんです!
つまり使う色に制限をかけてしまうと言う事なんです。

70:25:5の法則

「70:25:5の法則」とは配色のバランスを取る為の法則です。

70%➡ベースカラー
25%➡メインカラー
5%➡アクセントカラー

デザインする際に、この面積比になるよう調整することにより、美しい配色に仕上がり、
バランスのとれたデザインになります。
それでは、メインカラー・サブカラー・アクセントカラーと呼ばれる、
各要素の役割についてご紹介していきます。この3つの要素を正しくい解することが、
配色を極める第一歩となります。

※色の種類が多すぎると雑多でまとまりのない印象を与え、サイト全体が安っぽいイメージになり
また、強調したいポイントやクリックできる箇所も分かりにくくなり、
ユーザビリティが低下する可能性もあります。

ベースカラーとは?

ベースカラーは、配色する際に最も大きな面積を占める色です。
70%の面積を占める色で、名前の通り全体のイメージの基盤になる色となります。
「背景」や「余白」などに用いる色で、訪れるユーザーにどういう印象を与えたいかで選定します。
主にメインカラー・アクセントカラーの妨げにならないように、白や黒、灰色などの無彩色を
利用する場合が多いです。
それは「文字の読みやすさ」の可読性を高めるためであり、
そのため明度が低いと無彩色を利用することが多いのです。
ベースカラーは、デザインイメージ自体に大きく関わる色なので、
色を決める際には1番始めにベースカラーを決定します。
色を決める基準は、デザインする対象のターゲットのイメージに合わせた色を選定する必要があるので、
色の印象を把握して決めましょう。

メインカラーとは?

メインカラーは比率では「1/4」の25%を占める色です。
ベースカラーの次に面積が大きく、ベースカラーで選んで
色を補う役割を持ちます。
ベースカラーに似せた色を使えばまとまりのあるある印象をつくることができ、
異なる色を使うとサイトに動きをつくることができます。
ベースが白ならグレーを選べば、まとまった印象、
強い色を持って来れば動きがでます。

アクセントカラーとは?

名前の通りデザインの”アクセント”となる色のことです。
比率としては全体の5%を占め、ベースカラー、メインカラーとは色相や彩度が異なった色
(ベースとは正反対の色合い)を選択することが多く、複数の色を設定しても問題はありませんが、
全体のデザインを引き締めるため、最初は1色を設定してみましょう。
ベースカラーやメインカラーと比べて色合いが強かったとしても、
使う面積自体が少ないのでしっかり調和してくれます。使う面積が最小ながらも一番目に付く色なので、
注目させたいコンテンツ(ボタンなど)に利用していきましょう。

ざっとここまで説明したのがテーマ付のお話でした
これを踏まえて次は「発色方法」のお話です!

えっこれで終わりじゃないの?と思った方も多いと思いますが、
重要なのはここからです!

なぜならWebサイトのデザインはディスプレイ内で行う為、
画面の明るさなどで変化するからなんです!

発色方法 

加法混色

黒を下地とし、色を重ねるごとに白に近づきながら色を作り出していく発色方法
スマートフォンやPCのスクリーンにおける発色はこれにあたります。
R(赤)、G(緑)、B(青)の配分を変えていくことで、様々な種類の色を生み出します。
加法混色は、光による混色とも言えます。そのため、光を出力する装置が必要になり、
個々のディスプレイ設定の影響もうけますし、モバイルなどでは、環境光の影響も強く受けます。つまり加法混色は、状況によって見え方が変わりやすい混色方法であるとも言えます。

減法混色

 白を下地とし、色を混ぜることで黒に近づけながら色を作り出していく発色方法。
 絵具やインクを使った発色はこれにあたります。
 通常の印刷機の場合、C(シアン)、M(マゼンダ)、Y(イエロー)、K(ブラック)
のインクを混ぜ合わせることで、様々な色を表現しています。
 理論上はCMYだけですべての色が表現できるのですが、黒以外の色を混ぜて黒を作ることが難しいため、黒専用のインク(K)が使われ 減法混色は、インクと下地で決まるとも言えます。
加法混色に比べると、人による見え方の違いが起きにくい混色とも言えます
ただし、インクや素材(材質や紙質など)によって見え方が変わることもあり
印刷機器のメーカーによっても微妙に色味が変わることがあります。
完全に統一したい場合には、インク、素材、印刷機器をすべて統一して出力する必要があります。

加法混色から減法混色へ

加法混色と減法混色の違いを身近に感じるのは、PCで作成した文書を
プリンタで印刷した時だと思います。PCのスクリーンは加法混色であり、
インクを混ぜ合わせる印刷は減法混色となります。
発色方法がまったく異なるため、PCのスクリーンでの色を印刷で完全に再現することはできません。

特に減法混色では繊細な色表現が難しいため、印刷前提のドキュメントを作成するときには、PCで作成している段階から、コントラストが低い微妙な色使いは避け、なるべくハッキリした配色を行う必要があります。

色の種類

色の分類にはいくつかのバリエーションがあり、ここでは代表的なものをご紹介します 。

有彩色と無彩色

青、赤、黄などの色味を持ったすべての色を有彩色と呼び、
白と黒およびそのグラデーション上に位置する灰色などの色味を
持たない色を無彩色と呼びます。 

有彩色は色の選択と組み合わせで豊かな表現が可能になる一方、
組み合わせ方によって色の効果を打ち消すこともあります。

無彩色は無機質で固い印象になりがちですが、色味がないため、
どんな有彩色と組み合わせても馴染む特性があります。

暖色 寒色 中性色

赤や黄など、暖かみを感じさせる有彩色を暖色と呼び、
青や紫など、冷たさを感じさせる有彩色を寒色と呼びます。
活発さや暖かみの表現に暖色は適しており、飲食店のロゴなどに多く使われ
落ち着きや知的さの表現には寒色が使われやすく、金融機関や公共機関、IT、
BtoB企業などは寒色をCIにすることが多いです。 
暖色と寒色の中間に位置する緑や赤紫は中性色と呼ばれることもあります。

純色 清色 濁色

鮮やかさが強い色群は純色と呼ばれこともあります。
もっとも鮮やかな色相(ヴィヴィッドトーン)がこれにあたります。
 純色に白もしくは黒を混ぜたものが清色、
白と黒の中間色である灰色を混ぜたものが濁色と呼ばれます。
 清色は色に淀みが少なく、白方向に行く(明清色)とパステル調、
黒方向に行く(暗清色)とダーク系の色になります。
一方でその中間色が濁色となります。名前の通りに受け取ると濁った色ということになりますが、
濁色を上手に使うことで微妙で繊細な色彩表現が可能になります。

トーン(色調)とは?

色には3つの属性があり
色相(色味)、明度(明るさ)、彩度(鮮やかさ)と呼ばれるもの
明度と彩度が似ている色を集めてグループ化したものをトーンと呼びます。
大抵の人は専門的なデザイン教育を受けていないので、これをほとんど意識していません。
トーンに対する意識の有無が、デザイナーと非デザイナーにおける
色の認識違いを生む要因になりやすいんです。

例えばデザイナーが作ったグレイッシュ系の配色に対して、
発注者がビビッドな赤を入れるように指示してしまうことは、
トーンの理解が双方にあれば回避は可能ですが
(もちろんトーンを理解したうえで意図的にそうする、というのであれば問題はありません) 

つまり、トーンの基礎知識を知ればデザイナーにおいての色彩感覚が
研ぎ澄まされて大きな武器になると言う事なんです。

以下では代表的なトーンについて、詳しく紹介します。

ビビット

彩度が最も高い色相群で「純色」と呼ばれる色相の事です。
ショッキングピンクやエメラルドグリーンなどの印象の強い色(蛍光色)

色に淀みがなく、色の効果を最大限引き出し、鮮やかで活き活きとした印象を与えることができ

目に付きやすいため、ロゴマークなどによく使われます。
色を強く打ち出すことができる半面、繊細な表現には不向きで
無計画に色を組み合わせると安っぽい印象になります。

トーンのイメージ
あっさりした 女性的 淡い

ブライト 

ビビットよりやや明度が高く、彩度を落とした色相群です。
明るく健康的なイメージから、スポーツウェアなどによく採用されており
カジュアルでポップな印象です。
女性や子供をターゲットにした商材のパッケージデザインなどにもよく使われ
ファッションではマカロンカラーと言われる色もこの一群に属します。

トーンのイメージ
明るい 健康的 陽気

ストロング

ビビッドよりも彩度をやや落とした色相群です。
ビビッドとほぼ同じ派手で力強い色の印象を与えますが、
彩度が少し落ちることでより自然で馴染みやすい色調となるのが特徴です。 
スクリーンの設定や印刷の仕上がりによっては、ビビッドとほとんど差がなくなることも多いです。

トーンのイメージ 
強い くどい 動的 情熱的

ディープ

ビビットに対して彩度と明度をやや落とした色相群です。
少し黒が混ざることで、クラシックで上品な印象を与えます。
色の鮮やかさや豊かさを残しながら、
落ち着いた印象も与えることができるため、
秋冬のファッションなどにもよく使われます。
また、和を演出するための配色にもよく用いられています。

トーンのイメージ
鮮やかな 派手な 活き活きした

ライト

ブライトからさらに彩度を落とし、明度を上げた色相群です。
ソフトで軽い印象があり、爽やかで清潔なイメージを与えるため、
生活用品などによく使われます。
かわいい印象もあるため、女性向け商材にもよく使われ、
逆に男性向け商材にはあまり登場しません。
パステルカラーと呼ばれるのもこの一群になります。

トーンのイメージ
浅い 子供っぽい さわやかな 

ソフト

ビビットから彩度のみを落とした色相群でライトトーン同様、
優しく穏やかな印象を与えますが、より鈍くぼんやりしてます。

※扱うのは比較的難しく、下手に使うと濁って汚れたような配色になりがちです。

上手に使えば、色味を感じさせつつ、派手すぎない上品で落ち着いた配色に仕上げることができます。

トーンのイメージ
柔らかな 穏やかな ぼんやりした

ダル

ビビッドから彩度と明度を落とした色相群でソフトトーン以上に暗く濁った印象を与えます。
やはり微妙な色のバランス感覚を必要とされるため、デザイナー以外には扱いにくい色かもしれません。
上手に使うと、大人っぽく落ち着いた、品のある配色になります。

トーンのイメージ
鈍い くすんだ 中間色的

ダーク

ビビットに黒を多く混ぜた色相群です。
ソフトトーンやダルトーンと異なって濁った印象は薄く色味を感じさせながら、
大人っぽく重圧な印象を与えます。国家や王室が開催するイベントや授賞式など
格式を求められる場でも比較的よく使われるトーンです。

トーンのイメージ
暗い シック 大人っぽい

ペール

白に近づけたような淡い色相群です。透明感があり、
優しく女性的な印象を与えることができます。
色の印象は弱く、白と組み合わせた時の視認性もよくないため、
背景色や模様などによく使われることが多くロゴのメインカラーに
使われることもあまりありません。

トーンのイメージ
薄い 軽い あっさりした 弱い 女性的 若々しい 優しい 淡い かわいい

ライトグレイッシュ

ペールトーンをやや濁らせたような色相群です。
やはり背景や模様などに使われることが多いですが、
彩度がおさえられているため、ペールトーンよりは大人っぽい印象になり
似たような彩度のトーンと組み合わせて上手い使うと、
上品な雰囲気を作り出すことができます。

トーンのイメージ
落ち着いた 渋い おとなしい

グレイッシュ

ライトグレイッシュをさらに明度を落として暗くした色相群です。
ライトグレイッシュよりも色の印象は強く
アースカラーとも言われており、ナチュラルさを売りにするような
ブランドのキーカラーとしても、しばしば採用されています。

トーンのイメージ

灰色がかった にごった 地味な

ダークグレイッシュ

明度も彩度も最大限落とした色相群です。重圧さの表現に適していますが、
それぞれの色が持つ個性はほとんどなくなっており、何色を選択しても似たよ
うな印象に仕上がります。印刷の仕上がりやスクリーンの設定によっては、黒と
ほとんど区別がつかなくなることもあります。

トーンのイメージ
かっちり 固い 男性的

最後に、色を扱う時の3つの約束

ここまで読んでいただきありがとうございます。
最後にそんな色と上手に付き合うために覚えておきたい3つの心構え的なことをお伝えしたいと思います。

1. 色はプロのデザイナーも苦戦している

デザイナーもディレクターも配色は難しいと思っています。入稿の最後の最後まで色が決まらず、
微調整を加え続けるなんてことも珍しくありません。 
もし配色で躓いたとしても、「自分には色のセンスがない」と思わないで下さい。

2. 色数はできるだけ少なく

色が難しくなるのは、たくさんの色を同時に使おうとするから当然の事です。例えば、白と黒、白と赤だけの配色を見て、バランスが悪い、まとまりがないと思うことはほとんどありませんよね。 
しかし、そこに青や黄などを足してしまうと、配色は一気に難しくなります。
裏を返せば、使う色数を制限すれば、誰でもそこまで悩まずに配色することができるということです

3. 色だけで印象を決めていない

印象によっては色から、もちろん影響を与えますが、
色だけで印象を決めているわけではないのです。
印象とは、文脈によっても変わるものなのです。
当然、その背景にある社会や文化の特性によっても変わります。 
同じ色でも日本人と欧米人で受け取り方がまったく違うということも珍しくありません。
色を使う際には、色の効果だけを単純に考えるのではなく、
その色が使われている文脈、背景、
1番大切なのは伝えたい相手のことを考えて判断する必要があります
 
いいデザインかどうかは、配色の比率と色選びが重要なキーとなってきます。
今までなんとなくの感覚で配色していた方は、デザインの目的に合わせて配色してみてくださいね
     

みやあじよのSNSアカウントをぜひフォローしてください