WEBデザイン
デザインきほん色彩4原理
INDEX
目次

『デザインのきほん色彩4原理』とは?

  • アメリカのディーン・ブリュースター・ジャッド (Deane Brewster Judd)は物理学者でもあり、20世紀最大の色彩学者です。

  • ジャッドは色彩調和の本質を解き明かそうと研究を重ね、色彩調和論から共通する原理を偏ることのない視点で4つにまとめました。

  • ジャッドの色彩4原理を知っておくことは、今後の皆さんの配色についての考え方の手助けになるでしょう。

    • そのジャッドの『色彩4つの原理』が図の4つになります。
色彩4つの原理
  • 秩序の原理
    一定の法則によって選ばれた色は調和する
  • 親近性の原理
    自然界にみられる色の変化や見慣れている配色は調和する
  • 共通性の原理
    共通性がある色同士は調和する
  • 明白性の原理
    明瞭なコントラストを持つ色の組み合わせは調和する
 (13111)

ジャッドの『色彩4つの原理』についてを詳しく見ていく前にまず、色の基礎知識として、色相・彩度・明度・色相環・トーンについてを簡単に説明しておきます。

【1-1】色の基礎知識(色相・彩度・明度・色相環・トーン)

色相(しきそう)とは

  • 色相(しきそう):赤・黄・緑・青・紫など色味のことをいい、色あいと呼ばれることもあります。
 (13116)

彩度(さいど)とは

  • 彩度(さいど):色の鮮やかさのことで、彩度が高いとより鮮やかになり、彩度が低いとグレーに近くなります。
  • 彩度が高いことを高彩度といい、より鮮やかな色になります。彩度が低いことを低彩度といい、無彩色(グレー)に近くなります。
 (13120)

明度(めいど)とは

  • 明度(めいど):色の明るさ度合いのことをいい、明度が高いと白っぽくなり、明るくやわらかな印象になり、明度が低いと暗くなります。
    • 明度の差を大きくすることで、コントラストが高くなり見え方がはっきりします。
  • 明度が高いことを高明度といい、明度が低いことを低明度と表現します。
 (13123)

色相環(しきそうかん)とは

  • 色相環(しきそうかん):色相を円上に配置したもので、色を体系化する時に用いる方法の一つです。
  • PCCS(Practical Color Co-ordinate System):日本色研配色体系は、1964年に(一財)日本色彩研究所によって開発されたカラーシステムであり、色彩調和を考えるのに適しています。
  • 色相環で正反対に位置する関係の色の組合せを補色と言い、色相環で近い色を近似色・類似色と言います。

※色相環を表現する表色系にはマンセル表色系オストワルト表色系PCCSなどがありますが、今回はPCCSを使用しています。

トーンとは

  • トーン:明度と彩度をかけあわせた概念をトーンと呼びます。
  • 12種類あり、「さえた」「明るい」「薄い」などの形容語が設定されていて、色の印象を伝えるのに、トーンを用いるとコミュニケーションが図りやすいとも言われていると共に色彩調和を考える上で大いに役立ちます。

『デザインのきほん色彩4原理』を学ぶ必要性

  • 自分が制作したデザインは、1番最初に制作者自身が、鑑賞者であり客観的に見た批評が出来なくてはなりませんが、そのデザインを毎回みるたびに「なにかが違う・・・」と思ってしまうと、最初はよくても次第に制作がつらくなってきてしまいます。
  • 「配色センスが無いから仕方がない」ということではなく、配色理論を少しでも理解できれば、今後の配色・色の選択が楽しくなったり、楽になると思います。
  • 配色の理論は本当に沢山あり、これが正しい!という正解は無いので、色彩4原理を知っていれば大丈夫!ということではなく、ジャッドの『色彩4つの原理』を使って配色のコツやパターンを今後の配色に、取り入れていくことで活用していってください。

【1-2】色パターンに違いが出るたった4つの基本原理

秩序の原理

  • ジャッドの『色彩4つの原理』の1つ目は秩序の原理です。
 (13135)

  • 秩序の原理とは・・・一定の法則によって選ばれた色は調和する

  • 一定の法則とは何のことを言っているのでしょうか?
  • 色の基礎知識でご紹介しましたが、その中でお伝えした、色相とは色味のことであり、色相環とはその色相を円上に配置したものでした。

  • 秩序の原理にある一定の法則とは・・・

    一定の法則=色相環の中で幾何学的な位置関係にあるなど規則的に選んだ配色は調和しやすいという理論です。

 (13137)

  • 色相環の1色と1色の色相差を15°で考えるという事を確認してから、この原理に合った配色をいくつか確認していきましょう。
 (13139)

秩序の原理を用いた配色はいくつかありますが、今回は4つの配色方法をご紹介させて頂きます。

まずは、同一色相:アイデンティティ(Identity)類似色相:アナロジー(Analogy)です。

同一色相:アイデンティティ(Identity)とは

  • 同じ色相のみを用いた配色のことで、統一感を出すことができますが、単調になってしまう部分があるので明度や彩度でコントラストを出して補うことが多いです。
  • 無難な配色が可能な点では使い勝手の良い配色として使用出来ます。
 (13143)

類似色相:アナロジー(Analogy)とは

  • 色相環で両隣にある色や近くの色味が似ている色を用いた配色です。
  • 同一色相より、単調ではないですが、この配色も明度や彩度を使用し、コントラストを出して補うことが多く、失敗しにくい配色です。
 (13146)

次の秩序の原理を用いた配色方法の2つは、トライアド(Triad)とテトラード(Tetrad)です。

トライアド(Triad)とは

  • 色相環を三等分した位置にある角度差が120°である3色での配色。
  • 変化をもたせながら、バランス良く配色したい時に使用することが多く、それぞれの配色でトーンを変えて使用することもおすすめです。
 (13150)

テトラード(Tetrad)とは

  • 色相環を四等分した位置にある角度差が90°である4色の配色。
  • 2色の補色の組み合わせのため、カラフルになるという点も特徴的な配色です。派手にしたい・色を増やしたいという時に活用出来ます。
 (13154)

  • 上記、ジャッドの秩序の原理を用いた4つの例で秩序の原理を説明させて頂きました。
  • 規則的に選んだ配色は調和しやすいということでしたが、他にはペンタード(pentad)やヘクサード(Hexad)など、5角形や6角形で組み合わせる配色などもありますので、習熟度確認課題の際に確認してみましょう

秩序の原理応用

  • 右図は黄色をベースカラーとしてトライアドを使用した配色例とトライアドを使用していない配色例です。
  • トライアドを使用していない配色例は、感覚的に選択した配色となります。
  • 配色に関しては目立たせたい・際立たせたい・馴染ませたい など用途によって変わってくるので、理論だけではない部分もありますが、秩序の原理を利用した配色のメリットを考えながら使用すると良いでしょう。
 (13158)

  • 最初から、色相や角度差を理解しながら配色するのは困難です。
  • 今回ご紹介しているジャッドの色彩4つの原理は、あくまで原理であり原則ではありません。
    • 秩序の原理を用いながら配色ツールを活用し、配色のコツを掴んでいって頂きたいと思います。

親近性の原理

  • ジャッドの『色彩4つの原理』の2つ目は親近性の原理で、なじみの原理とも呼ばれています。
 (13162)

  • 親近性の原理とは・・・自然界にみられる色の変化や見慣れている配色は調和する (なじみの原理とも呼ばれる)

  • こちらは実は非常に解りやすい原理です。

 (13164)

  • 見慣れている配色は調和する」に焦点をあててから、自然界にみられる色の変化を考えてみましょう。
    • 例えば、新緑で検索すると下記の画像が出てきました。
    • この中には緑がたくさんありますが全て同じ緑の色でしょうか?
      • 全て同じ緑の色ではないということが分かります。
  • だからといって、「配色が悪いな」「センスが無いな」と思いませんし、こちらの画像は、見慣れている景色でもあり、自然界にみられる色の変化が解る画像だと思います。
 (13166)

  • これが、なじみの原理とも呼ばれる親近性の原理です。
 (13168)

親近性の原理応用

  • 下記は、ナチュラルハーモニー配色を使用した配色と、使用していない配色です。
    • ナチュラルハーモニーを使用していない配色例は、なじみが無く、少し目が疲れてしまう印象があります。
  • 親近性の原理は自然に・なじみがある配色を隣接色相配色・類似色相配色で配色することが必要です。
 (13171)

この原理は、インテリアの配色などによく使用される原理ですが、配色のコツとしてはぜひ皆さんにも利用して頂きたい原理でもあります。

ナチュラルハーモニー配色の考え方は色相差は1〜3で組み合わせるということも大切なルールですので、覚えておきましょう!

共通性の原理

  • ジャッドの『色彩4つの原理』の3つ目は共通性の原理です。
 (13175)

  • 共通性の原理とは・・・共通性がある色同士は調和する

  • こちらも親近性の原理に引き続き、非常に分かりやすい内容です。
  • 色相やトーンなどの何らかの共通性がある色同士は調和するということです。
  • 色相とトーンを統一させることや両方を統一することで調和させるので、配色に関してもこの方法は簡単に出来る手法です。
 (13177)

共通性の種類
  • 色相を統一
    同じ色相から異なるトーンを選ぶと調和する
  • トーンを統一
    同じトーンから異なる色相を選ぶと調和する
  • 両方を統一
    同じトーンや類似トーンから、色相・明度・彩度の差が同じ色を選ぶと調和する
 (13179)

色相を統一する配色方法
  • ドミナントカラー(Dominant Color)
    同じ色相や隣接した色相で全体をまとめ、トーンは自由に決めて、変化をつける配色方法
  • トーンオントーン(Tone On Tone)
    同じ色相や隣接した色相で全体をまとめ、明度差を大きくした多色配色
 (13181)

トーンを統一する配色方法
  • ドミナントトーン(Dominant Tone)
    同一・近似トーンで色相は自由に配色
  • トーンイントーン(Tone in Tone)
    同一・近似トーンで明度の差が少ない
  • トーナル(Tonal)
    中間トーンのみで配色
 (13183)

色相・トーン両方を統一する配色方法
  • カマイユ(Camaïeu)
    色相・トーンともに、ごく近い色で統一された配色
  • フォカマイユ(Faux Camaïeu)
    類似した色相で、トーンは同一か隣接したトーンに変化をつけた配色
 (13185)

共通性の原理応用

  • 右図は、共通性の原理のトーンを統一している配色とトーンの統一をしていない配色です。
  • 5色も色を使用すると(テキストの黒を含めると6色)配色は難しくなるのですが、トーンの統一を使用すると複数の色を使用しても統一感が出て、バランスの良い配色が出来ています。
  • 共通性の原理は、複数の色を使用しなければいけない時や、使用したいと思う時にはぜひ活用して頂きたい配色方法になります。
 (13188)

明白性の原理

  • ジャッドの『色彩4つの原理』の最後は明白性の原理です。
 (13191)

  • 明白性の原理とは・・・明瞭なコントラストを持つ色の組み合わせは調和する
 (13193)

  • 最後の明白性の原理も、言葉の通りとても分かりやすい考え方です。これは、はっきりと対照的(コントラストが強い)な色の組み合わせ、特に明度差が大きい色同士は調和するという原理です。
  • 特に良く知られるトリコロール配色が解りやすい例かと思います。
 (13195)

明白性の原理応用

  • 右図はどちらも明白性の原理のトリコロール配色ですが、セパレーション効果がどのようなものなのかを確認するための配色例です。
  • 白や黒を使用する場合も、3色の中心に置くと引き締まるという事を視覚で理解するためのものであり、どちらもトリコロール配色です。
  • セパレーション効果を使用しない配色は確かに、コントラストのある色相にもかかわらず引き締まった感じが出ていないように見えます。
 (13198)

明白性の原理は、国旗に良く使用されている配色で、感覚的にこの配色を知っておられる方も多くいらっしゃるかもしれませんのでセパレーション効果も含め、今後のデザインにしっかりと役立てて頂きたいと思います。

【1-3】習熟度確認課題

課題1:Adobe Colorを使用して『デザインのきほん色彩4原理』の配色を確認しよう!

  • Adobe Colorを使用し『デザインのきほん色彩4原理』の配色を確認しよう。
  • Adobe Colorのカラーハーモニーには、類似色・補色・正方形(テトラード)などが設定されていますが、カスタムを利用し 「デザインきほん色彩4原理」の 『秩序の原理』『親近性の原理』『共通性の原理』『明白性の原理』で習った配色を確認してみましょう。
    • ベースカラーはご自身で決定して頂いて構いません。
  • 上記、確認が出来たらAdobe ColorのJPEGでダウンロード機能を使用し、JPEGでダウンロードした配色の画像がどの原理を使用した配色なのかコーチに説明してみましょう。
  • Adobe ColorはAdobeが提供する無料の配色ツールです。
    • このツールはデザインに適したカラーパレットを簡単に作成することができるので、カスタムを利用し配色を確認しましょう。

課題2:『デザインのきほん色彩4原理』を意識しながら、DMはがき制作をしてみよう!

この課題はチャレンジ課題であるため飛ばしても構いません!
Figma・Canva・Photoshop・Illustratorのいずれか使い方を学習し終えた人は挑戦してみましょう!
  • 課題1で確認した「デザインのきほん色彩4原理」で習った配色のカラーパレットを利用して、DMはがき制作をしてみましょう。
DMはがきとは
  • DMはダイレクトメールのことで、一般的には企業から顧客(顧客となる企業も含む)への訴求を目的として活用し、DMはがきはその内容を封書ではなくはがきにして送付するものです。
  • 内容:① HAPPY BIRTHDAY 50%OFF ② HAPPY NEW YEAR 50%OFF ③ GRAND OPEN 50%OFF ④ 10th ANNIVERSARY 50%OFF
    • 上記のテキストと自分で描いた図形に配色しましょう。
  • ①~④ではそれぞれどの原理を使っていただいても構いませんが、4つの制作物でそれぞれ一回は『秩序の原理』『親近性の原理』『共通性の原理』『明白性の原理』を使うようにしましょう。
  • サイズは一般的なハガキサイズである「100×148mm」で作成してください
  • カラーモードは「CMYK」、裁ち落としは「3mm」で作成してください。
  • 縦書きでも横書きでも構いません。「両面」ではなく、「片面(1枚)」に収まるようにデザインしてください。
  • 出来上がったら、講師にデザインをプレゼンテーションして、デザインフィードバックをもらってください。
以上で『デザインのきほん色彩4原理』の解説を終わります。

お疲れ様でした!
WEBCOACH | キャリアチェンジまでの全てを学ぶマンツーマンWEBスクール
© 2020 by WEBCOACH