色の使い方

色の使い方「配色」について勉強しましょう。「配色」とは複数の色を組み合わせること、または組み合わせた色合いの事をいいます。
まずは色を使うにあたって必要な色の表し方から勉強してみましょう。

色の三属性(色相・明度・彩度)

白・灰色・黒以外の色は、全て色相・明度・彩度の3つの属性を持っています。
「色相」は色合い「明度」は明るさ「彩度」はあざやかさを表します。
一見似たような言葉にも見えますがどのように違うのでしょうか。

色相

配色_カラーホイールRGB赤・青・黄、といった色味の違いの事を「色相」といいます。代表的なものとして、赤・黄・緑・青・紫 などがあります。色相は円状にならべて中間の色を配置していくことで、ひとつの輪っかにすることができます。これを「カラーホイール(色相環)」といいます。
左の図の場合は、各色の一番あざやかな色「純色」を並べたカラーホイールになります。カラーホイールは色を選択する際の目安として使用することもできます。

明度

色の明るさを「明度」といいます。
「明度」が低くなれば黒っぽく、高くなれば白っぽくなります。
配色_明度

図のように、ヒュー(純色)を基準として、そこに黒を加えるとシェード、白を加えるとチントとなります。Photoshopのカラーピッカーでもヒュー(右上)シェード(上下)とチント(左右)を確認してみましょう。
配色_ヒューチント

配色_カラーホイール完全「色相」の項目で見たカラーホイールには純粋な色「純色」しか使われていませんでしたが、シェードとチントを加えると図のようになります。

説明の都合上ブロック分けをして色をつけていますが、実際はグラデーションで色が変化します。

彩度

色のあざやかさを「彩度」といいます。
白・灰色・黒は色味をもっていないので彩度は0です。彩度が高いほどハッキリとした色になり、彩度が低いほど色味がなくなっていきます。
配色_彩度

カラーホイール(色相環・色環)

色の関係性を知るために重要なのがカラーホイール(色相環・色環)です。
バラバラで色を見ると、似ている色もあれば全く違う色もありますが、実はこのように一繋がりの円形で表すことができます。
配色_カラーホイールRGB
Photoshopのカラーピッカーにあるバーはこのカラーホイールを広げて直線にしたものと考えてください。
配色_カラーピッカー

カラーホイールを使った配色方法

カラーホイールを使うことで、効果的な配色ができます。

補色

配色_カラーホイールRGB_補色カラーホイールで向かい合った色同士を補色といいます。
インパクトのある配色ですが、原色のままでは目に強く当たり不快感が強まる場合があります。

トライアド

配色_カラーホイールRGB_トライアド等しい距離にある3つの色の組み合わせ。
変化がありつつバランスのとれた配色です。

スプリット・コンプリメント・トライアド

配色_カラーホイールRGB_スプリットある色とその補色の両隣の色。
やや洗練された配色です。

類似色

配色_カラーホイールRGB_近似色ホイール上の隣り合う色の組み合わせ。
調和の取れた配色です。

 

RGBとCMYK

パソコンで色を扱うにあたって知っておかなければならないのが「RGB」と「CMYK」です。RGBはパソコン、CMYKは印刷物で使用される色です。

色の違い

配色_RGB

RGB

光の三原色/加法混色
赤 (red) 緑 (green) 青 (blue)

色を重ねていくと明るくなっていく。PCなどの電子機器に使用する。

配色_CMYKCMYK

色の三原色/減法混色
シアン(cyan)・マゼンタ(magenta)・イエロー(yellow) +(Key plate)

色を重ねていくと暗くなっていく。CMYの三色を混ぜれば黒に近い色になるが、少し濁った色になるためKが用意されている。印刷物に使用する。

RGBに比べて色の範囲が狭いため、PC上で表現できていた色が、印刷するとくすんでしまうことがある。

3原色(RGB,CMY)は合成して作ることはできません。

参考:CMYK減法混色・RGB加法混色について

色の使い方

色の数と分配に気をつける

色の選び方も重要ですが色の数と割合に気をつけて分配を行いましょう。たとえ色の選択が上手に出来ていても、色の分配が間違っているとまとまりのないデザインになってしまいます。

まずは目安として、以下のような割合で色を使うようにしてみましょう。
配色_割合

■配色例 01
配色_見本01
■配色例 02
配色_見本02

各色の選び方

ベースカラー

  • 明度が高め、彩度が低めの色(白や薄い色)を選ぶ→背景などに使うことが多いため。
  • 無彩色(白・灰色・黒)、またはメインカラーの明度を上げた色などが使いやすい。
メインカラー
  • デザインのコンセプトで設定されている「テーマカラー」を使う。
  • 明度の低い色を選ぶ(文字、または文字の背景どちらに使用した場合でも読みやすい。下図参照)。
  • ターゲットが好む色を選ぶ(年齢層や性別を考慮する)。
  • 他のサイト傾向やその時時の流行などを考慮する(競合他社で使われていない色をあえて使用するなど)。

配色_メインカラー

アクセントカラー
  • メインカラーの補色(またはその近似色)を選択する 。

カラーの分割(4色以上を使用する場合)

「メインカラー」や「アクセントカラー」を分割して色を追加するとバランスよく色を増やすことができます。 追加する色は以下のように決めましょう。

  • 分割前の色と「色相」が同じで「トーン(明度・彩度)」が違う色を追加する
  • 分割前の色と「トーン(明度・彩度)」が同じで「色相」が違う色を追加する

参考:色彩センスのいらない配色講座

その他の色の選び方

単色的な組み合わせ

一つのヒューに対応する複数のチントやシェードを組み合わせると統一感のある配色になります。
例えば白黒写真の場合、黒とその多くのチント(グレ一階調)でできています。
セピア調の写真であれば茶系の色とそのチントとシェードでできています。

シェードとチンとの組み合わせ

補色をそのまま使うのではなく、補色をシェードやチントにずらして使うことで選択肢が広がります。

トーンを意識した配色

明るい、暗い、あざやか、くすんでいる、といった色の雰囲気のようなものを「トーン」といいます。
似たトーンの色が並んだり重なったりすると見づらくなるので注意が必要です。
配色_トーン

暖色と寒色の性質

暖色 → 暖かみを感じさせる赤・黄色を含む色。前面に出てくる性質があります。
寒色 → 寒さを感じさせる青を含む色。後ろに隠れる性質があります。

様々な色の選択方法

  • 季節を連想させる色を使う
    • 春→緑・ピンク
    • 夏→赤・黄色
    • 秋→オレンジ・茶色
    • 冬→青・白
  • カンパニーカラー、テーマカラーなどのスプリットコンプリメントを使う。
  • 写真や画像素材に使用されている色を使う。
  • 参考ページ:色を色で見ないで

参考書籍

さらに詳しく知りたい人はこちらの本を是非読んでみてください。


レイアウトのルール

  1. 近接
  2. 強調
  3. コントラスト
  4. 整列
  5. 反復

その他のデザイン要素

  1. 画像の使い方
  2. 文字のデザイン(タイポグラフィ)
  3. 色の使い方

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です