calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

ノンデザイナーでも分かった!色に関する基本と配色に困ったときの知識まとめ

Basic_color_scheme

先月、リーフレットを作ったときに「なぜか同じように印刷されない」とか、サイトを作るときにイメージが伝わりにくいと感じたことが多々ありました。で配色に関して勉強してみたんですが、基礎がダメだったんですね。基本をしっかり勉強せねばと思いました。今回は配色やカラーマネージメント、3属性など基本的なことを復習を兼ねてまとめました。

PR
IT/WEB業界への転職なら
Sponsored Link

もくじ

基本

三原色

色の3属性

色相環

DTP出力する場合の注意点

配色に困ったとき

基本

1.配色用語

筆者、記憶力と理解力が悪いので、色の勉強をする前に使用頻度の高い基本用語をおさらいしておくことにします。「一言でいうと何?」と聞かれた時用に、簡潔にまとめました。

  • 三原色/色を表現する基本3色。色料(CMYK)と色光(RGB)がある。
  • CMYK/印刷物に使う。藍・紅・黄・黒。重ねるほど暗くなる減法混色。
  • RGB/PCモニタ・テレビ。赤・緑・青の3色。混ぜるほど明るくなる加法混色。
  • 減法混色(げんぽうこんしょく)/CMYを使った混色。印刷やフィルムに応用
  • 加法混色/赤・緑・青を混ぜて明るくする。全て混合すると白になる。
  • カラーマネジメント/PC・デジカメ等どの機器でも同じ色に管理すること
  • キャリブレーション/PCモニタの色を調整すること
  • 色相/虹に見られるような、赤み・青み・黄みなどの色合い。
  • 色相環(しきそうかん)/色と色の関係や変化をまとめたもの。
  • マンセル色相環/黄/黄緑/緑/青緑/青/青紫/紫/赤紫/赤/橙の10色配置
  • オストワルト色相環/黄/橙/赤/紫/藍/青/青緑/黄緑の8色を3分割した24色。
  • PCCS色相環/マンセルとオストワルト両方の特徴とトーンという概念を持つ。
  • 混色系/色の混ぜあわせを数値化。機械が使うのに向いている。
  • 顕色系/色相、彩度、明度で数値化。人間の知覚に近いかたちで表現。
  • ドミナントカラー/カラーを同一・類似した色相でまとめる方法
  • スペクトル/人間の目で見ることが出来る色の範囲。円にすると色相環になる。
  • スプリットコンプリメンタリー/ある色とその補色の両隣の色を用いた3色の配色
  • 補色/色相環で真反対に位置する色。赤と青緑など。
  • 類似色/色相環の中で隣り合う色。赤なら橙など。
  • 明度/色の明暗を表す度合い。白が一番明るく、黒が一番暗い。
  • 彩度/色の鮮やかさ、色の強弱。低いと暗く地味、高いと派手。
  • 無彩色/黒・灰・白など明度だけ持つ色みがない色。
  • 有彩色/黒・灰・白以外の色。
  • トーン/明度(明るさ)と彩度(鮮やかさ)とあわせてできたもの。
  • 視認性/色の見えやすさ。明度の差が高いと視認性は高くなる。
  • 面積効果/面積の大小で色の見え方がかわる。面積大きいほど明度が高く見える
  • 色相対比/隣に配置する色次第で、本来の色と違ってみえる現象

三原色

2.RGB

rgb_color

RGBはPCモニターやテレビ・カメラなどデジタル画像全般に使用されるカラーモード。相当拡大すると分かるみたいですけど、赤・緑・青の3色光点に強弱をつけ発光させ色を表現します。3色を全て混ぜると白になりますよね。なおかつ彩度が高くなりやすいです。色を混ぜるほど明るくなるので、加法混色と言われています。以下はCMYKとRGBの関係を簡単に解説してあります。

3.CMYK

cmyk_color

CMYKは印刷用で、シアン・マゼンタ・イエローに黒を加えた4色で、全て重なると黒に近くなるので、減法混色と言われます。絵の具の色を重ね続けると黒くなりますが、これと同じ感覚で表現されてます。

4.カラーマネージメント/CMS

color_management_color

CMYKとRGBは色の見え方が異なるので、印刷物の色とPCモニタ上の色と違って見えてしまいます。この問題を解決するために、色の管理方法であるカラーマネージメントがあります。Web屋さんでも、リーフレットを作ったりするときがあると思うので要チェックです。

色の3属性

5.色相

hue_color

色相は虹などに見られるような赤み、青・黄などの色合いです。色と色の変化をまとめたものを色相環といい、虹色を順序良く並べたようなものです。色相環で真反対に位置する色は補色、補色の周囲に位置する色を反対色、隣り合う色で共通の色調を類似色といいます。

6.明度

brightness_color

色の明暗を表す度合い。明るいのは白、暗いのは黒。明度を上げると白になっていきます。明度は白黒フィルム写真、白黒コピー、グレースケースで考えると理解しやすいですね。

7.彩度

saturation_color

色の冴え方、鮮やかさ、強弱ですね。自然界で見られる葉・花の色などに含まれる色を有彩色。墨汁のような色みのない色は、白・黒・グレーなので無彩色となります。彩度は発色や発光している感じ、派手だなと感じたら彩度が高いです。

8.トーン

tone_color

明度と彩度をグループ化したもの。男性的だとか、明るい・暗い・強い・弱い・深い・浅いなどの色の調子のこと。色のイメージや配色を考えたり、色を正確に表現するのに必須で、リズム感・メリハリ・感情などを表現する役割があります。柔らかい雰囲気なら、リズミカルならこの色調かなとか。なお、配色バランスを考えることを配色設計といいます。

色相環

9.マンセル色相環

munsell_color

人間の心理や近くを前提にしたもの。顕色系なので人間向きということですね。彩度が程よい感じて抑えられていて、調和のとれた色を選びやすいです。色相・明度・彩度にもとづいて定義。赤・黄・緑・青・紫の5色の中間に、橙・黄緑・青緑・青紫・赤紫を加えた10色を配置したもの。

10.オストワルト色相環

ostwald_color

赤・青緑・黄・藍の中間に橙・青・紫・黄緑を入れ、更に3分割した24色。混色系なので美的なものを選ぶのには向いてないかもです。

11.PCCS色相環

pccs_color

顕色系。マンセルとオストワルト表色系の特徴を両方とも持ちあわせていて、トーンという概念も持っています。トーンは明るい・暗い・強い・弱いなど色の調子のこと。

DTP出力する場合の注意点

12.リッチブラック

rich_black_color

印刷独自の表現にリッチブラックがあります。ブラックのインキ(通称スミ)にプロセスカラーの他の色を混ぜて深みを出した黒です。スミベタとはK=100%のこと。ブラックインキに他のインキを混ぜるときは、掛け合わせ合計値。この値が高いとムラになったり、裏写りなどのトラブルに発展することがあります。

13.特色インキ

features_ink_color

カラー印刷はCMYKのプロセスインキで印刷されますが、それだけでは表現できない蛍光色や金色などは「特色インキ」を使います。再現性は高くなるし、印刷コストを下げることも可能なので頭に入れておきたいですね。

14.CIEカラー

cie_color_color

カメラやスキャナ、プリンタなどは再現性が異なります。そこで異なる機器でも同じ色に見えるように「CIEカラー」と呼ばれる正確な表色系を共通して使うことで色の違いをなくすことが可能。カラーマネージメントの一つです。

配色に困ったとき

15.配色のアイデア

idea_color

サイト制作前に参考になりそうな色見本・アイデア。女の子向けなら、どういった配色が良いのか、子供向けなら明度を高くした色相など、様々なパターンを分かりやすく分類してあります。

16.複数の色をまとめる

multiple_colors_color

複数の色を使うときは明度・彩度を揃える、暖色・寒色で揃えるとバランスが良くなります。こちらは色々なカラーを使うときに、違和感なく配色する方法です。

17.ベースカラー・メインカラー・アクセント

accent_color

メイン・サブ・アクセントに関する記事。ベースカラー・メインカラー・アクセントは70%/25%/5%に割り振るとバランス良く見えます。もう一つ興味深かったのが「60 – 30 – 10 」ルール。生活に関わる色選びでのポイント。

18.色彩感情

color_emotion_color

色が持つ印象を色彩感情といいます。こちらは12色が持つ象徴や連想するものを分かりやすくまとめてあります。進出色、視認性、配色ポイントなどのハウツーなども。

19.雰囲気とテーマカラー

atmosphere_color

テーマカラーを決めて、メインカラーにどういった色を持ってきたときに、どんなイメージになるのか、統一感を出すにはどうすれば良いのか。実際のサイトを例にとって解説してあります。

20.ドミナントカラー配色

dominant_color

配色に統一感を出すことが出来るドミナント・カラー。色を類似した色相でまとめる方法です。トーン・オン・トーンは明度差で色の変化をつけたドミナント・カラー配色のことです。注意点としては変化が少なくなるために、平坦になること。反対色を入れてワンポイントとしてバランスをとりましょう。

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする