カラーパレットとは？どうしてカラーパレットを作るのは難しい？
カラーパレットとは、デザインに使われる配色のことです。配色の基本は、ベースカラーとアクセントカラーの2色の組み合わせや、それにアソートカラーを組み合わせた3色です。この3色の組み合わせやバランスは、色相環やトーンマップを用いた色彩理論である程度導くことができます。しかし、3色以上の組み合わせとなるとテーマやそれぞれの色のバランスなどを調整する必要が出てくるため、途端に難しくなります。そこで、基本の色がいくつか決まったら、その色に合わせて最適な配色を提案してくれるカラーパレットツールを使うのも一つの手です。もちろん、全自動で全ての色を提案してもらうこともできるため、ノンデザイナーであってもプレゼンテーションや資料の配色に困ったときなど、使えるタイミングは多くあります。
カラーパレットツールはどうやって色を提案している？
数あるカラーパレットツールですが、配色の生成はどのように行なっているのでしょうか？もちろん、完全にランダムに色を表示している訳ではありません。カラーパレットツールは、色彩理論に基づいて様々なタイプの組み合わせを自動生成しています。例えば、ベースカラーと補色の組み合わせに、ベースカラー寄りの2色を加えた4色などです。今回紹介するツールの中でもCoolorsとMuzli Colorsは、この自動生成のタイプを選ぶこともできるため、細かく方向性を指定しながらも様々なカラーパレットを試したいデザイナーにもお薦めです。
カラーパレットツールおすすめランキング
1. Coolors | 万能かつ使いやすい海外でも大人気のカラーパレットツール！
デザイナーが普段使いしたいと思うカラーパレットツールにはいくつか必須の機能があります。
指定した色をもとにカラーパレットを提案してほしい。
反対色や補色など、色の組み合わせの種類を選びたい。
それぞれの色の明度のバランスを確認したい。
カラーパレットの相対的な関係を保ったまま、色相・彩度・明度を微調整したい。
これらをシンプルなUIで実現してくれるのが、Coolorsです。
スペースキーを押すとどんどん異なるカラーパレットを提案してくれるので、全自動でカラーパレットを生成したい時にも使えます。気に入った色があればロックアイコンでその色を固定して、他の色を再度生成することもできます。また、どんどんカラーパレットを生成しているときに気に入ったものがあったけど飛ばしてしまった、、なんて時も安心。「戻る」ボタンでひとつ前の色にすぐ戻ることができます。
2. Muzli Colors | カラーパレットがUIデザイン上でどのように使えるのかサンプル付きで表示してくれるUIデザイナー向けのカラーパレット
Muzli Colorsもその他多くのカラーパレットツールと同様、基準となる色と配色の種類を選ぶことでカラーパレットを自動生成してくれます。しかし、Muzli Colorsには「生成したカラーパレットを実際のUIデザインに当てはめた形で表示してくれる」という強力な機能があります。これがあると、デザイナー自身にとって、カラーパレットをデザインに反映した際の具体的なイメージが湧きやすいだけではなく、チームメンバーやクライアントとのディスカッションの際にも具体的なUIデザインに反映された形を見ながらカラーパレットを探索、調整できるため大変便利です。
3. Hello Color | ノンデザイナーにもおすすめのバイカラー自動生成ツール
デザイナーでさえ配色にはいつも悩まされているとなれば、ノンデザイナーにとっては「カラーパレットツール」を使っても難しいなんてこともあるのでは？ノンデザイナーが配色を綺麗にまとめるためのコツは一つ、「色を少なくすること」です。Hello Colorは画面をクリックするだけで2色の配色を提案してくれます。バイカラーをうまく使った表現を行うSpotifyのヴィジュアルデザインなどを参考に、2色での配色を試してみてはいかがでしょうか？どうしてももう一色欲しい時には、ページをスクロールするとメインの2色に合う他の色も表示してくれるので安心です。
実例や人気のカラーパレットから検索。キュレ ーション系カラーパレットツール
ここまで紹介したカラーパレットツールは、カラーパレットを自動生成してくれるものでした。カラーパレットツールは、色彩理論にもとづいてカラーパレットを生成してくれるため、ある程度まとまりのある配色を得ることができます。しかし、実際のデザインの現場などでは、人の手によって多くの微調整を行なった上でカラーパレットを完成させることが多いです。このような「人間の手によって作られたカラーパレット」を参考にすることもカラーパレットを考えるときの大きなヒントとなります。ここからは、他のデザイナーやブランドが作ったカラーパレットを見ることができるキュレーションサイトをいくつか紹介します。
1. Color Hunt | ユーザーによって投稿・評価されたカラーパレットをキュレーション
Color Huntはユーザーによって投稿されたカラーパレットを、他のユーザーからの評価と一緒に見ることのできるサイトです。他のデザイナーから評価を集めるカラーパレットとはどのようなものなのか、眺めているだけでも勉強になります。左のサイドバーにはタグの一覧もあり、ネオン、レトロ、ヴィンテージなどのコンセプトからカラーパレットの検索をすることもできます。
2. BrandColors | さまざまなブランドのカラーパレットを紹介するWebサイト
BrandColorsは、その名の通りさまざまなブランドのカラーパレットを紹介するサイトです。有名ブランドのカラーパレットは、プロのブランドデザイナーにより多くの時間をかけて作られたものです。それぞれのカラーパレットから「Brand URL」を選択して、実際にそれぞれのブランドでカラーパレットをどのように使っているのか見てみても面白いです。
3. Color Lisa | 有名アーティストの絵画のカラーパレットを紹介するWebサイト
Color Lisaは、有名絵画のカラーパレットを紹介するという一風変わったサイトです。デザインにおいてもアートにおいても、色彩理論の効果は同じであるため世界的なアーティストによる絵画のカラーパレットは与えたい印象や雰囲気をもとにデザインをする際には大変役立ちます。また、アクセントカラーの使い方などにも多くのヒントを与えてくれます。
Figma上でカラーパレットを生成できるプラグイン『Color wheel palette generator』
今回紹介したカラーパレットツールの他にも、Figmaのプラグイン『Color wheel palette generator』では、色相環上で表現できる色の理論に基づいた6種類のパレットタイプを選択してカラーパレットを生成することができます。パレットタイプを選択してから明度を調整することで目的にあった簡単にカラーパレットをFigma内でさまざま試すことができるのが特徴です。
まとめ
今回は、デザイナーもノンデザイナーも実務で使えるカラーパレットツールを厳選して紹介しました。表現したいコンセプトに合わせてカラーパレットを作れるようになるには、色彩理論を理解した上で多くの配色を分析することが大切です。今回紹介したツールは、必要な範囲で自分で調整や色の指定をすることもできるため、色の感覚を身につけるためにも大変役に立ちます。また、後半のカラーパレットのキュレーションサイトは見ているだけでも楽しく、自分の好みのカラーパレットをストックしておくためにも良い参考資料となります。別の記事では、色彩理論の基礎についてもわかりやすく解説していますので、ぜひそちらも参考にしてみてください。
