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


最新記事 by Owner|taka (全て見る)
- 【欲しいものは自分で手に入れる】独学スキルを身につけたら、人生が楽しくなった話。【体験談】 - 2020年9月20日
- 【自分の身を守ろう】デザイン契約書に載せるべき留意点を紹介。【winwinにしよう】 - 2020年9月18日
- 独学でデザイナーになるには、まずは現場に飛び込めば解決する話。【体験済み】 - 2020年9月16日