Toshi’s Enjoy Life

書きたいことを書く雑記ブログ!

【色の知識】知ることでもっと楽しくて面白くなる!(配色について③)

 

f:id:tosikun0119:20170419003610p:plain

みなさんこんにちは!

 

前回もなにやら不思議な配色を見てきました。

ビコロールやスプリットコンプリメンタリーなど意味不明な名前の配色が出てきて混乱しちゃいますよね。

少なくとも私は混乱してます!(笑)

 

それでは混乱した勢いで今回もいってみますよー!

今回は「カラフルな配色」な配色見ていきます。

 

ではいってみましょう!

 

目次

 

トライアド配色

まずはトライアドという意味から見ていきましょう。

 

  • 3つの
  • 3つで1組

 

という意味です。

トライアド配色の特徴は、色相環を正三角形になるようにすることです!

図を見てもらうと分かるのですが、三点をつなぐと正三角形ができていることが分かります。

 

f:id:tosikun0119:20170418213806p:plain

 

ここで注意なのが、以前紹介した「スプリットコンプリメンタリー」とは違うので要注意です。

たしかに同じ三角形なのですが、

  • スプリットコンプリメンタリーは三角形
  • トライアド配色は正三角形

間違えやすいので気を付けましょう(私もな!)

 

※エクセルで作ったので正三角形になっていません。多少の誤差はお許しください。

 

トライアド配色の例

f:id:tosikun0119:20170418212934p:plain f:id:tosikun0119:20170418213251p:plain

 

このようになります。

白や黒は使えないので、有彩色のみの配色となります!

 

実例とトライアド配色になる決まり事を見てみましょう! 

画像引用元:Amazon CAPTCHA

 

いろいろ組み合わせがありますが、主にトマトやイチゴ、抹茶関連の商品に傾向がみられるようです。

 

それではまとめます!

 

  1. 色相環で三点を結ぶ
  2. 三点をつなぐと正三角形になること
  3. 白や黒は使えない
  4. 1~3を守れば、トーンや選ぶ色は制限なし

 

正三角形になるようにして、白黒以外の色を使うですね!

 

テトラード配色

続いていきます!次はテトラードという配色です。

まずはテトラードとはどういった意味なのでしょうか?

 

  • 4つの
  • 4つで1組

 

本当にいろいろな言葉がありますね。やはり語源はフランスやスイスが多いみたいです。

それでは図を見てみましょう!

 

f:id:tosikun0119:20170418215549p:plain

 

またもや色相環の出番です。むしろ今回の記事は全て色相環に関係するものです!

色相環見れると本当にいろいろな配色を目で見れるので便利です。

 

テトラード配色の例

f:id:tosikun0119:20170418220245p:plain f:id:tosikun0119:20170418220255p:plain

 

こうやって並べると「カラフル」って感じがしてきましたね!

 

テトラード配色になる決まり事を見てみましょう!

一番みなさんが実感できるのは「Google」のロゴマークではないでしょうか。

ほかにも、PCの「Googlechrome」のアイコンも、まさしくテトラード配色ですね。

 

それでは決まり事に移りますよー!

 

  1. 色相環で四点を結ぶ
  2. 四点をつなぐと正方形になること
  3. 白や黒は使えない
  4. 1~3を守れば、トーンや選ぶ色は制限なし

 

正方形になるようにして、白黒以外の色を使うですね!

 

ペンタード配色

3・4色ときたので、次は5色?となりそうですが・・・ふっふっふ

・・・

はいその通りです!(遊ぶなっ)

 

 さっ・・・気を取り直して由来から見てみましょー!

 

  • 5つの
  • 5つで1組

 

もう今までと一緒ですね・・・。あまり変わり映えしません。

 

それでは図を見てみましょう。

 

f:id:tosikun0119:20170418214015p:plain

 

今回は24色相環を使っているのできれいに5等分できませんが、5点つなぐと正五角形ができるのが特徴です!

 

 ペンタード配色の例

f:id:tosikun0119:20170418221637p:plain

f:id:tosikun0119:20170418222304p:plain

 

お?ついに白や黒が混ざっていますね。

そうです!ペンタードは白や黒みたいな無彩色を使っても良いのです!

ここまでくると色相環の中で5色と決まっているので、カラーバリエーションはほぼ決まってきます。

 

実例とペンタード配色になる決まり事を見てみましょう!

画像引用元:Amazon CAPTCHA

 

  1. 色相環で五点を結ぶ
  2. 五点をつなぐと正五角形になること
  3. 白や黒は使っても良い
  4. トライアド配色に白や黒をプラスした配色でもある

 

トライアドやテトラードと違い、白黒が使える(使わなくてもいい)配色です!

 

ヘクサード配色

3・4・5色ときたのでもうお分かりだと思います。

お察しの通り6色です!そして最後の配色でもありますのでよろしくどうぞ!

では由来からいきます!

 

  • 6つの
  • 6つで1組

 

最後までこのパターンなのね・・・

 

では気を取り直して早速図を見てみましょう!

 

f:id:tosikun0119:20170418214220p:plain

 

 ヘクサード配色の例

f:id:tosikun0119:20170418223217p:plain

f:id:tosikun0119:20170418223227p:plain

 

わお・・・とってもカラフル!・・・だけどちょっとゴチャゴチャ感が否めません。

私から見ると、白や黒が入ることで、無い時と比べて多少引き締まって見えるような気がします。

 

ペンタードと同様に、ここまでくるとバリエーションが狭まくなります。

その理由は、色相環で規則正しく六色選ぶので、どこを選んでも似たような色になってしまうことが挙げられます。

 

実例とヘクサード配色になる決まり事を見てみましょう!

f:id:tosikun0119:20170419000036p:plain

画像引用元:https://tsuku2.jp/ecsp/itemDetail.php?itemCd=20130121124623

 

さすがにヘクサード配色ともなるとすごいカラフルになります。

この他にもお菓子やカップラーメンなど、あらゆるところに使われています!

 

それでは決まり事ですよー!

 

  1. 色相環で六点を結ぶ
  2. 六点をつなぐと正六角形になること
  3. 白や黒は使っても良い
  4. テトラード配色に白や黒をプラスした配色でもある

 

ペンタードと同様に白や黒が使え、白黒を使うことで全体が引き締まります!

 

まとめ

配色についての記事を3回に渡って書いてきましたがいかがだったでしょうか?

 

色相環というものがちょっとでも理解できれば、配色の種類がとても見やすくなるのと、普段の生活(ファッションのコーディネート)などにも生かせるのではないかと思います!

 

また、webデザインという職業の中では常に意識しておかなければいけないカラーデザインの知識を、今の段階で私が知りえる内容を全て書かせてもらいました。

 

私の知る限りの13種類の配色すべてを自分自身のアウトプットという意味でも書いてきたので、もしかしたらとても読みづらかったかもしれません。

もしそうであった場合はごめんなさい! |壁|д゚)

 

今回の【色の知識】シリーズはひとまず一段落ですが、この先になにか収穫があればその都度書いていきたいと思います!

この先まだまだ勉強することがたくさんありますが頑張ってまいります(`・ω・´)ゞ

 

では今回はこの辺で☆

 

関連する記事です!併せてどうぞ!

www.toshi-enjoy.com