【デザイン力UP】色の組み合わせ方法とコツを紹介【ビギナー向け】

 

色の勉強をしたけど、組み合わせ方がわからない人へ。

 

「勉強したはいいものの、実際の組み合わせ手順が分からない」

「色の組み合わせ方が、うまくなる方法を知りたい」

「自分オリジナルの、組み合わせパターンを作りたい」

「色の組み合わせの参考になる、デザインサイトを知りたい」

 

こんな悩みを解決していきます。

 

※この記事は3分くらいで読み終わります。

読み終える頃には、色の組み合わせ方とコツが理解できます(｀･ω･´)ゞ

 

 

こんにちは！takaです。

グラフィックデザイナー・クリエイティブディレクター歴12年。

毎月40～50万くらい稼ぎつつ、フリーランスとして生きてます。

 

今回は、「色の組み合わせ方」について。

 

僕は昔、色の組み合わせ方といえば、Illustrator内の「あり物のスウォッチ」ばかり使っており、イチから自分で組み合わせパターンを作ることがきませんでした。

 

今考えると、できなかった原因はシンプルで、「勉強したはいいものの、実際の組み合わせ手順が分からなかった」という理由でした。

 

実は、世の中に販売している教養本の多くは、明度やら彩度など、言葉や原理にばかり触れていて、「実務でどう組み合わせればいいか」を、あまり教えてくれません。

 

今回は、これまでの経験を踏まえながら、「ビギナーの方でも簡単に、色を組み合わせられる方法」をレクチャーしていきます。

 

※補足：この記事は、数ある配色方法の中でも、ビギナーの方が、かんたんに組み合わせできる方法をピックアップしています。

デザイン上級者の方は、あまり参考にならないので、あらかじめご了承ください(｀･ω･´)ゞ

 

１：3分で配色できる、色の組み合わせ方法を紹介【デザイン力UP】

 

色を組み合わせる方法は、とてもシンプル。

次の手順で、色を組み合わせればいいだけ。

 

 

たったこれだけです。

 

とてもシンプルですね。

ひとつずつ解説します。

 

方法1：色の組み合わせ表を用意する。

 

使う表はこんなやつ。

 

 

たぶん、一度は見たことがある人も多いかと。

 

この表は「ヒュートーン システム」といって、日本色彩研究所が作った便利ツールです。

 

色の組み合わせを容易に行えるように考えられ作られています。

 

詳しい説明は長くなるので割愛しますが、はじめのうちはこれをベースに色を組み合わせればOKです。

※ヒュートーンシステムのことを詳しく知りたい方はこちらへどうぞ。

 

まずは、この表を手元に準備することが、最初のステップです。

 

方法２：6パターンある、色の組み合わせ方法から、ひとつ選ぶ。

 

ヒュートーン システムを使って色を組み合わせる方法は、つぎの６つ。

 

 

図と例に表すと、下のようなこんな感じになります。

 

１：「使いたいメインカラー１色」+「白か黒」

 

例）使いたいメインカラーを、「ヴィヴィッドトーン／#E60012」にしたいのであれば、こんな感じになります。

※使いたい色は、表の中のものであれば、なんでもOKです。

 

 

２：「使いたいメインカラー１色」+「左右いずれかの、2つとなりの色１つ」

 

例）使いたいメインカラーを、「ブライトトーン／#EA5532」にしたいのであれば、こんな感じになります。

組み合わせる色は、左右どちらかの１色を選びましょう。

 

 

３：「使いたいメインカラー１色」+「左右いずれかの、4つとなりの色１つ」

 

例）使いたいメインカラーを、「ライトトーン／#EF845C」にしたいのであれば、こんな感じになります。

組み合わせる色は、左右どちらかの１色を選びましょう。

 

 

 

４：「使いたいメインカラー１色」+「反対側の色」

 

例）使いたいメインカラーを、「ペールトーン／#F5B090」にしたいのであれば、こんな感じになります。

 

 

５：「使いたいメインカラー１色」+「三角形の場所にある色」

 

例）使いたいメインカラーを、「ベリーペールトーン／#FBDAC8にしたいのであれば、こんな感じになります。

なお、三角形のパターンはことりあえず3パターンを覚えておけばOKです。

 

 

６：「使いたいメインカラーと、おなじ場所にある16色」

 

例）使いたいメインカラーを、「ヴィヴィッドトーン／#E60012」にしたいのであれば、こんな感じになります。

 

 

そして、これらを使う基準は、「使いたい色の数」によって変わります。

 

 

簡単ですね。

 

色を組み合わせる方法は、数多くありますが、とりあえずこのパターンを押さえておけばOKです。

 

✔︎【補足】6つのパターンが、相性がいい理由とは。

短かく、シンプルに言います。

 

 

こんな感じです。

 

もっと詳しく知りたい方は、ググれば説明記事はたくさんでてきます。

 

ただし、少し理論的な話になってきて、内容が難しくなってくるので、ビギナーの方はこれくらいの知識量でまずはいいかと。

まずはこの６パターンを覚えて身につけるのをおすすめします。

 

方法３：組み合わせ方法にそって、色をおく。

 

これまで解説した２つにそって、カラーコードを入力すれば完成です。

カラーコードはこちらのサイトで紹介されています。

 

ちなみに、色には「印刷用のCMYKカラー」と「WEB用のRGB カラー」の2種類があるので、コード入力の際はご注意を。

 

今回の組み合わせ方法は、ずっと使えるテクニックなので、明日からぜひご活用ください(｀･ω･´)ゞ

 

２：色の組み合わせ方が上達する、配色の練習方法【デザインで練習】

 

上達方法は、とてもシンプルです。

 

普段の業務で、つぎのことをやればいいだけ。

 

 

とてもかんたんです。

上達する理由もシンプル。

 

 

実は、最初に白黒でデザインし、最後に色を配置すると、配分ボリュームをコントロールしやすくなり、結果、見栄えがぐんとよくなります。

 

配分ボリュームについても、少し解説しておきます。

 

解説：配分ボリュームは、「お寿司」のイメージで。

 

色には３つの種類があり、お寿司のイメージで配分すれば、ぐんと見栄えがよくなります。

色の種類は次のとおり。

 

 

お寿司に当てはめるとこんなかんじ。

 

 

こんなイメージです。

 

きちんと数値化すると「70%：25%：5%」の割合ですね。

下の図の感じです。

 

ちなみに、この配分ボリュームは、ファッションやインテリアなどにも活かすことができます。

 

普段の生活でも、かなり役に立つ知識なので、いろんなシーンでお試しを。

 

３：自分オリジナルの、色の組み合わせパターンの作り方【デザインの配色アイデア】

 

もうワンランク上の配色をしたい方は、次の方法で、色の組み合わせを作ることができます。

 

 

抽出すると、こんな感じで色情報を取りだすことができます。

 

この方法を使えば、２ステップかつ、２～３分で色を抽出することができます。

順をおって解説します。

 

１：自分の好みにあう、秀逸な写真を用意する。

 

まずは、写真を用意しましょう。

 

僕が普段使う画像サイトはこちらです。

海外のサイトですが、かなり秀逸な写真がそろっています。

 

今回はこちらの「海」の写真を選びました。

 

 

青のグラデーションがきれいな写真ですね。

 

ちなみに、色を抽出するときは、「自然の風景」がもっとも、色の組み合わせが良いとされます。

 

理由は簡単で、人間の目は、見慣れたものに対し、調和を感じるようにできてるから。

 

特に、自然界にあるものは、強く調和を感じるようにできているそうです。

その証拠に、今回では紹介していませんが、色の組み合わせテクニックに「ナチュラル・ハーモニー」と呼ばれるものがあります。

 

今回は割愛しますが、自然界の色法則にそった、組み合わせテクニックです。

気になる方はぜひ調べてみてください。

 

 

まずは、自分の好みに合う、秀逸な写真を用意することが、最初のステップです。

 

２：Photoshopの「フィルターギャラリー」で、色を抽出する。

 

「フィルターギャラリー」→「テクスチャ」→「ステンドグラス」→「セルの大きさ」の順で抽出できます。

 

上の手順で作業をすると、こんなかんじで、メインの色情報がシェイプされて出力されます。

 

 

色の組み合わせ量をもっと多くしたい方は、「セルの大きさ」を小さくすれば調整できます。

 

 

最後に、jpgなどで保存し、Illustratorのスポイト機能で色情報を抜き取れば、作業完了です。

かなり簡単にできますね。

 

 

手元に、色の組み合わせサンプルがなかったり、オリジナルの色配分を作りたい方は、わりとおすすめです。

色の組み合わせのアイデアに困ったら、ぜひ試してみてくださいね。

 

４：色の組み合わせに便利な、配色WEBサービスを紹介【デザインに活きる】

 

組み合わせになれてきたり、手っ取り早く配色したい方は、下のWEBサービスを利用すると便利です。

全部で5個紹介します。

 

WEBサービス１：色の組み合わせを素早く知れる。

 

＞【HUE /360】

右側のカラーチップをクリックすると、自動で、相性の良い色を表示してくれます。

まだ色の組み合わせ方に自身がない人や、手っ取り早く色の組み合わせを知りたい方は、とてもおすすめです。

ビギナー向けのサイトですね。

 

WEBサービス２：カラーパレットが毎日更新されているWEBサービス。

 

＞【ColorHunt】

相性の良い組み合わせが、カラーパレットでそろっているWEBサイトです。

ここのサイトの特徴は、毎日、新規のカラーパレットが更新されている点。

色のアイデアに困っている方は、参考になるサイトです。

 

WEBサービス３：雑誌に使われている、色の組み合わせを教えてくれる。

 

＞【Color of Book】

ここのサイトの特徴は、雑誌に使用されている色情報を抽出し、教えてくれるところ。

世の中に販売されている雑誌は、一流のプロが制作しているので、組み合わせを色情報で知れるのは、とても勉強になります。

 

WEBサービス４：グラデーションを、自動生成してくれるサイト。

 

＞【shade】

僕が一番気に入っているサイトです。

ここのサイトの特徴は、下のバーを調整することで、自動でグラーデーションを生成してくれるところ。

デザイン歴が長くなると、変わった色の組み合わせをしたくなりますが、このサイトはそれを実現してくれます。

 

WEBサービス５：相性の良い、色の組み合わせを、ランダムで自動生成。

 

＞【COOLORS】

画面をクリックすると、自動で、ランダムに相性の良い色の組み合わせを生成してくれます。

ちょっと使い勝手が悪そうですが、何も考えずにクリックすると、面白い組み合わせを表示してくれる場合も。

色のアイデア探しにお役立てください。

 

６：まとめ

 

というわけで今回は以上です。

色を組み合わせるコツは、今回紹介したように、軸となる配色方法を数パターン持っておくことです。

 

時間やスキルに余裕ができたときに、少しずつ組み合わせパターンを増やしていけば、効率よくアイデアの引き出しを増やしていけますよ。

 

Design is easy!

 

【おまけ】困った時のデザイン知識を、さりげなくお届け中(｀･ω･´)ゞ

「デザインのコツ。」の最新記事をお届けしています。

アイデアに困った時や息抜きなど、デザインのお仕事中にこっそりみてくれるとうれしいです(｀･ω･´)ゞ

 

■PCで見ているデザイナーさま

1秒でできます。

黄色い枠のボタンをクリックだけで終了です(｀･ω･´)ゞ

こちらのリンクからじゃんぷ！

 

■スマホで見てるデザイナーさま

10秒でできます。

こちらのリンクからじゃんぷ！

Safariが起動するので、「購読用アプリをダウンロード」をクリック。

「開く」をクリックしてダウンロード。

「Push7 アプリで購読」をクリックして完了！

これからも「デザインのコツ。」をよろしくお願いいたします(｀･ω･´)ゞ