ブログ

BLOG 2020.01.31AIブログ , デザイン

【実例あり】配色テクニック

専門知識はあっても一般常識がない理系男子
制作部のゆういちです。

2020年早々、個人的に嬉しいニュースがあったのですが、実は色彩検定1級に無事に合格しました。2020年もデザイン力、上げていきたいですね。

今回のテーマは前回と同様に色彩検定から得た知識の中で、webデザインに使える色彩テクニックを共有したいと思います。
仕事や趣味でデザインをしていて①色がまとまらない②色がしっくりこない、といったことはないでしょうか?この2つの問題を解決するテクニックを実例を挙げて紹介します。

まずこの日本地図を見て、どう感じますか?

 ・配色がおかしい
 ・色のまとまりがない
おそらく誰でもこのように感じるはずです。私も直感的にそういうイメージを持ちます。

ちなみに配色に詳しい方が見た場合、具体的な違和感はこちらではないでしょうか?
・中部の赤は他の地域と比べて彩度が高い
・関西の緑は他の地域と比べて明度が高い
・関東と東北の色相差は小さい。一方で関東と中部の色相差は大きい。

自身の感覚で配色を修正できる方もいるかと思いますが、誰しもその感性を持っているわけではありません。そこで誰でも使える色彩テクニックを紹介します。ビジュアルをよくするテクニックは【トーン(彩度&明度)の統一】【色相差の統一】です。

はじめに彩度のみを調整した場合、見た目がどう変化するのかを見てみましょう。

最初の日本地図と比べると、ほんの少し色のまとまりがあると感じませんか?
しかし、彩度を調整しただけでは関西の緑は浮いたままです。次に明度も調整した場合、どう変化するのか確認してみましょう。

どうでしょうか?いい感じだと思いませんか?
トーン(彩度&明度)の調整を行ったことで、かなり統一感があるように感じます。トーン調整をすれば、ほとんどの人が”いい感じのデザインになってきた”と感じます。

ここに色相差も調整するひと手間を加えると、デザインのクオリティがぐっと上がります。やることは簡単で、ただ色相環の順番に色を並べるだけです。現状くすんだダルトーンなので、適切なライトトーンもしくはソフトトーンに変更して配色を詰めます。

どうでしょうか?色がまとまっていると感じるはずです。

並べてみると、一目瞭然ですね。今回はまとまりを出すために色相環順にしましたが、あえて賑やかさを演出するためにダイナミックな配色にする(色相環順にしない)テクニックもあります。ダイナミックな配色は上級者向けです。個人的には綺麗に見える、色相環順がオススメです。

配色に困ったときはぜひ、このテクニックを使ってみて下さい。

Tweet Share RSS

関連記事