ウェブサイトやパッケージデザインの色を決めるのって、苦労しますよね。
あなたは色を決める時、どのように検討を重ねているでしょうか。そして何を決め手に最終的な配色を決定しますか？
色は決めるのは簡単ですが、どの色にするかで印象は大きく変わってきます。
この記事ではそんな配色選びをスムーズにするためのカラーツールをご紹介します。筆者も色を選ぶ時には参考にします。日々のヒントとして参考にしていただけたら嬉しく思います。
目次
カラーツールを使うメリット
自分の感性から色を選ぶことも大事ですが、それ以外の選択肢を持つことができるのもカラーツールの良さ。熟練のデザイナーでもカラーツールを使う理由を以下にご紹介します。
創造の幅を広げる
ウェブサイトやイラストのデザインを考える際、自分の既知の範囲で配色を選びがちです。それを取っ払ってくれるのがカラーツールの良いところ。
「紫を滅多に使わないけど、こんな使い方があるんだ」
といった気づきで、自分のセンスをひとつ上に上げてくれる可能性もあります。
日本人と外国人とでは、色の捉え方や使い方だけでなく、見え方も異なります。ゆえに、その殻を破るのにもカラーツールは使えます。
自分では想像もつかない配色パターンが得られる
たとえば、「IKEA」のようにロゴに青と黄色を組み合わせるパターンを日本人は思いつかない。
日本人は黄色を「注意（Attention）」の意味で使いますが、ヨーロッパではおしゃれな色としてロゴ・イラスト・インテリアデザインに使われます。黄色をうまく取り入れることで、海外っぽさは表現しやすくなります。
感性の違いを埋めてくれるのにもカラーツールは役立つことがあります。
時短になる
シンプルに「時短になる」という理由があります。
一から配色を決める際は、Photoshopのカラーパレットであれこれ試すよりも、カラーツールで試していった方が完成イメージが想像しやすく、ツール側からの提案ももらえるので、使ったほうが早く望みの色にたどり着けるというのがあります。
既にメインカラーだけでも決まっていればいいですが、一から考える際にはカラーツールの方が便利です。
配色の参考になるカラーツールまとめ
Webデザインで使うメインカラーや配色パターンを決める時の判断材料の幅を広げてくれる、カラーツールをご紹介します（おすすめ順に紹介しています）。
Huemint
「Huemint」は、スタイリッシュな配色パターンが得られるカラーツール。ウェブサイトやイラストなどの見本から選べるので、イメージが湧きやすいです。
ColorSpace
メインカラーを入力すると、おすすめの配色パターンが生成される「ColorSpace」。海外っぽい配色パターンを生成するには最適です。
Adobe Color
カラーホイール上の色を選択することで直感的に色の組み合わせを試せすことができる。同名のスマホアプリも存在しています。このスマホアプリがなかなか面白く、カメラのレンズを向けた場所から色をピックアップ。そこから配色を導き出すことができるので、出向いた先でのクライアントワークでデザインの提案をする時に重宝します。お客様のチラシ、カタログなどのメインカラーから配色を導くと良いでしょう。
PaletteMaker
「PaletteMaker」は、ウェブサイト、管理画面UI、イラストなどの見本を元に、おすすめの配色パターンを適用できるカラーツール。イケてる配色パターンを見る際には、かなり使えますね。
SchemeColor.com
「SchemeColor.com」は、膨大なパターンの配色が試せるツール。サイトやUI、イラスト、写真を見本に配色を試せるようになっています。
Colormind
Colormindは、配色パターンを無限に生成できるカラーツール。シックで合わせやすいカラーパターンが多いです。
ColorDrop
AIによる配色生成ツール「ColorDrop」。これまで他の人が生成した配色パターンも閲覧できるようになっています。
HUE/360
色相、彩度、明度を直感的に操作しつつ、色の組み合わせが試せるサービス。メインのカラーを1つ選び、その後は提案される配色から選んで、組み合わせを試すことができます。
coolors
スペースキーを押すだけでランダムにカラーパレットが生成されるツール。メインとなる色を固定して色調、彩度、明度のパラメータを変更してカラーバランスを見ることができます。自分のデザインにある癖を感じている人にとって、一部ランダムの機能を使うことで型を守りつつも壊すために使うことができます。
Happy Hues
海外っぽい、かわいい配色パターンを実際のウェブサイトを見ながら選べるツール。好みの配色パターンが見つかれば良いですね。
NIPPONCOLORS
日本に古くから存在する色（伝統色）を調べることができるサイト。色を選択するとダイナミックに変化する画面を見るのも楽しいのですが、杜若、白鼠、撫子など日本古来の色を知ることができます。
和のウェブサイトやパッケージデザインを制作する際に役立ちます。
配色の見本帳
ベースカラーの色を選択することで、その色の成分情報やカラーパターンを検索することができるサイト。配色技法に則った色の組み合わせを提案してくれます。こちらのツールは駆け出しのデザイナーが勉強をするという意味ではとても有効なツールだと感じます。
ColorHunt
毎日1つのカラーパレットが投稿されるサイトを眺めているだけでも刺激になるような奇抜な色合いから絶対自分が選ばないような色合いまでさまざま。ユーザーの「いいね！」の数からも人気の度合いみたいなものが分かるので一つの参考になりますね。
Flat UI Colors
フラットデザインに適した色を探すのに役立つツール。好きな色をサッとここから探すのも良いかもしれません（配色を試せるツールではない）。ワンクリックでカラーコードがコピーできます。
Gradient
Gradientは、おすすめのグラデーションの配色パターンを生成できるツール。「これだ！」と思ったパターンを探してみてください。
PALX
CSS、JSON、Saasでも利用しやすいカラーパレットを取得可能。直感で使えるので色選びに悩んでいる時におススメです。
配色パターンの発想を広げるツール
配色ツールを13個紹介しました。
これらの配色ツールは、自分の頭にない配色パターンをインストールできるのが最大のメリットです。特に海外のツールは、私たち日本人には思い浮かばない配色パターンを教えてくれる。
配色パターンが広がれば、デザインの幅も広がります。
この記事をきっかけに少しでもあなたのクリエイティブの一助となれば幸いです。
Webデザインやサイト制作時に配色に困ることってありませんか？ かっこいいデザインや配色が綺麗なサイトを参考にすることもあると思います。そこで今回は、WEB上から簡単にサイトのカラーコードを取得できるChromeの拡張機能をご紹介いたします。 「ColorZilla」の機...
WordPressテーマ集
