初心者でも簡単にカラーパレットを作成
こんにちは、フロントエンドエンジニアのジャッキーです。
今日は初心者でも簡単にカラーパレットを作成できるように、色の種類や配色の基本ルールなどをを紹介していきたいと思います。
色の種類
色には、いくつかの分け方があります。
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では、自分のカラーパレット が作成できる一方、既存のカラーパレットもあります。アイデアが浮かばない時に役立ちますので、よろしければ、そちらもご参考ください。
また、もし興味があれば、ゴーリストデザイン部他のメンバーが書いた記事もご覧ください！