ブロックチェーン・AI・システム開発の株式会社INDETAIL

簡単に実践できる!配色の基本テクニック(前編)

2017.05.30
F-man

こんにちは。最近、X-JAPANの初期(X時代)にハマっているF-manです。

デザイナーでなくても仕事上、資料や企画書などでビジュアル制作をすることがあると思いますが、色彩を扱うことに尻込みをして、ついつい白黒モノトーンで無難に済ませてしまうことってありませんか?「センスがないって思われたら嫌だなー」とか。。。

不安に思うのは、なぜその配色にしたのかを説明できないからなんですよね。論理的に説明できれば怖くはありません。デザイン制作はセンスよりも知識や論理的思考が重要です。

ということで、今回は配色のテクニックを前編と後編に分けて紹介したいと思います。基礎の基礎ではありますが、これを頭に入れておくだけでも、色の見方が変わってくると思います。

まずは「調和」か「強調」か。どちらかに決める

配色を考える前に、作ろうとしている物に必要なのは「調和」か?それとも「強調」か?を決めましょう。

「調和」の効果

  1. 全体的にまとまる
  2. 心地よくストレスがない
  3. 単調になりがちで、退屈な印象を与える場合もある
  4. ECサイトなど長時間ユーザーに滞在させたい時などに有効

「強調」の効果

  1. 人目を引くことができる
  2. 心理的ストレスを故意に与えることで強い印象づけが可能
  3. 長時間滞在すると息苦しくなる
  4. ポスターなど広告系で有効

「調和」か「強調」かが決まったら、それぞれに存在している配色テクニックを選択して色を配置していきましょう。

「調和」の配色テクニック

  1. 色相配色
  2. 同ー色相配色
  3. トーン配色
  4. ナチュラルハーモニー

「強調」の配色テクニック

  1. 明度対比
  2. 彩度対比
  3. 補色配色
  4. コンプレックスハーモニー

それでは一つ一つ配色テクニックを見てきましょう!

1. 色相配色 -調和の配色-

色相配色とは色相環から規則的に色を拾ってくるテクニックです。色の拾い方は色数によって異なり「トライアド(3色)」「テトラード(4色)」「ペンタード(5色)」「ヘクサード(6色)」のように幾何学的に基づくのが基本です。

色相配色の特徴は「彩り豊かに華やかに、かつバランスよく見せることができる」ところにあります。また、規則的に色を拾ってくるので迷うことなく配色することができるメリットもあります。同列要素のナンバリングやシリーズ物のカラーバリエーションなどに有効です

色相配色はカラフルであり、バランスも良い

2. 同一色相配色 -調和の配色-

同一色相配色とは、同じ色相をトーンの違いでまとめるテクニックです。要するに同色(もしくは同系色)の色でまとめる技法のことです。

同一色相配色は簡単に調和をとりやすく、その色の個性を強く打ち出すことができます。数多くのトーンを使用することで画面に深みを演出することができます。一方で調和がとりやすい反面、物足りなくなることもあり、適度に白や黒もしくは近似色を用いてメリハリを保たせるのも一つのテクニックとなります。

同一色相配色はもっとも調和を取りやすい手法

3. トーン配色 -調和の配色-

トーン配色とは異なる色相において明度や彩度を統一することにより全体のバランスをとるテクニックです

全体的に華やかに彩り豊かにしたい場合は、彩度や明度を高くしてビビッドなトーンにして、落ち着いた重厚感のある雰囲気にしたい場合は、彩度や明度を低くして落ち着きのあるトーンにするのが効果的です。全体的にまとまり過ぎて落ち着きすぎてしまった場合は、逆のトーンを少量使用することでメリハリをつけることができます。

多色を使いたい!でもバランスも! の場合は、トーン配色で

4. ナチュラルハーモニー -調和の配色-

生活の中で一番自然な色彩は、太陽光と太陽が当たる部分や影になっている部分です。
自然界の原理に基づいた重要な概念で、太陽光に当たる黄色系は明度や彩度を高く、影になっている青系統は逆に明度・彩度を低くすることでナチュラルハーモニーの効果が得られます。

ナチュラルハーモニーで得られる効果は自然で健康的な印象となります。ただ、自然すぎて見る人に平凡な感じに見えてしまうこともあるため、色数を多くして華やかにすることも選択肢の一つです。

ナチュラルハーモニーは健康的な印象を与えます

あとがき

今回は前編として「調和」の配色テクニックを紹介しました。複雑に感じる部分もあるかもしれませんが、簡単に言うと「色相でもトーンでも何かしらの共通点を残しておかないと全体的にチグハグになるので気をつけましょう」ってことです。後編は強調の配色テクニックをご紹介しようと思います。

関連タグ:

F-man

デザイナー。好きなことは人から薦められた漫画を読むこと。

「いいね」ボタンを押すと、最新情報をすぐに確認できます。