Color Methodologies

COLOR

基本を抑えたロジカルな色選び

様々な配色技法

誰もが使える色彩調和のメソッドを探求して、昔から芸術や工業の分野では様々な配色技法が提唱されてきました。
その中には、多くの人が経験則的に「相性の良い色の組み合わせ」として日頃から使っている配色テクニックも含まれます。

【ベース・アソート・アクセント】基本となる3色を選ぶ

もし配色が苦手なら、まずは使う色数を少なくすることをオススメします。
たくさんの色を使って調和の取れたイメージを作るのは難しいもの。まずは主要な3色を決めることから始めましょう。
【ベースカラー】【アソートカラー】【アクセントカラー】と呼ばれる3色を決め、をれぞれ使用する割合を大体以下のように配分することでまとまりが生まれ、全体をコントロールしやすくなります。

ベースカラー:70%、アソートカラー:25%、アクセントカラー:5%

アクセントカラーで全体を引き締める

使用面積が最も大きいのが【ベースカラー】で、全体のイメージを左右する基調色となります。
その基調色に次ぐ大きさで使用されるのが【アソートカラー】で、配合色とも呼ばれます。
最も使用面積が小さいのが【アクセントカラー】です。強調色とも呼ばれ、配色全体を引き締める役割を持っています。
ベースとアソートの組み合わせが平坦な印象になってしまった場合でも、アクセントカラーを加えることでメリハリが生まれます。

〈 配色例 〉

【アクセントカラー】は、ベースやアソートに対してコントラストが強い色を選ぶのがコツです。


コントラスト参考:明度差によるコントラスト色の対比が生む視覚効果

ジャッドの色彩調和論「4つの原理」

アメリカの色彩学者ジャッド(1900〜1972)が、過去に提唱された様々な色彩調和論の中から共通する考えをまとめた「4つの原理」。現代にも通じる色彩調和の基本原理です。

秩序の原理

規則的に選ばれた色同士は調和する
色相環など、知覚的に等間隔な配置で構成された色のグループの中から、規則的に選ばれた色同士は調和する。

なじみの原理

日常で見慣れた配色に近い色同士は調和する
照明の下での物体の見え方や、自然界に見られる色の変化など、普段から見慣れた色の配列は調和する。

例:ナチュラルハーモニー


類似性の原理

何らかの共通性を持った色同士は調和する
同系色相や同系トーンなど、ある種の共通要素を持つ色同士は調和する。

例:同一色相のドミナント配色


明瞭性の原理

コントラストの強い配色は調和する
明度差や色相差などが大きい場合、明瞭な(はっきりした)対比が生じることにより調和する。

例:トリコロールなど

色相環の分割による配色技法

上で紹介した4つの原理の内、「秩序の原理」に基づくもので、色相環の分割の仕方から色の組み合わせを導き出す方法です。
それぞれ位置関係によって名称が付けられています。

ダイアード
(補色)

スプリットコンプリメンタリー
(分裂補色)

トライアド

テトラード

ペンタード

ヘクサード

〈 配色例 〉

【ダイアード(補色)】【スプリットコンプリメンタリー(分裂補色)】などは比較的シンプルで使いやすく、これらを使った配色はメリハリの効いた印象を与えます。

ダイアード、スプリットコンプリメンタリーの配色例

見慣れた風景、自然の中に見る色彩調和

アメリカの自然科学者ルード(1831〜1902)が提唱した【ナチュラルハーモニー】は、自然の中での色の見え方としてよく知られています。

ナチュラルハーモニー

自然光や照明による色の見え方を思い浮かべてください。例えば木の葉の緑色は、光が当たっている明るい部分は黄みがかって見え、暗い部分は青みがかった緑色に見えます。同じ葉の中でもこのように光の加減によって色の見え方が違うことを、私たちは体験的に学んでいます。
これを利用し、色相環の中で、より黄色に近い方の色の明度を高く、青紫に近い色の明度を低くすると自然な印象の配色になります。
見慣れた景観として認識されているこのような配色を【ナチュラルハーモニー】といいます。

また、この逆のパターン(黄色に近い色の明度を低く、青紫に近い色の明度を高くする)は【コンプレックスハーモニー】と呼ばれ、違和感のある複雑な印象を与えます。

ナチュラルハーモニー配色のポイント

  1. 近似した色相同士(色相環上で近い位置にある色相)を選ぶ。
  2.  1で選んだ色の内、黄色に近い色の明度を高く、青紫に近い色の明度を低くする。

〈 配色例-1 〉

1. 色相を選ぶ

色相環上で近い位置にある、近似した色相を選ぶ。(この例では『黄緑』と『緑』)
※色相同士の位置が離れすぎているとナチュラルハーモニーにならないので注意。

2.選んだ2色の明度に差を付ける

より黄色に近い『黄緑』の明度を高く、青紫に近い『緑』の明度を低くする。
(以下トーン図を利用して明度差のある色を選んでいます。)

トーンとは

ナチュラルハーモニーの完成



より黄色に近い『黄緑』の明度を低く、青紫に近い『緑』の明度を高くする。

コンプレックスハーモニーの完成

〈 配色例-2 〉

1. 色相を選ぶ

色相環上で近い位置にある、近似した色相を選ぶ。(この例では『赤』と『赤紫』)
※色相同士の位置が離れすぎているとナチュラルハーモニーにならないので注意。

2.選んだ2色の明度に差を付ける

より黄色に近い『赤』の明度を高く、青紫に近い『赤紫』の明度を低くする。
(以下トーン図を利用して明度差のある色を選んでいます。)

トーンとは

ナチュラルハーモニーの完成



より黄色に近い『赤』の明度を低く、青紫に近い『赤紫』の明度を高くする。

コンプレックスハーモニーの完成

ドミナント配色

ドミナント(Dominant)とは「支配的な」「優勢な」「主要な」という意味を持っています。
配色の場合は、1つの色相や1つのトーンで全体をまとめることによって、統一したイメージを持たせることができるという効果があります。
どちらかというとシンプルな手法であり、配色が苦手な人にとっては比較的使いやすい配色テクニックと言えるでしょう。

色相が統一されたドミナント配色は、自然や見馴れた景観の中にも見つけられる

全体がオレンジ色に支配されている夕暮れの風景

青いレンズを通して見ると、全体が青に支配されて統一感が生まれる。

色相を限定した「ドミナントカラー」

色相を1つに絞り、トーンを変えて色数を増やすと、色相が持つイメージを印象付けることができます。

トーンとは

〈配色例〉

色相(青)のイメージを表現

色相は『青』だけに絞り、トーンは複数【b:ブライト】【sf:ソフト】【dp:ディープ】を選択することで青が持つイメージを印象付ける。


色相を1つに限定し、トーンを3種類使用した配色例

トーンを限定した「ドミナントトーン」

トーンの数を1つに絞り、色相を変えて色数を増やすと、トーンが持つイメージを印象付けることができます。


トーンとは

〈 配色例 〉

トーン(dk:ダーク)のイメージを表現

トーンを【dk:ダーク】だけに絞り、色相は『黄』『青紫』『赤紫』など複数選択して、ダークトーンが持つイメージを保ちつつ表現に広がりを持たせる。


色相を5つ使用して、トーンを1種類に限定した配色例

ポイントまとめ
  • 色数は少ない方がコントロールしやすい。まずは基本となる3色【ベース・アソート・アクセント】を決め、使用する割合を調整する。
  • 過去に提唱され、現代にも通じる色彩調和の基本原理【4つの原理】を参考にする。
  • 自然で馴染みのある配色にしたい時は【ナチュラルハーモニー配色】を参考にする。
  • 統一感のある配色にしたい時は【ドミナント配色】を参考にする。

ピックアップ記事

  1. ランディングページ制作のポイント 基本を押さえて効果的なLPを作ろう
  2. 色の連想
  3. 色の調子【トーン】を利用した色選び
  4. 色の対比が生む視覚効果
  5. カラー・リテラシーを高めよう

関連記事

  1. Psychology of Color

    COLOR

    色彩心理

    ビジネスに使える? 押さえておきたい色彩心理の基本「色彩心理」と聞…

  2. tone

    COLOR

    色の調子【トーン】を利用した色選び

    かわいい、楽しい、大人っぽい…色でイメージを表現するには?色で…

  3. COLOR LITERACY

    COLOR

    カラー・リテラシーを高めよう

    色を利用して情報を分かりやすく「センスが無い」では済まされない?…

  4. COLOR

    カラー・リテラシークイズ ➀「明度の高い色はどっち?」

    明度を比較してみよう視認性や可読性の高い配色にするためには…

  5. COLOR

    Google Material Color Toolが便利!配色が苦手な人のお役立ちツール

    カラーパレットから選ぶだけ配色の参考サイトやツールは多々あれど、以…

  6. Color Association

    COLOR

    色の連想

    赤は情熱? 共有されている色のイメージ私たちは日常的に色から多くの…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. ランディングページ制作のポイント
  1. ランディングページ制作のポイント

    OTHER

    ランディングページ制作のポイント 基本を押さえて効果的なLPを作ろう
  2. Color Association

    COLOR

    色の連想
  3. tone

    COLOR

    色の調子【トーン】を利用した色選び
  4. CONTRAST

    カラー・リテラシー

    明度差による色のコントラスト
  5. contrast

    COLOR

    色の対比が生む視覚効果
PAGE TOP

バンドワゴン効果

多数に人気のあるもの、支持されているものに惹かれて、それらの製品や事象への人々の支持がさらに高まる現象。行列がさらに人を呼ぶなど。
※『バンドワゴン』とはパレード楽団のこと

フォールス・コンセンサス

多くの人が自分と同じ意見を持ち、同じような行動をするだろうと考え、自分を多数派だと思い込むこと。
(さらには周囲と同じ行動を取れば安心するという心理)
※False Consensus:偽の合意

同調効果

周囲と同じ行動をしていると安心し、逆に自分が正しいと思っても他人が異なる行動をしている場合には不安になるといった集団心理のこと。

ピグマリオン効果

他者の期待値が本人の成長・成績結果に影響を与える心理効果。
アメリカの教育心理学者・ローゼンタールの実験では、教師が期待をかけた生徒とそうではない生徒の間では成績の伸びに違いが見られた。
※『ピグマリオン』はギリシャ神話の自作の乙女像に恋をした登場人物から。

ウィンザー効果

口コミやレビューなど、第三者から間接的に情報が伝わることによって、より信憑性や信頼感が増す心理効果。
直接本人から伝えられる評価に対しては利害関係を疑ってしまうため、無関係の第三者の意見の信憑性が増して感じられる。

ハロー効果

ある対象を評価するときに、目立ちやすい特徴に引きずられて他の特徴についての評価が歪められる現象のこと。後光効果とも呼ばれる、心理学における認知バイアスの1つ。

希少性の原理

需要に対して供給が少ない時、手に入る機会が限定される場合など、同じ内容のものであっても価値を高く評価してしまう認知バイアスのこと。

アンカリング効果

交渉の際、先行して提示される何らかの数値によって後の数値の判断が歪められる認知バイアスの一種。
例えば「この商品は1万円より高いと思うか?」と尋ねることによって、回答はアンカーである1万円に近い数値になる傾向のこと。

カクテルパーティー効果

多人数が談笑している会合など周辺の雑音レベルが高い場合でも、自分が話している相手の声はきちんと聞き取れる現象から、
自分に関係のある情報には注意が向けられる効果のこと。

ストーリーテリング

伝えたい内容を、それに関連した体験談やエピソードなどを引用しながら伝えるすることで、相手に強く印象付ける手法のこと。
物語として記憶されるので印象に残りやすい。

エピソード記憶

特定の日時や場所と関連した個人的経験(イベント)に関する記憶

損失回避性

損失を、利益よりも大きく評価する心理効果のこと。
新たに得られる利益からくる満足より、同額の損失がもたらす苦痛の方が大きいと感じる現象。

バイヤーズリモース

買い物をした直後に感じる不安や後悔の感情。
商品の品質に関係なく発生するため、こうした不安を解消することで返品や解約のリスクを下げ、リピートに繋がることが期待される。

親近効果

最後に提示された情報の再生率が良いこと。「新近性効果」とも言う。
接客業における「お見送り」など、最後の情報で印象が決定されやすい。

リフレーミング

事実に対して与えている意味づけを変え、異なる見方でとらえ直すこと。
例えば不動産物件の「徒歩15分」という表現に対して、「駅から遠過ぎて資産価値が無い」「歩けば健康に良い距離」など、同じ情報でも人によって受け取り方が違う現象。

想起集合

マーケティングにおける想起集合
例えば消費者に対して、ある分野のブランド名や企業名を想起させる「○○と言えば?」といった質問をした際に想起された一群(通常3~5個程度)を想起集合、もしくは喚起集合と呼ぶ。

準拠集団

個人の価値観、信念、態度、行動などに強い影響を与える集団。
何かを決めるときに判断の基準となることがある。