見出し画像

【Vol.12】アイビスペイントではじめる謎制作ライフ「めざせ色彩マスター」

a1one

今回は色についての解説です。

「色を使いたいけどどうしてもチープになっちゃうよ～」みたいなことあるじゃないですか。

色を使うときの極意！とまではいきませんが、私の感覚的なあれこれを書くだけ書こうと思います。マサラタウンにさよならバイバイしましょう。


Tips:HSBについて

今回の記事では度々「HSB」という言葉が出てきます。
これは、色の三属性である
Hue(色相)
Saturation(彩度)
Brightness(明度)
を表しています。

色相とは、「色味の違い」です。
0°から360°の角度で表現し、赤は0°、オレンジは30°、黄は60°……のように角度で色味が決まります。
角度なので、360°は「0°の一周」で同じ赤になります。

彩度とは、「色の鮮やかさ」です。
0%から100%で表現し、0%だと一切鮮やかさが無い、「白・黒・灰色」になります。
彩度は「数値を上げるほど色が浮き出る」感覚でしょうか。

明度とは、「色の明るさ」です。
0%から100%で表現し、0%だと必ず「黒色」になります。100%が最も明るく、特に彩度が0%の場合は「白色」になります。
「数値を下げるほど暗くなる」、それが明度です。


原色は絶対使わない

原色とは、赤(#FF0000)、緑(#00FF00)、青(#0000FF)の三色です。

配色をミスったフランス？？？

見てわかる通り、色の主張がとんでもなく激しいです。目に優しくない。
これらがデザインに紛れ込んだら崩壊が始まるので、非常にお勧めできない色たちです。

他にも、カラーの画面で「真ん中のひし形の右端に丸がある色」(つまりHSBのSとBがどちらも100%の色)は基本的に主張が激しいので、あんまりおすすめしません。

もしかしたら「赤青紫を使った謎が作れないよ！」と嘆く人もいるかもしれませんが、その点については後から説明します。

付け加えで、真っ黒(#000000)/真っ白(#FFFFFF)を使うよりかは、ちょっと色を変えて「灰色っぽい黒(#1F1F1F)」や「灰色っぽい白(#F1F1F1)」を使ってみてはいかがでしょうか。

真っ黒と真っ白はちょっと使いまわしが難しいです。上のようなモノクロで二色の場合では対比が効いて良いのですが、他の色も加えて普段使いするなら、ちょっと色を濁して主張を抑えておくと無難だと思います。

無難にいくならちょっとだけ抑えた色を

上で説明した通り、HSBのSとBがどちらも100%の色はあまりおすすめできません。では、どんな色を使えば良いのでしょうか。

無難で一番シンプルなことを言えば、「SとBを100%から少し遠ざけた色」です。

ここで、Googleがロゴに使用している四色を見てみましょう。

黄(#FBBC03)に関してはほぼSとBが100%ですが、青(#4186F4)と赤(#EC4235)はSの数値を、緑(#34A853)に関してはSとBの両方を下げています。

黄がほぼSとBを下げていない理由ですが、青や赤と同じレベルまで下げてしまうと薄い黄色になってしまい、弱いイメージが生まれるため(という予測)です。

こんな感じでSとBを少し下げた色を、個人的に抑えた色と呼んでいます。抑えた色は、配色をミスったフランスのような原色よりもはるかに落ち着いて見えますね。

フランスの国旗の青・赤は原色じゃないです

なので、基本的にデザインには抑えた色を使いたいところです。

自分の好きな作品から色を抜き出してみる

先ほどGoogleのロゴから色を抽出したように、自分が見て「この配色、良い感じに見えるな」と思った作品から色を取り出してみて、その色で謎を作ってみてください。めちゃくちゃクオリティが上がります。

↓これはゐぬくんのパレット(私のパレット、いつかツイートした気がするのですが見つかりませんでした　どこに消えた……？)

今回はこんなところです。いかがでしたか？
色は本気で学ぼうと思えばいくらでも深くなります。私もそんなに色に沼ってないのであんまり言えませんが、できる限り精進します……

それでは！

リクエスト募集

「こんなことを教えてほしい」「ここがわからない」など、知りたいことを書いていただけると記事を作る参考になります！

リクエストはgoogle formから→https://forms.gle/QdTbCywH9Uy9Y18V6

また、X(旧Twitter)のDMにて記事に関する質問を送ってもらうと答えられる範囲で答えます。わからない内容がありましたらこちらまで