ホーム > ブログ > デザイン > ノンデザイナーの為のカラーその1

ノンデザイナーの為のカラーその1

2014.09.10

先日、打ち合わせ先でデザインの話が持ち上がりました。
やっぱりプログラマさんはデザインが苦手。どんなに入門編のデザイン教本を手にしても「とっつきにくい」、「やっぱりわからない!」ということで一行的にうまくならないということでした。
そこで昔、私の所属するWindowsPhoneハンズオン勉強会や.NET勉強会ヒーロー島でプログラマさん向けにやって好評だったデザインのセッションをまとめてみました。

難しいことを考えるのはもうやめよう!
押さえておきたいポイント3つ

デザインが苦手な人がどうしようか困っているときあれこれ考えるのは本当に苦痛です。
教本もデザインが分かっている人が書いてるからますます理解しにくい。
そんな人はまずはこの1番上の「苦手な人はまず同系色で」から実践してみるといいです。

困った時の3つのポイント

  • 苦手な人はまず同系色で
  • 困ったときはスーツ姿を思い出せ(※未掲載)
  • 困ったときはセパレーション(※未掲載)

苦手な人はまず同系色で

とにかくデザインは苦手!という方は無理して冒険せずに無難でいきましょう。

12色相環

混じりっ気のない色をぐるーっと輪っかにしたものを色相環といいます。今回は12色です。
この色合(色相)を中心にカラーコーディネートを考えていきます。
無理にまったく違う色合同士を組み合わせず、同系色もしくは近似色(似た色合)をあわせていくと無難に仕上がります。デザインが苦手な方でも失敗が少ないです。


同系色で合わせると、メリハリがつきにくいので色を明るくしたり、薄くしたり、鮮やかにして組み合わせる色と差をつけます。

メリハリをつけるにあたって色について最低限知っておいてほしいことをどのソフトやアプリでも見かけるカラーピッカーで説明いたします。

カラーピッカー

これはイラストレータのカラーピッカーです。

左側で直感的に色を選ぶことができます。


色合(色相)から使いたい色をまず選びます。白も黒も交じっていない純色が表示されてます。

色合(色相)を選んだら四角いグラデーションのかかったボックスで色の明るさ(明度)・鮮やかさ(彩度)などの色調(トーン)などを調整できます。

色の3要素

色相…色み(青、赤など)

明度…色の明るさ

彩度…色の鮮やかさ

※明度と彩度を合わせたものを色調(トーン)といいます

見てもわかるように、ボックスの右上が純色になります。なので右上に行けばいくほど鮮やかな色になります。左上に行けば白く(明るく)なります。右下は逆に暗くなり、左下は黒くなります。
ポイントは中央部分で、ここら辺は灰色が交じっているのでグレイッシュ・トーンと言ってくすんだ色調となります。

このように、一つの赤をとっても明るくすれば「ピンク」になったり、グレイッシュ×暗くすれば「ブラウン」になったりと同じ色合(色相)でもバリエーション豊富に色を作ることができます。


しかも同じ色合(色相)を使っているわけですから調和しやすく、失敗が少ないわけです。

もちろん、近似色たとえば赤であればその隣の色オレンジや赤紫(※上部12色相環を参考に)と合わせても同様で無難な色の組み合わせになります。

注意しないといけない点は上の組み合わせ例1のように明るさや鮮やかさにあまり差がないとぼんやりした印象になってしまいます。

明るさや鮮やかさにかなりがっつり差をつたほうがメリハリがつきます。

まとめ

色の組み合わせで困ったときは同系色でまとめると無難に仕上がるというお話をさせていただきました。

  • 同系色、近似色でカラーコーディネートするととても調和しやすい
  • 明るさや暗さに差をつけてメリハリをつける(カラーピッカーを利用するとわかりやすい)。

余談ですが、困った時同系色で合わせるという考えは私がまだ若かりし頃にオシャレヤンキーだったねえちゃんのアドバイスでした。

おかげさまで、当時洋服選びで困ったことはほぼありませんww

本能的に分かっていたねえちゃんもすごいと思います。

大人になってさらにカラーを勉強して納得。
デザインはまずは同系色で組み合わせるところから始めましょう!

この記事のタグ