デザイン初心者は配色の基本を覚えよう!デザイン紙面に考慮すべき配色の基礎知識とは!?

デザイン初心者は配色の基本を覚えよう!デザイン紙面に考慮すべき配色の基礎知識とは!?

デザイン初心者はまず配色の基本を覚えることが大切です。

デザインへ使う色には人の心を動かす力があります。デザインイメージを引き出すには、色が持つ特徴を上手につかうことで効果を発揮できます。

レイアウト要素や書体要素、写真要素が同じデザインであっても、配色の使い方により紙面のイメージは大きく異なります。この記事では、デザイン初心者が制作する際に必要最低限の配色基礎知識を説明しています。

デザイン初心者が考慮すべき配色基礎知識とは!?

色とはなんだろう?色の基礎知識!?

私たちの身の回りにはものがあり、それは人の目を通して人間の脳で色という情報を複雑に処理しています。すべてのものには色があるのです。デザインをする際には必ず色が必要になるのです。

色の表現手法とは

色を印刷物やPCのディスプレイなどで表現するには、大きく分けて2種類の方法があり印刷物では「色の三原色」(減法混色)、PCのディスプレイなどは「光の三原色」(加法混色)を利用しています。

印刷物等に利用される「色の三原色」(減法混色<げんぽうこんしょく>)

物体に光があたりその反射光を人が認識する「色の三原色(CMY)」は、印刷インクで色を再現する際に利用する方法です。

C(シアン)、M(マゼンタ)、Y(イエロー)の3つを掛け合わせることで色を再現してものに色をつけていきます。3色を均等に掛け合わせると無彩色になり、3色を100%ずつ掛け合わせると黒に近づきます。

実際にはこの3色では黒100%にはなりません。印刷物に黒を表現するには黒インク(K)を使用します。そのため印刷物等のデザインではCMYKの4色で様々な色を表現しています。

PCのディスプレイなどに利用される「光の三原色」(加法混色<かほうこんしょく>)

PCのディスプレイ等から発せられる光を人が認識する光の三原色(RGB)は、テレビやPCのディスプレイなどに表示する色を再現する際に利用する方法です。

R(レッド)、G(グリーン)、B(ブルー)の3つの色を掛け合わせることで色をつけていきます。3色を均等に掛け合わせると無彩色になり、3色を100%ずつ掛け合わせると白色(モニタやテレビでは)になります。

WebデザインなどはRGBで様々な色を表現しています。

プロジェクター等の投影する機材では3色を100%ずつ掛け合わせると白と言うよりは無色透明なイメージといった感じです。

投影した白の部分はあくまでもスクリーンや壁の色が白であるために白の感じを受けますが、スクリーンや壁の色が違う場合は白とは認識しづらくなることだと思います。

デザイン初心者はまずこの2種類の違いを覚えましょう。

無彩色と有彩色の違いとは!?

デザインの配色で使う色は、大きく分けると「無彩色」と「有彩色」の2種類に分類できます。無彩色とは、白や黒、グレーのようにカラーの要素を持たない色の総称です。また、有彩色とは、赤、青、黄のようにカラー要素がある色の総称です。

色の三原色とは

C(シアン)M(マゼンタ)Y(イエロー)形式では、印刷に用いられるインク(インキ)を利用して色を表現します。

色の三原色

光の三原色とは

R(レッド)G(グリーン)B(ブルー)形式では、モニターなどの発光を利用して色を表現します。

光の三原色

有彩色とは

色の三属性(色相・彩度・明度)を持つカラー色です。色味がある色のことを有彩色といいます。

有彩色

無彩色とは

明度のみで表される白・黒・グレーなどのカラー情報を持たない色のことを無彩色といいます。

無彩色

デザイン初心者は配色の基本「色の三属性」を覚えよう!

配色の基本として、すべての色は3つの性質を持っています。

これを「色の三属性」といいます。色相(H)<しきそう>、彩度(S)<さいど>、明度(B)<めいど>の3つです。この3属性の基本を理解しておくことで、専門的な知識がなくても効果的な配色をすぐに表現できるようになります。

下図を参考にして、しっかりとポイントを押さえておきましょう。デザイン初心者は、これを理解することが色を使いこなすためのポイントとなります。

色相(しきそう)とは

赤や青、黄といった「色味の性質」の違いを「色相」といいます。無数にある色の中から代表的な色を取り上げて円上に並べたものを「色相環(しきそうかん)」といいます。

色相環で表現した隣り合う色のことを「類似色(るいじしょく)」といい、反対側にある色のことを「捕色(ほしょく)」といいます。補色の両サイドの色のことを「反対色(はんたいしょく)」といいます。

色相環

色相環はこの記事にある1種類のみではありません。色の分け方により色々な種類が存在します。この記事では「PCCSの12色相環」と言われるものを使用して説明しています。

類似色(るいじしょく)とは

類似色とは「色相環の隣り合った色で作る配色」を表す言葉です。調和のとれた色の組み合わせになります。まとまりやすく使いやすい配色の1つといえます。

類似色

補色(ほしょく)とは

補色とは「色相環を2分割する位置にある色相同士の配色」を表す言葉です。色相差が大きいため、見た目に色でインパクトを与える配色となります。

補色

反対色(はんたいしょく)とは

反対色とは「補色色相の一方をその両隣の2色に分割した配色」を表す言葉です。補色よりも調和しやすく、洗練された雰囲気を感じます。使いやすい配色の1つといえます。

反対色

彩度(さいど)とは

彩度とは「色の鮮やかさ」を表す言葉です。もっとも彩度が高い色を「純色(じゅんしょく)」と呼びます。純色は混じりけのない色です。反面、もっとも彩度が低いのは「無彩色(グレー)」です。

彩度

明度(めいど)とは

明度とは「色の明るさの度合い」を表す言葉です。明度が高くなると「白」に近づき、明度が低くなると「黒」に近づきます。

明度

デザイン配色選びでもっとも重要な要素トーンとは!?

トーンとは同じ色相であっても、色のイメージはトーンによって大きく異なります。それぞれのトーンが持つイメージを活用すれば、制作物の目的イメージを表現しやすくなります。

トーンと印象の関係とは?

トーン(色調)とは、明度と彩度の組み合わせで表すことを「色の調子」と言います。

同じ色相であっても、色の印象はトーンによって大きく異なります。例として、明るいトーンは「優しさ」、「若々しい」といった印象を持ちます。反対に暗いトーンは「厳格」、「大人」といった印象を持ちます。

この印象の違いはデザイン配色を考える際の重要なポイントとなり基本的な配色の考えとなります。配色とは2色以上の調和のとれた色の組み合わせです。

デザイン初心者は配色を考える際にデザインの目的や用途を考慮したうえで、同じトーンもしくは近いトーン内で色を選ぶことが基本になります。色の印象は色相だけでなく、トーンによっても異なります。

デザイン制作時には、制作物や資料の用途や目的を十分に理解して、それに合うトーンを選ぶことが大切です。

下図は、PCCSトーン図 代表的なトーン名を表記しています。

PCCSトーン図

トーンが持つイメージを下図を交えて説明します。

ペール・トーン/うすい

高明度で低彩度

印象は軽い、あっさり、弱々しい、女性的、若々しい、優しい、淡い、かわいいなど

ペールトーン

ライト・トーン/あさい

高明度で中彩度

印象はパステルトーンとも呼び、明るく澄んだ色、軽さ、柔らかさ、子供っぽい、爽やか、澄んだ、可愛らしいなど

ライトトーン

ブライト・トーン/あかるい

高明度で高彩度(明清色)

印象は純色に少量の白を混ぜたような色。軽快、爽やか、澄んだ、鮮やか、カジュアル、陽気な、健康的など

ブライトトーン

ストロング・トーン/つよい

中明度で高彩度(濁色)

印象は鮮やかだけど少し灰みがかっている色。力強い、動的、情熱的、豊潤で存在感があるなど

ストロングトーン

ディープ・トーン/こい

低明度で高彩度(暗清色)

印象は伝統的、和風、落ち着きのある、秋らしい、充実、クラシカル、深みなど

ディープトーン

ビビッド・トーン/さえた

中明度で高彩度(純色)

印象は純色のことで、もっとも冴えたイキイキした鮮やかな色。派手、目立つ、アクティブ、華やかなど

ビビッドトーン

ライトグレイッシュ・トーン/あかるいはいみの

高明度で低彩度(濁色)

印象は落ち着いた、渋い、おとなしい、繊細、上品など

ライトグレイッシュトーン

ソフト・トーン/やわらかい

高明度で中彩度(濁色)

印象は穏やかで、上品、ぼんやりした、柔らかな、なじみやすいなど

ソフトトーン

グレイッシュ・トーン/はいみの

中明度で低彩度(濁色)

印象は濁った、地味な、渋い、シックな、風流な、落ち着いた、都会的など

グレイッシュトーン

ダル・トーン

中明度で中彩度(濁色)

印象は濁った、鈍い、くすんだ、しなやかななど

ダルトーン

ダーク・トーン/くらい

低明度で中彩度

印象は知的、大人、かっこいい、マニッシュ、凛とした、強そう、丈夫な、スタイリッシュなど

ダークトーン

ダークグレイッシュ・トーン/くらいはいみの

低明度で低彩度(暗清色)

印象は重い、陰気、強い、男性的、堅い、渋み、味わい深い、格調高いなど

ダークグレイッシュトーン

トーンにより見た目の印象は異なることが上図によりわかると思います。

下記に今回使用したPCCSトーン図をダウンロードできるようにしています。デザインをする時の配色テンプレートとして活用できればと思います。

PCCSトーン図、無料テンプレートはこちら

上記テンプレートはイラストレーターデータとPDF、JPEGデータを収録しています。

デザイン初心者の配色基本と考慮すべき配色基礎知識のまとめ

  • 色の表現手法は大きく分けて2種類「色の三原色」(減法混色)と「光の三原色」(加法混色)がある。
  • 「色の三属性」は色相(H)<しきそう>、彩度(S)<さいど>、明度(B)<めいど>の3つがある。
  • 同じ色相であっても、色の印象はトーンによって左右される。

デザイン初心者は配色の基本知識を覚えることで、色による効果をコントロールできるようになります。

配色は決して難しいものではなく見本となるPCCSトーン図等を最初は参考にしながら配色をおこなうとやりやすいです。

実践で配色を行う際には制作物の目的や用途を理解して色を決めるとより良いデザインができあがると思います。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする