誰かに見てもらうための、簡単なデザイン

配色の基本・色相環は指揮総監 〜色、死にたもうことなかれ〜

第1回目の(まともな)記事は、デザインをする上でもキホン!というか、最初にここで悩む人も多いんじゃないかなぁ…と思う「色」について書きたいと思います。

イメージカラーは決まってるけど、それに合う色が分からない…とか、商品のPOP作りたいけど、色はボンヤリしたイメージしかない…とか、この色が好きだけど、どこにどう使ったらいいか分からない…とか。悩むことはないでしょうか?…え…ないですか…!?

色、配色についての基本的な考え方と、使い方によって得られる効果などを実例を交えて紹介します。

配色について考える時は、まずは色相環から

基本的な色を円状にして分かりやすく置いた、「色相環(しきそうかん)」という表があります。

12色相環

色相環にはもっと色数の多いものもありますが、ここでは分かりやすく一般的な12色のものを使います。12色の色っていったら小学校の頃使った12色色鉛筆とか思い出しがちですが、それとはまた違った色になります。そういえばクーピーって色鉛筆なんでしょうかクレヨンなんでしょうか…。
似たような表は、WindowsのWordなどでも見られます。

2-hue_06

Word2010のフォントの色を変える画面で出てくる表です。これは6角形になっていますが、色の基本的な並びは色相環と一緒です(上の色相環とは上下逆になってますけど…)。なぜこの表が重要なのかと言うと…

使いたい色の類似色、反対色がすぐ分かる

これが分かることによって、どの色を使ったらいいかの大体の目安になります。
色相環は、使いたい色の両隣、または近い場所にある色を「類似色」、対面にある色を「補色」といいます。類似色はともかく、補色って言われてもなんか
ピンと来ないですよね…色を補うってこと?補色のことは「反対色」ともいうらしいので、そっちの方が分かりやすいような気もします。

例えば、メインカラーに赤色を使いたい場合、類似色と補色はこうなります。

2-hue_12

類似色・補色を使うことで得られる効果

●類似色を使ってデザインする…全体的にまとまった雰囲気になる
●補色を使ってデザインする…インパクトがあり、にぎやかな雰囲気になる

作りたいイメージに沿って、この色相環を元に色を決めていくとやりやすいです。

具体的にはどうなるの?

2-hue_08
例えば、この写真を使って新作のイチゴロールのPOPを作ることにします。
POPを作る設定を用意しました( ´∀`)bグッ!

街の小さなケーキ屋さんのPOP

『春の新商品をアピールしたい。商店街の中にあるので、人通りが多い。道行く人の目にパッと留まるようなものがいい。POPはお店のウィンドウに貼りたい』

こんな要望が出たとします。商品の雰囲気も大事にしつつ、目立つものを作らないといけません。上の説明でいくと、補色で作った方がインパクトがあるようです。写真は赤色がメインです。なのでこの赤色をメインカラーにして、補色…反対側に位置する「青色」を使うことにしました。また、目につきやすいように、文章は短めで文字は大きくします。

2-hue_16

全体のデザイン。まず写真は写真を貼り付けた風にしてちょっと傾けました。文字は、温かみのある手書き風を使っています。その上に、メインの赤色と補色の青色で色をつけました。それだけじゃ少し寂しかったので、補色の隣の緑色で説明文を色付けしました。そう、そのまま色相環通りに色をつけたんですよ…。

みっ…見づらい…!!インパクトはあると思うんですが、何だか目がチカチカして読みづらいです…。ていうか赤の文字と青色がせめぎあってギザギザに…こりゃダメだ…。補色を使うと、インパクトはあるけど、色味が反対すぎてコントラストがきつく、目がチカチカしちゃうってデメリットが出てくることがあります。
これじゃイチゴロールも台無しですよね…。これをちょっとづつ調整していきます。

チカチカする時は、彩度と明度を調整する

色は、色相環の色合いだけではなく、それに彩度(鮮やかさ)と明度(明るさ)も加わって表現されます。例えば赤色の場合、

彩度

彩度を上げると、原色っていうんでしょうか…キツい赤色に、彩度を下げるとくすんだ赤色になります。

明度

明度を上げると、だんだん白に近づいていきます。逆に落とすと、元々の原色の赤を通り越して、どんどん黒に近づいていきます。
補色を使って、ギラギラした感じになってしまった時は、彩度と明度を調節すると見やすくなります。

  • 彩度を上げる…原色に近くなり、派手さが出る。
  • 彩度を下げる…くすんだ色味になり、落ち着いた雰囲気になる。
  • 明度を上げる…パステルカラーっぽくなる。最終的には白に。
  • 明度を下げる…暗い色味になる。最終的には黒に。

2-hue_26

wordの色の設定の画面でも何となく、彩度と明度が分かるような気がしますね。中心に行けば行くほど鮮やかに、そして白くなっていっています。

2-hue_29

明度と彩度を調整しました。背景は青の明度をあげて少し明るくし、彩度も下げて、明るいけどくすみのある色合いにしました。文字は明度を上げて淡い感じにしました。比べてみると…

2-hue_33

調整した後の方が見やすくて、またケーキの雰囲気にあった可愛らしい感じになっています。また、背景に補色を使用しているので、赤がベースになったケーキの写真もよく目立ちます。淡い色も使ったので、ちょっと春らしさも出たんじゃないかな…と思います。

類似色で作ったらどうなるの?

対して、類似色を使ったらどうなるの?というわけで、先ほど作ったPOPを類似色で着色しなおしてみます。

2-hue_37

メインカラーである赤色の左隣にあるピンク味のある赤を背景色にし、同じ類似色の黄色とオレンジを文字に使っています。彩度、明度は調節していませんが、同系色だからか、赤文字×青背景の時よりはギラギラ感はないものの、原色系なので、色味がキツいです…。しかし先に作った青いPOPよりは、まとまりのある感じがする…というか、POP全体を通して「イチゴ!!」っていう感じが伝わってきます。
補色で作ったPOPと並べて見てみると…

2-hue_41

ぱっと見は赤いPOPの方が目立ちます。イチゴの雰囲気も満載です。しかし、肝心のケーキの写真はどうでしょうか?赤いPOPだと、背景が類似色(同系色)なので、ケーキの写真があまり目立たないような気がします。ケーキが際立って見えるのは青色のPOPの方かな…。赤いPOPが目立つのは、赤という色が目立つ色だからであって、決してメインのケーキを目立たせる色ではないのです…。
ここまで来ると、何となく「補色」の意味が分かるような気がします。「補色」っていうのは、メインとなる色を引き立てる色のことなんですね。だから「色を補う」んですねー。うん。

目立たせたいものがはっきりしている場合、補色を使った方が対象物が目立つので、見てもらいたい部分に自然に視線を誘導できます。 特に背景に補色を置くと、手軽に文字や写真を目立たせることができます。対して類似色を使うと、全体的にまとまりが出て、見せたいものの雰囲気を出したり、また雰囲気に溶けこませることができます。 なので、ケーキの雰囲気に合わせたPOPがいいといった希望があれば、類似色を使ってデザインしてもいいかもしれません。
ケーキ自体を見てもらいたい!という時は補色で、ケーキの雰囲気に合わせてアピールしたい、という時は、類似色でデザインする、この流れが基本になると思います。

でもこれで完成じゃない…

上のPOPは、色相環の色をそのまま使って、それをベースに作っていきました。でも、これだと少し色味がキツいし、説明文何だか読みにくいし、デザインがシンプルすぎて、もうちょっと何か欲しいような気がします…。なので、色相環の流れを汲みつつ、ちょっと手を加えます。

そういえば、色相環には黒と白がない…

そうなのですよ!色相環には白と黒はありません。白と黒はどこにあるかというと…

2-hue_45

独立しています。白と黒は色合いを持たず、明度だけで表現されます。先ほどの彩度と明度の説明で、明度を上げると白に、下げると黒に近づく、という話をしましたが、黒と白と中間色のグレーはそれで表現されます。ちなみに彩度も上げると白に、下げると黒っぽくなりますが、グレーに近い色合いになります。

2-hue_48


グラフィックソフトのIllustratorとPhotoshopのカラーパレットが分かりやすいかなぁ…と思います。これはIllustratorCS6のカラーパレットです。左右で色相環での色合いを、上下で明度を表しています。これを見ると、黒と白は色相環の流れに乗っていないのが分かります。

白と黒は独立している

なので、白と黒は補色、類似色共に違う流れを与えてくれる色だと思ってもらえればいいかと思います。例えば、先ほど類似色で作ったケーキのPOPはケーキの写真が目立ちませんでしたよね。なので、ケーキの写真の周りに白と黒を加えてみます。

2-hue_53

ケーキの写真が周りから切り離されて、浮いたような感じになりました。これでケーキの写真も目立ちます。白と黒は色相環の流れに属さないので、他との差を分かりやすくできる色かな、と思います。ただ、明度に左右されるので、対象物の明度によっては効果がはっきりしないこともあります。
上の例は、白色だと明るい感じに、黒色だと引き締まった感じになりました。こうやって一色加えてやるだけでも雰囲気が変わってきます。
んじゃ、まぁ、ここまでの流れを汲んで完成させます。

2-hue_56

できました!一気にどどーんと!ww
まずは…背景に白の枠線を入れてアクセントにしました。お花の模様も入れました。お花は、文字を邪魔しないように、背景と同じ色で、明度と彩度を調整してさりげなく加えました。
そして「いちごのロールケーキ」の文字を目立たせるため白で入れ、遠目からでも分かるように文字も太めにしました。背景が濃い色なので、説明文は明度を上げて、淡い感じにして読みやすくしています。
赤いPOPの方には写真にも白の枠線を加えて写真を目立たせました。青いPOPの方は、そのままでも写真が目立ったので、さらに強調すべく写真を大きくしました。
他に使った小技は、文字の色を上から交互にしたこと。これでNew、タイトル、説明文、価格の区切りを分かりやすくしました。使う色数も減らして、派手さを少し抑えました。あと、価格の円も文字を少し小さく…これで値段も分かりやすくなります。
こんな感じですかね…。どっちの方が好きですか?この辺り好みや用途によるかもしれません。これで目にも留まりやすいかなー?

まだある類似色・補色の使い方

もう一つ、類似色・補色を使う際の注意?みたいなのがあります…。それは文章の長さ。補色は反対の色合いを使うので、長い文章を読んでもらう時に使うと、目が疲れちゃうかもしれません…。こういう時は、類似色でまとめた方が目に優しいです。

2-hue_60

2-hue_62

長い文章を加えて、ホテルのメニュー風にしてみました。違いは背景色を変えただけです。赤とピンクの類似色でまとめたもの、補色として水色を敷いたものです。見た目がギラギラしないように、明度と彩度も調整しました。
どうでしょうか?長い文章の部分を見ると、類似色の方が読みやすい感じがしませんか…?補色の方だと、文字は分かりやすいですが、彩度と明度を調節したとはいえ、文章をずっと読んでいると目がチカチカしてきます…。 長い文章を読ませたい時は類似色でまとめた方が読んでもらいやすいです。補色は短い文章でガツンと伝えたいときに向いてるかな?

まとめ

類似色を使う時

  • ・対象物の雰囲気を強調したい時
  • ・場の雰囲気になじませるものを作りたい時
  • ・長い文章を読んでもらいたい時

補色を使う時

  • ・対象物が決まっていて、それを目立たせたい時
  • ・パッと目に留まらせるような、インパクトのあるものを作りたい時
  • ・短い文章でガツンと伝えたい時

これに白、黒、明度、彩度を合わせて配色していきます。迷った時はまず色相環を見れば、大体のアタリがつくと思います。1色の色だけで、明度や彩度を調整して作っていく方法もありますが、最初は色相環の流れが分かりやすいんじゃないかな…と思います。

初回から長い(*_*;)! ちなみにタイトルは与謝野晶子かと思いきや、指揮総監→大神一郎→君死にたもうことなかれ、から取っています。セガサターン版サクラ大戦のことなんて誰が知ってるんだよ…!!

それでは!Have a nice design!