Webデザインやイラストで、色の効果的な組み合わせ方がよく分かる便利なオンラインサービス -Color Supply
Post on:2017年1月13日
sponsors
デザインやイラストにおいて、色は非常に大切なツールです。
初心者だとつい多くの色を使いがちになり、失敗してしまうこともあります。
Webデザインやイラストで色を選ぶ時、効果的な色の組み合わせ方がよく分かる便利なオンラインツールを紹介します。
Color Supplyの使い方
色を選ぶ時には、3つのポイントを理解しておくことが重要です。
- コンセプト
- ブランド
- あなた自身の好み
コンセプト
サイトやイラストのコンセプトを理解していないと、色を選ぶことはできません。そしてコンセプトを理解することで、色の選択の幅を狭めることができます。例えばコンセプトが「水」であるなら、レッドを使うことはないでしょう。水とレッドは異なる世界です。
色はコンセプトを支持すべきか、少なくとも対立は避けるようにします。
ブランド
大きな会社の場合、そのブランドには明確な色が決まっています。クライアントのためにデザインするのであれば、そのブランドカラーを必ず選択し、その色にあった組み合わせを探します。例えばIKEAのためのサイトであれば、ブルーとイエローです。ブランドカラーと無関係な色を選択するのであれば、必ず承認が必要です。
また小さいクライアントなど、ブランドが明確ではない場合もあります。その際には、扱うプロダクトやサービスだけでなく、関係者の好みの色も知っておく必要があります。
あなた自身の好み
コンセプトを決めて、ブランドを理解したら、デザインやイラストの作業をするあなた自身の好みを理解しておく必要があります。これはあなたが得意な色と言い換えてもいいでしょう。
あなたは何色をよく使い、配色を使っていますか？
あなた自身の色の好みを理解した上で、コンセプトやブランドの色との相違を知っておきましょう。
Color Supplyの使い方は、簡単です。
デザインやイラストのコンセプトにあった色を色相環から選び、さまざまな配色を見つけることができます。
右側に表示された色の組み合わせは、選択すると下記のようにイラストやグラデーションなどで表示されます。
色の組み合わせの事例
色の組み合わせ方
Color Supplyには、5つの代表的な配色が利用できます。
補色: Complementary
ある色とカラーホイールの反対側の色との組み合わせ。
類似色: Analogous
ある色のカラーホイールで隣接している3つの色の組み合わせ。
3色配色: Triadic
カラーホイールを3等分した位置の色の組み合わせ。
分裂補色: Split Complementary
ある色とその補色の両隣の2つの色との組み合わせ。
4色配色: Tetradic
カラーホイールを4等分した位置の色の組み合わせ。
色の組み合わせが分かる無料PDF
Color Supplyのツールを触ってると、たまに下記のモーダルウインドウが表示されます。
これは色の組み合わせが分かる無料PDFの案内で、メールアドレスを入力すると、そのメールにダウンロードURLが送信されます。
という訳で、ダウンロードしてみました。
PDFのキャプチャ
24ページほどの冊子で、色の組み合わせ方が詳しく説明されています。
事例はすべて、Webデザインです。
PDFのキャプチャ
sponsors
