デザインの色はどう決める?

デザイン




先日、デザインにおいておしゃれなフォントを使うの大切!と紹介しました。

デザイン初心者のわたしがオススメする使いやすいフォント5つ | モスハピ☆

フォントも大切です。

そしてもう1つ大切なのが、

でも色は何千、何万色もあるので、何もヒントがないまま決めるのは結構難しいです。

そこで今回は、デザインにおいて色を決めるときに手助けとなってくれるサイトを紹介します。

色を決める

まず色を決めるときは、何を参考にしていますか?

クライアントから色を指定されたら楽ですが、指定されなかったとき、私はどんな雰囲気やイメージにしたいのかをお聞きしています。

そのイメージから連想される色を使います。(例えば、威圧感を与えない様なデザインと言われたら、暖かみのあるオレンジを選ぶなど。)

そこまでは良いのですが、そこから「どの色を選ぼう…」となりますよね!

例えば、メインカラーが青になったとします。

でも、少し緑が入った青か、水色か、紫よりの青か迷いますよね。

さらに、色が2色以上必要な場合、青に合う色はどれなのか、何となくは分かっても、この色だ!と思う色はなかなか決めれません!

そんな時私はこれら使って色を決めています。

 

参考にしている色のサイト・機能3つ

1.Color Hunt (カラーハント)

Color Hunt

カラーハントは、4色の合う色の組み合わせを出してくれるサイトです。

更に、色の上にカーソルを持ってくると、カラーコード(下図だと#FFB400)を表示してくれるので、このコードをコピーすればデザインにそのまま使えます。

4色の組み合わせは、

・New

・Hot

・Popular

・Random

から選べますが、色の指定をしてその色に合う3色を出してくれるという機能はないので、そこは少し不便です。

ただ、見ているだけでも「この色とこの色意外と合うな」と勉強になるのでおすすめです。

 

2.Paletton-The Color Scheme Designer

パレット – カラースキームデザイナー

これは、カラーコードで色を指定すると、下記の5つの中から色を選ぶことができます。

・単色ーその色ベースの明るい色と暗い色も表示する

 

・隣接する色(3色)

 

・トライアド(3色)ー色相環上で、120度間隔の位置の3つの色相を用いた配色[引用-トライアド – Wikipedia

 

・テトラッド(4色)ー色相環上で90度間隔の位置の4つの色相を用いた配色[参考-color balance | four color arrangement of color

 

・フリースタイルー2、3、4色から選べる

 

これも色の上をカーソルでクリックするとカラーコードが出ます。

このサイトで出た色が必ず合うというわけではないですが、目立たせたい部分があるときに、色相環で反対の色を簡単に知れるので、参考になります。

 

3.Color Zilla

ColorZilla – Chrome ウェブストア

グーグルクロームの拡張機能です。

これを追加すると、ウェブサイトなどのページから色を採ることができます。

例えば、「このピンクかわいい!デザインに使いたい!」となったら、

①拡張機能に追加したColor Zillaを開き、1番上のPick Color From Page を押します。

 

②ピンク色の上にカーソルを持っていき、上の四角の色が同じになったらそこでクリックします。

 

③再度Color Zillaを開くと、上から二番目のColor Pickerに色が入っているので、そこを押して、カラーコードをコピー

 

 

これで、製作中のデザインに同じ色が使えるという機能です!

これはとても便利で3つの中で1番使っています。

とてもおすすめなので、ぜひ追加してみてください。

 

 

 

色で困らないために、このようなサイトや拡張機能はどんどん使っていくのがいいと思います!

みなさんもおすすめのものがあったら教えてください!