デザイナーじゃなくても知っておきたい色と配色の基本

731,614View
枌谷力のプロフィール画像
代表/マーケター/デザイナー/ブロガー枌谷力

色は私たちの身近に存在する視覚要素であり、日々の生活や行動に多大な影響を与えています。しかし、美術やデザインの専門教育を受けない限り、これほど身近な色を体系的に学ぶ機会はほとんどありません。

近年、ビジネスの現場でもデザインの重要性がよく語られます。ビジネスレイヤーで語られるデザインは課題解決を意味する広義のデザインであることも多いですが、その概念がプロダクトに落ちる段階では、ビジュアルデザインのような狭義のデザインも考えていかなくてはなりません。自分自身がデザイナーではなくとも、デザインを評価・判断すべき立場になることも、当然あるでしょう。

デザイナーでなくても、仕事の中で色を扱うシーンは他にもあります。PowerPoint等を使ってビジネス文書を作成をするとき、誰もが色を用いるでしょう。色の知識があれば、より効果的なドキュメント作成が可能になります。

このように考えると、色はデザイナーだけの専門知識ではなく、すべてのビジネスパーソンがある一定は知っておくべき基礎知識といえるのではないでしょうか。

この記事では、デザイナーではないビジネスパーソンが読むことを想定し、最低限知っておくといい色と配色の基本をまとめました。基本なので、細かいことは端折って簡単にまとめています。しかしながら、駆け出しのデザイナーなら十分参考にできる、骨太な内容であるとも思います。

すべてをいきなりすべてをマスターする必要はありません。理解できる部分から使う考えでまったく問題ありません。この記事をブックマークし、必要になったら読む、ということを繰り返していけば、1~2年もすれば、デザイナー並みの基本的な色の知識が身に付いていることでしょう。

発色方法

色と配色の具体的な知識に入る前に、まず、色がどうやって生まれているかを説明しましょう。発色方法には、加法混色と減法混色という二つの方法があり、それぞれで基本カラー、色を混ぜたときの作用が異なります。これを理解しておくと、画面に映す時と印刷した時の色の違いを、理解できるようになるでしょう。

加法混色

黒を下地とし、色を重ねるごとに白に近づきながら色を作り出していく発色方法です。スマートフォンやPCのスクリーンにおける発色はこれにあたります。R(赤)、G(緑)、B(青)の配分を変えていくことで、様々な種類の色を生み出します。

加法混色は、光による混色とも言えます。そのため、光を出力する装置が必要になります。このことは、装置の性能やメーカーによって発色が異なることを意味します。また、個々人のディスプレイ設定の影響もうけますし、環境光の影響も強く受けます。つまり加法混色は、状況によって見え方が変わりやすい混色方法であると言えます。

Webサイトなどではしばしば、意思決定者や担当者のディスプレイに合わせた微妙な色味調整の指示が飛ぶことがありますが、これにはほとんど意味がありません。加法混色によってデザインされるものは、環境による色の差異をある程度許容する必要があります。

減法混色

白を下地とし、色を混ぜることで黒に近づきながら色を作り出し発色する方法です。絵具やインクを使った発色はこれにあたります。通常の印刷機の場合、C(シアン)、M(マゼンダ)、Y(イエロー)、K(ブラック)のインクを混ぜ合わせることで、様々な色を表現しています。なお、理論上はCMYだけですべての色が表現できるはずですが、黒以外の色を混ぜて黒を作ることが難しいため、黒専用のインク(K)が使われます。

減法混色は、インクと下地で決まる混色とも言えます。加法混色に比べると、色覚障害を持っていない限りは、人によって見え方の違いが比較的起きにくい混色とも言えます。ただし、インクや素材(材質や紙質など)によって見え方が変わることもあります。また、印刷機器のメーカーによっても微妙に色味が変わることがあります。完全に統一したい場合には、インク、素材、印刷機器をすべて統一して出力する必要があります。

加法混色から減法混色へ

仕事の中で加法混色と減法混色の違いを身近に感じるのは、PCで作成した文書をプリンタで印刷した時でしょう。PCのスクリーンは加法混色であり、インクを混ぜ合わせる印刷は減法混色となります。発色方法がまったく異なるため、PCのスクリーンでの色を印刷で完全に再現することはできません。特に減法混色では繊細な色表現が難しいため、印刷前提のドキュメントを作成するときには、PCで作成している段階から、コントラストが低い微妙な色使いは避け、なるべくハッキリした配色を行う必要があります。

色の種類

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

有彩色と無彩色

青や赤、黄などの色味を持ったすべての色を有彩色と呼び、白と黒およびそのグラデーション上に位置する灰色などの色味を持たない色を無彩色と呼びます。有彩色は色の選択と組み合わせで豊かな表現が可能になる一方、組み合わせによって色の効果を打ち消すこともあります。無彩色は無機質で固い印象になりがちですが、色味がないため、どんな有彩色と組み合わせても馴染む特性があります。

暖色と寒色、中性色

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

純色、清色、濁色

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

トーン

色には3つの属性があります。色相(色味)、明度(明るさ)、彩度(鮮やかさ)と呼ばれるものです。このうち、明度と彩度が同じ色相グループを「トーン」と呼びます。PCCS(日本色研配色体系:Practical Color Co-ordinate System)では、縦軸を明度、横軸を彩度とし、以下のように体系化されています。

トーンはデザイン教育の初期に身に付ける基本知識の一つですが、デザイン教育を受けていない人は、これをほとんど意識していません。そしてこのトーンに対する意識の有無が、デザイナーと非デザイナーにおける色の認識違いを生む一因になりやすいです。例えばデザイナーが作ったグレイッシュ系の配色に対して、発注者がビビッドな赤を入れるように指示してしまうことは、トーンの理解が双方にあればある程度回避できるでしょう。(もちろんトーンを理解したうえで意図的にそうするのであれば問題はありません)

つまり、トーンの概念を理解しているかどうかが、デザイナー的な色彩感覚を持っているかどうかの一つの指標になるのではないかと思います。以下では、代表的なトーンについて、詳しく紹介します。

ビビッド

彩度が最も高い色相群です。色に淀みがなく、色の効果を最大限引き出し、鮮やかで活き活きとした印象を与えることができます。目に付きやすいため、ロゴマークにもよく使われます。色を強く打ち出すことができる半面、繊細な表現には不向きであり、無計画に色を組み合わせると安っぽい印象になることもあります。

ブライト

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

ストロング

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

ディープ

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

ライト

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

ソフト

ビビッドから彩度のみを落とした色相群です。ライトトーン同様、優しく穏やかな印象を与えますが、より鈍くぼんやりしています。扱うのは比較的難しく、下手に使うと濁って汚れたような配色になりがちです。上手に使えば、色味を感じさせつつ、派手すぎない上品で落ち着いた配色に仕上げることができます。

ダル

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

ダーク

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

ペール

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

ライトグレイッシュ

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

グレイッシュ

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

ダークグレイッシュ

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

代表的な色

色の印象はトーンによっても左右されますが、当然、同じトーンの中でもどの色を選ぶかによっても大きく変わります。また、色にはポジティブな印象とネガティブな印象があり、使われる文脈で変わります。ここでは代表的な色をいくつかピックアップし、基本的なイメージの違いをご紹介します。

赤【Red】

RGBで三原色の一つを構成する色です。青と並び、非常に多くの企業ブランドで採用されてる人気のある色です。日本を象徴する色でもあることから、特に日本人には好印象を抱かれやすい色ともいえるでしょう。赤から受ける印象は「炎」と「血」からの連想が多くを占めます。

ポジティブなイメージ

熱く、エネルギッシュで、生命力に溢れる赤は、勝者や成功者、リーダー、ヒーロー、正義の象徴です。アメリカ大統領は重要なスピーチで赤いネクタイをし、アカデミー賞では受賞者が赤いカーペットの上を歩きます。戦隊ヒーローのリーダーの色は必ず赤です。

ネガティブなイメージ

赤は危険や警告も意味します。信号の赤は停止を意味し、緊急車両には赤いランプが搭載され、非常ベルは赤くカラーリングされ、警告文の多くで赤文字が使われます。サッカーで即退場を意味するのはレッドカードです。ホラー映画では、血を連想させる赤を大々的に用い、生命に及ぶ危険や不吉さを演出しています。

バリエーション

明度を落としたワインレッドは、高貴さや王者の象徴として世界中で使われています。彩度や明度を大きく落とした赤は一般的に茶色といわれ、大人っぽさや高級感、大地に由来するオーガニックさから、排泄物に由来するネガティブなイメージまで、幅広い印象を形成します。また青にやや近づけた赤や明度が高い赤はピンクや桃色といわれ、女性の象徴や性的な色として使われます。一般的に「赤」というとビビッドもしくはそれに近いトーンの色を指し、明度や彩度が変わると「赤」以外の呼び方がされることが多いです。

青【Blue】

RGBで三原色の一つを構成する色です。代表的な寒色であり、赤同様に企業のブランドカラーとしてはよく用いられます。落ち着いた色で鎮静効果があり、信頼や誠実さも感じさせるため、保守的な日本人が好む色といえます。その印象は、「空」「水」「地球」といったものからの連想が多くを占めます。

ポジティブなイメージ

清潔感、爽快感を想起させ、信頼や誠実さ、平和を象徴します。ビジネスマンのスーツは青系が多く、国連は青をシンボルカラーにし、信号の青は進行可能な状態を表現しています。落ち着いた印象は冷静さや知性の象徴ともなり、テクノロジー系企業やコンサルティングファームのCIカラーなどにもよく使われています。

ネガティブなイメージ

青は寒色であることから、冷たさや不安の象徴にも使われます。憂鬱な月曜日は”ブルーマンデー”と表現され、血色がない顔は青冷めているといわれます。写真に青みがかったフィルターをかけると、途端に暗く陰鬱な印象になることもあります。

バリエーション

明度を上げた青や水色、空色などといわれ、清涼感や透明感をより強調する色として使われます。明度を落とした青は紺色などともいわれ、フォーマルで礼儀正しい印象を与えます。また、明度を落としてやや紫に近づけた色は群青色やウルトラマリンなどとも呼ばれます。なお、日本の信号の青は緑に近く、青緑や青紫も含めて、非常に多くの色が「青」と表現されるのも特徴です。

緑【Green】

RGBで三原色の一つを構成する色です。暖色でも寒色でもない中間色になります。身近な色でありながら、主張が強くないために、緑をCIに採用する企業はどちらかといえば少数派です。緑から受ける印象は植物からの連想が圧倒的に多いのも特徴です。

ポジティブなイメージ

自然やエコ、環境といった、植物にちなんだイメージを受けることが多く、そこから穏やかさや安らぎといった印象に繋がります。また「若葉」という言葉から想起されるように、若さを象徴する色としても使われます。英語では信号の青は「グリーン」と表現され、安全を表現する色としても使われます。

ネガティブなイメージ

主張が強くないため、直接的にネガティブな印象を与えることは稀ですが、中途半端で平凡、魅力がない印象を与えることもあります。また、海外ではモンスターの肌や血の色に緑が採用されることも多く、醜さの象徴として使われることもあります。

バリエーション

黄に寄せた緑(黄緑)の効果は暖色に近く、明るい、ポジティブ、ポップ、幼い、といった印象を与えます。明度を落とした緑は深緑といわれ、カモフラージュカラーや、上質感の訴求に使われます。また、彩度を落として明度を上げた緑としては、うぐいす色、抹茶色、カーキ、オリーブ色などが存在します。

黄【Yellow】

赤と並ぶ代表的な暖色です。色相の中で最も明度が高い色です。白と組み合わせるとコントラストが弱くなるため、ロゴなどでは他の色との組み合わせて使われることが多いです。黒と組み合わた黄色は、警戒色としてよく用いられます。

ポジティブなイメージ

「ヒマワリ」「レモン」「とうもろこし」といった植物のイメージが強く、そこから明るさ、暖かさ、幸福、親しみやすさ、といった印象を与えます。太陽や光の色としてもよく使われ、かわいらしさ、子どもっぽさ、愛嬌の意味も持ちます。戦隊ヒーローでは黄は大抵ひょうきんものです。

ネガティブなイメージ

代表的な警戒色で、信号では注意を、サッカーでは警告を意味します。黒と組み合わせて工事現場や危険物の表示にも使われます。人が黄色と黒に警戒するのは、ハチの色から来ているともいわれています。また、幼さとともに、幼稚で軽薄な印象を与えることもあります。

バリエーション

明度を上げた薄い黄は卵色などと呼ばれ、子供っぽい印象をより強調します。彩度を落とした黄色は白や黒と組み合わせて金の代替色としても用いられます。赤にやや寄せた黄は山吹色と表現されることもあります。また、やや赤に近づけて彩度と明度を落とした黄は黄土色やラクダ色などと表現されることもあります。

紫【Purple】

色相環では赤と青の間に位置する中間色です。暖色と寒色の両面を持つゆえに、高貴さと品のなさ、神秘性と不安などの両極端な印象を内包します。企業やブランドのカラーとしては、緑や黄以上に使われない色です。

ポジティブなイメージ

日本では古くから高貴さの象徴とされ、冠位十二階では最も高い位は濃紫の絁を身に付けていました。また、女性的な色でもあり、ファッションでは優雅さの象徴とされます。その神秘的なイメージから、王や神、宇宙と結び付けられることもあります。

ネガティブなイメージ

使い方によっては上品さとは正反対のイメージを持ち、不良、水商売、自信過剰、不遜さを想起させることがあります。また紫の持つ神秘性は不安の象徴ともなり、怪しく信頼のおけないイメージや、不健康なイメージを与えることもあります。

バリエーション

赤に寄せた紫は赤紫、青に寄せた紫は青紫とも呼ばれます。明度を落とした紫は藤色と呼ばれるなど、日本の伝統カラーであることから、日本語には紫のバリエーションを表現する様々な色名が存在します。ただし一般的にほとんど使われず、赤紫や青紫も含めて、「紫」とひとくくりに表現されることが多いです。

橙【Orange】

色相環では赤と黄の中間に位置する色で、暖色です。色の効果は赤や黄に似ており、非常に人気が高い色で、赤や黄と組み合わせて使われることも多いです。いわゆるビタミンカラーの一つとしても扱われます。

ポジティブなイメージ

太陽や柑橘類の印象から、エネルギッシュ、元気、ビタミン豊富といったイメージを持ちます。食欲をそそる色であることから、飲食ブランドのロゴにもよく使われます。夏を象徴する色でもあり、楽しく賑やかな印象を与えます。また、黄や黄緑、ピンクと同じく、ポップで子供っぽい印象も与えます。

ネガティブなイメージ

企業ロゴなどにオレンジがよく使われる理由の一つには、ネガティブな印象があまりないためです。ただし使い方によっては、安っぽく大衆的、高貴さや知的さに欠ける、といった印象を与える可能性があります。

バリエーション

やや黄を加えて明度をかなり上げたオレンジは肌色と呼ばれ、明度を上げて彩度を落としたオレンジはベージュとも呼ばれます。肌色やベージュは温かみがありながら他の色との親和性も高く、背景色にもよく使われます。彩度と明度を落としていくと、赤と同じく一般には茶色と呼ばれる色になります。

黒【Black】

代表的な無彩色です。もっとも明度が低い色であり、他の有彩色と組み合わせて使うことで、その色が持つ効果を際立たせることもできます。様々なイメージ展開をする子ブランドを多く抱える親ブランドでは、特定イメージに流されない中立的な立場を示すために、黒をメインカラーにしていることも多いです。

ポジティブなイメージ

真の黒は明度も彩度も持たない唯一無二の色であり、硬質で重厚さを感じさせ、権威、気高さ、プロフェッショナリズム、伝統の象徴として扱われます。黒字という言葉のように安定や優秀さの象徴としても使われます。他になびかない強く先鋭的なイメージがあり、ラグジュアリーブランドではかなりの頻度で使われます。

ネガティブなイメージ

黒は一方で、闇や死を想起させます。多くの悪魔は黒をメインカラーとしており、喪に服すときは世界中で黒を身にまといます。暗い、寒い、古い、陰鬱、冷酷といったイメージもあり、黒を支配的に使うと、全体をネガティブな印象に覆ってしまう懸念も出てきます。

灰【Grey】

黒と白の中間に位置する無彩色です。一口にグレーといっても、濃いグレーと薄いグレーでは使われ方や印象が異なります。多少色が含まれていても、極端に彩度が低い場合には一般にはグレーと呼ばれることも多いです。また、シルバーの代替色として用いられることもあります。

ポジティブなイメージ

彩度の低い色と同じく、落ち着いた上品な印象を与えます。大人っぽさ、エレガントさを引き立てます。都市や金属から連想される、先進的でスタイリッシュな印象、鋭く知的なイメージ作りにもグレーはよく使われます。

ネガティブなイメージ

無機質で曖昧な視覚的印象から、不安や薄暗い印象を与えます。グレーゾーンという言葉のように、疑惑がある、信用できない、といった意味が込められることもあります。また、機械的で温かみがない、煤けてて廃れたような印象を与えることもあります。

白【White】

黒と対極にある、もっとも明度が高い無彩色です。プロダクトの世界では色の一種になりますが、紙やスクリーンにおいては、白=無色透明と認識され、他の色と組み合わせなければ存在しえない色になります。

ポジティブなイメージ

純粋さ、けがれのなさを表し、クリーン、公正、神聖、平和の象徴として使われます。結婚式のドレスは白と決まっており、平和を祈る場では白いハトを飛ばします。清潔なイメージを持つことから、医療現場や水回りなど、衛生的な印象を与えたい場合にも、白はよく使われます。

ネガティブなイメージ

白は無を意味し、白の多い配色は空虚さや味気なさを感じさせることがあります。特にデザインのリテラシーが低い利用者をターゲットにすると、白が多い=何もしていない、手抜き、デザインされていない、という印象を与える可能性もあります。特定の色のイメージを持たないゆえに、冷たく人間味がない印象も与えます。

配色

複数の色を組み合わせる「配色」には、いくつかのセオリーや考え方があります。配色は奥が深く、マスターするにはデザイナーでも数年かかりますが、ここまでお伝えしてきた知識の範囲で、簡単に応用できる基本的なものをいくつかご紹介します。

無彩色を使った配色

白、黒、グレーといった無彩色は特定の色を持たないため、どの有彩色と組み合わせてもうまくまとまります。特に黒・白は、合わない色はほとんどありません。色が苦手な人でも、有彩色は1色にし、あとは無彩色で構成すれば、手軽にまとまりある配色を実現できるでしょう。

グレーも比較的使いやすい色ですが、明度が近い色と組み合わせると、ボンヤリとした印象になったり、視認性が悪くなったりしがちです。グレーと組み合わせるときは、明度に差が付けるようにこころがけましょう。

隣接してると馴染んでいないように感じられる色同士でも、間に無彩色を挟むことで調和させることもできます。セパレーションと呼ばれる配色テクニックです。(セパレーションは無彩色以外でも行われます)

同系色を使った配色

無彩色との組み合わせと同様に、非デザイナーでも比較的うまくまとめることができるのが、同系色を使った配色です。同系色とは、主に以下の3パターンとなります。

  • 明度もしくは彩度だけが異なる色の組み合わせ
  • トーンは異なるが同じ色相の色の組み合わせ(トーン・オン・トーン)
  • トーンは同じで、色相上隣り合う色(隣接色)の組み合わせ

まとまりが出やすく、洗練された印象を与える半面、単調で抑揚のない配色になってしまうこともあります。それを避けるために、明度や彩度、トーンでコントラストをつけることも多いです。

色相差を使った配色

無彩色や同系色を使った配色は簡単に実践できる半面、配色に大胆さが欠けてしまいがちです。色の効果をより引き出すためには、色相差を利用した配色がおすすめです。色相を変えて配色するには、同一トーン内での配色がもっとも簡単です。隣接トーンも比較的まとまりますが、トーンが離れると、配色は難しくなる傾向にあります。ここでは主に、色相差を用いた代表的な配色パターンをご紹介します。

類似色相配色

色相環の角度で30~60度の色相差がある色を類似色相と言います。ほぼ同系色となる隣接色相と比べると、より色の変化を感じさせることができる配色です。色相環上は比較的近い色になるため、同系色と同様に、比較的扱いやすい配色ともいえます。

補色色相配色

色相環の角度でほぼ正反対にある色(補色)を組み合わせた配色です。色の差が大きいため、ダイナミックな印象、カジュアルな印象を与えることが可能になります。また、補色を少量用いることで、主となる色を強烈に引き立てることもできます。

対照色相配色

色相環の角度で120~150度の色相差がある色を対照色と言います。補色と比較的近い、ダイナミックな印象を与えることができます。補色と比べる色の距離は近く、選択肢も多いため、より多彩な印象形成が可能です。ロゴなどでは、補色よりも多く使われる配色です。

マルチカラー配色

3色以上の色を組み合わせた配色です。トーンや色相を合わせるというルールがあるわけではありませんが、同一トーン内で規則性のある色を選択すると、比較的まとまりやすい配色になります。

自然界の法則に習った配色

人の目は、見慣れた配色には調和を感じ、見慣れない配色には違和感を覚えるようにできています。特に自然界が生み出した色の組み合わせには、調和を感じる傾向があります。つまり、自然界の色の原則に従うと、調和した配色を生み出すことができるわけです。

自然界では、明るい光は黄、暗い影は青紫を帯びています。この法則にしたがい、黄に近い色の明度を上げ、青紫に近い色の明度を下げると調和した配色になります。これを「ナチュラル・ハーモニー」と呼びます。

逆に、黄に近い色を暗くし、青紫に近い色を明るくすると、自然界の法則に反するため、違和感のある配色が生まれます。これを「コンプレックス・ハーモニー」といいます。違和感があるがゆえに、個性を生み出したい際には意図的に使われる配色でもあります。

プロのデザイナーは、狙いたい効果に合わせてナチュラル・ハーモニーとコンプレックス・ハーモニーを意図的に使い分けています。しかし、非デザイナーが業務の一環として色を使う程度の目的であれば、ナチュラル・ハーモニーに従って配色するのが無難といえるでしょう。

さいごに:色を扱う時に覚えておきたい5つのこと

ここまで色と配色の基本をお伝えしてきました。デザイナーでない一般のビジネスパーソンであれば、このレベルのことを知っているだけで十分すぎるかと思いますが、最後に、そんな色と上手に付き合うために覚えておきたい5つの心構え的なことをお伝えして、本エントリーを終えたいと思います。

1. 色はプロのデザイナーもいつも悩んでいる

私がビジネスパーソン向けに時々開催している『提案書デザイン講座』などでは、皆さんから「色は難しい」という話を聞きます。しかし実は、プロのデザイナーでも色は難しいと思っています。入稿の最後の最後まで色が決まらず、微調整を加え続けることも珍しくありません。それほどまでに難しい色だからこそ、「自分には色のセンスがない」と、ことさらに苦手意識を持つ必要はありません。

2. 色数はできるだけ少ない方がいい

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

3. 色で意味を伝えようとしない

色をたくさん使おうとしてしまう人の根底には、意味の違いを色で表現しようという発想があります。しかし、色には意味を正確に伝える機能はありません。例えば、信号の青・黄・赤を見て私たちが行動を決められるのは、色に意味があるからではありません。その色に何の意味をあるのか、という情報が頭にインプットされているからです。だから、情報がまったくインプットされていないWebサイトで赤と黄と青のボタンが並んでいても、私たちはそれを見て何をすべきか判断できません。色ではなく、文字や文脈による説明があってはじめて、私たちは意味を知るのです。このような色の限界を知ったうえで、本当に必要な色だけを使うように心がけましょう。

4. 色以外にも大事なデザイン要素がある

無計画に色を使わないためには、色の他にもデザイン要素があることを知るべきです。情報の区切りをハッキリさせるために、色の帯を引く必要はありません。線でも余白でも表現できます。注意を引きたいからと言って、必ずしも赤にする必要はありません。文字を大きくする、太くする、左上に置く、アイコンを併用する、などでも目立たせることはできます。そして何よりも大事なのは文字情報です。文字がしっかりしていれば、ことさらに色付けしなくても、大事な情報は伝わります。色を活用することで様々な効果を引き出すことはできますが、情報デザインにおいて、色だけが特別なわけでもありません。色の効果を知りながらも、色以外の要素も含めて、総合的に考えるようにしましょう。

5. 人は色だけで印象を決めていない

印象形成に色はもちろん影響を与えますが、色だけが印象を決めているわけではありません。例えばオレンジは明るく賑やかで食欲をそそる色と一般に言われていますが、オレンジをブランドカラーにしている吉野家とエルメスで同じ印象は持つ人はいないでしょう。印象とは、文脈によっても変わるものなのです。当然、その背景にある社会や文化の特性によっても変わります。同じ色でも日本人と欧米人で受け取り方がまったく違う、ということも珍しくありません。色を使う場合には、色の効果だけを単純に考えるのではなく、その色が使われている文脈、背景、そして伝えたい相手のことを考えて判断する必要があります。

ウェブに関するベイジの知見を、徹底的に学んでみませんか?

ベイジの知見を余すことなく提供する『戦略的ウェブ制作集中講座』の2023年版の参加者を絶賛募集中です。

戦略的ウェブ制作集中講座

講座の商材および申し込み用はこちら

取り扱うテーマは、BtoBサイト、採用サイト、オウンドメディア、プロジェクト管理、組織づくりの5つ。ベイジの最新の知見を、余すことなくご提供します。

全14回、1回1時間とすることで、1回あたりの拘束時間は短く、受けやすくしています。

アーカイブ動画も、講座で使ったスライドも、ベイジが業務で使ってるドキュメントの雛形も、すべて提供します。

参加者限定の専用Slackチャンネルを用意し、オフラインでの懇親会も開催します。講座自体はオンライン開催ですが、皆さまと直接コミュニケーションが取れる機会を、できるだけ設けようと思います。

以下のような方には、特に自信を持ってオススメできる講座に仕上がっています。是非ご検討ください。

  • これまでのウェブ制作の考え方を大きく変えたい
  • ウェブ制作のスタイルを根本的に見直したい
  • 圧倒的な情報量で数年分のレベルアップを一気にしたい
  • 提案力をつけて、市場での競争力を高めたい
  • ビジネスに影響を与えるウェブ制作をマスターしたい
  • ウェブ制作の「実践的な最先端」を見ておきたい
  • 自社のウェブ運用をもっと洗練させたい
  • 社員教育して強いチームにしたい

こんな記事も読まれています

伝わる提案書の書き方(スライド付)~ストーリー・コピー・デザインの法則
枌谷力のプロフィール画像
枌谷力
815,248View
簡単CSSアニメーション&デザイン20選(ソースコードと解説付き)
酒井琢郎のプロフィール画像
酒井琢郎
527,701View
パワポでやりがちな9の無駄な努力
枌谷力のプロフィール画像
枌谷力
248,405View
上に戻る