デザインをする上で色で悩んだときに私がやっていること

スタッフブログ

前回XDを遊びながら学ぶという記事を書きました。
その際にイラストを作成したのですが、このイラストを完成させる過程で考えたことを今回は書いていきたいと思います。

イラストの初期段階

色としては某海外アニメ映画を参考にカラフルなモンスターを描こうと思い、とりあえずいろいろな色を使って作成してみました。
マンションに住まわせたいなと思い、マンションといえばグレーかな……モンスターだし夜かな、背景黒かな……という感じでまず適当に色をつけています。

とりあえず作ってみたものの何かまとまりがないというか、どうもここから先進めたいという気分にならないというか……。実際ここまで描いてから気が進まなさ過ぎて放置したため時間が空いています。
進まなければ少し離れて考えるということも大事です。きっと。
ずっと放っておいても何も進まないので、進まない理由は何なのか、何が問題なのかをあらためて考えてみたところ、バラバラしてみえるのは色の問題ではないかと思い、色をまとめるという作業をしていきました。

色をまとめるとは

デザインをする際に心がけていることは、画面の中にできるだけ違和感をつくらないということです。
もちろん目立たせたい部分には逆に違和感を持たせる、という手法もありますが、今回は一枚のイラストを描こうとしています。バランスよくすべてのキャラクターが均等に目に入り全体としてまとまりのあるものにしていきたいと思い、「均一にする」「あまり浮いて見えるところをつくらない」など、このあたりを意識した「まとめる」という作業をやってみました。

色をそのままでつかわない

この段階でついている色の確認をすると、Illustratorに初期設定であるスウォッチのパレットの中身をそのまま使用していて、色自体に何も手を加えておらず、たとえるなら販売されている絵の具のチューブを他の色と混ぜずにそのまま塗っているような状態です。

※絵の具のイメージで色のお話をしたいので、今回はCMYK設定と仮定してお話をすすめていきます。

学生の時、絵の先生によく言われたものです。絵の具のチューブの色をそのままつかうなと。
別の色が混ざっておらず濁りのない色できれいではっきりとみえますが、はっきりと見えるということはそこだけ浮いて見えるということです。
今回のような全体にまとまりをもたせたいデザインの時に、これではかみ合わなくなるので調整をしていかなければなりません。

調和をとるにはどうすればいいのか。

色を人にたとえてみると、みな単独で行動している状態です。これでは一致団結できない。
お互いを少し理解してもらうために元の色にお互いの色を少しまぜてにごらせてみます。赤だったら反対色の緑を少しまぜる。すると最初の赤より落ち着いた色になります。

この要領でお互いを知っていってもらうと知らない人同士ではなくなりすこしまとまりがでてきます。

共通の色をつかう

次に、近い色味をつかっているパーツを共通の色に合わせていきます。
たくさんの色を使いながらも全体をまとめるのは少し難易度が高いので、色数をしぼっていくと、よりまとまりのあるおしゃれなデザインが簡単に再現できるのでおすすめです。
近いところに同じ色を続けて使うと画面が退屈になってしまうので、できるだけちらばせて共通の色を使うことによって、画面の端から端が色でむすびつき、全体がまとまりのある画面になります。

現実の色にしばられない

色をまとめるためにいろいろやってきましたが、もう一つ必要なのは現実の色にしばられないということ。
現実のこれはこの色だし、変えてはいけないな……という発想ではいつまでたっても画面が変わりません。
最初に私は「マンションといえばグレーかな」と書いていますが問題はここです。マンション=ビル=コンクリート=グレーという謎の固定観念、というか我ながら貧相な発想によって、気分がのらない事態を自分でひき起こしているので、ここを変えましょう。
何色だっていいのです! 全体がまとまれば。
合う色はなにか考えながらいろいろあてはめてみます。
モンスターたちがカラフルなので、そこが際立つようにあまり明るい色ではない色、でも強くなくて柔らかさがある色を、と思い、くすみのあるネイビーに変えてみました。

安易に黒を使わない

これも絵の先生によく言われたものです。
ここでいう黒とはK100%の黒です。
K100%の黒は強く効果的に使えばばっちり効いてきますが、強すぎて画面を分断してしまったり、使いようによっては浮いてしまう、画面のバランスをくずしてしまうこともあります。
「絵の具のチューブの色をそのまま使わない」というのは黒にも言えることです。
実は黒は黒以外の色で作れます。CMYをまぜたものも黒です。
またK90%もちょっとやわらかめの黒に見えます。
少し手を加えるだけでまとまりがでたりするので、気になったらそこも調整してみるとよいかと思います。
今回は背景に黒を使わないことにして、薄暗いなかでぼんやりみえるビルの影をイメージしてイラストをいれました。

完成

建物の形も調整、看板も足してみて、完成です。

最初のイラストよりはまとまりがでたのではないでしょうか。
今回は全体にまとまりをもたせたいという目的で色を調整していきましたが、そもそもテーマや目的はなんなのか、全体をどうみせたいのか、などで方法は変わってくると思います。
行き詰った際には色を一度まとめてみて、何かぼんやりして見どころがなくなってしまったなとおもったら、どこかひとつ見えるポイントにはっきり見える色をいれてメリハリを出してみるなど、いろいろ応用も可能なのではないかと思います。

自分が何を考えてデザインをしているか、書き起こそうとするとなかなか難しかったのですが、自分のしたこと、理由を振り返って確認する作業は非常に勉強になりました!
今後もデザインする上での発見があれば記事にしてお伝えできたらと思います。
ではまた次回!