プレゼンやWEBの図解作りは彩度をあやつれば思うままだぜ

どうもこんにちは!
中学の時に藤子不二雄A先生の「まんが道」を読んで漫画家になりたいと三者面談で言ったところ担任と親に苦笑された半分青いブロガー・ムカイです。

 

私、新卒時に税理士業界に就職しながら途中で迷い道に入り込み、絵画修行をしていた時期があります。

デッサンから入って、モノトーンで描くのは結構やりこんだのですが、色について理解する前に頓挫したため、色づかいのセンスがありません。

今も趣味でたまに絵を描きますが、色については試行錯誤の連続です。

 

でも、仕事上でいろんな資料を見たり、ネット上でサイトのデザインを見たり、プレゼン資料を見たり。

そうすると、見やすい配色と見づらい配色があることがわかってきます。

そしてまた、自分でいろいろな資料を作ることで試行錯誤し、ある点に気づきました。

それは、彩度というものを意識するとわりと思うように配色できるぞ、ということです。

彩度って聞き慣れない言葉で、私も理解するのに時間がかかりました。

しかし、デザインを見やすくするためには彩度を考えないとダメなのだと思うに至りました。

なのでブログに使う画像(Canvaを使用)やプレゼン資料(Keynoteを使用)などを作るときは、色の種類や明るさとともに彩度をかなり意識するようにしています。

 

彩度とは何?

色について物の本を読むと「色環」という輪っかとともに、

  • 色相
  • 明度
  • 彩度

という用語が出てきます。

色相とは、青や赤、黄色などの色の種類で、これはわかる。

明度は文字通り明るさの度合いで、明るいか暗いかの違いなのでこれもわかる。

 

わかりにくいのは彩度です。

彩度鮮やかさの度合いを表すのですが、鮮やかさっていわれてもピンとこないのではないかなと思います。

私も、色相と明度については理解できるものの、彩度がいまいちよくわかりませんでした。

というより、彩度と明度の違いがよくわからない。

明度だけではダメなの?と思うわけです。

 

そのあたりを、実際に彩度と明度を変えながら見ていきたいと思います。

 

同じ色で明度と彩度を変えてみる

青を例に取り、彩度と明度をそれぞれ変えてみました。

全部違う色に見えますが、同じ色相で彩度と明度を変化させているだけです。

この四種類の色について順番に見ていきましょう。

① 鮮やかで明るい

まず右上は彩度も明度も高め。
つまり鮮やかかつ明るい青です。

② 鮮やかで暗い

右下は彩度高め、明度低めです。
つまり鮮やかかつ暗い色です。
鮮やかさと暗さって相反するようですが、違う尺度なのでこのように両立するわけです。

③ くすんで明るい

左上が彩度低めで明度高め。
つまり、くすんでいるが明るい色です。
これも相反しそうですが両立します。

④ くすんで暗い

最後に左下が彩度低めで明度も低め。
くすんでかつ暗い色です。

 

では次に、明度や彩度ごとにいろいろ比べてみましょう。

 

彩度を比べる①・明度が高い場合

まず明度の高い同士を比べてみましょう。
明るさは同じですが、左はくすんでいて右が鮮やかな色です。
鮮やかな右側が前に出てくるのがわかります。

彩度を比べる②・明度が低い場合

明度が低い同士ではどうでしょうか。
こちらも鮮やかな右側が前に出てくるように見えます。

明度を比べる①・彩度が低い場合

つぎに、くすんだ色同士で明度を比べてみます。
これは明るいか暗いかの違いなのでわかりやすいと思います。
左側はふたつともくすんだ色です。
上が明るく、下が暗い色です。
彩度が低いので落ち着いた雰囲気になります。

明度を比べる②・彩度が高い場合

右側の鮮やかな色同士で明度を変えています。
上は明るく、下は暗い色です。
どちらも前に出てきて活発な印象があります。

 

 

 

 

このように、鮮やかさと明るさは分けて考えることができます。

彩度は鮮やかかくすんでいるかを測る尺度。

明度は明るいか暗いかを測る尺度。

尺度が別なので、

「明るいけどくすんだ色」とか、

「暗いけど鮮やかな色」といったものが成り立ちます。

 

色相について・まず色の三原色を知る

ついでに色相についても見ておきましょう。

色の三原色

色の三原色は赤・青・黄です。

隣り合った色を混ぜる

三原色の隣り合った色同士を混ぜます。
すると紫・橙・緑ができます。

反対色=補色・色を目立たせる

向かい合っている色同士が反対色(=補色)です。
反対色を並べるとコントラストが最も強調されます。
目立たせたい箇所で意識してみるとよいでしょう。
また、これは絵の具の話ですが、反対色を混ぜることで綺麗なグレーを作ることができます。

実際に色を使ってみる

低彩度が心地よい

これは以前ブログ用のアイキャッチ画像として作った原子のイメージ図です。

真ん中のピンクが原子核で、周りを電子が取り囲んでいるというイメージです。

すべての色を彩度抑えめにしているので優しい色使いになっていると思います。

高彩度は活発なイメージだが・・・

上の図をすべて彩度高めにしてみました。
ギラギラした活発なイメージになりましたが、これはこれでいいかもしれません。
ただプレゼン資料やWEBサイトなどの場合、すべて彩度を上げてしまうと色が主張し合ってちょっと見づらいです。
目が疲れそう。
彩度を抑えめにすることで落ち着いた、目に優しい配色になっていると思います。

反対色で目立たせる

目立たせたい場合は反対色を使うと効果的です。

同系色で落ち着かせる

同系色でまとめるとさらに落ち着いた雰囲気になります。
目立たなくていいところはこのように同系色を使うといいと思います。

WordPressのカラーピッカー

最後に、WordPressのカラーピッカーを例にとって色の選び方をみてみましょう。

カスタマイズの画面で「色」を選ぶとこのようなパレット(カラーピッカー)で色を選べるようになっています。

 

左側の四角の
ヨコ軸で、色相
タテ軸で、明度

右がわの細長いハコで、彩度

を調整するようにできています。

右がわのスライダーを下げれば彩度は低くなります。
私は全体的に下げ目にしています。

 

他のソフトやアプリでも似たようなカラーピッカーがあると思います。

それぞれ仕様が違いますので、何を動かせば何が変わるのかを意識するといいと思います。

 

まとめ・彩度を合わせよう

彩度と明度について、多少はわかっていただけたでしょうか。

注意点としては、彩度を高くしようが低くしようが全体の彩度を合わせた方がよいだろうということです。

隣り合った色の一方が高彩度で、もう一方が低彩度だとまとまりのない配色になってしまうでしょう。

私自身は高彩度の色の扱いを難しく感じていて、低彩度で合わせるのが好きです。

好みの問題もあるかと思いますが、低彩度のほうが落ち着いて見えるのでおすすめです。

資料や図解作りをする機会があればぜひいろいろ試してみて下さい。

 

なにがしか、皆様の参考になれば幸いでございます。

 

参考 イラストギャラリー