TL;DR
先月、リーフレットを作ったときに「なぜか同じように印刷されない」とか、サイトを作るときにイメージが伝わりにくいと感じたことが多々ありました。で配色に関して勉強してみたんですが、基礎がダメだったんですね。基本をしっかり勉強せねばと思いました。今回は配色やカラーマネージメント、３属性など基本的なことを復習を兼ねてまとめました。
基本
１．配色用語
筆者、記憶力と理解力が悪いので、色の勉強をする前に使用頻度の高い基本用語をおさらいしておくことにします。「一言でいうと何？」と聞かれた時用に、簡潔にまとめました。
- 三原色／色を表現する基本３色。色料(CMYK)と色光(RGB)がある。
- CMYK／印刷物に使う。藍・紅・黄・黒。重ねるほど暗くなる減法混色。
- RGB／PC モニタ・テレビ。赤・緑・青の３色。混ぜるほど明るくなる加法混色。
- 減法混色(げんぽうこんしょく)／CMY を使った混色。印刷やフィルムに応用
- 加法混色／赤・緑・青を混ぜて明るくする。全て混合すると白になる。
- カラーマネジメント／PC・デジカメ等どの機器でも同じ色に管理すること
- キャリブレーション／PC モニタの色を調整すること
- 色相／虹に見られるような、赤み・青み・黄みなどの色合い。
- 色相環(しきそうかん)／色と色の関係や変化をまとめたもの。
- マンセル色相環／黄/黄緑/緑/青緑/青/青紫/紫/赤紫/赤/橙の 10 色配置
- オストワルト色相環／黄/橙/赤/紫/藍/青/青緑/黄緑の 8 色を 3 分割した 24 色。
- PCCS 色相環／マンセルとオストワルト両方の特徴とトーンという概念を持つ。
- 混色系／色の混ぜあわせを数値化。機械が使うのに向いている。
- 顕色系／色相、彩度、明度で数値化。人間の知覚に近いかたちで表現。
- ドミナントカラー／カラーを同一・類似した色相でまとめる方法
- スペクトル／人間の目で見ることが出来る色の範囲。円にすると色相環になる。
- スプリットコンプリメンタリー／ある色とその補色の両隣の色を用いた３色の配色
- 補色／色相環で真反対に位置する色。赤と青緑など。
- 類似色／色相環の中で隣り合う色。赤なら橙など。
- 明度／色の明暗を表す度合い。白が一番明るく、黒が一番暗い。
- 彩度／色の鮮やかさ、色の強弱。低いと暗く地味、高いと派手。
- 無彩色／黒・灰・白など明度だけ持つ色みがない色。
- 有彩色／黒・灰・白以外の色。
- トーン／明度（明るさ）と彩度（鮮やかさ）とあわせてできたもの。
- 視認性／色の見えやすさ。明度の差が高いと視認性は高くなる。
- 面積効果／面積の大小で色の見え方がかわる。面積大きいほど明度が高く見える
- 色相対比／隣に配置する色次第で、本来の色と違ってみえる現象
三原色
２．RGB
RGB は PC モニターやテレビ・カメラなどデジタル画像全般に使用されるカラーモード。相当拡大すると分かるみたいですけど、赤・緑・青の３色光点に強弱をつけ発光させ色を表現します。３色を全て混ぜると白になりますよね。なおかつ彩度が高くなりやすいです。色を混ぜるほど明るくなるので、加法混色と言われています。以下は CMYK と RGB の関係を簡単に解説してあります。
３．CMYK
CMYK は印刷用で、シアン・マゼンタ・イエローに黒を加えた４色で、全て重なると黒に近くなるので、減法混色と言われます。絵の具の色を重ね続けると黒くなりますが、これと同じ感覚で表現されてます。
４．カラーマネージメント／CMS
CMYK と RGB は色の見え方が異なるので、印刷物の色と PC モニタ上の色と違って見えてしまいます。この問題を解決するために、色の管理方法であるカラーマネージメントがあります。Web 屋さんでも、リーフレットを作ったりするときがあると思うので要チェックです。
色の３属性
５．色相
色相は虹などに見られるような赤み、青・黄などの色合いです。色と色の変化をまとめたものを色相環といい、虹色を順序良く並べたようなものです。色相環で真反対に位置する色は補色、補色の周囲に位置する色を反対色、隣り合う色で共通の色調を類似色といいます。
６．明度
色の明暗を表す度合い。明るいのは白、暗いのは黒。明度を上げると白になっていきます。明度は白黒フィルム写真、白黒コピー、グレースケースで考えると理解しやすいですね。
７．彩度
色の冴え方、鮮やかさ、強弱ですね。自然界で見られる葉・花の色などに含まれる色を有彩色。墨汁のような色みのない色は、白・黒・グレーなので無彩色となります。彩度は発色や発光している感じ、派手だなと感じたら彩度が高いです。
８．トーン
明度と彩度をグループ化したもの。男性的だとか、明るい・暗い・強い・弱い・深い・浅いなどの色の調子のこと。色のイメージや配色を考えたり、色を正確に表現するのに必須で、リズム感・メリハリ・感情などを表現する役割があります。柔らかい雰囲気なら、リズミカルならこの色調かなとか。なお、配色バランスを考えることを配色設計といいます。
色相環
９．マンセル色相環
人間の心理や近くを前提にしたもの。顕色系なので人間向きということですね。彩度が程よい感じて抑えられていて、調和のとれた色を選びやすいです。色相・明度・彩度にもとづいて定義。赤・黄・緑・青・紫の５色の中間に、橙・黄緑・青緑・青紫・赤紫を加えた 10 色を配置したもの。
１０．オストワルト色相環
赤・青緑・黄・藍の中間に橙・青・紫・黄緑を入れ、更に３分割した 24 色。混色系なので美的なものを選ぶのには向いてないかもです。
１１．PCCS 色相環
顕色系。マンセルとオストワルト表色系の特徴を両方とも持ちあわせていて、トーンという概念も持っています。トーンは明るい・暗い・強い・弱いなど色の調子のこと。
DTP 出力する場合の注意点
１２．リッチブラック
印刷独自の表現にリッチブラックがあります。ブラックのインキ（通称スミ）にプロセスカラーの他の色を混ぜて深みを出した黒です。スミベタとは K=100%のこと。ブラックインキに他のインキを混ぜるときは、掛け合わせ合計値。この値が高いとムラになったり、裏写りなどのトラブルに発展することがあります。
- K100%はグレー？？？いいえ、「黒」です。それでもリッチブラックを使うなら…（更新） | やもめも
- 「K=100 は濃い灰色！」「リッチブラックは C90% M90% Y30% K100%」で印刷関係者が騒然
１３．特色インキ
カラー印刷は CMYK のプロセスインキで印刷されますが、それだけでは表現できない蛍光色や金色などは「特色インキ」を使います。再現性は高くなるし、印刷コストを下げることも可能なので頭に入れておきたいですね。
１４．CIE カラー
カメラやスキャナ、プリンタなどは再現性が異なります。そこで異なる機器でも同じ色に見えるように「CIE カラー」と呼ばれる正確な表色系を共通して使うことで色の違いをなくすことが可能。カラーマネージメントの一つです。
配色に困ったとき
１５．配色のアイデア
サイト制作前に参考になりそうな色見本・アイデア。女の子向けなら、どういった配色が良いのか、子供向けなら明度を高くした色相など、様々なパターンを分かりやすく分類してあります。
１６．複数の色をまとめる
複数の色を使うときは明度・彩度を揃える、暖色・寒色で揃えるとバランスが良くなります。こちらは色々なカラーを使うときに、違和感なく配色する方法です。
１７．ベースカラー・メインカラー・アクセント
メイン・サブ・アクセントに関する記事。ベースカラー・メインカラー・アクセントは 70%/25%/5%に割り振るとバランス良く見えます。もう一つ興味深かったのが「60 – 30 – 10 」ルール。生活に関わる色選びでのポイント。
- 配色の基本。メイン・サブ・アクセントカラーを極める！
- 配色センス０でも大丈夫！？服、インテリア、デザイン、様々な“色使い”を改善するかもしれない『60-30-10 Rule』！ | バンクーバーのうぇぶ屋
- インテリア・ファッションなど使える色のコーディネート！色の基本の考え | 賃貸店舗・貸し店舗などの店舗物件情報は店舗パーク
１８．色彩感情
色が持つ印象を色彩感情といいます。こちらは 12 色が持つ象徴や連想するものを分かりやすくまとめてあります。進出色、視認性、配色ポイントなどのハウツーなども。
１９．雰囲気とテーマカラー
テーマカラーを決めて、メインカラーにどういった色を持ってきたときに、どんなイメージになるのか、統一感を出すにはどうすれば良いのか。実際のサイトを例にとって解説してあります。
２０．ドミナントカラー配色
配色に統一感を出すことが出来るドミナント・カラー。色を類似した色相でまとめる方法です。トーン・オン・トーンは明度差で色の変化をつけたドミナント・カラー配色のことです。注意点としては変化が少なくなるために、平坦になること。反対色を入れてワンポイントとしてバランスをとりましょう。