これだけは知っておきたい、色の基本原則まとめました。

color-theory-top

 

海外デザインブログCanva Design School Blogで公開された「Color Theory Tips and Inspiration」より許可をもらい、日本語抄訳しています。

 

 

デジタル時代のデザイナーとして、絵の具やインクなどの顔料だけでなく、さまざまなアプローチから色の使い方を学ぶことができます。実際に、人間の目は数百万色の色合いを識別することができます。しかし、2〜3色の配色を決めるだけでも、大変な作業に感じてしまうことがあります。

 

なぜならデザインの配色を決める作業は、主観的(英: Subjective)であると同時に、とても科学的(英: Scientific)でもあります。色は雰囲気(英: Mood)や、感情(英: Emotion)、物の見方(英: Perception)に強く影響し、意識的そして無意識に注目を集めることができます。

 

デザイナーやマーケーターにとって、複雑な意味合いを持つこれらの色をつかって、魅力的かつ効果的なデザインを作成することは大変な作業です。まさにこんなときに、色の基本原則を理解しておくことが、役に立ってきます。昔ながらの色の原則を知ることで、どの色の組み合わせが良く、異なる色の組み合わせにどのような効果があるのか、判断する手助けをしてくれるでしょう。

 

 

 

詳細は以下から。

 

 

 

基本: 色を理解しよう。

カラーホイールについて

図工や芸術の授業などで、見かけたことがあるかもしれません。通常、画家やアーティストなどによって活用されるカラーホイール(英: The Color Wheel)は、12色で構成されています。それぞれの色の関係を、視覚的に理解しやすくなります。

 

color-theory-1

 

 

カラーホイールは、色を混ぜることで構成されています。原色(英: Primary Color)の赤、黄、青色を混ぜることで、等和色(英: Secondary Color)のオレンジ、みどり、むらさき色ができあがります。そしてこれらの等和色に、原色を混ぜることで、赤オレンジ、黄オレンジ、黄みどり、青緑、青むらさき、赤むらさきなどの3次色(英: Tertiary Colors)となります。

 

また原色と等和色は、「虹の色(英: Colors of the rainbow)」として知られる、可視スペクトラムの一部でもあります。赤(Red)、オレンジ(Orange)、黄色(Yellow)、みどり(Green)、青(Blue)、濃紺(Indigo)、むらさき(Violent)の順番となり、「Roy. G. Biv」と覚えるとよいでしょう。

 

 

この色の決め方は、ペンキやインクなどを混ぜるのと同じ、減算方式(英: Subtractive Model)として知られ、昔ながらのカラーホイールと、プリント印刷で利用されるCMYKカラーシステムは、この方式にあたります。反対に加算方式(英: Additive Model)は、TVやスクリーンなどに映った色など、色付きの光の組み合わせとなり、異なる原色の組み合わせ(赤(Red)、みどり(Green)、青(Blue))をつかった、RGBカラーとして知られています。

 

 

Canvaアプリでは、独自のカラーホイールを採用しており、通常6桁からなるHEXコードをつかって、自由に色を選択することができます。

 

color-theory-2

 

色に関する用語について

カラーホイールを使って、デザインの配色の決め方を学ぶまえに、色に関連するいくつかの用語を簡単に見ていきましょう。違いを知っておくことで、デザインプロジェクトをよりスムーズに進めることができるでしょう。

 

  • 色合い(英: Hue): 色(英: Color)と同義語で、特定の色の名前を指し、通常はカラーホイールに使われている12色のひとつを言います。
  • 影、シェード(英: Shade): 黒色を混ぜて、色合いを暗くした状態。
  • トーン(英: Tone): 灰色をまぜて、色合いがかすれた状態。
  • 色合い(英: Tint): 白色を混ぜて、色合いを明るくした状態。
  • 彩度(英: Saturation): 色の強度や純度を指します。
  • (英: Value): 色の明るさや暗さを指します。

 

色の組み合わせについて

それではより技術的な部分、デザインプロジェクトにとって、カラーホイールを実践的にどのように利用できるか、みていきましょう。何世紀にも渡って画家たちが、バランスの取れた、視覚的に魅力的な(ハイコントラストやびっくりさせる)構図を作成するために、カラーパレットから選択した配色を利用していることが分かります。

 

デザインアプリケーションでは、色彩の配合はドミナント・カラー(英: Dominant Color)を中心に分ける必要があります。配色全体の印象を支配する色で、主調色、支配色とも呼ばれるドミナント・カラーは、デザインでもっとも利用されている色または、他の色からもっとも目立たさせたい色を指し、アクセント補足カラーとして1色ないし2色を加えることで、配色を作成します。

 

 

  1. 単色、モノクロ(英: Monochromatic): 単色をベースに、影やトーン、色合いを調整することで配色をつくります。たとえば、青を基調とした明るい色から暗い色まで。このタイプの配色は、わずかな変化に、保守的な印象を与えます。
  2. 類似色(英: Analogous): 選択したメインカラーの両隣にある色を加えた配色。このタイプの配色は、どんなデザインプロジェクトにも適用しやすい、多彩性がポイント。
  3. 補色(英: Complementary): 選択したメインカラーの反対側にある色との組み合わせを指し、赤/みどりや、青/オレンジなど。補色カラーは、ハイコントラストが特長ですが、バランスや調和が取りにくく、適用しにくい点も。
  4. 補色を分ける(英: Split-Complementary): 選択したメインカラーの、補色の両隣の色を配したものを指します。この配色は、強いビジュアル・コントラストを描き、補色を用いた配色よりもインパクトのあるデザインを演出します。
  5. トライアングル(英: Triadic): メインカラーを支点として三角形を描いてた配色を指します。
  6. 二重補色(英: Tetradic / Double-Complementary): メインカラー2色を選択し、それぞれの補色(英: Complementary Colors)を加えた配色を指します。より印象に残る配色となりますが、デザインのバランスを整えるのも難しくなるでしょう。

color-theory-3

 

 

 

配色のインスピレーションについて

 

カラーホイールで見つけることができる配色に加えて、自然からインスピレーションを得た、調和の取れた色の配合をたのしむこともできます。旅行や食べもの、ライフスタイルなどのカテゴリ別に、合計100種類の配色パレットをまとめた「配色完全ガイド!カテゴリー別見本100個とカラーパレットの使い方まとめ」も参考にどうぞ。

 

色の組み合わせは、温度(暖色と寒色)や色の彩度(鮮やかな色合いは若々しく、トーンを落とした配色はビンテージ風に見えるなど。)、雰囲気(明るく楽しい、暗くてマジメ)、テーマ(場所、季節、休日)などさまざまな要素で決めることができます。

 

さまざまな配色を見つけるには、たくさん公開されているオンラインツールを利用してみましょう。PalettonAdobe Color CCColorExplorerなどが代表的なツールとなります。またChromeブラウザを利用しているときは、Eye Dropper拡張機能を試してみましょう。ウェブサイトから直接、色(HEXコード)を抽出することができます。

 

color-theory-4

 

 

異なる歴史的な背景や、芸術革命が起こった時期などから、配色のインスピレーションを得る方法も、良いテクニックのひとつと言えるでしょう。

 

以下のカラーパレットは、印象派アート(英: Impressionist)から影響された温かく、明るい配色や、後期印象派アート(英:Post-Impressionists)から影響された鮮やかで、予想できない配色、フランスのアール・ヌーヴォ運動(英: Art Nouveau Movement)に影響された、アース色のソフトな印象、ポップアート(英: Pop Art)に影響された明るい、力強い配色のサンプルとなります。

 

color-theory-5-1324x910

 

 

 

色彩心理学について

 

わたしたちが気付くかどうかは別として、色は日常生活において大きな役割を担っています。オレンジや黄色の交通標識を、今日見ましたか?これにも注目を惹く、きちんとした理由があります。スーパーマーケットに並んでいるシリアルの中で、他よりもほんの少し値段の高い商品を手に取ることありませんか?これもパッケージの色によって、注目を惹く工夫がされています。

 

また言葉のなかにさえも、色は反映されています。たとえば、怒ったときに「赤くなる(Seeing Red)」と言いますし、悲しいときに「ブルーな気持ち(Feeling Blue)」とも言うでしょう。色は、わたしたちのムードや雰囲気、感情と密接につながっています。

 

しかし、すべての人が同じように色を捉えるわけではありません。異なる色の意味合いやシンボル色は、文化や社会的なグループによって影響されます。では、西洋文化における、基本的な色の意味合いをみていきましょう。

色の意味合いについて

赤色(英: Red)

コンテンツによってさまざまなアイデアを適用することができる色。赤色は炎や温かさ、危険、血、緊急性、イキイキとした色、心臓やハートに関連し、ときに暴力的。

 

その他の意味

東洋文化では、赤は良い運勢を表し、繁栄を表すことから結婚式で、花嫁が着用します。世界的に、赤色は政治的な動きや、革命の象徴などを連想させます。

ブランディング

赤色は強さ(英: Strength)や信頼(英: Confidence)、力強さ(英: Power)などを表し、識別しやすい色のひとつ。

 

color-theory-6

 

 

 

オレンジ色(英: Orange)

こちらも火に関連する色で、赤色の温かさと快活な黄色の色合いを組み合わせることで、行動的(英: Activity)、精力的(英: Energy)、楽天的(英:Optimism)な印象を与えます。また、収穫時期(英: Harvest)や秋(英: Autumn)の季節を連想させます。

 

color-theory-7

 

その他の意味

インドでは、オレンジと黄色がかった色味が特長のサフランは、神聖なものと考えられています。日本では、愛の象徴として考えられています。

ブランディング

オレンジ色は、若々しさ(英: Youthfulness)や創造性(英; Creativity)を表します。色合いに応じてオレンジや黄色の種類に分別される、金色はラグジュアリー(英: Luxury)で、高品質な印象を与えます。

 

color-theory-8

 

 

 

黄色(英: Yellow)

太陽の色で、幸せ(英:Happiness)や快活(英: Cheerful)、フレンドリー(英: Friendliness)、春のフレッシュさなどを表します。またコンテンツによって、注意や警告のシグナルにもなります。みどり色がかった黄色の配色では、不健康(英: Sickly)で不愉快(英: Unpleasant)な印象にもなり得ます。歴史的にみて、黄色は病気(英: Illuness)や隔離(英: Quarantine)などを連想させることがあります。

 

その他の意味

東洋やアジア文化圏では、黄色は王位(英: Royalty)やハイランクを意味します。アフリカやラテン・アメリカでは、黄色は哀悼(英: Mourning)を表します。

ブランディング

純粋な黄色は、注目を惹くのに最適ですが、ビジュアの邪魔をしたり、読みにくい場合があるので注意が必要です。(たとえば、黄色の背景に白文字など。)

 

color-theory-9-1324x936

 

 

 

みどり色(英: Green)

自然や植物、成長などを表す色。健康(英: Halth)やフレッシュさ(英: Freshness)、自然をテーマにした雰囲気。深いみどり色は、お金などに関連する富(英: Wealth)や安定(英: Stability)を表します。

 

その他の意味

イスラム圏において、みどり色は神聖な色とされています。またアイルランドを連想させたり、聖パトリックの祝日(St. Patrick’s Day)や四つ葉のクローバーなどにも関連づけられます。

ブランディング

自然や環境にやさしく、健康にも良いオーガニックな商品やブランドイメージ。自然をテーマにするときは、緑と茶色の組み合わせをよく見かけます。

 

color-theory-10

 

 

 

青色(英: Blue)

海や空を連想させる色。青色は、平和的(英: Peaceful)で清潔(英: Clean)の品質を表現します。エネルギッシュで暖かいイメージの反対で、涼しく、落ち着いた印象。また悲しみ(英: Sadness)や憂うつ(英: Depression)も表すことも。

 

color-theory-11

 

その他の意味

アラブ、中東地方において青色は、悪魔から守る伝統的な色です。また多くの文化で、天国を連想させる青色は、不死(英: Immortality)やスピリチュアル(英: Spirituality)と考えられています。

ブランディング

もっとも幅広く利用されている色のひとつ。信頼性(英: Trustworthiness)や安全(英: Security)、安定(英: Stability)を連想させます。濃い青および紺色は、企業関連のコンテンツによく利用され、真面目さ(英: Serious)や保守的(英: Conservative)、専門性(英: Professional)を表現できます。

 

color-theory-12

 

 

 

むらさき色(英: Purple / Violet)

むらさき色は、王位(英: Royalty)や威厳(英: Majesty)、名誉(英: Honor)などを表します。また霊的(英: Spiritual)で、宗教的(英: Religious)にも関連付けられます。

 

その他の意味

世界中の多くの文化において、むらさき色は高潔さ(英: Nobility)や富(英: Wealth)を表します。しかし、タイと南アメリカの一部では、哀悼(英: Mourning)を示す色でもあります。

ブランディング

深い色合いは、ラグジュアリーで富裕(英: Opulence)な印象を与え、明るく/鮮やかな色合いは、女性的および子供らしさを表します。

 

color-theory-13

 

 

 

黒色(英: Black)

赤色と同じように、たくさんの意味合いをもつ色。力(英: Power)や高級さ(英: Luxury)、洗練(英: Sophisticate)、上流な(英: Exclusivity)イメージを演出します。その反対に、死(英: Death)や悪魔、神秘性などにも関連付けられます。また洋服において黒色は、フォーマルな正装および追悼の意を表します。

 

その他の意味

アジアやアメリカ文化において、黒色は男性的な色と考えらえています。エジプトでは、復活(英: Rebirth)を表します。多くの文化において、魔法や迷信、悪い運などを連想させるものでもあります。

ブランディング

中立的なイメージを演出できる黒色は、幅広く使われている色のひとつで、コンテンツによって意味合いが異なります。シンプルな黒白のモノクロデザインが多く、それは計画的な場合と、プリント代を節約しているだけという場合も検討できます。黒色を背景にすると、色は通常明るく見えます。

 

color-theory-14

 

 

 

白色(英: White)

ライトや雪などの色。純粋さ(英: Purity)や潔白(英: Innocence)、徳(英: Goodness)、完璧さ(英: Perfection)などを表し、ありのまま(英: Stark)で無菌(英: Sterile)にもつながります。

 

その他の意味

中国では、哀悼を意味する色です。多くの文化において、平和(英: Peace)を連想させる色でもあり、白旗は世界的に降参を表します。

ブランディング

簡単さ(英: Simplicity)や清潔さ(英: Clean)、モダンな印象を表現します。ミニマルスタイルのデザインでは、白色を利用するケースが多いようです。

 

color-theory-15

 

 

 

デザインにおける色について

 

デザインに色を追加するには、まず2〜3色の配色を決め、レイアウト上で利用される必要があります。効果的にデザインに適用された配色は、プロジェクト全体のバランスをうまく整えてくれるでしょう。より扱う色が多くなればなるほど、バランスを取るのがむずかしく、より複雑になります。

 

このコンセプトを簡単に考える方法として、選択した配色をドミナント・カラー(英: Dominant Color)とアクセント・カラー(英: Accent Colors)に分けてみましょう。ドミナント・カラーは、デザインでもっとも多く利用されている色で、アクセント・カラーが補色としてバスンスを整えます。コントラストの割合や、テキストが含まれたときの可読性、色が隣同士になったときに見た目、配色がどんな雰囲気を演出するかなど、それぞれの色がどのように作用するのか、細心の注意を払いましょう。

 

 

これまでの経験から、配色カラーパレットを「60:30:10」に分けるルールがよく知られています。このアプローチは、特にインテリアデザインで採用される方法のひとつですが、ウェブサイトやプリントデザインでも、効果的に適用することができます。ドミナント・カラーの割合を60%とし、残り2つのアクセント・カラーを30%と10%に分けます。わかりやすい例として、男性用スーツを連想してみましょう。ジャケットとパンツが、服装の60%を表し、シャツが30%、そしてポップなカラーのネクタイが10%となり、バランスが取れた、洗練された印象を演出できます。

 

配色パレットをシンプルで、バランスよく整えるもうひとつの方法として、影シェードと色合いを利用(色合いの明るさや暗さ)してみましょう。色合いを統一したまま、色を拡張していくので、虹の色のようなやり過ぎになることを防いでくれます。

 

color-theory-16

 

マーケティングやブランディンについて

ブランド認識は、色と強い結びつきがあります。たとえば、コカ・コーラやFacebook、スターバックスなどは、すぐにブランドカラーを連想することができるでしょう。

 

カナダのウィニペグ大学(英: the University of Winnipeg)の研究「Impact of Color on Marketing」によると、商品を見たときの最初の判断は、大部分において色がベースとなっていることが分かっています。デザインにおける色は、芸術的な選択だけでなく、消費者へのブランドや商品の認知力にもつながる、重要なビジネス的決定であることを意味しています。

 

しかし、ロゴやブランドカラーを決めるときに、伝統や典型的な方法などにとらわれる必要はありません。失敗しない、確実な方法などは色の選択に存在しません。色を決めるときに大切なのは、ブランドの個性やマーケティングコンテンツと、色がマッチしているかどうかです。アイデアのインスピレーションとして、BrandColorをチェックしてみるとよいでしょう。世界的に有名な企業やブランドのビジュアルガイド(HEXコード)を、まとめて確認することができます。

 

color-theory-17

RGBとCMYKカラー方式について

プリント印刷する必要があるデザインプロジェクトを手がけているとき、コンピューターのモニターでは実際に印刷する色を、正確に確認することはできません。デジタルモニター/スクリーンと印刷では、RGBとCMYKの異なるカラー方式を採用しています。RGBカラーは赤とみどり、青色の小さなドットを組み合わせ、スクリーンに色を表示します。CMYKカラーは、シアン(英: Cyan)とマゼンタ(英: Magenta)、黄色(英: Yellow)、黒(英: Black)の頭文字を表し、カラー印刷を行うときに色を混ぜて色を表現します。

 

注目したいポイントとして、デザイナーによっては、最初のうちはRGBカラーで制作しておき、プリント印刷する前にCMYKカラーに変換する方法を好むこともあります。

 

color-theory-18

 

 

これらの違いから、両方のカラー方式で統一された色が必要になります。たとえば、ロゴをウェブサイト用に作成して、そのロゴを名刺デザインとして利用する場合などです。こういったときに、Pantone Matching System、通称PMS色見本帳が役に立ちます。ウェブ用とプリント印刷用の色をマッチさせ、見た目を均一に揃えることができます。PMSを利用することでデザイナーはもちろん、クライアント、印刷を行う人が、最終プロダクトの見た目を確認することができます。

 

 

 

色を理解し、よく知り、好きになろう。

 

色の基本原則は、心理学や神経科学として学んでいる人もいるほど、科学とアートが交差するむずかしいトピックです。このガイドでは一部のみを紹介しましたが、より効果的な色を決める方法として、今後のデザインプロジェクトに活用してみましょう。では、デザインを楽しんで。

 

 

参照元リンク : Color Theory – Tips and Inspiration by Canva – Design School