【配色に悩んだら】色相環から考える色のハーモニー
モーショングラフィックに限らず、様々なデザインに欠かせない要素である「色」。
あなたが今見ている画面上にも、周りの景色にも、たくさんの色を見つけられると思います。
では、デザインにおいて その色の組み合わせ…つまり「配色」を考えるとき、どのようにして選べばいいのでしょうか？
今回はそんな配色について、センスではなく理論的に考える方法をご紹介します。
一定の法則によって規則的に選ばれた色は調和する（ジャッドの色彩調和論）より
●色相環から考える、6つの配色
色相をわっか状に並べた色相環（カラーホイール）から、6種類の配色構成を探っていきます。
1.モノクローム配色（単色展開）Monochromatic
モノクローム配色（Monochromatic）とは、単色で構成される配色です。
モノクローム配色の作りかた
モノクローム配色の構成は比較的簡単。 まず最初にベースカラーを1つ決め、その色にトーンやシェード（濃淡）を組み合わせて、色数を増やしていきます。
モノクローム配色の特長
単色から展開しているので、全体としてのまとまりが良いのが特徴です。
▼青をベースカラーとしたモノクローム配色
▼黄色をベースカラーとしたモノクローム配色 Au Aranasさんの作品
Monochromatic Illustration
https://www.behance.net/gallery/16844913/Monochromatic-Illustration
※モノクロというと白黒を思い浮かべるかもしれませんが、白・黒・グレーでなる配色はグレースケールと呼ばれる別物です。
2.アナロガス配色（類似色）Analogous
アナロガス配色（Analogous）とは、色相環で隣り合う類似色だけで構成される配色です。
アナロガス配色の特長
複数の色を使っても非常にバランスが良く、色同士がなじみやすいのが特徴的です。落ち着いた平和的な配色でもあります。
自然の中で見かけることが多く、例えば”山、空、海”など の組み合わせが挙げられます。
▼水色・緑・黄緑のアナロガス配色に白を加えたもの
▼夕暮れ時の空（紫・赤・オレンジ・黄）
3.トライアド配色（3色構成）Triadic
トライアド配色（Triadic）とは、
・色相環上でそれぞれの色間の距離が同じ3色の組み合わせ
の配色です。色相差（色と色の距離）を結ぶ線は、正三角形になります。
トライアド配色の特長
明快でにぎやかな配色で、アメコミや子ども用のおもちゃでもよく見かけます。
トライアドの3色の組み合わせはどれでも良いわけではなく、色相環上で3色の配置を線で結ぶと正三角形になることが重要です。
▼赤・黄・青のトライアド+白黒の配色でポップでも引き締まった印象に
▼アメコミの有名なキャラクターにも‥！
https://unsplash.com/photos/QJlg2KSl0fU
4.コンプリメンタリー/ダイアード配色（補色）Complementary
コンプリメンタリー配色（Complementary）とは、カラーホイール上で対比の位置にある2色を指します。日本語では「補色」という言葉の方が一般的に使われているかもしれません。
コンプリメンタリー配色の特長
コントラストが強く、短い時間でも注意をひけます。お互いの色を引き立て合う組み合わせです。
身近な物でいうと、暗記シートの赤・緑が挙げられます。この配色を隣り合う位置で使うと、字が読みづらくなったり目がチカチカする場合もありますので、使い方には注意しましょう。
コンプリメンタリー配色を使うときの工夫
色が浮いてしまったり、読みやすさや調和に欠けるときは、どちらかの色の同一トーンから色を増やしてみるとバランスがとれます。
▼紫×黄色のコンプリメンタリー配色。2色の比率は必ずしも同じである必要はない
▼青×オレンジをベースに、それぞれの色のトーンを変えて配色したもの
※ダイアード配色とも呼ばれます
※3色の対比になると、トライアド配色になります
5.スプリットコンプリメンタリー（分裂配色）Split Complementary
コンプリメンタリー配色のうち、どちらかの類似色を1色足すと、スプリットコンプリメンタリー（分裂配色）になります。
コンプリメント…補色 / スプリット…分裂 の意味
・色相差を結ぶ線は、二等辺三角形になります。
スプリットコンプリメンタリー配色の特長
挑戦的・メリハリのある印象を与えつつも、2色で構成されるコンプリメンタリー配色よりは調和のとれた配色です。
▼黄色×紫のコンプリメンタリー配色に、紫の類似色であるピンクを足したもの。エキゾチックでかわいい
▼紫×黄色＋緑
▼秋の青空・紅葉がはじまる木々のオレンジ（黄）・緑
6.テトラード配色（4色構成）Tetratic(Double Complementry)
コンプリメンタリー配色×2ペアの合計4色にすると、テトラード配色になります。そのため、Double Complimentary（ダブルコンプリメンタリー） とも言われます。
テトラード配色を使うコツ
たくさんの色を使う必要があるシーンで参考にしてみましょう。要素が多い背景と街など。
また、4色それぞれを均等に（25%ずつ）使うのではなく、 ❶ベースとなる色を1つ、最初に決める
❷表現したい世界観や与えたい印象を基に、残りの色の比率を考えることがおすすめです。
- あたたかい？つめたい？ 暗い？明るい？etc..
トライアド配色（3色）にさらに１色追加され、色数が多い分難易度は高い配色ですが、効果的に使えるとユニークで素晴らしい作品に仕上がります。
▼様々な色を使っているが、まとまりがでる
▼使用する色の比率を変えると、全体の雰囲気も変わる
▼自然界にいる派手な鳥も、よく見ると調和のとれた美しい配色です
AfterEffectsでの色の管理
使用する配色を決めたあと、AfterEffects上で色の管理をするには以下の方法がおすすめです。
1. Illustratorでカラーパレットを作り、読み込む
実際のクライアントワークでは、イラストレーターと連携する場合も少なくありません。
その際、グラフィック（動かす素材）データのやり取りはIllustrator(Ai形式)で取り扱うことが多いと思いますが、グラフィックの横に正方形でカラーパレットを用意しておくことで、素材とカラーパレットを一緒に読み込むことができます。
すぐ横にグラフィックがありますので、配色とズレがないか・１つのカットの中で統一感があるかも確認がしやすいかと思います。
あとはAfterEffects上でスポイト機能を使って色を抽出するだけです。
もちろん、AfterEffects上で図形ツールを使ってカラーパレットを作り、コンポジションとして保存しても良いでしょう。
2. Adobe Creative Cloud Libraryを使って管理する
Adobe Color を使ってカラーパレットを作った後、自分のライブラリーに追加すれば、After Effectsに限らずIllustratorやAdobe XDなど あらゆるAdobeソフトウェア上で簡単に呼び出しができます。
類似職やトライアドなど、検索条件の設定も豊富です
After Effectsで使用する場合は、
Window（ウィンドウ） > Library（ライブラリー）
からAdobe Creative Cloud Libraryを表示できます。
「Adobe Color」では自動生成された配色や他の人が登録した配色アイデア、イラスト・写真等から抽出されたカラーパレットが検索できます。
「Your Library」からは、自分が登録したカラーパレットを呼び出せます。
※Adobe Color や Your Library が表示されていない場合、「Explore libraries」から追加が可能です
3.プラグインを使って管理する
配色管理ができる有料プラグインもありますので、いくつかご紹介しておきます。
Ray Dynamic Color2
カラーパレットの作成と管理 / エクスプレッションリンクの作成も可
https://aescripts.com/ray-dynamic-color/
Colors 1.4 for After-Effects
写真から配色の生成 / 1クリックで異なる配色の適応
https://goodboyninja.gumroad.com/l/NOeRD?
まとめ
あくまでも”理論”なので、厳密にそれぞれの配色にあてはめようとしなくてもOK！ まずは自由な発想で色を組み合わせてみましょう。それでも「なんかイマイチだな」「もうちょっとアクセントが欲しいな…」という時に思い出して、参考にしてみてください。
日常の景色、写真、グラフィック、映像、アート…様々なところに色は存在します。
気に入った作品・景色をよく観察して、どんな配色の工夫がされているかを考え、自分の作品にも取り入れてみることで色の理解が深まります。
参考
Understanding Color / Blender Guru
https://youtu.be/Qj1FK8n7WgY
この記事が気に入ったらサポートをしてみませんか？