0LINEどうもこんにちは!中学の時に藤子不二雄A先生の「まんが道」を読んで漫画家になりたいと三者面談で言ったところ担任と親に苦笑された半分青いブロガー・ムカイです。私、新卒時に税理士業界に就職しながら途中で迷い道に入り込み、絵画修行をしていた時期があります。デッサンから入って、モノトーンで描くのは結構やりこんだのですが、色について理解する前に頓挫したため、色づかいのセンスがありません。今も趣味でたまに絵を描きますが、色については試行錯誤の連続です。仕事上でいろんな資料を見たり、ネット上でサイトのデザインを見たり、プレゼン資料を見たり。すると、見やすい配色と見づらい配色があることがわかってきます。自分でいろいろな資料を作ることで試行錯誤し、ある点に気づきました。それは、彩度というものを意識するとわりと思うように配色できるぞ、ということです。彩度って聞き慣れない言葉で、私も理解するのに時間がかかりました。デザインを見やすくするためには彩度を考えないとダメなのだと思うに至りました。ブログに使う画像(Canvaを使用)やプレゼン資料(Keynoteを使用)などを作るときは、色の種類や明るさとともに彩度をかなり意識するようにしています。彩度という用語が出てきます。色相とは、青や赤、黄色などの色の種類で、これはわかる。明度は文字通り明るさの度合いで、明るいか暗いかの違いなのでこれもわかる。わかりにくいのは彩度です。彩度は鮮やかさの度合いを表すのですが、鮮やかさっていわれてもピンとこないのではないかなと思います。私も、色相と明度については理解できるものの、彩度がいまいちよくわかりませんでした。いうより、彩度と明度の違いがよくわからない。明度だけではダメなの?と思うわけです。そのあたりを、実際に彩度と明度を変えながら見ていきたいと思います。同じ色で明度と彩度を変えてみる青を例に取り、彩度と明度をそれぞれ変えてみました。全部違う色に見えますが、同じ色相で彩度と明度を変化させているだけです。この四種類の色について順番に見ていきましょう。鮮やかで明るいまず右上は彩度も明度も高め。鮮やかかつ明るい青です。鮮やかで暗い右下は彩度高め、明度低めです。鮮やかかつ暗い色です。鮮やかさと暗さって相反するようですが、違う尺度なのでこのように両立するわけです。くすんで明るい左上が彩度低めで明度高め。くすんでいるが明るい色です。これも相反しそうですが両立します。くすんで暗い最後に左下が彩度低めで明度も低め。くすんでかつ暗い色です。次に、明度や彩度ごとにいろいろ比べてみましょう。彩度を比べる1・明度が高い場合まず明度の高い同士を比べてみましょう。明るさは同じですが、左はくすんでいて右が鮮やかな色です。鮮やかな右側が前に出てくるのがわかります。明度が低い同士ではどうでしょうか。こちらも鮮やかな右側が前に出てくるように見えます。明度を比べる1・彩度が低い場合つぎに、くすんだ色同士で明度を比べてみます。これは明るいか暗いかの違いなのでわかりやすいと思います。左側はふたつともくすんだ色です。上が明るく、下が暗い色です。彩度が低いので落ち着いた雰囲気になります。右側の鮮やかな色同士で明度を変えています。上は明るく、下は暗い色です。どちらも前に出てきて活発な印象があります。このように、鮮やかさと明るさは分けて考えることができます。彩度は鮮やかかくすんでいるかを測る尺度。明度は明るいか暗いかを測る尺度。「暗いけど鮮やかな色」といったものが成り立ちます。色相について・まず色の三原色を知るついでに色相についても見ておきましょう。色の三原色は赤・青・黄です。隣り合った色を混ぜる三原色の隣り合った色同士を混ぜます。すると紫・橙・緑ができます。反対色=補色・色を目立たせる向かい合っている色同士が反対色(=補色)です。反対色を並べるとコントラストが最も強調されます。目立たせたい箇所で意識してみるとよいでしょう。これは絵の具の話ですが、反対色を混ぜることで綺麗なグレーを作ることができます。実際に色を使ってみる低彩度が心地よいこれは以前ブログ用のアイキャッチ画像として作った原子のイメージ図です。真ん中のピンクが原子核で、周りを電子が取り囲んでいるというイメージです。すべての色を彩度抑えめにしているので優しい色使いになっていると思います。上の図をすべて彩度高めにしてみました。した活発なイメージになりましたが、これはこれでいいかもしれません。プレゼン資料やWEBサイトなどの場合、すべて彩度を上げてしまうと色が主張し合ってちょっと見づらいです。彩度を抑えめにすることで落ち着いた、目に優しい配色になっていると思います。反対色で目立たせる目立たせたい場合は反対色を使うと効果的です。同系色で落ち着かせる同系色でまとめるとさらに落ち着いた雰囲気になります。目立たなくていいところはこのように同系色を使うといいと思います。最後に、WordPressのカラーピッカーを例にとって色の選び方をみてみましょう。カスタマイズの画面で「色」を選ぶとこのようなパレット(カラーピッカー)で色を選べるようになっています。右がわの細長いハコで、彩度を調整するようにできています。右がわのスライダーを下げれば彩度は低くなります。私は全体的に下げ目にしています。他のソフトやアプリでも似たようなカラーピッカーがあると思います。それぞれ仕様が違いますので、何を動かせば何が変わるのかを意識するといいと思います。まとめ・彩度を合わせよう彩度と明度について、多少はわかっていただけたでしょうか。注意点としては、彩度を高くしようが低くしようが全体の彩度を合わせた方がよいだろうということです。隣り合った色の一方が高彩度で、もう一方が低彩度だとまとまりのない配色になってしまうでしょう。私自身は高彩度の色の扱いを難しく感じていて、低彩度で合わせるのが好きです。好みの問題もあるかと思いますが、低彩度のほうが落ち着いて見えるのでおすすめです。資料や図解作りをする機会があればぜひいろいろ試してみて下さい。なにがしか、皆様の参考になれば幸いでございます。原西さんは量子コンピューターよりスゴイか入場行進がダラダラしてるのに甲子園で勝ち上がる高校が見てえ・・・オヤジの中ではトップ集団を目指す!日本語直訳ロックの王様に謁見してきた薬剤師の方にお願い。声をひそめてほしいぜ。壮年、意識は青年、こころは少年。