1回目の(まともな)記事は、デザインをする上でもキホン!というか、最初にここで悩む人も多いんじゃないかなぁ...と思う「色」について書きたいと思います。イメージカラーは決まってるけど、それに合う色が分からない...とか、商品のPOP作りたいけど、色はボンヤリしたイメージしかない...とか、この色が好きだけど、どこにどう使ったらいいか分からない...とか。悩むことはないでしょうか?...え...ないですか...!?色、配色についての基本的な考え方と、使い方によって得られる効果などを実例を交えて紹介します。配色について考える時は、まずは色相環から基本的な色を円状にして分かりやすく置いた、「色相環(しきそうかん)」という表があります。色相環にはもっと色数の多いものもありますが、ここでは分かりやすく一般的な12色のものを使います。12色の色っていったら小学校の頃使った12色色鉛筆とか思い出しがちですが、それとはまた違った色になります。いえばクーピーって色鉛筆なんでしょうかクレヨンなんでしょうか...。似たような表は、WindowsのWordなどでも見られます。Word2010のフォントの色を変える画面で出てくる表です。これは6角形になっていますが、色の基本的な並びは色相環と一緒です(上の色相環とは上下逆になってますけど...)。この表が重要なのかと言うと...使いたい色の類似色、反対色がすぐ分かるこれが分かることによって、どの色を使ったらいいかの大体の目安になります。色相環は、使いたい色の両隣、または近い場所にある色を「類似色」、対面にある色を「補色」といいます。類似色はともかく、補色って言われてもなんかピンと来ないですよね...色を補うってこと?補色のことは「反対色」ともいうらしいので、そっちの方が分かりやすいような気もします。メインカラーに赤色を使いたい場合、類似色と補色はこうなります。●類似色を使ってデザインする...全体的にまとまった雰囲気になる●補色を使ってデザインする...インパクトがあり、にぎやかな雰囲気になる作りたいイメージに沿って、この色相環を元に色を決めていくとやりやすいです。具体的にはどうなるの?例えば、この写真を使って新作のイチゴロールのPOPを作ることにします。́∀`)bグッ!街の小さなケーキ屋さんのPOP『春の新商品をアピールしたい。商店街の中にあるので、人通りが多い。道行く人の目にパッと留まるようなものがいい。POPはお店のウィンドウに貼りたい』こんな要望が出たとします。商品の雰囲気も大事にしつつ、目立つものを作らないといけません。上の説明でいくと、補色で作った方がインパクトがあるようです。写真は赤色がメインです。この赤色をメインカラーにして、補色...反対側に位置する「青色」を使うことにしました。目につきやすいように、文章は短めで文字は大きくします。写真は写真を貼り付けた風にしてちょっと傾けました。文字は、温かみのある手書き風を使っています。その上に、メインの赤色と補色の青色で色をつけました。それだけじゃ少し寂しかったので、補色の隣の緑色で説明文を色付けしました。そのまま色相環通りに色をつけたんですよ...。みっ...見づらい...!!インパクトはあると思うんですが、何だか目がチカチカして読みづらいです...。いうか赤の文字と青色がせめぎあってギザギザに...こりゃダメだ...。補色を使うと、インパクトはあるけど、色味が反対すぎてコントラストがきつく、目がチカチカしちゃうってデメリットが出てくることがあります。これじゃイチゴロールも台無しですよね...。これをちょっとづつ調整していきます。する時は、彩度と明度を調整する色は、色相環の色合いだけではなく、それに彩度(鮮やかさ)と明度(明るさ)も加わって表現されます。彩度を上げると、原色っていうんでしょうか...キツい赤色に、彩度を下げるとくすんだ赤色になります。明度を上げると、だんだん白に近づいていきます。逆に落とすと、元々の原色の赤を通り越して、どんどん黒に近づいていきます。補色を使って、ギラギラした感じになってしまった時は、彩度と明度を調節すると見やすくなります。彩度を上げる...原色に近くなり、派手さが出る。彩度を下げる...くすんだ色味になり、落ち着いた雰囲気になる。明度を上げる...パステルカラーっぽくなる。明度を下げる...暗い色味になる。wordの色の設定の画面でも何となく、彩度と明度が分かるような気がしますね。中心に行けば行くほど鮮やかに、そして白くなっていっています。明度と彩度を調整しました。背景は青の明度をあげて少し明るくし、彩度も下げて、明るいけどくすみのある色合いにしました。文字は明度を上げて淡い感じにしました。比べてみると...調整した後の方が見やすくて、またケーキの雰囲気にあった可愛らしい感じになっています。背景に補色を使用しているので、赤がベースになったケーキの写真もよく目立ちます。淡い色も使ったので、ちょっと春らしさも出たんじゃないかな...と思います。類似色で作ったらどうなるの?対して、類似色を使ったらどうなるの?というわけで、先ほど作ったPOPを類似色で着色しなおしてみます。メインカラーである赤色の左隣にあるピンク味のある赤を背景色にし、同じ類似色の黄色とオレンジを文字に使っています。彩度、明度は調節していませんが、同系色だからか、赤文字×青背景の時よりはギラギラ感はないものの、原色系なので、色味がキツいです...。先に作った青いPOPよりは、まとまりのある感じがする...というか、POP全体を通して「イチゴ!!」っていう感じが伝わってきます。補色で作ったPOPと並べて見てみると...ぱっと見は赤いPOPの方が目立ちます。イチゴの雰囲気も満載です。肝心のケーキの写真はどうでしょうか?赤いPOPだと、背景が類似色(同系色)なので、ケーキの写真があまり目立たないような気がします。ケーキが際立って見えるのは青色のPOPの方かな...。赤いPOPが目立つのは、赤という色が目立つ色だからであって、決してメインのケーキを目立たせる色ではないのです...。ここまで来ると、何となく「補色」の意味が分かるような気がします。「補色」っていうのは、メインとなる色を引き立てる色のことなんですね。「色を補う」んですねー。目立たせたいものがはっきりしている場合、補色を使った方が対象物が目立つので、見てもらいたい部分に自然に視線を誘導できます。背景に補色を置くと、手軽に文字や写真を目立たせることができます。対して類似色を使うと、全体的にまとまりが出て、見せたいものの雰囲気を出したり、また雰囲気に溶けこませることができます。ケーキの雰囲気に合わせたPOPがいいといった希望があれば、類似色を使ってデザインしてもいいかもしれません。ケーキ自体を見てもらいたい!という時は補色で、ケーキの雰囲気に合わせてアピールしたい、という時は、類似色でデザインする、この流れが基本になると思います。これで完成じゃない...上のPOPは、色相環の色をそのまま使って、それをベースに作っていきました。これだと少し色味がキツいし、説明文何だか読みにくいし、デザインがシンプルすぎて、もうちょっと何か欲しいような気がします...。色相環の流れを汲みつつ、ちょっと手を加えます。いえば、色相環には黒と白がない...そうなのですよ!色相環には白と黒はありません。白と黒はどこにあるかというと...独立しています。白と黒は色合いを持たず、明度だけで表現されます。先ほどの彩度と明度の説明で、明度を上げると白に、下げると黒に近づく、という話をしましたが、黒と白と中間色のグレーはそれで表現されます。ちなみに彩度も上げると白に、下げると黒っぽくなりますが、グレーに近い色合いになります。グラフィックソフトのIllustratorとPhotoshopのカラーパレットが分かりやすいかなぁ...と思います。これはIllustratorCS6のカラーパレットです。左右で色相環での色合いを、上下で明度を表しています。これを見ると、黒と白は色相環の流れに乗っていないのが分かります。白と黒は独立しているなので、白と黒は補色、類似色共に違う流れを与えてくれる色だと思ってもらえればいいかと思います。先ほど類似色で作ったケーキのPOPはケーキの写真が目立ちませんでしたよね。ケーキの写真の周りに白と黒を加えてみます。ケーキの写真が周りから切り離されて、浮いたような感じになりました。これでケーキの写真も目立ちます。白と黒は色相環の流れに属さないので、他との差を分かりやすくできる色かな、と思います。明度に左右されるので、対象物の明度によっては効果がはっきりしないこともあります。上の例は、白色だと明るい感じに、黒色だと引き締まった感じになりました。やって一色加えてやるだけでも雰囲気が変わってきます。ここまでの流れを汲んで完成させます。できました!一気にどどーんと!wwまずは...背景に白の枠線を入れてアクセントにしました。お花の模様も入れました。お花は、文字を邪魔しないように、背景と同じ色で、明度と彩度を調整してさりげなく加えました。「いちごのロールケーキ」の文字を目立たせるため白で入れ、遠目からでも分かるように文字も太めにしました。背景が濃い色なので、説明文は明度を上げて、淡い感じにして読みやすくしています。赤いPOPの方には写真にも白の枠線を加えて写真を目立たせました。青いPOPの方は、そのままでも写真が目立ったので、さらに強調すべく写真を大きくしました。他に使った小技は、文字の色を上から交互にしたこと。これでNew、タイトル、説明文、価格の区切りを分かりやすくしました。使う色数も減らして、派手さを少し抑えました。あと、価格の円も文字を少し小さく...これで値段も分かりやすくなります。こんな感じですかね...。どっちの方が好きですか?この辺り好みや用途によるかもしれません。これで目にも留まりやすいかなー?まだある類似色・補色の使い方もう一つ、類似色・補色を使う際の注意?みたいなのがあります...。補色は反対の色合いを使うので、長い文章を読んでもらう時に使うと、目が疲れちゃうかもしれません...。いう時は、類似色でまとめた方が目に優しいです。長い文章を加えて、ホテルのメニュー風にしてみました。違いは背景色を変えただけです。赤とピンクの類似色でまとめたもの、補色として水色を敷いたものです。見た目がギラギラしないように、明度と彩度も調整しました。?長い文章の部分を見ると、類似色の方が読みやすい感じがしませんか...?補色の方だと、文字は分かりやすいですが、彩度と明度を調節したとはいえ、文章をずっと読んでいると目がチカチカしてきます...。長い文章を読ませたい時は類似色でまとめた方が読んでもらいやすいです。合わせて配色していきます。迷った時はまず色相環を見れば、大体のアタリがつくと思います。1色の色だけで、明度や彩度を調整して作っていく方法もありますが、最初は色相環の流れが分かりやすいんじゃないかな...と思います。ことなかれ、から取っています。白黒ではなく「色を使う」ことの意味。今日、ブログ始めます。キャンセル投稿を送信できませんでした。メールアドレスを確認してください。メール送信チェックに失敗しました。このブログではメールでの投稿共有はできません。