コラム

デザインの知識がなくても使える!6つの配色テクニック

2015-12-17

高橋 幸子

WRITER:

高橋 幸子

こんにちは!デザイナーのSachikoです。
2016年3月から開催されるピクサー展が楽しみでしかたない今日この頃。

ところでみなさん、配色でなんだかしっくりこなかったり、悩んだ経験はありませんか?
例えば、プレゼンテーションを作るときに、どの色を使おうかな~?とか、
何色か使ってみたら、とてもカラフルになってしまって落ち着きがないパワポになってしまったり。

今日は配色に迷ったり悩んだりしたに参考になるテクニックと、便利なツールを紹介します。

簡単!色相環を分割した配色

虹色の赤→橙→黄→緑→青→藍→青紫に、紫と赤紫を加え輪にしたものを色相環と言います。
スイスの芸術家ヨハネス・イッテンはこの色相環を規則的に分割した配色を作成したのが始まりです。

色相環から相性のいい配色を選んでみよう!

① ダイアード

色相環を均等に2分割した配色。この2色は補色になるので、高彩度の場合は力強い印象になります。

② トライアド

色相環を均等に3分割した配色。互いに対照的な3色からなるバランスの良い配色になります。

③ スプリッドコンプリメンタリー

ある色と、その補色の両隣りの2色からなる配色。
補色の両隣の2色が類似性のある色なので、トライアドよりまとまった印象になります。

④ テトラード

色相環を均等に4分割した配色。
二種類の補色同士なので、とてもカラフルな印象を与えます。

⑤ ペンタード

色相環を5分割した配色。トライアドに白と黒を加えた5色もペンタードと言います。
テトラードの配色にさらに1色追加されてるので、カラフルで派手目な印象の配色になります。

⑥ ヘクサード

色相環を6分割した配色。テトラードに白と黒を加えた6色もヘクサードと言います。
6色の配色なので、かなりカラフルですが、白と黒を加えることでシャープな配色を作ることができます。

調和した配色を作る方法は他にもありますが、法則性をもって色を選ぶのもひとつのテクニックです。
もし色に迷ったり悩んだりしたら、イッテンの色相分割のように規則的に色を選ぶことで調和した配色が作れますよ!

【おまけ】配色を考えるときに便利!なツール

■ Adobe Color CC

デザインで配色を考えるときや、写真から色を抽出したりするときよく使用しています。
ASEファイルに書き出して他のAdobeアプリと連携できるのが良いです。

【おまけ】インスピレーションがほしいとき便利なツール

■ Coolors

Spaceキーを押すたびにキレイな配色を作成してくれます。
個別で設定もできるので、設定したキーカラーに合わせた配色を探す、といった使い方をしています。

■ Color Hunt

様々な配色を紹介してくれています。
Adobe Color CCでもカラーパレットがたくさんあるのですが、なぜかこっちを眺めることが多いです。

(参考) A・F・T公式テキスト編集委員会編(2010)『A・F・T色彩検定公式テキスト2級編』A・F・T企画

最後に

リッチメディアではデザインが好きで、UI/UXにこだわりを持ち、
チーム全体でサービスを開発していきたいという想いを持ったデザイナーを募集しています!

 

【関連記事】

リッチメディアデザイナーが教える!デザインにも取り入れている色の心理効果
超絶クールなプレゼン資料をつくるための5つのポイント
Apple TV アプリを作ってみよう!!第一回「Apple TV とは?