色の勉強をしたけど、組み合わせ方がわからない人へ。
「勉強したはいいものの、実際の組み合わせ手順が分からない」
「色の組み合わせ方が、うまくなる方法を知りたい」
「自分オリジナルの、組み合わせパターンを作りたい」
「色の組み合わせの参考になる、デザインサイトを知りたい」
こんな悩みを解決していきます。
※この記事は3分くらいで読み終わります。
読み終える頃には、色の組み合わせ方とコツが理解できます(｀･ω･´)ゞ
本記事の内容
１：3分で配色できる、色の組み合わせ方法を紹介【デザイン力UP】
２：色の組み合わせ方が上達する、配色の練習方法【デザインで練習】
３：自分オリジナルの、色の組み合わせパターンの作り方【デザインの配色アイデア】
４：色の組み合わせに便利な、配色WEBサービスを紹介【デザインに活きる】
こんにちは！takaです。
グラフィックデザイナー・クリエイティブディレクター歴12年。
毎月40～50万くらい稼ぎつつ、フリーランスとして生きてます。
今回は、「色の組み合わせ方」について。
僕は昔、色の組み合わせ方といえば、Illustrator内の「あり物のスウォッチ」ばかり使っており、イチから自分で組み合わせパターンを作ることがきませんでした。
今考えると、できなかった原因はシンプルで、「勉強したはいいものの、実際の組み合わせ手順が分からなかった」という理由でした。
実は、世の中に販売している教養本の多くは、明度やら彩度など、言葉や原理にばかり触れていて、「実務でどう組み合わせればいいか」を、あまり教えてくれません。
今回は、これまでの経験を踏まえながら、「ビギナーの方でも簡単に、色を組み合わせられる方法」をレクチャーしていきます。
※補足：この記事は、数ある配色方法の中でも、ビギナーの方が、かんたんに組み合わせできる方法をピックアップしています。
デザイン上級者の方は、あまり参考にならないので、あらかじめご了承ください(｀･ω･´)ゞ
１：3分で配色できる、色の組み合わせ方法を紹介【デザイン力UP】
色を組み合わせる方法は、とてもシンプル。
次の手順で、色を組み合わせればいいだけ。
１：色の組み合わせ表を用意する。
↓
２：6パターンある、色の組み合わせ方法から、ひとつ選ぶ。
↓
３：組み合わせ方法にそって、色をおく。
たったこれだけです。
とてもシンプルですね。
ひとつずつ解説します。
方法1：色の組み合わせ表を用意する。
使う表はこんなやつ。
たぶん、一度は見たことがある人も多いかと。
この表は「ヒュートーン システム」といって、日本色彩研究所が作った便利ツールです。
色の組み合わせを容易に行えるように考えられ作られています。
詳しい説明は長くなるので割愛しますが、はじめのうちはこれをベースに色を組み合わせればOKです。
※ヒュートーンシステムのことを詳しく知りたい方はこちらへどうぞ。
まずは、この表を手元に準備することが、最初のステップです。
方法２：6パターンある、色の組み合わせ方法から、ひとつ選ぶ。
ヒュートーン システムを使って色を組み合わせる方法は、つぎの６つ。
１：「使いたいメインカラー１色」+「白か黒」
２：「使いたいメインカラー１色」+「左右いずれかの、2つとなりの色1つ」
３：「使いたいメインカラー１色」+「左右いずれかの、4つとなりの色1つ」
４：「使いたいメインカラー１色」+「反対側の色」
５：「使いたいメインカラー１色」+「三角形の場所にある色、計3つ」
６：「使いたいメインカラーと、おなじ場所にある16色」
図と例に表すと、下のようなこんな感じになります。
１：「使いたいメインカラー１色」+「白か黒」
例）使いたいメインカラーを、「ヴィヴィッドトーン／#E60012」にしたいのであれば、こんな感じになります。
※使いたい色は、表の中のものであれば、なんでもOKです。
２：「使いたいメインカラー１色」+「左右いずれかの、2つとなりの色１つ」
例）使いたいメインカラーを、「ブライトトーン／#EA5532」にしたいのであれば、こんな感じになります。
組み合わせる色は、左右どちらかの１色を選びましょう。
３：「使いたいメインカラー１色」+「左右いずれかの、4つとなりの色１つ」
例）使いたいメインカラーを、「ライトトーン／#EF845C」にしたいのであれば、こんな感じになります。
組み合わせる色は、左右どちらかの１色を選びましょう。
４：「使いたいメインカラー１色」+「反対側の色」
例）使いたいメインカラーを、「ペールトーン／#F5B090」にしたいのであれば、こんな感じになります。
５：「使いたいメインカラー１色」+「三角形の場所にある色」
例）使いたいメインカラーを、「ベリーペールトーン／#FBDAC8にしたいのであれば、こんな感じになります。
なお、三角形のパターンはことりあえず3パターンを覚えておけばOKです。
６：「使いたいメインカラーと、おなじ場所にある16色」
例）使いたいメインカラーを、「ヴィヴィッドトーン／#E60012」にしたいのであれば、こんな感じになります。
そして、これらを使う基準は、「使いたい色の数」によって変わります。
１：１色だけ使うとき→「使いたいメインカラー１色」+「白か黒」
２：２色使うとき→「使いたいメインカラー１色」+「左右いずれかの、2つとなりの色１つ」
３：２色使うとき→「使いたいメインカラー１色」+「左右いずれかの、4つとなりの色１つ」
４：２色使うとき→「使いたいメインカラー１色」+「反対側の色」
５：３色使うとき→「使いたいメインカラー１色」+「三角形の場所にある色」
６：同じ色味しか使えないとき→「使いたいメインカラーと、おなじ場所にある16色」
簡単ですね。
色を組み合わせる方法は、数多くありますが、とりあえずこのパターンを押さえておけばOKです。
✔︎【補足】6つのパターンが、相性がいい理由とは。
短かく、シンプルに言います。
１：「使いたいメインカラー１色」+「白か黒」
→白と黒は主張しない色。そのため、メインカラーだけが引もっとも際立つから、相性がいい。
２：「使いたいメインカラー１色」+「左右いずれかの、2つとなりの色１つ」
→メインカラーと同系色だから、相性がいい。（１つとなりだと、色味が近すぎてNG）
３：「使いたいメインカラー１色」+「左右いずれかの、4つとなりの色１つ」
→色にメリハリがでるから、相性がいい。
４：「使いたいメインカラー１色」+「反対側の色」
→色にもっとも、メリハリがでるから、相性がいい。
５：「使いたいメインカラー１色」+「三角形の場所にある色」
→色空間の中で、規則性を持たせた組み合わせだから、相性がいい。
６：「使いたいメインカラーと、おなじ場所にある16色」
→同じ色の仲間だから、まとまりができて、相性がいい。
こんな感じです。
もっと詳しく知りたい方は、ググれば説明記事はたくさんでてきます。
ただし、少し理論的な話になってきて、内容が難しくなってくるので、ビギナーの方はこれくらいの知識量でまずはいいかと。
まずはこの６パターンを覚えて身につけるのをおすすめします。
方法３：組み合わせ方法にそって、色をおく。
これまで解説した２つにそって、カラーコードを入力すれば完成です。
カラーコードはこちらのサイトで紹介されています。
ちなみに、色には「印刷用のCMYKカラー」と「WEB用のRGB カラー」の2種類があるので、コード入力の際はご注意を。
今回の組み合わせ方法は、ずっと使えるテクニックなので、明日からぜひご活用ください(｀･ω･´)ゞ
２：色の組み合わせ方が上達する、配色の練習方法【デザインで練習】
上達方法は、とてもシンプルです。
普段の業務で、つぎのことをやればいいだけ。
とてもかんたんです。
上達する理由もシンプル。
実は、最初に白黒でデザインし、最後に色を配置すると、配分ボリュームをコントロールしやすくなり、結果、見栄えがぐんとよくなります。
配分ボリュームについても、少し解説しておきます。
解説：配分ボリュームは、「お寿司」のイメージで。
色には３つの種類があり、お寿司のイメージで配分すれば、ぐんと見栄えがよくなります。
色の種類は次のとおり。
・ベースカラー：余白や背景に使う色。白やグレーなど。
・サブカラー：主役にしたい色。
・アクセントカラー：ことばの通り、アクセントにしたい色。
お寿司に当てはめるとこんなかんじ。
・ベースカラー→シャリ
・サブカラー→ネタ
・アクセントカラー→わさび
こんなイメージです。
きちんと数値化すると「70%：25%：5%」の割合ですね。
下の図の感じです。
ちなみに、この配分ボリュームは、ファッションやインテリアなどにも活かすことができます。
普段の生活でも、かなり役に立つ知識なので、いろんなシーンでお試しを。
３：自分オリジナルの、色の組み合わせパターンの作り方【デザインの配色アイデア】
もうワンランク上の配色をしたい方は、次の方法で、色の組み合わせを作ることができます。
抽出すると、こんな感じで色情報を取りだすことができます。
この方法を使えば、２ステップかつ、２～３分で色を抽出することができます。
順をおって解説します。
１：自分の好みにあう、秀逸な写真を用意する。
まずは、写真を用意しましょう。
僕が普段使う画像サイトはこちらです。
海外のサイトですが、かなり秀逸な写真がそろっています。
今回はこちらの「海」の写真を選びました。
青のグラデーションがきれいな写真ですね。
ちなみに、色を抽出するときは、「自然の風景」がもっとも、色の組み合わせが良いとされます。
理由は簡単で、人間の目は、見慣れたものに対し、調和を感じるようにできてるから。
特に、自然界にあるものは、強く調和を感じるようにできているそうです。
その証拠に、今回では紹介していませんが、色の組み合わせテクニックに「ナチュラル・ハーモニー」と呼ばれるものがあります。
今回は割愛しますが、自然界の色法則にそった、組み合わせテクニックです。
気になる方はぜひ調べてみてください。
まずは、自分の好みに合う、秀逸な写真を用意することが、最初のステップです。
２：Photoshopの「フィルターギャラリー」で、色を抽出する。
「フィルターギャラリー」→「テクスチャ」→「ステンドグラス」→「セルの大きさ」の順で抽出できます。
上の手順で作業をすると、こんなかんじで、メインの色情報がシェイプされて出力されます。
色の組み合わせ量をもっと多くしたい方は、「セルの大きさ」を小さくすれば調整できます。
最後に、jpgなどで保存し、Illustratorのスポイト機能で色情報を抜き取れば、作業完了です。
かなり簡単にできますね。
手元に、色の組み合わせサンプルがなかったり、オリジナルの色配分を作りたい方は、わりとおすすめです。
色の組み合わせのアイデアに困ったら、ぜひ試してみてくださいね。
✔︎LINEからかんたんに、質問・相談を送れるようになりました。
この度デザインのコツでは、
「LINE＠公式アカウント」を取得しました。
個別にメッセージが送れるサービスです。
やりとりの内容は、他の人から見れないようになっています。
また、やりとりの開始は僕側からメッセージを送れない仕組みになっていますので、安心してメッセージをお送りください。
今後とも、デザインのコツをよろしくお願いいたします。
４：色の組み合わせに便利な、配色WEBサービスを紹介【デザインに活きる】
組み合わせになれてきたり、手っ取り早く配色したい方は、下のWEBサービスを利用すると便利です。
全部で5個紹介します。
WEBサービス１：色の組み合わせを素早く知れる。
＞【HUE /360】
右側のカラーチップをクリックすると、自動で、相性の良い色を表示してくれます。
まだ色の組み合わせ方に自身がない人や、手っ取り早く色の組み合わせを知りたい方は、とてもおすすめです。
ビギナー向けのサイトですね。
WEBサービス２：カラーパレットが毎日更新されているWEBサービス。
相性の良い組み合わせが、カラーパレットでそろっているWEBサイトです。
ここのサイトの特徴は、毎日、新規のカラーパレットが更新されている点。
色のアイデアに困っている方は、参考になるサイトです。
WEBサービス３：雑誌に使われている、色の組み合わせを教えてくれる。
＞【Color of Book】
ここのサイトの特徴は、雑誌に使用されている色情報を抽出し、教えてくれるところ。
世の中に販売されている雑誌は、一流のプロが制作しているので、組み合わせを色情報で知れるのは、とても勉強になります。
WEBサービス４：グラデーションを、自動生成してくれるサイト。
＞【shade】
僕が一番気に入っているサイトです。
ここのサイトの特徴は、下のバーを調整することで、自動でグラーデーションを生成してくれるところ。
デザイン歴が長くなると、変わった色の組み合わせをしたくなりますが、このサイトはそれを実現してくれます。
WEBサービス５：相性の良い、色の組み合わせを、ランダムで自動生成。
画面をクリックすると、自動で、ランダムに相性の良い色の組み合わせを生成してくれます。
ちょっと使い勝手が悪そうですが、何も考えずにクリックすると、面白い組み合わせを表示してくれる場合も。
色のアイデア探しにお役立てください。
６：まとめ
というわけで今回は以上です。
色を組み合わせるコツは、今回紹介したように、軸となる配色方法を数パターン持っておくことです。
時間やスキルに余裕ができたときに、少しずつ組み合わせパターンを増やしていけば、効率よくアイデアの引き出しを増やしていけますよ。
Design is easy!
最新記事 by 管理人｜taka（たか）＠オールラウンドデザイナー (全て見る)
- 【最小限の努力で、プロの力を手に入れる｜超最速 レイアウト術】有料note公開のお知らせ。 - 2020年2月7日
- 【裏ワザあり】誰も教えてくれない「デザインの正しい勉強方法」を紹介【月20万円稼げる】 - 2020年1月14日
- 【受講者募集】マンツーマン型 webデザイナー育成プログラムを開始します。 - 2019年12月14日