彩度とは?色を操って思い通りのテイストを表現しようのアイキャッチ画像

デザイン

更新日: 2024/3/1

彩度とは?色を操って思い通りのテイストを表現しよう

character_balloon

イエローちゃん教えてほしいのー!

ピンクちゃんどうしたのー?

character_balloon
character_balloon

彩度ってどういう意味だったかしら?

あー彩度かぁー

character_balloon

じゃあ今日は彩度について説明するね!

character_balloon

彩度とは?

彩度とは?色を操って思い通りのテイストを表現しようの画像_2枚目
character_balloon

彩度とは、色の鮮やかさを指す言葉なんだよー

character_balloon

色の強さやあざやかさの度合いを彩度で表せるんだ

character_balloon

彩度が高いほど目立ちやすくて、彩度が低いほどくすんだ色味になるよー

character_balloon

彩度は、色の三属性のひとつだよ!

色の三属性について知ろう!

character_balloon

色彩を扱えれば、テイストやイメージは変えないまま雰囲気を変えることができるよね

character_balloon

色を操るためには色の三属性を理解することが重要だよ!

character_balloon

彩度は色の三属性のひとつなんだけど、色の三属性それぞれについて説明していくね

色の三属性1.色相ってなに?

彩度とは?色を操って思い通りのテイストを表現しようの画像_6枚目
character_balloon

色相は、色の相違のことなんだよ

character_balloon

赤、黄色、青はわかりやすいと思うけど、緑やオレンジなど、色にはそれぞれ特徴的に際立った色みがあるよねー

character_balloon

実は、色は人間が感知できる光の波長で、この波長が異なるから様々な色を認識できるんだよ

character_balloon

この波長の相違が、色相のことなんだ

character_balloon

つまり、色相を変化させると色自体がどんどん変化していくよー

色の三属性2.明度ってなに?

彩度とは?色を操って思い通りのテイストを表現しようの画像_8枚目
character_balloon

明度は、その名の通り色の明るさのことだよ

character_balloon

明るいと白に近づいていって、暗いと黒に近づいていくんだよねー

character_balloon

明るいことを明度が高い、暗いことを明度が低いっていうんだ

character_balloon

明度が高いと柔らかい印象に、明度が低いと暗い印象になるよー

色の三属性3.彩度ってなに?

彩度とは?色を操って思い通りのテイストを表現しようの画像_10枚目
character_balloon

彩度とは色の鮮やかさの度合いだよ

character_balloon

彩度が高い状態は、色味が強くて鮮やかなビビッドな色合いになるんだ

character_balloon

彩度が低い状態だと、くすんだ色味で地味な色合いになっていくんだよねー

character_balloon

派手で色の特徴を目立たせたいときは彩度を高く、無味で味気ない印象にしたいときは彩度を低くすると雰囲気が出るよ!

彩度の数値の意味は?何を表しているの?

彩度とは?色を操って思い通りのテイストを表現しようの画像_12枚目
character_balloon

彩度の数値は、色空間における中心からの距離を表しているよ

character_balloon

中心から離れるほど、つまり数値が大きくなるほど彩度が高い状態で、色味が強くなるんだよねー

character_balloon

赤青黄色の原色の純色で最大値の100となり、白黒灰色など無彩色で0になるよ

character_balloon

彩度を上げてと言われたら色味を強く、彩度を下げてと言われたら色味を抑えてという意味合いになるんだ

彩度の役割ってなんだろう?

character_balloon

色の三属性それぞれを操作することで色合いを操ることができるんだけど、三属性全てのバランスを整えないと理想の色味にならないよ

character_balloon

色相が決まったら、彩度と明度を調整することでコンテンツの雰囲気を作り出すことができるんだよねー

character_balloon

イメージしづらいと思うから、彩度が高い事例と低い事例を紹介するね

彩度が高いWebサイトの事例.コカ・コーラ

彩度とは?色を操って思い通りのテイストを表現しようの画像_16枚目
参照: コカ・コーラ
character_balloon

コカ・コ-ラのWebサイトは、彩度が高いわかりやすい事例だよ!

character_balloon

コカ・コーラはパッケージもパッと鮮やかな赤が特徴的だよね

character_balloon

飲料部分は濃茶から黒に近い色合いだから、彩度が高い赤がより映えるんだ

character_balloon

製品イメージとも合っていて、消費者の印象に残る上手な彩度が高い例なんだよー

彩度が低いWebサイトの事例.黒川温泉郷

彩度とは?色を操って思い通りのテイストを表現しようの画像_18枚目
参照: 黒川温泉郷
character_balloon

黒川温泉郷のイメージサイトは、基本色は黒と白で構成されている彩度が低いサイトだよー

character_balloon

写真も暗い色合いでマスクされていて彩度が低い状態を意識的に作り出しているんだよね

character_balloon

音楽とともに、雰囲気を味わえる効果的な演出が美しい彩度が低い例なんだ

まとめ

character_balloon

最後に、彩度についてまとめるね

まとめ

◆彩度とは色の三属性のひとつで、鮮やかさの尺度


◆彩度を高くすると色味が強くビビッドな色合いになる


◆彩度を低くするとくすんで地味な色合いになる

character_balloon

彩度についてわかってきたかな?

色を操るのが楽しくなりそうだわ!

character_balloon

ありがとうイエローちゃん

character_balloon
character_balloon

好みのテイストを表現できるようになるといいねー

最新の記事一覧
最新の記事一覧