デザインをする際の色の使い方のコツ
色について知ろう
デザインをする上で色の使い方はとても重要です。まずは色を使う前に、色がどのように作られているのかを知っておくと、上手に配色ができるようになります。
色の三属性（色相・明度・彩度）
白・灰色・黒以外の色は、全て色相・明度・彩度の3つの属性を持っています。
「色相」は色合い「明度」は明るさ「彩度」はあざやかさを表します。
一見似たような言葉にも見えますがどのように違うのでしょうか。
色相
赤・青・黄、といった色味の違いの事を「色相」といいます。代表的なものとして、赤・黄・緑・青・紫 などがあります。色相は円状にならべて中間の色を配置していくことで、ひとつの輪っかにすることができます。これを「カラーホイール（色相環）」といいます。
左の図の場合は、各色の一番あざやかな色「純色」を並べたカラーホイールになります。カラーホイールは色を選択する際の目安として使用することもできます。
明度
色の明るさを「明度」といいます。
「明度」が低くなれば黒っぽく、高くなれば白っぽくなります。
図のように、ヒュー(純色)を基準として、そこに黒を加えるとシェード、白を加えるとチントとなります。Photoshopのカラーピッカーでもヒュー(右上)シェード(上下)とチント(左右)を確認してみましょう。
「色相」の項目で見たカラーホイールには純粋な色「純色」しか使われていませんでしたが、シェードとチントを加えると図のようになります。
説明の都合上ブロック分けをして色をつけていますが、実際はグラデーションで色が変化します。
彩度
色のあざやかさを「彩度」といいます。
白・灰色・黒は色味をもっていないので彩度は０です。彩度が高いほどハッキリとした色になり、彩度が低いほど色味がなくなっていきます。
カラーホイール（色相環・色環）
色の関係性を知るために重要なのがカラーホイール（色相環・色環）です。
バラバラで色を見ると、似ている色もあれば全く違う色もありますが、実はこのように一繋がりの円形で表すことができます。
Photoshopのカラーピッカーにあるバーはこのカラーホイールを広げて直線にしたものと考えてください。
カラーホイールを使った配色方法
カラーホイールを使うことで、効果的な配色ができます。
補色
カラーホイールで向かい合った色同士を補色といいます。
インパクトのある配色ですが、原色のままでは目に強く当たり不快感が強まる場合があります。
トライアド
等しい距離にある3つの色の組み合わせ。
変化がありつつバランスのとれた配色です。
スプリット・コンプリメント・トライアド
ある色とその補色の両隣の色。
やや洗練された配色です。
類似色
ホイール上の隣り合う色の組み合わせ。
調和の取れた配色です。
RGBとCMYK
パソコンで色を扱うにあたって知っておかなければならないのが「RGB」と「CMYK」です。RGBはパソコンやスマホ、タブレットなどの電子機器で使用され、CMYKは印刷物で使用されます。
色の違い
RGB
光の三原色／加法混色
赤 (red) 緑 (green) 青 (blue)
色を重ねていくと明るくなっていく。PCやスマホ、タブレットなどの電子機器で使用されます。
CMYK
色の三原色／減法混色
シアン(cyan)・マゼンタ(magenta)・イエロー(yellow) ＋(Key plate）
色を重ねていくと暗くなっていきます。印刷物に使用されます。CMYの三色だけを混ぜれば黒に近い色になりますが、少し濁った色になるためKが用意されています。
RGBに比べて色の表現範囲が狭いため、PC上で表現できていた色を実際に印刷してみるとくすんでしまうことがあります。
３原色（RGB,CMY）は「原色」なので合成して作ることはできません。
色の使い方
色の数と分配に気をつける
色の選び方も重要ですが色の数と割合に気をつけて分配を行いましょう。たとえ色の選択が上手に出来ていても、色の分配が間違っているとまとまりのないデザインになってしまいます。
まずは目安として、以下のような割合で色を使うようにしてみましょう。
■配色例 01
■配色例 02
各色の選び方
ベースカラー
- 明度が高め、彩度が低めの色（白や薄い色）を選ぶ→背景などに使うことが多いため。
- 無彩色(白・灰色・黒)、またはメインカラーの明度を上げた色などが使いやすい。
メインカラー
- デザインのコンセプトで設定されている「テーマカラー」を使う。
- 明度の低い色を選ぶ（文字、または文字の背景どちらに使用した場合でも読みやすい。下図参照）。
- ターゲットが好む色を選ぶ（年齢層や性別を考慮する）。
- 他のサイト傾向やその時時の流行などを考慮する（競合他社で使われていない色をあえて使用するなど）。
アクセントカラー
- メインカラーの補色（またはその近似色）を選択する 。
カラーの分割（4色以上を使用する場合）
「メインカラー」や「アクセントカラー」を分割して色を追加するとバランスよく色を増やすことができます。 追加する色は以下のように決めましょう。
- 分割前の色と「色相」が同じで「トーン（明度・彩度）」が違う色を追加する
- 分割前の色と「トーン（明度・彩度）」が同じで「色相」が違う色を追加する
その他の色の選び方
単色的な組み合わせ
一つのヒューに対応する複数のチントやシェードを組み合わせると統一感のある配色になります。
例えば白黒写真の場合、黒とその多くのチント(グレ一階調)でできています。
セピア調の写真であれば茶系の色とそのチントとシェードでできています。
シェードとチンとの組み合わせ
補色をそのまま使うのではなく、補色をシェードやチントにずらして使うことで選択肢が広がります。
トーンを意識した配色
明るい、暗い、あざやか、くすんでいる、といった色の雰囲気のようなものを「トーン」といいます。
似たトーンの色が並んだり重なったりすると見づらくなるので注意が必要です。
暖色と寒色の性質
暖色 → 暖かみを感じさせる赤・黄色を含む色。前面に出てくる性質があります。
寒色 → 寒さを感じさせる青を含む色。後ろに隠れる性質があります。
様々な色の選択方法
- 季節を連想させる色を使う
- 春→緑・ピンク
- 夏→赤・黄色
- 秋→オレンジ・茶色
- 冬→青・白
- カンパニーカラー、テーマカラーなどのスプリットコンプリメントを使う。
- 写真や画像素材に使用されている色を使う。
- 参考ページ：色を色で見ないで
参考書籍
さらに詳しく知りたい人はこちらの本を是非読んでみてください。