ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

配色のコツはこれで決まり!PCCSトーンで配色の組み合わせを理論的に知る

突然ですが、配色で悩んでいませんか?私はよく悩みました。なんせ、服飾系の一家に育った母親に、『あんたは色のセンスがないねえ』と子供の頃からよく言われたからです。

だから配色に対しては、自分はセンスがないからなあ・・・とコンプレックスでした。服を選ぶときは店員を困らせ、絵を描くと斬新だね、と美術の教師に嫌味を言われ、家具を選ぶと落ち着きのない部屋ができあがりました。

そんな私がWeb制作スクールで配色技法を学び、PCCSトーンを知ってからは、なるほど、こう考えればいいのか!と目から鱗となり、今ではいつのまにか色に対するコンプレックスもなくなりました。

この記事は、配色に悩むあなたに、PCCSトーンというものを知ってもらい、配色のコツをつかんで頂ければと思い書いてみました。

途中、私の作った簡単なツールもありますので、ぜひご覧ください。

目次

PCCSとは

PCCS(Practical Color Co-ordinate System:日本色研配色体系)」は1964年に(一財)日本色彩研究所によって開発されたカラーシステムです。

色には3つの要素(色相彩度明度)がありますが、PCCSでは彩度と明度を融合したトーン(色調)という概念を取り入れていることに特徴があります

よく『配色のトーンを合わせて!』なんていう言い方をしますが、トーンってよくわからないですよね。でもPCCSには、そのトーンを明確に定義しているトーンマップというものがあるのです。

PCCSを使って配色をする場合、実際に使うのは次の2つのツールです。

色相環

色相環
出典:dic-color.com

色相環に関しては、美術の授業などで見たことがあるんじゃないでしょうか。

時計の9時位置から時計回りに

赤~橙~黄~黄緑~緑~青緑~青~青紫~紫~赤紫

といった順番に色を環状に並べたものです。隣り合った色を見れば、同系色が何になるのかがわかったり、暖色系寒色系中間色系、といった分類がされています。

また、色相環で反対側にある色を補色といいます(例えば、赤の補色は反対側にある青緑)。補色を使えば、お互いに色を際立たせる効果があると言われています。

例えば、赤の色をずっと集中して1分くらい見つめた後に白い紙を見ると、青緑色が数秒間浮かびあがるのがわかります。これが補色の効果で、人間の目は、ある色から多くの刺激を受けると、それを緩和する方向へ瞳や神経が調整することから発生します。

まぶしい光を受けると瞳が閉じ、暗いところでは瞳が大きく開いて調整するのと同じですね。

PCCSトーンマップ

これがPCCSの真骨頂となるトーンマップです。

PCCSトーンマップ
出典:dic-color.com

横軸に彩度、縦軸に明度をとってトーンが配置されています。右に行くほど彩度が高く、上へ行くほど明度が高いトーンだということです。

一番左側には縦に無彩色が5段階に配置され、Bk(ブラック)dkGy(ダークグレイ)mGy(ミディアムグレイ)ltGy(ライトグレイ)W(ホワイト)と名前がついています。

有彩色系では12個のトーンが並んでいます。

  • 一番彩度の高いのがv(ビビッド)
  • 次に彩度が高いトーンが明るい順にb(ブライト)s(ストロング)dp(ディープ)
  • その次の彩度のトーンが明るい順にlt(ライト)、sf(ソフト)、dull(ダル)dk(ダーク)
  • 一番彩度の低いトーンが明るい順にp(ペール)、ltg(ライトグレイ)g(グレイ)dkg(ダークグレイ)

と、トーン名がつけられています。それぞれのトーンの中には、それに応じた色相環があるわけです。

このトーンマップをおおまかに分類したものが次の図です。トーンマップの成り立ちを理解するのに役立ちますので参考にしてください。

PCCSトーンの成り立ち
出典:dic-color.com

私が初めてこのトーンマップを見て気づいたのは、彩度が高くなるとほど、明度は絞られていくということです。すなわち、明るめの色とか暗めの色を選ぶとすると、自然に彩度は落としていくことになるんですね。

PCCSでの色の呼び方

Webでは色を定義するのにカラーコードを使いますよね。ならば#ffffffならば#ff0000といったように。

PCCSトーンマップの各色の呼び方ですが、色相環の色ナンバートーン名とを組み合わせます。

例えば、赤は色相環では2番です。その赤のv(ビビッド)トーンの色を、"v2“(ビビッドの2番)、p(ペール)トーンの色ならば、”p2”(ペールの2番)というように呼ぶわけです。

※PCCSはもともとWebでの使用を前提とはしていないため、その実際の色は、配色カードという現物で定義されています。

PCCSトーンツール

とりあえず、PCCSトーンについて簡単に理解頂いたところで、私の作成したツールを紹介します。

色相環から好きな色相を選べばの各トーンを具体的に表示してくれます。

色相環の色をクリックしてください。トーン図に反映されます。
色相環
高明度
低明度 無彩色 低彩色・・・中彩色・・・高彩色

※注意
PCCSで取り上げる各色は、webのカラーコードで表示される色とは一致しません(詳しくは後述)。
そもそもwebで使用するカラーコードは、PCCSがリリースされたかなり後から導入されたため、PCCSが定義する、人間が心理的に知覚する色とは異なるものなのです。そこで今回の色表示では、日本色研発行の配色カードに近い色を得られるカラーコードとして以下のサイトを参考にさせて頂きました。

これ以外にもPCCSの色をカラーコードで表しているサイトはいくつも存在しますが、それぞれ少しづつカラーコードが異なるようです。私自身配色カードを手元に置いて、カラーコードで表示される色と比較した結果、一番近く感じた上記のサイトのカラーコードを使わせて頂きました。あくまで主観的に見て近い色、ということだとご理解ください。

使い方

使い方は簡単です。

①まず色相環からどれかの色をクリックする。
②すると右のトーンマップに選んだ色相が反映される。

これだけです。あと付加機能が次の2点です。

  • 各トーンをクリックするとカラーコードがアラート表示される
  • grayscale化ボタンをクリックすると、トーンマップがグレースケール化する

グレースケールを得られるようにしたのはグレースケール化することで、明度差が明確にわかるようになるからです。明度差のある色を選ぶことで、Webでの視認性が向上します

ここから先はこのツールを使ってPCCSでの配色のコツを具体的に解説していきます。

PCCSを使った配色技法

配色技法としてよく知られている基本的な概念が、トーンオントーントーンイントーンです。どちらかを基調にして、あとはアクセントカラーを加える、とか、色のイメージを利用するなどの応用を加えていきます。

トーンオントーン

トーンを重ねる、ということで、同一色相の中で、明度の違うトーンを選択していきます。

色相 黄味橙のトーンオントーン

例えば、色相に6番の黄味橙を選択して次のようにトーンを3つ選んで配色します。

トーンオントーン黄味橙の配色選択

すると次のような配色となります。

トーンオントーン黄味橙

色名は左から、lt6v6dk6です。

同じ要領で、よく使う他の色相に変えてトーンにlt、v、dkを選んで配色すると以下のようになります。

色相 赤のトーンオントーン

トーンオントーン赤

色名は左からlt2v2dk2です。

色相 黄のトーンオントーン

トーンオントーン黄

色名は左からlt8v8dk8です。

色相 緑のトーンオントーン

トーンオントーン緑

色名は左からlt12v12dk12です。

色 青のトーンオントーン

トーンオントーン青

色名は左からlt18v18dk18です。

色 紫のトーンオントーン

トーンオントーン紫

色名は左からlt22v22dk22です。

アクセントカラーをつける

以上のようにトーンを変化させても色相を固定すると、統一感が生まれますよね。このようにトーンオントーンで固定した色相をドミナントカラーといいます。ドミナント=支配する という意味ですから、まさに色相が全体のトーンを支配することで統一感を生んでいるわけです。

このようにトーンオントーンで統一された配色の中に、ドミナントカラーとは色相が離れた色相をアクセントカラーとして使うと効果的です。

例えば、先の例の黄味橙のトーンオントーン配色に、黄味橙の補色である青をアクセントカラーとして配置すると次のようになります。

トーンオントーンにアクセントカラーを置く

アクセントカラーはWebページの場合だと、目立たせたい文字やボタンに使うと効果的です

明度差を意識してトーンを選ぶのがコツ

また、今回の例では、トーンにlt、v、dkの3つを選びましたが、他のトーンを選択しても構いません。ただし、コツとしては、トーンのうち1色は必ず明度差をつけておくことです。

2色配色ならば必ず明度差のある2つのトーンを選ぶ、3色以上の配色ならば、うち1色は必ず他のトーンとは明度差をつける・・・。

そして、明度差をつけたトーンをベースカラーにする、のがよいでしょう。

なぜなら、テキストを記述するときに、基本的には黒基調または白基調で記述することになるからです。

したがって、テキストを黒基調とするならば、テキストを記述するベースとなるエリアは、明るいグレー、またはpaleトーンltトーンltgトーンを使うことが多くなります。

逆にテキストを白基調にするならば、ベースカラーにはまたは暗めのグレーdkgトーン、またはgトーンdkトーンをベースカラーに選択するのがよいでしょう。

トーンイントーン

トーンイントーンはトーンを固定しておいて、色相を変化させる、という配色です。トーンオントーンとは逆ですね。

複数の色相を選ぶことになるので、多彩なデザインをしたいときに使う手法といえるでしょう。

トーンイントーンでは、色相の選び方がポイントとなりますが、大きく2通りです。

・同系色を選んで、イメージを表現する
・同系色を選択せず、自由に表現する

同系色を選んでイメージを表現する

暖かいイメージを出す

色相環の2番、4番、6番あたりの暖色系の色を使って彩度の高いトーンを使うと暖かいイメージを出すことができます。

トーンイントーン暖色系
トーンイントーンv246

使用した色は左からv2v4v6です。かなり暖かく感じますね。

冷たいイメージを出す

色相環の14番、16番、18番あたりの寒色系の色を使うと冷たいイメージを出すことができます。

トーンイントーン寒色系
トーンイントーンv141618

使用色は左からv14v16v18です。冷たい感じがしますね。

このように、同系色を並べて色の持つイメージを表現するならば、自然に選ぶトーンとしては彩度の高い、vividやbright、deepあたりを選ぶことが多くなりますが、必ずしもそうではありません。

例えば柔らかいイメージを出したいときは、暖色系同系色のpaleトーンを使う、という手法があります。

同系色以外の色を選んでイメージを表現する

同系色以外の、色相環で離れた色を選ぶときによく使用されるのが、色相環上で等分に離れた色を選択することです。

2色ならば16番離れた補色を使用(dyard:ダイアードと呼びます)、3色ならば8番ごとの3色(triad:トライアドと呼びます)、4色ならば6番ごとの4色(tetrads:テトラードと呼びます)、といった具合ですね。

ここでは、3色のtriadの例を出してみましょう。

軽やかな感じを出す

paleトーンに統一すると軽い感じを表現することができます。

トーンイントーンでpaleを選択
トーンイントーンp81624

使った色は左からp24p8p16です。他の色を選んでもpaleトーンに統一すると軽やかな表現になります。

地味なイメージを表現する

grayトーンに統一すると地味なイメージとなります。

トーンイントーンでgrayを選択
トーンイントーンg81624

使用した色は左からg24g8g16です。地味ではありますが、おごそかなイメージも醸し出しますね。

トーンイントーンでアクセントカラーをつける

ではトーンイントーンでアクセントカラーをつけるにはどのようにすればよいでしょうか?

色相はこれ以上増やしたくありませんので、使用した色相をどれか1つ選んで、全く違ったトーンの色をアクセントカラーにすればよいでしょう。

このときも、できるだけ明度差を意識して選択しましょう。

例えば、上の地味なイメージの中にアクセントカラーを置いてみましょう。

トーンイントーンg81624にアクセントカラーを追加

g24g8g16といったgrayトーンにsf16を付け足してみました。

もっと明度差をつけるならば、lt16pale16にする、という選択も取れますが、グレイッシュな雰囲気をキープしたい、ということでsoftトーンを選びました。このあたりは表現したい内容や好みによるでしょう。

Webでトーンイントーンを使うならばモノトーンをベースにする

このように多彩な表現ができるトーンイントーンですが、Webページで使用するならば、テキストを記述するエリアとしてモノトーンを柔軟に取り入れていけば、トーンイントーンで表現したイメージを崩すことなくまとめることができます。

テキストを黒基調にしながらグレイッシュなイメージをキープするには、テキストエリアの背景色に淡いグレーを使うとよいでしょう。またはltgトーンを使います。

グレイッシュでなくピュアカラー系のトーンイントーンでテキストを黒基調にするならば、テキストエリアの背景色は白またはpaleトーンを使うとよいでしょう。

PCCSでの色をWebで使う上での注意点

このように、PCCSを使ってトーンオントーンまたはトーンイントーンを意識して配色していくと、自然と調和のとれた配色ができることが理解できたかと思います。

あとは、暖かいイメージや冷たいイメージの表現でみたように、各色相やトーンが持つイメージを知っておくことで、自分が表現したいイメージを表現していけばよいでしょう。

ここで、Web上でPCCSを使用する上で注意すべき点が1つだけあります。

それは、PCCSで表現している色は、Web上で表現できる色よりも狭い色域しか想定していない、ということです。

例えば、青という色を考えたときに、本ページのPCCSのの青(v18)の色とWebで一般的に青とされる色(カラーコード#0000ff)を比較すると次のようになります。

PCCSでの青(v18)
カラーコード:#0f218b
rgb(15,33,139)

Web上で一般的な青
カラーコード:#0000ff
rgb(0,0,255)

web上で一般的な青(#0000ff)の方が圧倒的に明るい青ですよね。

PCCSでの青はこれに比べると暗いことがわかります。なんせ、rgbの青成分だけでも見ても、webの255の約半分程度の139しかありませんし、さらに赤15緑33と少しですが赤と緑成分も入った青です。

でもどうでしょう。あなたが”青”と聞いて頭に思い浮かべる色は、どちらに近いでしょうか?人によって頭に浮かぶ典型的な青色は違うのですが、PCCSでは暗めの青色を”青”と定義しています。

これはなぜかというと、PCCSはあくまで人間が自然界で青と感じる色を表現しているのに対し、web上の青は、パソコンやスマホのDisplayで物理的に最大限表示できる青を示しているに過ぎないからです。

すなわち、カラーコード#0000ffに相当する青など自然界にはなかなか存在しなくて、青のように見えても少しは赤や緑成分も含まれていたりするのです。

世の中に完全無欠の白や黒が存在しないのと同じです。

ウェブチルオリジナルのPCCSトーンマップ

しかし、iphoneで撮影した写真が、実際よりも鮮やかできれいに見えるように、人間は自然の色よりも鮮やかに加工した色のほうを綺麗だと感じてしまうものですよね。

したがって、自然界に実際のあるかないかは別にして、せっかくweb上で表現できる鮮やかな青をPCCSでは想定していないのは、webデザインにPCCSを活用するには大変不便です。

そこで、Web用に色域を見直したウェブチルオリジナルのPCCSマップを作成して、配色シミュレータを作成してみました。ぜひあなたのWebサイト配色にご活用ください。

まとめ

明度と彩度とを融合したトーンという概念をもつPCCSを配色技法として使えば、センスのない私でもあなたでも調和のとれた配色を作り出していくことが可能です。

今回紹介したトーンオントーンやトーンイントーンは、色相とトーンを組み合わせて配色していく上で、基本的な手法です。配色技法には、これらとは別に、さまざまな表現する手法もありますので、別の機会に紹介できたらと思います。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる