配色は、見る人に一瞬で、そのイメージを
焼き付けてしまいます。

そのため、キャラクターの服や装飾品などを考える時、
人によっては配色だけで何時間も悩んでしまうものです。

たとえ、すでに配色が決まっている
版権キャラクターの色を塗る場合でも、
最終的にはカラーピッカーから似た色合いを
探し出し、自分で使う色を決めなければなりません。

今回はそういった時に役立つ、色を選ぶ際に
考えるべきポイントをまとめたmocolifeさんによる
「色彩センスゼロでも大丈夫！簡単にイケてる配色をする方法」
をご紹介します。

色彩センスゼロでも大丈夫！簡単にイケてる配色をする方法 - NAVER まとめ
Webデザインをする際にとても困るのが配色。適当に色を置くとバラバラになりますし、似たような色ばかり
使うと印象がぼやけてしまいます。そこで、色彩センスがなくても簡単にいい感じな配色が出来る方法を...



(以下要点まとめ

色彩の前提知識、色の三属性

色は彩度・明度・色相の三属性
（三要素とも呼ぶ）から成り立っている



色相

赤・黄・緑・青などの言葉で区別される色のこと。
同じ赤でも赤紫・黄みの赤などがあるように、
色相の数は無数に存在する。


明度

色の明るさの度合い。
明度が高い＝明るい色でさわやかで爽快なイメージ
明度が低い＝暗い色で重厚で落ち着いたイメージ
といえる。


彩度

色の鮮やかさの度合い。彩度の高い色ほど
派手・華やか・目立つ色といえる。

メイン・サブ・アクセントの三つを意識する

おおまかにメインカラー6割、サブカラー3割、
アクセントカラー1割とされている。
この面積比率を守ると、美しい配色に
仕上がりやすくなる。

メインカラー

配色の構成要素の中で、最も大きな面積を占める色。
全体のイメージを作り出す役割を持っている。

色にはそれぞれ印象があり、赤ならアクティブ、
青ならクールなど様々だが、メインカラーは
ユーザーに何を伝えたいかで選ぶことが大切。


サブカラー

メインカラーに次いで面積が大きく、メインカラーを
補う役割を持つ。

メインカラーのイメージを補う色にすると良い。
例えば、冷静な印象を与えるためにメインを青にした場合、
より冷静さを伝えたければサブに紺色や水色などを選ぶなど。


アクセントカラー

配色の構成要素の中で、最も小さい面積でありながら、
もっとも目立つ色のこと。
全体を引き締めたり、ユーザーの目を引く効果(役割)を持つ。

アクセントカラーは目立たせるための色なので、
メインカラーとサブカラーと比較して目立つ色を選ぶようにする。

色相・明度・彩度のうち、2つ以上がメインカラーと異なる色を
選ぶ事がポイント。

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

「クール」「シンプル」ならトーン・オン・トーン
「楽しい」「インパクト」ならマルチカラーが良い

トーン・オン・トーン系

トーン・オン・トーンはナチュラル配色（自然な配色）や、
同じ色合いで色調を変化させる、一番ベターな配色パターン。




マルチカラー系

マルチカラーは、対比色やコンプリメンタリー（補色配色）、
トリコロール（はっきりとした三色配色）、などで違った色合いを使い、
3色（トライアド）、4色（テトラード）、5色（ペンタード）、
6色（ヘクサード）で全体配色を構成した物。

この辺はColor Noteさんの「配色のコツ」が非常にわかりやすく
解説されていますので、詳しく知りたい方はご参照下さい。

配色するときに意識しておきたい色の効果

色の面積効果

明るい色は小さな面積より大きな面積の方が
より明るく感じられ、暗い色はより暗く感じられる。





色の誘目性

人の視線の流れは、左から右・上から下へと流れていくため、
誘目性の高い色は、上側や左側に配置すると、
ページや文章にリズムをつけ自然に視線を誘導することができる。

無彩色よりも「有彩色」「彩度の高い色」
「暖色」のほうが注目されやすくなる。

同系色でデザインする際のポイント

隣通しの色にはコントラストを

コントラストの差がない配色は、まったりしすぎて
印象に残りにくく、ぼやけた印象になってしまったら、
コントラストをはっきり付けることで解消できる。

特に隣通しの色にはコントラストの差をつけると
よりくっきりした印象になる。


面積が重要、そしてバランスはもっと重要

それぞれの色の面積の振り分け方で、印象はかなり変化する。
その色をどれくらい目立たせるかは面積の大きさにも依存する。
特に、目立たせたい色（メインカラー）の面積は特に重要。


低彩度の中に高彩度を入れてみる

同系色の配色では、似た色相を使うため
どうしても全体的に活気がない印象になる。
少し高彩度の色を入れてみると、ぼやけた印象から
メリハリのあるデザインにできる。

色の持つ心理的効果を意識する

色には人の心理に働きかける効果があると言われ、
それぞれの色が持つ印象効果のことを「色彩感情」、
その色が何かと結び付いて連想されることを「色彩象徴」という。
配色の際にはこれらを意識するとよい。

黒を使わない

純粋な「黒」はほとんど無い

人間は「暗いもの」を「黒」と結びつけてしまいやすい。
しかし、ほんとうの「黒」というものは、実はめったにない。

実際のデザイン例でも、純粋な黒が避けられているものがよくある。
TwitterやSublime Text 2などのアプリケーションでは、
サイドバーは黒に見えるものの、純粋な黒にはなっていない


黒に少し色を足す

純粋な黒を避けるだけでなく、他の色を少し混ぜると、
より魅力的にすることができる。

Facebookのモバイルアプリには、一見グレーに見えるところに
テーマカラーである青が少し加えられている。

いかがだったでしょうか？
配色のポイントを押さえれば
伝えたいイメージに沿って自然と配色を
決めることができそうですね。

色選びは、その対象がどんなもので
どういったイメージにしたいか、デザインする人の
強い気持ちに依存します。

配色に迷ったときには、描きたい対象は
自分にとって一体何なのか、まずはその対象を
強く意識してみるとよいでしょう。

著者プロフィール

ふぉくすけ

お絵描き・小説・ゲーム制作など
創作活動が大好きな元SE。

グラフィッカーになる夢を諦め一般企業に
就職するも、多くの理不尽を当然のように
受け入れながら働く「雇われる生き方」
そのものに強い違和感を持つ。

会社員として働きながら生き方の模索を続け、
Web媒体の収入が月給を上回ったため独立。

現在は、お絵描きをはじめとする、
創作活動で食べていきたい人に向けた
情報発信をメインに活動中。

現在キャンペーン期間中にて
お絵描きで自由を手に入れるための特別講座
を無料配布中