デザインの配色パターンと作り方【色彩学応用編〜配色パターンを作るオンラインツール】

2019-05-24
デザイン制作

前回の記事「デザインと色【色彩学基本編】」では色の基本についてお伝えしました。今回は、色を使った配色パターンの作り方について考察します。配色パターンを作る上で重要なのは調和する色と調和しない色の基本と見え方についてです。

カラーサークルと配色パターン(CMYのパレット)

わかりやすいように、プロセスカラー(CMYK)を使って考えましょう。下の図はCMYで作ったビビッドカラーのカラーサークルです(ビビッドカラーに白と黒は入らない)。Illustratorでデザインを作るとき、このカラーサークルを思い浮かべながら色を考えていくと応用が利きます。

まず、三角でつないだ対角線にある「C(シアン)100%」「M(マゼンダ)100%」「Y(イエロー)100%」と書かれた3色は、配色を作る(色を混ぜる)ベースの色になります。絵の具で考えるなら、CとMとYの色しか手元にないと思ってください。実際、Illustratorのカラーウィンドウでは、この3色を使って色を作っていきます。

減法混色(混ぜれば混ぜるほど黒に近づく)

一般的なオフセット印刷というのは、CMYKという4色の色を掛け合わせて複数の色を作っています。色彩はCMKで作り、明度はKで調整する。純色にはKは含まれないので、カラーサークルでは使いません。

そして、CMYを全て混ぜるとK(ブラック)になり、この4色全てを使った漆黒をリッチブラックと呼びます。そして、混ぜれば黒に近づいてく仕組みを「減法混色」といいます。

色の組み合わせ:調和する色(0度、30度、180度)

うまく調和する色相というのは、0度の「同一調和」、30度の「類似調和」、180度の「対比調和」が基本として存在します。調和はハーモニクスと言い、見ている人を安心させる力を持ちます。

同一調和(0度の関係)

1色に白と黒を加えることで、同じような色合いで調和させる方法です。安心感や温厚といったイメージを作り出すことができます。この同一調和がハーモニクスの基本です。

オフセット印刷には白は存在しないため、引き算をすることで白に近づけるという方法をとります(色がない状態=白)。

一番左のC(シアン)で解説すると、基本となるのは真ん中のシアン100%です。これにK(ブラック)を50%加算すると黒に近づき、ダークなシアンが出来上がります。逆にシアンを50%引くと白に近づき、ライトなシアンが生まれます。この容量で同じ色相の明度を調節すると長和した配色が作れます。

類似調和(30度の関係)

類似調和というのはお隣さんの関係です。ここで初めて色相の違う色同士が出会います。似た者同士の色なので、安心感は引き続きあります。

真ん中のM(マゼンダ)で解説すると、中心にいるマゼンダ100%に対して左がシアンを50%足したもの、右がイエローを50%足したものです。カラーサークルのお隣さん同士の組み合わせです。

似た者同士の色なので、同じような意味やニュアンスを持ち、喧嘩もありません。グラデーションによる多色展開もしやすい組み合わせですが、色数を増やしたい場合は明度の加減を使うとうまくいきます。40度以上離れると微妙な関係になってくるので、使用範囲はあくまでも隣同士までにしておきましょう。

対比調和(180度の関係)

カラーサークルで見たときに、真反対にいる色同士の組み合わせを対比調和と言います。補色の関係ともいい、全く異なる意味を持つことで緊張感を与える組み合わせです。人を強く惹き付けるアバンギャルドな組み合わせと言えます。

この対比の関係は人の注意を引きやすく、とても魅力的な配色に映ります。ただし、使用範囲や組み合わせによってはリープマン効果というチカチカした目のちらつきが起きるので、その場合は明度を下げるなり空白を設けるなりの対処が必要です。

色の組み合わせ:調和 + 不調和(スプリットコンプリメンタリー)

ここから少し高度な技に入ります。対比調和である180度の関係と、その両隣の類似調和を合わせた組み合わせをスプリットコンプリメンタリーと言います。これはわざと調和と不調和を同居させることにより、デザインにメリハリをつけることができる方法です。特にメインのカラーを目立たせたい場合や浮き立たせたい場合に使用します。

右側のイエローで解説すると、この組み合わせの中で一番目立っているのはイエローであり、対比である3色は背景として溶け込んでいます。このように目を引きたい場所に対比の1色を持ってくることで、デザインにメリハリを生みだすテクニックもあります。色の面積にもよりますが、全体としては寒色系のイメージで統一できることがポイントです。

トライアード(三角)とテトラード(四角)

トライアードとはカラーサークル内の120度の関係で、うまく使えばバランスのとれた配色がつくれます。テトラードは対比調和を二つ合わせた四角形の配色になるので、かなり鮮やかな仕上がりになります。明度の調節をするか、無彩色を要所に入れるなど、輝度や濃度の調節をしてあげると綺麗におさまります。

トライアード(正三角形/二等辺三角形)、テトラード(正四角形/長方形)

さて、配色パターンがわかったところで、これを実践するにはかなりの訓練が必要になりますよね。でも、なんとも便利な配色ツールがあるのでご紹介します。今の時代にデザインをしている皆さんはラッキーです。

配色パターンが作れるサイト(色の組み合わせができるアプリ)

配色について理解したところで、配色パターンを自動で作れるツールを活用しましょう。一つのメインカラーを決めると、自動的に調和するハーモニクスを検出してくれるとても便利なサイトです。

HUE / 360

マンセルカラーとRGBカラーシステムが選べます。下の「Circle Controller」というところで、印刷の場合はマンセルを、Webの場合はRGBを選びましょう。サークルの中のメインカラーをクリックすると、同一、類似、対比調和の色を選んでくれます。明度は左のモノクロカラーをクリックすれば、ライトトーン、ダークトーンを検出できます。色数も10〜100まで見ることができます。選んだ色はしたのバーに積み重なっていき、クリックすると色番が確認できます。

Paletton

こちらも同じようなシステムですが、メインカラーは外側の円から、明度は中心の円から選べます。ハーモニクスの種類は上側のアイコンで選ぶことができます。右側に調和カラーが並ぶので、クリックして色番を確認しましょう。RGBで出力が可能です。Illustratorで使いたい場合はカラーピッカーの色番(#)のところにRGBの数値を入力します。

Color Supply

こちらはハーモニクスの明度調整を自分でする必要がなく、自動的におしゃれな色を提案してくれる優れものです。この手の配色パターンツールはたくさん紹介されています。色がありすぎて迷う、よくわからないという方にはおすすめ。ただし色の面積や配分は自分で行う必要があるので、色数が多いと難しいかも。あと、配色がパターン化しがち。

brand-colors

まずメインのカラーが選べないという場合は、こちらのカラーチャートから選ぶといいです。いろんなブランドカラーが並んでおり、背景色で表示されるので、色のイメージが湧きやすくなります。色がもつ意味は前回の色解説でチェックしてみてください。

色の本 色彩学と参考書

色と配色、使い方、カラーチャートなど、今回の記事で書いた内容の100倍は勉強になる色彩デザインの参考書です。使っている言葉は難しいですが、一冊持っておけば事足りるほど内容は濃いです。こちらのブログで書いている各テーマごとに掘り下げて解説しているので、もっと詳しく勉強したい方にはオススメ。デザイナーの卵なら今知らなくても支障はないけど、あとで必ず知ることになる用語やテクニックが満載です。紀伊國屋で同じような本を数冊立ち読みして、こちらの購入を決めました。難しい用語が並んでる割にはわかりやすいし、大事なことが全部載ってたので。

  • 色彩学の基本と色の捉え方
  • マンセルカラーを知ろう
  • 配色の基本とデザイン
  • トーンによる配色
  • 併せて覚えておきたい配色のテクニック
  • 配色力とカラーセンス
  • 色の見え方とイリュージョン
  • デジタルカラーの基本
  • デジタルカラーの配色法
  • 資料編(オスワルトシステム、XYZ表色系、カラーチャート)

Amazonで見る】【楽天で見る

モバイルバージョンを終了