色についての知識(後編)─配色の基礎/配色のバランス|デザインの基礎知識|デザインのイロハ 第6回

  • 公開:
  • 更新:
  • 制作/編集:
色についての知識(後編)─配色の基礎/配色のバランス|デザインの基礎知識|デザインのイロハ 第6回
目次
Loading...

新人デザイナー、シンコが先輩とともに一人前のデザイナーを目指す物語。
2人の掛け合いを見ながら、デザインの知識を紹介していきます。
みなさんもシンコと一緒に、新人デザイナーになってデザインを知ろう!

先輩

先輩

新人デザイナーシンコの先輩。
熱量のある指導で今回も熱くシンコを指導する。
前回は強烈な変身をして読者を驚かせたが、今回は必殺着を披露するつもりらしい。

シンコ

シンコ

先輩のもとでデザインを勉強中の新人。
最初の頃は先輩を振り回す感じであったが、最近の先輩の暴走に押されはじめている。
巻き返す時はやってくるのか??


先輩デザイナー

さあシンコ! 「色について」の後編だ!

今回はちょっと専門的な話になるから覚悟しとけよ~?

新人デザイナー シンコ

前編みたくメタルロックバンド先輩にならないならオッケーですよ!

先輩デザイナー

そいつはどうかなー!!

とりあえず前編の記事をまた読んで復習してほしい!

下のバナーから読むことができるぞ!

デザインのイロハ第5回「色について(前編)」
新人デザイナー シンコ

クリックをためらいそうなバナーですけど・・・

先輩デザイナー

フッ・・・気分がノッてくると前編みたくなっちまうのさ・・・! バイブスアガるーっていうのかな?

新人デザイナー シンコ

気になる方は上のバナーをクリック!

配色の基礎

先輩デザイナー

シンコは色を選ぶときフィーリングで選んでいるみたいだけど、あるものを使うことによって、誰でも説得力のある色選びをすることができる!

はいこれ!

色相環
新人デザイナー シンコ

虹色の円ですね・・・?

先輩デザイナー

これは色相環(しきそうかん)といって、色を円状に並べることで複数の色を選ぶときの基準になるものなんだ!

新人デザイナー シンコ

ふーん? どうやって使うんですか?

先輩デザイナー

うむ! ではまずこの色相環から赤を選んだとしよう!

この赤を一番引き立ててくれる色はなんだと思う?

新人デザイナー シンコ

そうですね~オレンジ色じゃないですか?

夕焼けの色使い!

先輩デザイナー

残念! いい色の選択だけど違う!

答えは色相環の赤の反対側にあるこの青緑!

赤の色相環
新人デザイナー シンコ

うううっ! この2色を並べると目がチカチカします!!

先輩デザイナー

うむ! この赤と青緑は、色相環の上では正反対の色という関係で補色(ダイアード)とも言われる!

目がチカチカするのは一番メリハリの効いた色の組み合わせだからだな!

アクセントとして使うとバランスのとれた配色になるぞ~

新人デザイナー シンコ

じゃあ、黄色を選ぶと補色になるのは反対側の青紫ですね!

この色使いもチカチカする~!!

黄色の色相環
先輩デザイナー

補色(ダイアード)は色相環の2色の正反対の選ぶものだけど他にも選び方があるんだ! それを必殺技っぽく紹介したいと思う!

新人デザイナー シンコ

で、出たぁ~~~~!!

スプリット・コンプリメンタリー
分裂補色(スプリット・コンプリメンタリー)
先輩デザイナー

色相環で補色の両隣にある位置の色を使う配色!!

分裂補色!! スプリーーット・コンプリメンタリィィーーーーッ!!

補色のチカチカする色の強さを和らげる効果がある選び方だーーー!!

新人デザイナー シンコ

演出のほうがチカチカしてますよー!

トライアド
三色配色(トライアド)
先輩デザイナー

正三角形状に位置する色を選ぶッ!!

三色配色!! トラァーーーイアドゥッ!!!

大きく変化しながらもバランスよく配色できるのが特徴さ!!

新人デザイナー シンコ

うっすら先輩がいるのがホラーです

テトラード
四色配色(テトラード)
先輩デザイナー

正方形状に選ぶ4つの色!!

四色配色!! テトラァーーーーーーーーーァド!!

カラフルな配色になるからメインの色が埋もれないように注意が必要な高等テクニックだぁ!!

新人デザイナー シンコ

く、くどいーーーーー!!

先輩デザイナー

ハァ、ハァ・・・! こ、このように、ハァ、ハァ・・・!

こ、このようにセンスに頼らなくてもこういったルールに基づいた色の選び方もできるんだ・・・!

覚えておいてくれ!ハァ、ハァ・・・!

新人デザイナー シンコ

ゼェ、ゼェ・・・!

わ、わかりました・・・!

配色のバランス

先輩デザイナー

ハァ、ハァ・・・!

配色の基礎を知ったところで次は配色のバランスの基本を知ってほしいと思う!

新人デザイナー シンコ

ゼェ、ゼェ・・・!

ど、どんとこいですよ・・・!

先輩デザイナー

まずはあらかじめ使う色を決めておこう!

主役の色となるメインカラー

少ないけど全体を引き締めるアクセントカラー

一番大きい面積を使うけどメインとアクセントのカラーを引き立てる脇役的なベースカラー

この3つの色を決めるんだ!

キレイな配色の割合
新人デザイナー シンコ

上の図を見ると、70%:25%:5%の割合がキレイな配色の割合ってことですか?

先輩デザイナー

その通り! 例えばこの色の割合を使って表紙デザインに反映して見るとこんな感じだな!

デザインの先輩
新人デザイナー シンコ

わぁー! なるほど~~! ってなんで先輩やねん!!

さっきと比べてデザインがすっごい手抜きだし!!

先輩デザイナー

時間がなかったんだ!

たまにはいいじゃないかー!

新人デザイナー シンコ

まあ先輩はいいとして・・・

「ベースカラー」として薄めの色を景に使い、「メインカラー」で主役を引き立たせ、「アクセントカラー」をちょっと使うことで主役が引き立って見えますね!

先輩デザイナー

70%:25%:5%

このバランスの色の割合を心に留めて作れば自然と良い色のバランスになるぞ! 是非とも実践してみてほしい!

新人デザイナー シンコ

シンコちゃんは了解しました!

先輩デザイナー

そしてこの配色バランスはキャラクターデザインの配色にも応用できる!

それにはメインカラーを大きく70%使用し、ベースカラーをサブカラーという役割に変えて25%、アクセントカラーを5%といった感じで役割を変更するんだ!

こんな感じだな!!

赤い先輩
新人デザイナー シンコ

だからなんで先輩なんですか!

9頭身になってるし! 足が異常に長いし!!

先輩デザイナー

な、何を言ってるんだシンコくん! これがボクの真の姿じゃあないかー!

新人デザイナー シンコ

うそつけー!!

でもそうですね、メインカラーを70%使うことでキャラクターに色の個性がついた感じがします!

先輩は赤が特徴の人ってイメージになりました!

先輩デザイナー

メインカラーを大きく使うことによってキャラクターのイメージ付けができるんだ!

国民的タヌキ・・・いや猫型ロボットは青色!世界的にも有名なネズミは黄色とかな!

新人デザイナー シンコ

前編の【色のイメージ】も参考にすると色でどんな性格なのかも設定できそうですね!

赤は熱い気持ちの熱血漢、青はクールなナイスガイ、黄色はカレー大好きって感じで!

レンジャー
先輩デザイナー

黄色のカレー好きはよく分からないけどその通りだ!

服のコーディネートなどにも使えるから試してみてくれ!

これらの基本をふまえて最適な配色にチャレンジしてみよう!

新人デザイナー シンコ

普段からいろいろなデザインの配色などを意識して見ていると参考になりそうなものが見つけられるかもしれませんね~! 日々勉強だ~

次回に続く!

次回は4月公開予定です

デザインの勉強に役立つ書籍