色彩と配色

デザイナーには色彩の知識とセンスが必要です。色の選択から配置、組み合わせ、面積など、細かい調整によってデザインの印象は変わります。とは言っても色彩論を深く追求しだすと難しい話になってしまうので、ここでは簡単に噛み砕いた色の基本を書きたいと思います。 色彩の歴史（虹から出来た色相環） まずは色の歴史からスタート。色の構造が解明され、カラーチャートが出来たのは16世紀〜17世紀頃。色の構造を発見したのは、重力を発見したことで有名なニュートンであり、ニュートンが注目したのは7色の「虹」でした。そして、今でも色の基本となっているカラーサークルは虹のグラデーションを分割したもので、別名を「純色」「ビビッドカラー」と言います。 基本の純色（虹の色＝ビビッドカラー） 純色というのは白や黒が混じっていない鮮やかな1色のこと。虹のグラデーションは純色で出来ています。この純色で出来たグラデーションのことを「色相」といい、その色相を並べて輪にしたものを「カラーサークル（色相環）」といいます。よく見るカラフルな色の輪です。 色相をざっくりと分けると「赤、黄、緑、青、紫」の5色になり、さらに隣同士が混ざり合うことで「オレンジ、黄緑、青緑、青紫、赤紫」が生まれます。この10色が最もよく使われる基本色相といいます。 赤（オレンジ）黄（黄緑）緑（青緑）青（青紫）紫（赤紫）...赤〜ループ この色相はIllustratorやPhotoshopで色を作るときの基本にもなります。 色の三属性（色相、明度、彩度） 先ほどの話は「色相（Hue）」についてでしたが、他にも「明度（Value）」「彩度（Chroma）」という色を決める上で大事な2つの要素があります。色数はこの3つの要素をかけ合わせることで増えていきます。明度、彩度、色相の3つを合わせて「色の三属性」といいます。 Illustratorのカラーピッカーで色の三属性を見てみましょう。 右側にあるカラフルなグラデーションバーが色相です。色相を選ぶと、左側に彩度と明度が出てきます（横軸が彩度、縦軸が明度）。一番右上が彩度&amp;明度100%の純色、一番左が彩度0のモノクロです。モノクロ軸はどの色相でも同じ数値になります。左上が真っ白、左下が真っ黒。 デザインを作るときにはまず中心となる色を決めます。そしてその色に合わせて配色を決めていきます。色はデザインの意味を作る重要な部分ですので、最初に「色の持つ特性」を理解しておきましょう。 色の決め方（デザインのキーカラー） メインの色を決める時はビビッドカラー（純色）を使って考えるとまとまりやすいです。ざっくりと色のグループ分けをすると「暖色」「寒色」「中間色」の3種類に分類ができます。下のビビッドカラーチャートで確認すると、上が暖色、真ん中が中間色、下が寒色になります。 トレンドカラーの決め方（流行色協会とインターカラー） 世界のトレンドカラー（主にファッション）は「intercolor（インターカラー）」という国際流行色委員会で決まります。それを踏まえ、日本国内での流行色を「日本流行色協会（JAFCA）」が決めます。トレンドカラーを使ったデザインを作りたい場合は、上記のサイトで今シーズンの色を確認しながら選んでいくといいわけなのですが、種類がありすぎてどれを選んでいいのか分からない人も多いはず。 そんな時はまず色の持つ意味やイメージを理解し、デザインに合った正しい流行色を選択することをオススメします。 色の意味と心理、イメージについて 色には人の本能に訴えかける心理的効果というものがあり、長い歴史の中で私たちの常識として認知されていることもあります。この心理的効果を使い、人の行動を誘導していくのが色の力です。 暖色系（赤、オレンジ、黄色） その名の通り、暖かいイメージを持つ色群です。春や夏、太陽、晴れ、ぬくもり、豊かさ、活力などを表します。明るく前向きで、注意を引きやすい色でもあるため、看板やサイン、ロゴマークなど、目立つところに使われていることが多い印象です。 赤色、レッド（Red） 赤は太陽や燃えたぎる炎、沸き立つ血をイメージさせ、エネルギッシュで活発、明るく情熱的といった印象を抱かせます。熱血指導、スポーツ、セール情報、新着ニュース、警告など、特に注意を引きたい場所で使用します。 橙色、オレンジ（Orange） 赤よりも少し柔らかく、明るいイメージです。朗らかで元気、若々しさを感じさせます。柑橘系に多いビタミンカラーなので、食欲増進や活力を出したい場面で使用されることも多いです。子供用品や介護現場、病院、サプリメント、健康食品など、健やかな場面にも使われています。 黄色、イエロー（Yellow） レモンのキリッとした爽やかさ、フレッシュで引き締まったイメージを持ちます。金運アップや幸運、お金のイメージもあるので、ラッキーな色としても使えます。明るくポップな印象ですが、凡庸的に使われるオレンジに比べると少し個性的になります。目を引く色として、警告や注意など危険を知らせる色としても使われます。組み合わせによって表情を変えることができる多様性のある色です。 寒色系（青）と中間色（緑、紫） 寒色は寒さや冷静さを表す色です。季節では新緑の季節や夏の青空、秋と冬。明るく使うと爽やかで爽快なイメージに。暗く使うと静かな冬の海、湖、雨など、凛として冷たくクールなイメージに。銀行や医療の現場など、清潔感や信用が大事な場面では寒色系がよく使われています。抑制効果もありますので、ダイエットには寒色系が向いています。中間色は暖色と寒色両方のイメージを使えますが、緑と紫では意味合いが変わります。 青色、ブルー（Blue） 青はクールで清潔な印象を与え、心に静寂をもたらす爽やかな色です。信用が大事な銀行や医療、システム系、清涼飲料水など、爽やかで澄んだ印象を感じさせたい場面で使用できます。誠実な印象を与えたい場合には青がベストです。 緑色、グリーン（Green） 心が和むアースカラーの代表です。日本庭園や抹茶など、和風のイメージも持ちます。季節では新緑の5月。グリーンは心を和ませる自然の色であり、ナチュラルで優しいイメージを想像させます。ヒーリングや医療、エコ、オーガニック、自然派なものに適しています。 紫色、パープル（Purple） 妖艶さや気品高い印象を与え、日本では位の高いものや高級品に使用されます。欲望の赤と誠実な青が混ざった複雑な印象を持つ色です。緑の安らぎとは正反対の、ディープな夜の世界や蝶のイメージも連想させます。毒やゾンビ、ホラー、ハードロックといった場面にもよく使われることから、使い方によっては上品にも下品にもなり得る二面性のあるカラーです。 ここで解説した6種類はベースとなる色です。色の持つ意味を強めるか弱めるかは、明度と彩度で調整します。複雑な意味合いを持たせたい場合は混色を使いますが、これは上級者向けです。いろんな意味を含んだ複雑な色は経験豊富な大人を連想させ、純色はピュアな子供を連想させます。 色の明度と彩度（色の表情を作る） 色の意味がわかったところで、今度は色に性格を持たせます。元気なのか、大人しいのか、軽やかなのか、厳格なのか、豪華なのか、シンプルなのかといった性質を、明度と彩度で変化させます。 明度で色の明るさを決める（軽い or 重い） 明度は色の明るさです。白っぽいか黒っぽいか。明度が上がると明るく軽やかな雰囲気になり、明度が下がると落ち着いた重厚感のある雰囲気になります。明るければ若々しく、暗ければシックに落ち着きます。 明度が高い：ブライト、ライト ←→ ディープ、ダーク：明度が低い 彩度で色の鮮やかさを決める（派手 or 地味） 彩度とは色の鮮やかさのことです。白黒写真からカラー写真へ移り変わるイメージがわかりやすいと思います。彩度が上がるとエネルギッシュで賑やかな活力のある印象に、彩度が下がるとノスタルジックで静けさがあり、古めかしい印象になります。 カラートーンの種類（清色と濁色） ビビッドカラーは何も混ざっていない「純色」と説明しましたが、この純色に白or黒を混ぜたものを「清色」と呼びます。白は明清色、黒は暗清色です。濁りがない清色同士の組み合わせは、とても綺麗な印象を与えます。 清色の反対は「濁色」と呼びます。ビビッドカラーにグレーを混ぜた色群です。曖昧で複雑な表現が可能ですが、色の組み合わせ方が難しく、不協和音も発生しやすくなります。 明度と彩度をカラーチャートで表すとこうなります。 上下が明度、左右が彩度です。 明度で見ると、上が明清色で、白く軽い。下が暗清色で、黒く重い。その間に挟まれているのがグレー＝混じり合った濁色。 彩度で見ると、右側が派手で、左側が地味。若々しさやベビー用品は右上、渋さやシニア用品は左下、というような選択ができます。 明清色（白ベース：明るく優しいピュアな色群） 女性や子供向けにはぴったりな色群です。パステルカラーもこの辺りになります。柔らかく、明るく、ゆったりとしたイメージです。春やスイーツといった甘いイメージもこの辺りで作ります。 ブライトトーン （鮮やかで可愛い） ビビッドカラーに白を混ぜたような清潔感のあるブライトカラー。ビビッドカラーの要素が薄まり、角がなくなります。明るく優しい印象。ポップなイメージで誰からも好かれるカラーです。若い世代向けのデザインに向いています。 ライトトーン （柔らかく優しい） ブライトカラーよりもさらに丸く柔らかい印象です。白に近づくことで、さらに清潔感やピュアさが強調されます。清純で清らかなイメージ。レースやフリル、マシュマロといった女性らしい雰囲気が強まります。 ペールトーン （ナチュラル） ベビー用品によく使われる色で、安心安全な印象です。オーガニック製品やナチュラルをイメージするものにも最適です。ほとんど白に近いので、色の差がなくなり個性派弱まります。何色にも染まっていない潔白なイメージも持たせることができます。 明暗色（黒ベース：落ち着いた大人のシックな色群） ビビッドカラーに黒が混ざることで、落ち着いたイメージがプラスされます。ワインやダークチョコレートなど、ほろ苦い大人の嗜みにマッチします。秋の切なさや侘しさ、夕暮れから夜明けにかけての静けさの表現もできます。 ディープトーン （粋な大人） ビビッドカラーよりも少し落ち着いた印象。明朗活発な青年時代から大人に成長したイメージです。若々しさよりも大人の色気をイメージさせます。秋の装いやシックなイメージなどにピッタリです。 ダークトーン （厳格な大人） 重厚感が増します。ハイブランドやアンティーク、ヴィンテージといった貫禄のあるものに最適です。古めかしく歴史あるもの、年代物のワインやヴァイオリンといった厳格で格式高いイメージです。老舗の旅館、帝国ホテルといった高級感のあるイメージにも使えます。 ダークグレイッシュ （強い意志、無機質なもの） 黒に近い色群です。黒は全ての色を消し去るほどの強い色なので、強い意志が加わります。全体を引き締める色でもあり、ソフトな色との相性は悪くなります。さらにクールでハードボイルドなイメージで、感情が表現しづらい色です。無機質、圧倒的な強さ、機械類などには適しています。 濁色（スタイリッシュな都会系） グレイッシュと言われる色群です。近年頻繁に使われている流行りのカラー。チャートでは真ん中のひしめき合った層を指します。いろんな色が混ざり合うことで複雑な印象になり、多様性のあるモダンで都会的な要素が加わります。グレーに近づけば近づくほどスタイリッシュにな印象になります。 ストロングトーン （スマートなフルカラー） ビビッドカラーの彩度が少し落ち着き、ギラツキがなく自然な色合いにフィットした感じです。グレーが混ざることではっきりとした主張や元気さ、青さがなくなり、スマートな印象が加わります。 ソフトトーン （爽やかな都会系） ソフトな印象という言葉通り、明るくスマートで角がない柔らかなイメージです。都会系のなかでも明るく爽やかな印象になりますが、ライト系のようにピュアで若々しい意味合いは無くなります。 ダルトーン （ダークな都会系） 少し渋さが見え隠れします。燻し銀とまではいかないものの、少し影のあるスマートな大人といった印象です。落ち着いた品のあるセンスを演出できます。 グレイッシュ〜無彩色（メタリックな近未来） 彩色がほとんどなくなり、グレーの無機質なイメージが強くなります。色の表情もわかりにくく扱いが難しい色群ですが、どのカラートーンともマッチするといった意味でテキストや背景、ベースとなる骨組み部分で活躍します。メインで使う場合は近未来やメカニック、メタリックといった要素が含まれます。色を極力持たせないデザイン系のサイトでは頻繁に使われる色群です。 ライトグレイッシュ （ハイセンス女性） 彩色がほぼなくなり、ハイセンスでエレガントな大人の印象に。高級ブランドの化粧品などで使われやすい色合い。軽さは出したいけど、子供っぽく安っぽくなるのが嫌ならライトグレイッシュがおすすめ。ハイセンスなイメージと言えます。 グレイッシュ （ハイセンス男性） ライトグレイッシュが女性なら、グレイッシュは男性です。高級ブランドのスーツを身にまとったダンディーなイメージです。エレガントでクラシックなイメージには適しています。強さやアクがないのでスマートで都会的な印象。 無彩色 （エレクトロニック） モノトーン、モノクローム。機械や工業、金属、電子といった無機質なものに最適です。特色がないものにも使われます。文字情報など色の意味を持たせたくない場所にメインで使います。色と組み合わせることで、カラーを引き立たせることができます。 マンセルシステムとカラーについて 彩色システム全般を正式には「マンセルシステム」「マンセルカラー」といいますが、この辺りは色彩論の難しい史実が絡んでくるので今回は割愛します。興味のある人は下記で紹介している本で詳しく載っているので、一読ください。 建築やインテリアの現場ではこの「マンセル値」という色番が使われ、マンセル値では、色はアルファベットの頭文字、明度（V）は1〜9、彩度（C）は0〜14の数値に置き換えて表記されています。（ちょっと難しい） 身近な例で探すと、京都は景観保護のため、規定のマンセル値が決めれています。真っ赤なマクドナルトの看板は、京都では彩度を下げたエンジ色になっています。建築やインテリアを目指す方には必要な知識となります。 もっと本格的に色の事を学びたい人に向けてオススメしたいのが「色彩デザイン学」という本。ニュートンが虹を見つけたところから、現代のデジタルハーモニクスまで詳細に解説されています。実際の広告を題材にした色の使い方も見応えあります。（1冊でまるごと色彩を学べる本を探した結果、これが一番しっくりきた） 今回の記事は、この本の中からよく使う基本的なことを端折って書いていますので、さらに突っ込んだ事が知りたい場合は一読ください。カラーチャートも載っていますし、何度でも読み返せます。 【Amazonで見る】【楽天で見る】 デザインのトンマナについて デザインとは「いかに美しく調和できるか」ということが大事です。色の組み合わせには相性というものがあり、うまく調和すると「綺麗でセンスのある配色」となり、調和しない色を選んでしまった場合には「不快でダサい配色」となります。 全体の色やリズム、世界観を調和させ、違和感なく合わせることを「トーン&amp;マナー（トンマナ）」と呼び、デザインの現場では「フォントやカラー、リズムを合わせながらデザインしてね」という事を「トンマナを合わせる」と言います。色や配色の持つ意味を理解しておくことで、トンマナが守られるようになります。 次回は配色の基本と組み合わせについて綴りたいと思います。応用編→デザインの配色パターン【色彩学応用編】へ続く。 トンマナをもっと理解するには、フォントの意味も理解しておきましょう！ http://officehojo.com/blog/2019/11/14/basicfont/

色彩と配色

デザインの配色パターンと作り方【色彩学応用編〜配色パターンを作るオンラインツール】

デザインと色の決め方、作り方【色彩学基本編】

freespace