あなたは色を決める時、どのように検討を重ねているでしょうか。そして何を決め手に最終的な配色を決定しますか？この記事では配色を検討する時に便利なツールとなんか垢ぬけない印象の配色となってしまいがちな理由について書いていきます。日々のヒントとして参考にしていただけたら嬉しく思います。
カラーパレットから選んでいる色は本当の色？
ウェブデザインをしているとよく色を英数字、記号で表現することがありますが、色を数値や記号で表す方法は混色系（※1）と顕色（けんしょく）系（※2）の2つの種類があります。
- （※1）混色系
- 混色は、色や光の三原色が混ぜあわせることで表現されたもの。RGBやCMK、XYZなどがこれにあたる。数学的に扱いやすいので機械が使うのに適したもの
- （※2）顕色（けんしょく）系
- 人間の知覚に近いかたちで色を配置したもの。色相、彩度、明度で表現される。マンセル、PCCS表色系。人間が色の組み合わせを想像するのに適したもの
Photoshopなど画像編集ソフトを用いてデザインを行う時によく使用するカラーパレット、それは混色系で表示されていることが多く、人間的にはしっくりくるものが選択しにくいという可能性を秘めています。顕色系をベースにした色相、彩度、明度から色をチョイスするということをあまりしたことが無いという方もおられるかもしれませんが、顕色系をベースとした方が人間的にはしっくりくる色を選択できる可能性が高いようです。
「もう少し明るい赤にして」「もうちょっと暗めの緑にして」というのを叶えるのが顕色系の考えです。洋服を買いに行った時の色選びを想像するとしっくりくるのではないでしょうか。なかなか三原色から服を選ぶということはせずに、「色はこの赤でいいんだけど、もうちょっと明るい色は～」と商品を探していると思います。
色についてアレコレ語ると長くなってしまうので要点に行きますが、ウェブサイトの色を考えるとき、よくあるカラーパレット上で色を選択していると以下のような要素によりイマイチなデキに近づきます。前出した顕色系でなく混色系で選択しているから。そのクリエイティブを情報として受け取る人間にしっくりこないということが原因と思われます。
- 10進数、16進数で考えてしまう
- 色相、彩度、明度（顕色系）で色を決めていない
- RGB色空間（※3）の影響で彩度が高めになりがち
- （※3）色空間
- ある特定の色を、数値などのパラメーターで表したもの。
良い感じに配色を決めるためには、自分の感覚に頼るよりもまず先人の知恵、配色理論を活用しましょう。この記事では話をややこしくするよりも「良い感じの配色ができるようになる」ことを目的にしたいので理論については省略をしますが、有名どころでは以下のような理論があります。興味がわいた方は調べてみてください。要・不要はおいておいても理論に基づくことで感覚のブレを少なくすることはできます。自分の感覚を言語化することも理論があれば可能になります。センスの良いかたはすでに取り入れている考えが実は理論だっていた。という事実に気づくことも面白いことです。理論を理解してその理論から敢えて外すという高度なテクニックも可能になります。
- ジャッドの色彩調和の原理
- ムーン&スペンサーの色彩調和論
- シュヴリュールの色彩調和論
- オストワルトの色彩調和論
世の中にはありがたいことに、とても便利なツールが既にたくさん産み出されています。前出の理論についても考えが取り入れられたツールたちですので、一切理論が分からなくてもその恩恵を受けることができます。開発者に感謝をしつつ、ツールのメリットを存分にコンテンツに、クリエイティブに活かしていきましょう。妙味のある配色を狙っている時のコツは画面から色を選択しようと思わないこと。表現したい感覚を頭に思い浮かべて。その感覚に近い色を選び取り、画面の発色に惑わされないよう彩度を抑えることです。
配色をアシストしてくれるカラーツール
ランダムに色を生成「coolors」
スペースキーを押すだけでランダムにカラーパレットが生成されるツール。メインとなる色を固定して色調、彩度、明度のパラメータを変更してカラーバランスを見ることができます。自分のデザインにある癖を感じている人にとって、一部ランダムの機能を使うことで型を守りつつも壊すために使うことができます。
「AdobecolorCC」
カラーホイール上の色を選択することで直感的に色の組み合わせを試せすことができる。同名のスマホアプリも存在しています。このスマホアプリがなかなか面白く、カメラのレンズを向けた場所から色をピックアップ。そこから配色を導き出すことができるので、出向いた先でのクライアントワークでデザインの提案をする時に重宝します。お客様のチラシ、カタログなどのメインカラーから配色を導くと良いでしょう。
自動でカラーパレットを整えてくれる「PALX」
CSS、JSON、Saasでも利用しやすいカラーパレットを取得可能。直感で使えるので色選びに悩んでいる時におススメです。
シンプルに色を探せる「HUE/360」
色相、彩度、明度を直感的に操作しつつ、色の組み合わせが試せるサービス。手始めに一つのカラーを選ぶと選択肢がどんどん狭まって相性の良い色を選択するしかなくなるツール。メインのカラーを1つ選んで、もう一つ類似色から選択、その向こう側（補色から）から3つ目と3色選べばいい感じのメイン、ベース、アクセントカラーを選定できます。
色の組み合わせをカード感覚で「配色の見本帳」
ベースカラーの色を選択することで、その色の成分情報やカラーパターンを検索することができるサイト。配色技法に則った色の組み合わせを提案してくれます。こちらのツールは駆け出しのデザイナーが勉強をするという意味ではとても有効なツールだと感じます。
色、配色の研究、学びを産むカラーツール
クリエイターと作品と色「Behance」
条件選択からクリエイターのポートフォリオを閲覧検索することができるサービスです。自分が悩んでいる色を軸に検索をしてみると世界中のクリエイターの作品が刺激を与えてくれます。
選択した配色の写真を探してくれる「TinEye」
選択した色合いの画像を画像検索の中から表示させてくれる。色合い通りのフリー素材を探したり自然に存在しうる色合いを探したりすることができます。
日本の伝統色を知る、使う「NIPPONCOLORS」
日本に古くから存在する色（伝統色）を調べることができるサイト。色を選択するとダイナミックに変化する画面を見るのも楽しいのですが、杜若、白鼠、撫子など日本古来の色を知ることができます。色の名前をクリックすると、画面が選択した色に変化すると供にRGB、CMYKの各、カラーコードを教えてくれます。Webデザインだけでなく、伝統色の名前って面白いと思いませんか？この漢字の組み合わせでこう読むんだ…と勉強にもなります。和のサイトを作るときでしたらここからメインカラーを持っていくことが多いです。
サイトの配色は？「Stylify Me」
ウェブサイトのURLを入力することでそのサイトで使われている色を分析して表示してくれます。自分がカッコイイと思ったサイトのURLを入れてどんな色が使われているのか調べると良いでしょう。
サイトやページ内のカラーコードを取得できる「ColorZilla」
Chromeの拡張機能です。別記事で詳しく解説していますが、サイトやページ内のカラーコードをピンポイントで抽出・取得できます。参考にしたいカラーを見つけたら、ぜひ使ってみてください。
フラットデザインに特化した「Flat UI Colors」
ワンクリックで色番号をコピーしてくれるフラットデザインに特化したカラーパレット。フラットデザインのウェブサイトやアプリの開発時に役に立つのではないでしょうか。
色の検索に優れた「ColorHexa」
色の百科事典。検索欄に色名やカラーコードを入力することで、色に関する様々な情報を受け取ることができます。
ランダムなカラーパレットが日々更新「ColorHunt」
毎日1つのカラーパレットが投稿されるサイトを眺めているだけでも刺激になるような奇抜な色合いから絶対自分が選ばないような色合いまでさまざま。ユーザーの「いいね！」の数からも人気の度合いみたいなものが分かるので一つの参考になりますね。
まとめ
ツールのよいところは時に狙い通りに、時にランダムに、人間に、脳に指示をしても実現できない精度と速度で情報を提供してくれるところにあると思います。ツールを使う上で忘れてはいけないことがあります。カラーツールがこの組み合わせだと言っていることを一度自分の価値観で疑うことです。ツールのはじき出す答えは誰がやっても同じ答えなわけです。ツールを使いこなすということは、あなたの価値、感覚をベースに思考やクリエイティブを加速させることができる状態を指します。いくつかのツールを紹介しましたが、この記事をきっかけに1つでもつかいこなせるツールに出会えたら嬉しく思います。あなたのクリエイティブの一助となりますように。
