デザイン基礎 配色トーンについて知ろう 2023 9/29 デザイン基礎 </noscript><iframe data-src="https://player.vimeo.com/video/869163648?h=0ce37c909e&badge=0&autopause=0&player_id=0&app_id=58479" width="100%" height="450" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" title="配色トーンについて" class="lazyload" > 谷町くん うわ〜〜カラーを決めるのが難しいよ。。なんか選んだ色が全然まとまらないんです。。 トリペン先生 それは、配色のルールを知らないからかもね。その知識があるだけでも、変な組み合わせにはならないと思うよ。 記事の内容 色の三属性「色相・明度・彩度」 について知ろう 「赤色」と言われてどんな色を思い浮かべますか？ りんごのような赤色、宝石のルビーのような深い赤色、血のような鮮やかな赤色…。一口に「赤色」といっても、私たちが思い浮かべる赤色はそれぞれ違っています。 どんな「赤色」なのかは、色の要素を使って具体的に指定する必要があります。 デザイン制作の現場で、その色を選んだ理由や色の効果は何か、といったことを、クライアントやデザインに詳しくない相手に対しても説明できるようにするには、感覚だけではなく知識が必要です。 ここではまず、デザイナーの共通認識でもある「色の三属性」について解説していきます。 「色の三属性」 を理解した上で、いろいろな方法で色を伝えるための知識を身につけておきましょう。 ・「色相」について理解でき、色の組み合わせ方の基本がわかる・「色相・明度・彩度」の違いと役割を整理できる・有彩色と無彩色の違い、使うときの注意点がわかる・デザイン制作現場で色を分かりやすく指定する方法がわかる 【色相】光による色の変化「色み」 「色相」とは、光による色の変化。「色み」のことを表しています。 ▽この徐々に変化していく色相を円形に並べたものが「色相環（しきそうかん）」です。 色の順番は光のスペクタトルが元になっています 。馴染みやすい隣り合う色、反対側にある色が補色など、色を組み合わせるときに必要な情報や関係性が、理解しやすくなっています。この色の配置、色の移り変わりを覚えておきましょう。 出典：日本色研事業株式会社 http://www.sikiken.co.jp/pccs/pccs02.html 【明度】色の明るさ 「明度」とは、色の明るさを表すものです。 同じ色相でも、明るさによって見える色に違いがあります。一般的に明るい・暗いという表現で使われ、明るくなればなるほど「高明度」、暗くなれば「低明度」と表現します。 明度のことを「色の薄さ・濃さ」で判断してしまうのが、色を学び始めたばかりの初心者には多い間違いです。画面上では薄い・濃いで表現されがちですが、デザイナー同士では通じないこともあるので、注意したいところです。 余談ですが、光そのものの明るさを表現するときは「輝度」という表現を使います。主に、建築やインテリア関連の業界でよく使われる言葉です。これは物体色と光源色の明るさの単位が異なるために、使い分けられることがあります。 【彩度】色の鮮やかさ 「彩度」は、色の鮮やかさ、混じりけのなさ、を表します。 分かりやすく表現するなら、絵の具のチューブから出されたそのままの色は混じりけのない色で、別の色と混ぜ合わせると混じりけのある色、といえます。 色の三属性とは？色相：色の変化「色み」のこと明度：色の明るさのこと彩度：色の鮮やかさを指定するもの 有彩色と無彩色 わずかでも色みがあれば、「有彩色」です。 「白」「黒」「灰色」などは、「無彩色」と呼ばれます。色相と彩度がなく、明度しか持っていない色です。色のスペクトルの中に含まれていない「白」と「黒」は、高明度が白、低明度が黒という範囲の中で「灰色」の濃淡のみが変化します。CMYKの場合は、無彩色を入れることで明度や彩度を落とした色を表現することもありますが、仕組みとしては無彩色という特殊な分類になることを覚えておきましょう。 配色について知ろう デザイン制作の現場で一番悩むのが、色の組み合わせ「配色」についてです。 配色は経験を積んだデザイナーでも、デザインの意図や目的に合わせて効果的な色を選ぶためいつも試行錯誤しています。かなり奥深い世界ですが、基本の知識を知っているだけでも制作の際に最も効果的な色を選びやすくなります。 同じような色の組み合わせをしてしまう方にも、配色の基本を学ぶことで多様な色を扱えるようになるでしょう！ ・「色相」を元に色を組み合わせる基本的な方法がわかる・「トーン」の使い方、大まかなイメージが理解できる・デザインのカラー設定をするときのポイントがわかる 色相を基準に、色を規則的に組み合わせる方法 配色を効果的に学ぶには、まずはデザインとは関係なく、たくさんの色を組み合わせて、配色の練習を楽しみながら回数をこなすことが大切です。一番わかりやすい、色を規則的に組み合わせる方法から紹介したいと思います。 色相を基準に色の組み合わせを考える方法は、実用的なのに感覚として覚えやすいやり方と言えます。 ・補色：色相環の対局にある色相同士を組み合わせる・モノトーン配色：同じ色相で明るさや彩度が違う組み合わせ・グラデーション配色：グラデーションを使った配色・マルチカラー配色：色相環を元にして決まったバランスで配色する方法 言葉だけを聞くとなんだか難しそうに見えますが、内容はとても簡単です。 次の項目から詳しくみていきましょう。 【補色】色相環の反対側同士の目立ちやすい組み合わせ 「補色」とは、色相環の反対側にある色を組み合わせる方法です。 補色同士の組み合わせは目を引きやすく、コントラストを感じる組み合わせになります。 赤と緑、青とオレンジ、と言った具合に感覚的に覚えることができるので、覚えたてのうちは多用してしまいがちなので注意が必要です。 全体がビビッドで鮮やかなカラー配色の場合は、補色を使っても目立たないこともあるので、目立たせたい部分に使うなど、効果を狙って使うのがポイントです。 モノトーン配色：同じ色相で明度や彩度が異なる組み合わせ 「モノトーン配色」は同じ色相で、明度や彩度が異なる色を組み合わせる配色のことです。 同系色でまとめると統一感のあるカラー設定ができるので、初心者の方でも実践しやすい配色方法の一つと言えます。 グラデーション配色：起点の色を決めてグラデーションにする 「グラデーション配色」とは、名前の通り起点となる色を決め、色の移り変わりを波のように表現する配色方法です。 ▽グラデーションを作るときのポイント ・色相が近いもの同士の色を起点にする、・同じ色相で明度や彩度で差をつける作り方・スペクタルを元に虹色で作る方法 etc… 色んな場面に使えて便利なグラデーション配色ですが、多用しすぎると全体の調子が整えにくくなるので、こちらも使うポイントを絞って効果的に使いましょう。 マルチカラー配色：3色以上の色を組み合わせる配色方法 「マルチカラー配色」とは、単純に3色以上の色を組み合わせた配色のことを指します。 3、4色以上の色を組み合わせを考える場合も、補色のようにある一定の法則に則って色相を選ぶ方法があります。 類似色相：色相環を元に30度〜60度内の色相で合わせる対照色相：色相環を元に基準の色相から120度〜150度差の色を選ぶ配色。 トリペン先生 配色はたくさんの組み合わせ方があり、一度に全てを覚えて実践するのは難しいと思います。まずは、言葉だけでも理解しておきましょう！ 「トーン」を使った配色方法とトーンのイメージを解説！ 色を扱っていると、「トーンを合わせよう」「調子を整える」といった言葉を耳にすることが増えるでしょう。 「トーン」とは、明度と彩度の比率を揃えた「色の調子」のことを指します。 出典：日本色研事業株式会社 http://www.sikiken.co.jp/pccs/pccs04.html △この図は縦軸を明度、横軸を彩度とし、各トーンの色相群のバランスを示したものになります。 トーンを揃えると、色相が変わっても色の調子が整って見えるので、まとまった色彩設計を行なうことができます。 ペールトーンやビビッドなど、単語と色のイメージだけで日常的に使っている方も多いかもしれませんね。実はこのように、トーンは明度と彩度バランスで分類・整理されているのです。 トーンの持つそれぞれのイメージ ビビッド（v）：彩度が最も高く、目立ちやすく生き生きした色相群。 ブライト（b）：爽やかな印象を与えるトーン。 ストロング（s）：目に付きやすく原色に近い色合いで、自然ではっきりとした印象。 ディープ（dp）：黒に近づきながらも各色相が認識できるカラーなので、落ち着いた印象を与える。 ライト（lt）：パステルカラーとして使われることが多く、明るく爽やかな印象。 ソフト（sf）：爽やかでソフトな印象を与える。女性向けの商材によく合うカラー ダル（d）：やや堅めで真面目な印象を与える。男性向けの商材によく合うカラー。 ダーク（dk）：男性的で大人っぽく、重厚なイメージを与える。 ペール（p）：明度が最も高く、淡く透明感のあるトーン。背景色に適しており、柔らかく上品な印象。 ライトグレイッシュ（ltg）：背景色や広域に使う色に向いており、上品さや柔らかさがあります。 グレイッシュ（g）：アースカラーとも言われ、自然色やナチュラルさを表現するのによく使われます。 ダークグレイッシュ（dkg）：純粋な黒より柔らかい印象を与えることができます。 トリペン先生 色のトーンを統一すると、素人っぽい配色から一歩抜け出せます！ デザインのカラー設定をするときのポイント 色を組み合わせるときは、基準となる色相を決め、さらにトーンを合わせて全体の調子を整えていく、という大まかな知識は分かってきたでしょうか？ 最初は全て理解できなくても良いので、気をつけて欲しいポイントを紹介します。 ・メインカラーを決定する・メインのカラーは3〜4(6)色ほど選ぼう・メイン・サブ・アクセントを目安に色を絞ってみる・実際に組み合わせてみて、全体の見直しをする カラーガイドを作ろう。メイン・サブ・アクセントカラーを決める。 色を絞ると言っても、最初はどうやって色を選別していけば良いのか迷うと思います。 カラフルさを重視しているデザインを覗いて、一般的に製作中にカラーの設定をするとしたら、主に使う色を3～4色程決めます。（多くても6色程度） 次に、「メインカラー・サブカラー・アクセントカラー」を決めていくといいでしょう。メインカラーは、どんな色を使うかでデザイン全体の印象が変わってくるので、あとで色相を入れ替えることもクライアントと相談しながら納得できるカラー設定を心かげていきましょう。 メインカラー：デザイン上で最も広範囲、一番多く使用する色サブカラー：デザイン上で二番めに多く使用する色アクセントカラー：目立たせたい部分、などポイントを絞って使う色（ボタンなどに使われやすい） 色をたくさん使うほど、情報が増えて画面上はごちゃごちゃとしていくので、どれくらいどの色を使うのか決めておくと、あとで色の修正をする際もかなり楽になります。ぜひ覚えておいてください。 Web配色ツールサイト：HUE360 https://hue360.herokuapp.com 1つのキーカラーと調和する色を教えてくれるサイトです。 カラーパレットに円形で並ぶ色から、メインカラーをクリックすると、選択できる色が減っていき最初に選択した色にマッチする色だけが残っていきます。選択した色は下部に保存され、自動的に選択した色に調和するカラーコードを手にいれることができるので、悩んだときに便利です。 Web配色ツールサイト：Adobe Color https://color.adobe.com/ja/create/color-wheel▽メインのカラーを指定すると、補色、類似色、他にも様々なルールに基づいた色を教えてくれます。使い方はとても簡単です。 ▽他にも、写真を置いてテーマカラーを抽出したり、探索やトレンド機能を使うと様々なデザインの配色を見ることが出来るので、大変参考になります。 使用している画像素材 ◎素材サイトhttps://pixabay.com/ja/photos/%e6%a4%85%e5%ad%90-%e4%bc%9a%e8%ad%b0%e5%ae%a4-%e3%82%b3%e3%83%b3%e3%83%86%e3%83%b3%e3%83%9d%e3%83%a9%e3%83%aa%e3%83%bc-2181994/ 制作現場で色を分かりやすく指定する クライアントに色の効果など説明するとき以外にも、同じ事務所や現場で働くスタッフ同士で同じ色を相違なく認識する必要があります。ここでは、色を共有するときに便利なものを紹介します。 カラーコード・色見本を使って色を指定する。 色見本と同じ役割を担う「カラーコード」とは、色を6桁の英数字で区別したものです。主にWebデザインやPhotoshopなどのソフトで色を指定する際にもよく使われるので覚えておきましょう。 ▽色見本の種類は多岐に渡る。プロ仕様から一般向けまで多様な種類がある。 出典：PANTONE（パントーン） 色の名前とカラーコードが一目でわかるWEB色見本 Webでブラウザが変わっても同じ色を指定したいときは、こちらのサイトが便利です。原色を始め、和食や洋色、パステルカラーなどの幅広いカラーコードが網羅されているサイトです。 参考 また、色見本が立体的に見れるWebサイトなど、他にも色彩について学べるサイトはあるので、ぜひ気になる方は調べてみてくださいね。 まとめ：色を説明できるようにしよう！ デザイナーのセンスの見せ所は色の扱い方や魅せ方といっても過言ではありません。 ですが、感覚だけで色をデザインに乗せると、イメージと合わない、クライアントの意見と合わないといったことが多くあります。 色の要素を学ぶことは、色への理解が深まるだけでなく、自分以外の人に納得して貰える色選びができるというメリットがあります。 ぜひデザイナーの常識として、しっかり理解しておきましょう。 トリペン先生 色使いでバナーやサイトのイメージががらっと変わるので、いろんなサイトをみて勉強してみましょう！ 講座を完了したらクリックしてね！ レッスン完了 次のページへ デザイン基礎
