こんにちは、フロントエンドエンジニアのジャッキーです。

今日は初心者でも簡単にカラーパレットを作成できるように、色の種類や配色の基本ルールなどをを紹介していきたいと思います。

色の種類

色には、いくつかの分け方があります。

1）色味の有無によって、有彩色と無彩色の2種類に分けられます。

有彩色は普段赤、青、緑など色味の持つ色で、無彩色は白、黒、とそのグラデーションである灰色のことを指します。

有彩色）

無彩色）

2）色味により、種類を分けることも多くあります。

主に暖色、寒色、中性色の3種類に分けられます。赤やオレンジが暖色系の色、青は寒色系に属します。そして、緑など、その2種類の間にある色は中性色に分類されています。

暖色は明るい印象を与え、寒色は知性的や落ち着いた雰囲気があるなど、色味によって、それぞれの役割があると言われています。

配色の基本ルール

配色は基本的に3色に収まるのがベストだと言われています。色が多すぎると、見る人が混乱したり、ポイントを強調できなくなったりもします。

また、使い方によっては、ベース用の色とアクセント用の色を分けても良いでしょう。

ここで、いくつかのカラーパレットを作成する方法を紹介して行きたいと思います。

オンラインで写真から作成

自分好みの写真の中からいくつかの色を選択してカラーパレットを作成する方法です。

PhotoshopやIllustratorで写真をインポートし、色を選択するのはもちろん、オンラインで作成する方法ならAdobe Colorがお勧めです。

Adobe Color では無料で写真をアップロードし、自動的に写真からカラーパレットを生成する機能があります。

上のメニューから「作成」を選択　＞　「テーマを抽出」か「グラデーションを抽出」の中に写真をアップロードすると、カラーパレットは自動的に作成されます。

「テーマを抽出」と「グラデーションを抽出」の作成方法が同じですが、それぞれの完成品の雰囲気が違います。

「テーマを抽出」の「カラーモード」で作成）

「グラデーションを抽出」で作成し、手動で調整）

こちらの写真の中に、5ヶ所から色を抽出すると、下記のカラーパレットが生成されます。

写真でカラーパレットを作成するメリットはとにかく簡単！アイデアが浮かばなくても、写真を選択するだけで作成できます。

また、写真の中から選んだ色なので、色の相性が合わない場合は少ないです。

もし自動生成のものに、好みの色が無かったら、手動で写真から色を選択することもできます。

Adobe Illustratorでブレンドで作成

Adobe Illustratorで2つの色を選択し、ブレンドツールできれいなグラディエントのカラーパレットが作成できます。

手順以下を参考してください。

1）2つの正方形を作成し、色を変更。

2）1で作成した二つの正方形を選択した状態で、上のメニューで「Object」 > 「Blend」 を順に選択、「Make」をクリックすると完成。

3）完成したものはこちらになります。

この方法は単色、モノクロのカラーパレットを作成するのにいい方法だと思われます。

このように作成したカラーパレットは、アクセントカラーを加え、グラフなどで活用できます。

ゼロから作成

写真やブレンドツールなど使わず、自分で作成したい時はカラーホイールを用意して作成した方がアイデアが浮かびやすいです。

ここで3種類のカラーパレットの作成方法と例を紹介していきたいと思います。

1）単色（モノクロ）

単色を用意し、トーンのみを調整して作成したものです。

モノクロのカラーパレットは変化が少なく、使いやすい一方で、固い印象を与えることもあります。

2）類似色

カラーホイールの中に一つの色を選択し、その隣の色と合わせて作成したパレットです。

色が調和しているので、どのデザインでも使いやすく、緩やかな印象を与えることができます。

3）補色

カラーホイールに反対側にある色と合わせて、作成したものと指します。

コントラストが強い分、主張が強い点から使いにくい所もあると言われています。

TPO（時間、場合と状況）によって、使用する色も違ってくるので、テーマを決めてから作成した方が良いでしょう。

例えば「マイナビ」の求職サイトでは、落ち着いた印象を与えるライトグレーをベース色に、大人っぽい印象的なネイビーをメインカラーに、ダークレッドをアクセントカラーの配色を使用しています。

まとめ

色は人に与える印象によって、それぞれ役割があります。テーマに沿ってカラーパレットを作成するには、色の属性を理解する必要があります。また、カラーパレードの色は多すぎると、見る相手を混乱させるデメリットがあり、3色までに抑えた方が一番いいと言われています。

おまけ

Adobe Colorでは、自分のカラーパレット が作成できる一方、既存のカラーパレットもあります。アイデアが浮かばない時に役立ちますので、よろしければ、そちらもご参考ください。

また、もし興味があれば、ゴーリストデザイン部他のメンバーが書いた記事もご覧ください！