読者です 読者をやめる 読者になる 読者になる

sekaie engineers' blog

セカイエ株式会社が主催するエンジニア勉強会について

なんとなくこの色じゃあかん part2(実践編) ~配色に必要な4つのポイント~

どうも。会社の忘年会のカラオケ大会のレベルが半端なくて唖然とした寺田です。

アドベントカレンダーの21日目を担当します。ちなみに全然関係ないですが12月21日はバスケットボールの日だそうです。

qiita.com

前回「なんとなくこの色」っていう言葉を使うWEBデザイナーから脱却したくて、 色彩の基本に関して簡単にまとめてみましたが、

sekaie.hatenablog.com

いよいよその知識を活かしていこうという編です。

「なんとなくこの色にしました。」→「〇〇だからこの色にしました。

という風に言語化できるところまで持っていくのが目標となります。

さてうまく言語化できるのでしょうか。

今回は前回の基礎的な配色の知識を生かしつつ、どういう工程から自他ともに満足のいく配色へ近づけていけるかを4つのポイントを通じてまとめさせていただきます。

1.調和を意識しよう

前回の色相、明度、彩度等の知識を生かして、調和のとれた配色をしていきましょう。

色相、彩度を揃える

一定の色相間で彩度を揃えて配色すると、非常に調和のとれた印象を演出することができます。

トーンを揃える

トーン(色調)とは彩度と明度から色を分けたものの事をいいます。 これは非常にバラバラでまとまりのない配色に調和を持たせるときに非常に役に立ちます。 トーンをある程度何も見ずに揃えられるようになればカッコいいですよね。

また逆にトーンを満遍なく散らばしてあげることで調和を保ちつつ派手な印象を演出することも可能です。

それから豆知識として、彩度が低い方が調和がとれやすいといわれてます。

無彩色の活用

WEBページでは多く活用されておりますが、色と色との間に無彩色(グレーや白や黒等)を持ってくることで、 非常に調和のとれた印象になります。

メインの色達を柔らかく包み込んでくれるイメージです。

f:id:sekaie:20161221105825p:plain

アップルも上手にグレーを活用して他の色を際立てていますね。

2.対比を活用しよう

色の印象って1つの色だけでは決まらないことが多いです。

必ず隣接する色の組み合わせとかで大きく印象が異なってきます。

ここで対比というキーワードが非常に重要になってくるのですが、 その対比を考えていくにあたって前回軽くご紹介させていただいた知識が役に立ちます。

明度対比

f:id:sekaie:20161221152922p:plain

まずは明度の対比です。

強調したい要素に明度の差が強い状態の組み合わせを持ってくることで、非常に視認性が高まり効果的な表現をすることが可能となります。

色相対比

f:id:sekaie:20161221152921p:plain

それから色相です。こちらも対比で効果を得られます。

色相で対比ってことは、、、、そうです!補色を活用すればいいわけです。補色を上手に活用して色相対比を生み出すことでその要素を効果的に強調することができます。

彩度対比

f:id:sekaie:20161221152920p:plain

明度、色相ときたら次は彩度ですね。 彩度も対比を活用します。極端にいうと彩度が高い色は黄色とかになるわけですがそういった色と彩度が低い色、例えば白とか黒との組み合わせで強調させるという方法です。

3.面積の配分

配色には面積が大きく関与してきます。使用する面積によって印象がグンと変わってしまうんです。

色は大きく分けて重要な役割をする色を

メインカラー、サブカラー、アクセントカラーの3種類に分けることができます。

これらに関して簡単に説明すると、

メインカラー

サイトに対して最も大きな印象を与える色です。一番広い面積で使用されます。

サブカラー

メインカラーに続き重要な役割を担う色です。こちらもやや広範囲で使用されます。

アクセントカラー

こちらは面積的に非常に小さい箇所で利用されますが、全体の中では最もユーザーに印象を与える影響力のある色になります。

f:id:sekaie:20161221111101g:plain

同じ色を使っていても、使用する面積を変えるだけでこんなに印象に差が出てしまいます。

4.言葉にしよう

言語化することって大事

やっぱり他の方と色のイメージを共有したい時にそれを言語化できるスキルって重要になってきますよね。

でもなかなか初っ端からそういったことをやるのは難しいと思います。

そこでちょっとずつ練習をしてイメージを言語化することが必要になってくると思います。

例えばこういった配色の場合だと

f:id:sekaie:20161221064538j:plain

・ガーリーなカラフルで可愛い配色

・スイーツ的な甘くふんわりとした配色

・柔らかくて優しい配色

みたいな感じで言語化したりもできます。

そういったイメージを言語化することでイメージを具体化することができ、 配色をより効率よく行えるようになります。

配色の流れ

それでは今までの配色の流れをまとめてみましょう。

1.調和を意識する
2.対比を活用する
3.面積を割り振る
4.言葉で表現する

この4つのポイントを上手に活用していくことで今までの配色がより明確化して、配色を言葉にして説明することも簡単になってくるのではないかと思います。

補足

ただ、もちろん言葉にするのって大切ですが、 他の方とのイメージに大きなギャップがあっては大変ですよね。

そういったことにならないためにも他の方と意見を交換したりしてある程度認識が合うようにしておくことも大切です。

またこういった資料も活用できると思います。

イメージスケール

f:id:sekaie:20161221081732j:plain

日本カラーデザイン研究所(NCD)が開発した「心理軸上に感性語と配色を体系化したシステム」

言葉と配色を組み合わせてたくさんの人にアンケートをとったものです。

こういうものも参考にしながら、

このイメージを言葉で表すとどうなるだろう。。。。。 パッと感じたイメージを言語化していく。

また、他の人が言語化したものをみたり聞いたりするのも非常に力になると思います。

Kuler

AdobeのKulerというツールがありますが、これは使いこなすと非常に重宝すること間違いなしです。

color.adobe.com

f:id:sekaie:20161221081916j:plain

unguis.cre8or.jp

また、このツールの利用者が設定した色のパターンをAdobeのソフトで検索し活用することも可能なので、このツールを活用することで非常に配色の幅が広がります。

なんでその色?どんな効果?

そういったことをスラスラと言いながら説明できるとかっこいいですね。

私もそうなるように頑張ります。

ほな!