配色初心者でも効果的なカラーデザインが出来るようになる4つの工程

タイトル間違えました。
「僕みたいなクソデザイナーが配色する時に騙し騙しデザインする手法」です。

配色には色々作法があります。そして言葉もあります。加法、減法、色の三属性、伝統、政治的意味合い、などなど。厳密に出したらキリがありませんし、プロじゃないので、細かい事は抜きにして、個人的に抑えておく簡単なポイントをまとめてみました。

雰囲気のキーワードを出す

なんとなくのキーワードを出します。
  • カッコイイ! うぉ!すっげ!って感じ
  • クール とにかく渋く。鳥肌立つ感じで
  • 可愛いっぽく。 やっぱ少し可愛くが良い
  • ラブリー♡ もうワクワクーって感じで♥
  • シンプルに。 余計な物はいらん
  • インパクトどーん とにかく覚えてもらいたい!
  • 爽やかーーー キレイに見せたい!
  • 楽しい! チョーハッピ スーパーハッピ ノ…(ry
など。
ここで決めたキーワードがベースになります。
常に頭に入れておきましょう。

この辺の説明は基本なのではしょります。
請負等のヒアリング時、このキーワード(言葉)がかなり重要なのですが
そこはまた別の機会に。

テーマカラーを決める

先ほどのキーワードに理由付けます。
もちろん好きな色でも良いのですが、
特に無い場合、あるいはあまりイメージが無い場合は
色の持つ意味に頼りましょう。

“色に対する一般的な印象”
色彩は様々な感情を表現したり、事物を連想させることがある。
国や文化などによって違いはあるが、一般的な印象は次のようなものである。

  • 白 善(主にキリスト教圏)、雪、無、真理、清潔、純粋、無罪、無知、賛成
  • 黒 夜、悪、死、男、武勇、汚濁、有罪、炭、富裕層(欧米)
  • 栗(茶色) 土、豊穣、糞、執着
  • 赤 血、生命、火、力、愛、女、情熱、危険、熱暑、革命、勇気、攻撃、電気、太陽(日本)
  • 橙 温暖、快活、陽気、幸福、誇り、野心、忍耐
  • 黄 太陽、穀類、金、注意、臆病、活発、明快、乾燥、地下、王位(中国)、色欲(中国)
  • 緑 植物、自然、安全、健康、希望、幼稚、平和、新鮮、湿潤、嫉妬(英語圏)、エコロジー
  • 青 水、月、冷静、知性、悠久、未来、憂鬱、寒冷、涙
  • 紫 王位、高貴、正義、優雅、神秘、節制
  • 金 神、宝、光、生など灰中立、不潔、陰鬱、平凡、沈静
VIA:Wikipedia

トーン・オン・トーン系か、マルチカラー系か

トーン・オン・トーンの系統で行くか

トーン・オン・トーンはナチュラル配色とか、
同じ色合いで色調を変化させる、一番ベターな配色パターンです。
明度を変えたグラデーションを連想してもらえば早いです。
サンプルはアクセントで緑を追加

もしくは多配色を用いたカラー構成にするかを決めます。

マルチカラーは、対比色やコンプリメンタリ、トリコロール、などで違った色合いを使い、
3色(トライアド)、4色(テトラード)、5色(ペンタード)、6色(ヘクサード)
で全体配色を構成した物です。(って僕の中で思ってます)

どちらで行くかは、最初で決めたキーワードによります。
「クール」「シンプル」ならトーン・オン・トーン。
「楽しい」「インパクト」ならマルチ
という感じで良いと思います。

配色、アクセントカラーを決める

  1. トーン・イン・トーン系
    明度・彩度を合わせた配色パターン。色合環の隣りとかで合わせると自然。
  2. コンプレックス系
    自然な色合いではない配色パターン。違和感。シャレオツ系。
  3. コンプリメンタリ系
    補色を使った配色パターン。 色合環、真逆。目立つ。
  4. トリコロール系
    フランス、イタリア等の国旗を連想させる配色パターン。シャレオツ系。
  5. フォアカマイユ系
    一見似た感じだけど、実は微妙にずらしてるパターン。拘るとちょっと上級?
  6. ドミナント系
    モノトーンとか、ドミナントトーンとか、所謂グラデ系。
この辺りで決めていくのが良いんじゃないでしょうか?
厳密には意味合いのレベルが違ったりしますが、そこはスルーでお願いします。

例えば、クライアントにデザイン提出の際に説明するならば・・・

洗練された印象を与えたいので
トーン・オン・トーンを念頭に、ドミナントにしました。
強くカッコイイ女性をイメージさせたいので、テーマカラーは濃い赤に。
ただし色合いが強いのでアクセントカラーとして他の色は使用しませんでした。
あえて言うなら引き締める為の黒です。


オシャレな印象を与えたいため、
コンプレックスなマルチカラーを意識しつつ、
なるべるトーンを合わせた配色です。
ただ、アクセントとして強めのピンクを使いたかったので
この部分は彩度は少し上げて目立たせています。


という具合でしょうか。

順序は逆でも良いです。
基本カラーを決めてから、アクセントカラーを選び、配色を出してみたり、
あるいはテーマカラーをアクセントカラーとし、配色を選んで行くのも良いでしょう。

と、細かい話ししましたが、結局は良い物をたくさん見てると
自然と感覚的に出てきますよね。そうなりたいが為の記事でした まる

Another Related Posts

  1. Webの「読みやすい」を僕も考えてみた。
  2. Webデザイナーなら忘れちゃいけない一つ。ディスプレイ(モニター)の発色について。
  3. キャッチコピーをより効果的に『読ませる』為に。
  4. 流行のキレイなアニメーションGIFの作り方(初心者向け)※一部写真閲覧注意
  5. Webデザインの原理原則はリアリティと、それに反した想像を超えるアイデアだと思う。
  6. Webサイトレイアウト。今が旬なのか?センタリングデザインについて考える。