読者です 読者をやめる 読者になる 読者になる

sekaie engineers' blog

セカイエ株式会社が主催するエンジニア勉強会について

なんとなくこの色じゃあかん part1(基礎知識編)

どうも。最近は忘年会のことで頭がいっぱいの寺田です。

アドベントカレンダーの7日目を担当します。ちなみに関係ないですが、9月7日が誕生日です。

qiita.com

今まで何となくWebデザイナーという職種を捉えて、ひたすら納期に間に合うように業務していた感がありましたが、立派な上司や先輩方に囲まれてもう少し自分の職種に対して深掘りしていかなければならないと反省している今日この頃です。

そこで、まずはデザインをしていく上で避けては通れない「色」についてちょっとまとめてみました。

「色」って正直言葉じゃ説明難しいですよね〜 今まで漠然とこういうイメージだとか、こういう雰囲気とか、さらっとした感覚で説明することが多かったんですが、

やっぱプロとしてデザインをやって行くのであればもう少し深い説明ができないとあかんなって思ってます。

なんとなくこの色にしました。から→〇〇だからこの色にしました。

って言えるにはどうしたらいいんかな。。 そもそも「色」って言葉でうまく説明できんのかな。

色ってセンスじゃね?

とか色々考えてましたが、

一応配色にもセオリーがあるので、それをかなり基本的な部分から分析して考えながらデザインする方法に関して焦点をおいて記事を書いてみようと思います。

配色のセオリー

そもそも配色とは

感覚面での個性をふまえると同時に、色相・明度・彩度(色の三属性)の異なる色の無限の組み合わせに挑戦し、選択するという意味 by wikipedia

むむむ。。難しい。大変そう。

だが要するに色の組み合わせを考えるってことですよね。 その為にセオリーを学べば「色」を言語化して伝えるっていうことに繋がるかもしれない。

色の表現

色を言葉で表現するにはどういった方法があるのか。 ってことを色相・明度・彩度の色の三属性ごとに考えてみましょう。

【色相】

f:id:sekaie:20161207061128p:plain

このようなパターンでAとBは補色の関係にあります。 それと同時にAとBは色相という言葉を使って説明すると、 色相が遠いとか離れてるって表現になるわけです。 (逆に近いのは隣接する色になります。)

【明度】

f:id:sekaie:20161207062837p:plain

明度は高い低いっていう表現になります。 暗いとか明るいとかっていう表現は厳密にはあまりよろしくないみたいです。

【彩度】

f:id:sekaie:20161207064224p:plain

彩度は高い低いの他にもこういった表現があります。 確かに鮮やかとかはよく使ってますね。

※注意しておいてほしいのが、明度と彩度は必ずしも平行して高くなったり低くなったりしないってことです。

f:id:sekaie:20161207065424p:plain

あとは色を表現する方法ってないのかな。。 って考えた時に、名前がついてる色ってあったなって思いました。

例えば、桜色とかからし色とか黄金色とかです。 こういうのって赤黄色青とかと違って厳密に色を表現できるものですよね。 でもそこまで多くはないでしょって思ってたのですが、 思ってたよりかなり数が多くてびっくりしました。

www.colordic.org

これらをさらっと覚えておくだけでも結構プロっぽいですよね。 伝える時に色やイメージに深みが出てくるのではないでしょうか。

色の働き

ここが結構肝心な部分だと思います。

色って心理的にも様々な効果とか働きがあって、それが科学的にも証明されています。 その色の働き的な部分を紐解いて行くことが、 配色をする上でも説明する上でも重要になってくるわけです。

例えば色の効果や機能として代表的なものはこのような感じです。

【赤】

f:id:sekaie:20161207073058p:plain

赤はやっぱり暖かく感じる効果がありますよね。 あとは危険なイメージもあります。 気持ちを高ぶらせる効果や、 食欲増進効果もあるとされています。


【青】

f:id:sekaie:20161207073322p:plain

青は逆に寒く感じる効果がありますね。 あとは集中力を高めたり、冷静にさせる働きもあります。 食欲減退効果もあるのでダイエットグッズに活用されたりもしています。


【緑】

f:id:sekaie:20161207073629p:plain

緑は疲れを癒す効果があるとされています。 穏やかな気持ちになったり癒しや安心感を与えることができるので、 非常に様々なシーンでその効果を活用されていますね。


【白】

f:id:sekaie:20161207073934p:plain

白は純粋さや、清潔な印象を与えることができます。 また軽く見えるような効果があります。


【黒】

f:id:sekaie:20161207074243p:plain

黒は恐怖感や暗い気持ちになるといった効果はもちろんのこと、 重く見えたりする効果もあります。

他にも様々な効果や機能がありますので配色をする知識の一部として知っておくのもいいと思います。

それから先ほども少し出てきましたが、 暖色と寒色に関して少し考えてみましょう。

f:id:sekaie:20161207123301j:plain

このタコヤキの写真を見てもわかるように、 背景が暖色(赤)の方は美味しく見えて、 背景の寒色(青)の方はまずく見えるような効果があります。

厳密に言えば寒色の方が美味しく感じるような食材もありますが基本的には上の写真のような効果があります。

それから色は重さを持っているという点です。

下の画像をごらんください。

f:id:sekaie:20161207123737j:plain

白っぽい箱と、黒っぽい箱、2種類ありますが、どっちが重そうでしょうか。

黒ですよね。

これは単純に明度が高いと軽く見えて、低いと重く見えるという性質があるからです。

また、注意を引く色としては赤が非常に大きな効果を発揮します。

f:id:sekaie:20161207124244j:plain

こういったことが色の機能の基本的なことです。

視認性

こちらをごらんください。

f:id:sekaie:20161207124716j:plain

どちらが見やすいですか? 理由はなんだと思います?

これは文字の色が違うだけなのですが、 かなり見やすさに差が出ていますよね。

見やすさ、視認性は明度の差で決まります。 視認性はWEBデザインでは非常に重要な要素になります。

見やすいということはもちろんのこと、どこを目立たせて人に注目してほしいか。 そういった部分を明らかにさせる時には明度の差を意識しましょう。

ちなみに白黒の差が一番明度の差が大きいので、一番視認性が高いのは白と黒の組み合わせとなります。

誘目性

f:id:sekaie:20161207155502p:plain

誘目性の高い色の組み合わせは「赤、黄色、黒、白」等によって表現できます。 もちろん、あまり多用すると派手になってしまってダサくなってしまいます。

また、暖色、寒色は進出色、後退色とも言えます。 進出色は要素が飛び出て見えたりする効果があります。 逆に後退色は奥行きのある空間を演出したりする効果があります。

f:id:sekaie:20161207133832j:plain

与える印象が全然違いますね。

特定の目立たせたい部分で利用したり。 ページ全体に大胆に進出色を使って圧倒するようなイメージがいいのか、 後退色を活用して人を引き込むようなイメージかとか。

そういったことを考えながら色を使い分けるとクライアントやチーム内で説明ができて業務が円滑に進みそうですね。

part2(実践編)に続きます。。。

明日はナチュラルイケメンの中島さんが記事書きます!

ほな!