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

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

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

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

詳細はこちら

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

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

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

web用配色に超便利!ウェブチルオリジナルPCCSによる配色シミュレータの紹介

PCCSトーンマップを使えば、配色が苦手なあなたでも不思議なことにそれなりの配色ができるようになります。なんせ私がそうでしたから。

PCCSマップを知らない、という方は以下の記事で紹介していますので参考にしてください。

そんなPCCSですが、もともとPCCSはweb用に開発されたものではなかったので、PCCSで定義している各色は、webで使用するには少し暗めの色域となっています。

そこで今回、web用色域を見直したオリジナルのPCCSマップを作成して、それを使って配色シミュレーションができるツールをつくってみました

本記事では、作成したオリジナルPCCSがどんなものかを解説し、配色シミュレーション事例を簡単に紹介します。

目次

オリジナルPCCSマップ

従来のPCCSマップ

一般的なPCCSマップは以下のようなものです。横軸に彩度、縦軸に明度をとってトーンと呼ばれる複数のグループが形成されています

PCCSトーンマップ

各トーンは、

  • 彩度の一番高いv(vivid)
  • 2番目の彩度の高いものを明度の高い順にb(bright)s(strong)dp(deep)
  • 3番目に彩度の高いものを明度の高い順にlt(light)sf(soft)d(dull)dk(dark)
  • 一番彩度の低いものを明度の高い順にp(pale)ltg(light grayish)g(grayish)dkg(dark grayish)
  • 一番左にはモノトーンがWhite~Blackまで5段階

といった構成になっています。

これを過去記事の中で以下のように紹介していました。

従来PCCSマップ

従来のトーンマップでは、日本色研事業株式会社発行の配色カードをベースにして色を定義しているため、少し暗めの色となっています。

例えば、色相を青とした場合、一番彩度の高いvividの青と、webのCSSでblue(カラーコード#0000ff)を選んだときに表示される青とでは次のように明らかにwebのblueが明るくなります。

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

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

※PCCSのカラーコードは、あくまで配色カードに合わせて個人的な主観で決めたものです。こちらのサイトを参考にさせて頂いています。

これではPCCSを用いてwebの配色をすると、全体に暗めの色域となってしまうので使いにくい、という問題がありました。

そこで、webの配色に使いやすいようにオリジナルのPCCSを作成してみたわけです。

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

次のような特徴があります。

①webセーフティカラーを中心にトーンを採用
②有彩色トーンの数を従来12トーンから15トーンに増やしてより細分化

従来のトーンマップと並べてみると次のようになります。

従来PCCSマップ

従来PCCS

オリジナルPCCSトーンマップ

オリジナルPCCS

追加したトーンは次の通りです。

  • vividstrongの間にhv(high vivid)lv(low vivid)を追加
  • light grayishgrayishの間にmg(middle grayish)を追加

webセーフティカラーを中心に採用、というのは例えば青の色相であれば次のようなカラーコードとなっています。

青のトーンマップ

どのトーンもwebセーフティカラー(各色3の倍数)であることがわかります。

こうして並べれば、トーンの数を15トーンに増やした理由もわかって頂けるでしょう。このほうがRGBの強度階調にしたがって自然に並べることができるからです。

ただし、色相によっては、webセーフティカラーから外さざるを得なかったトーンもあります。そういう意味で、”webセーフティカラーを中心に採用”としています。

配色シミュレーターについて

オリジナルPCCSトーンマップを使って配色できるツールを作成しました。

使ってみて頂ければ、使用方法は簡単にわかると思いますが、簡単に紹介させて頂きます。

配色チャート

配色は6色まで選んで並べることができます。配色を始める前は次のように円が6つ並んでいます。

配色チャート

※スマホやタブレート表示では、円が3つずつ2段に分かれて表示されます。

配色をスタート

配色を始めるには、どれでもよいので円をクリックします。すると円がハイライトされると同時に色相環オリジナルPCCSマップが表示されます。

配色チャートをクリック後

ここで円の中に”サイト背景色”と記載されているのは、後述するデモ画面に着色される部分を表しています。

色相環から色をクリックして配色する

有彩色を選びたい場合は、色相環のいずれかの色をクリックします。例えば、4番の赤味橙をクリックしてみると次のようになります。

色相に赤味橙をクリック後

トーンマップが着色されましたこのトーンマップから、好きなトーンをクリックすると配色チャートに反映されます。

試しに、b(bright)をクリックすると配色チャートに色が反映され、トーン名カラーコード(rgb10進表示と16進表示)が色の下に表示されます。

brightの赤味橙を配色

無彩色を選びたい場合は、色相環から色を選ばず、直接トーンマップの中の無彩色をクリックします。

以上を繰り返せば、6色の色が配色チャートに並ぶことになります。いったん配色した後でも、配色チャートをクリックすれば変更できます。

デモ画面を確認しよう

デモ画面が、配色チャートのすぐ下に折りたたんで配置されているので開けてみましょう

デモ画面(着色前)と着色箇所

色が配色される前はこのように全体にグレートーンとなっていますが、配色されると、配色チャートに合わせてサイト背景色やheaderなどの各部が配色されます

デモ画面の配色部は、配色チャートの円をクリックした段階で表示されます。

配色チャートとデモ画面の各部との関係は以下の通りです。

配色チャートとデモ画面配色箇所表示

試しに、先ほどの赤味橙色をベースにトーンオントーンベース(色相は固定してトーンを変化させることをトーンオントーンと呼びます)の配色をした場合次のようになります。

赤味橙トーンオントーンベースの配色
赤味橙トーンオントーンベースのデモ画面

色相は赤味橙(色相環4番)に固定し、清色系のトーン(グレイッシュでないトーン)を並べました。クリックボタンだけは目立たせるために補色(色相環16番の緑味青)を使っています。

デモ画面を見て気に入らなければ、何度でも配色を入れ替えることができますので、webサイトをどのような配色にするかを考えるのに活用できるでしょう。

まとめ

ウェブチルオリジナルのPCCSトーンマップと配色シミュレーターについて紹介してきました。

現段階では、まだwebセーフティベースの色しか選べませんが、もう少し色の選択幅が増やせるように、機能を追加していく予定です。

ぜひ、あなたのwebサイト配色のアイデア出しに活用して頂けると嬉しいです。

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

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

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