今日は｢グレー｣のお話です。もっとグレーをページに取り込みましょう、という話を。

「グレー」と「彩度」
グレー=｢灰色｣というのは白と黒のちょうど中間の色です。
実はこの色はどんな色にも程よく溶け込むようにマッチする色なのです。(一部例外の色もありますが)
私たちが生活の中で目にする｢色｣には｢彩度｣(さいど)、→鮮やかさという1つの基準があります。
名前のとおり、色鮮やかな、の意味を持っています。赤や青、黄色といった色なんかがいい例でしょうか。
実はこの｢彩度｣は2つに分かれています。鮮やかさを持つすべての色を｢有彩色｣というのに対し、まったく鮮やかさがない色のことを｢無彩色｣といいます。
無彩色というのは、白･黒･そしてその中間に当たるすべての色のことです。白も無彩色に含まれるのです。 グレーも無彩色です。ほとんどの色に溶け込みやすい色なのです。
それ以外の色を有彩色。こげ茶色のようなくらい色でもまぶしすぎるぐらいに明るい黄色でも、少しでも｢鮮やかさ｣があれば、有彩色といえるのです。
それでも、色の中には溶け込みにくい色もあるでしょう。たとえば、真っ青な色にグレーはやや目立ちにくいです。同様に、赤や緑といった｢原色｣にもやや目立ちにくくなります。

濃淡で表現するグレーのバリエーション
これじゃグレーの意味がない?確かにそのとうりです。しかし打開策もきちんと考えてあります。
そんなときには、グレーの｢濃さ｣を微調整してみましょう。
グレーというのは直感的に｢灰色｣と思い浮かびますが、灰色の世界もいろいろとバリエーションがあります。
たとえば、白に近い灰色。つまり、明るいグレーですね。また、黒に近いグレー。こちらは暗い灰色。
このように、灰色の｢明るさを調整｣することで、赤や青や緑などの色の中でも目立たせることができます。

下の｢例｣で、白から10段階に色が変化し、最後には黒になるカラーチャートを載せてみました。白が黒の色みをもつ割合が0パーセントなのに対し、完全に黒そのものを100パーセントにしてあります。このちょうど中間、50パーセントの位置にあるのが、灰色です。

このチャートを使うと、実際のページ作りに、たとえば10パーセントのグレーや、90パーセントのグレーはほとんど使わなくてもいいと思います。限りなく薄いグレー、または限りなく黒に近いグレーだからです。文字の大きさを考えると、もともとやや小さめの文字にこの色を当てると、白すぎて見えにくくなったり、その逆にほとんど黒と見分けがつきにくくなってしまったり。それだったらはっきりとした色の白か黒にシフトしたほうが可読性は優れるからです。
つまり、これらの色の濃さで表現したグレーをページに使うならば、せいぜい3色か4色の色を使えば十分表現の幅が広がるのではないかと思います。

有彩色による色の衝突
実際のところ、過去の私のサイトでもそうでしたが、カラフルな色ばかり使いすぎたページもありました。しかしあとから読み直すと、わかりにくいものだと思いました。これはなぜかといいますと、それぞれの色の特徴がぶつかり、お互いが強調されるため、どこに目が言っても落ち着いて読むことができないからです。
それを無彩色のグレーにしてみたところ、強調したい部分が程よく目立ち、読みやすさも目の移動もずいぶん軽くなりました。
全体の文字の色をもともとの黒に同じ無彩色のグレーを織り交ぜることで、読みやすくかつインパクトも演出できる文章作りが楽しめますよ。

微妙な色みを加え、グレーカラーをつくろう
グレーだけではやや物足りない人には、こんなアイディアはいかがでしょうか?
無彩色であるグレーにほんのわずかな彩度を加え、色みをもったグレーを作るのです。
といっても、あまりに色みを与えすぎると、それこそグレーでなくなってしまいます。(もともとこの時点でグレーとはいえませんが)
グレーに少しだけ紫の色を加えると、大人っぽい味のダークパープルが出来上がります。以下で紹介する色を見ればわかりますが、彩度のあるカラーよりも黒に近い色づかいです。渋みのある大人っぽい色になります。