がーにゃそブログ

とあるジョジョヲタデザイナーのつぶやきです。

多色使いなデザインをしないといけない時のお手本が身近な所にあった件

わりと難しい多色使いなデザイン

サイトやアプリのデザインで、ジャンルやカテゴリを色分けして表現することが多々あると思うのですが、これが意外と難しいです。

#f00!#00f!とかやってるとダサくなっちゃうし、目分量の色チョイスだと全体の調和がとれなかったりなどなど。。。

お手本はiPhoneのなかに…!

しかし、楽をしたい。なんとかして楽をしたい。1秒でも早く帰りたい。

そんな時にふと手元のiPhoneを見てみると、とても参考になるお手本がそこに…!

f:id:thewateriswide:20140919230553p:plain

 

f:id:thewateriswide:20140919230600p:plain

そう、このアイコン!!

 

 

このアイコンのありがたいところは、薄い色の部分と、花びら?が重なって濃くなっている部分があること。

以下、カラーコードを書き出してみました。
アイコンは微妙にグラデーションになっているのでぴったり同じではありませんが。。

濃いところ

 
#cf1b12
 
#f65502
 
#dcb109
 
#7fb218
 
#3d9555
 
#3c73a3
 
#6b5599
 
#a84068

薄いところ

 
#f3775e
 
#f9a234
 
#f6e424
 
#b5d655
 
#6cc0a3
 
#79abdb
 
#a18ec3
 
#d685aa

これらを組み合わせると

それぞれの色を背景色、ボーダー色、文字色に使って、なにも考えずに調和のとれたカラフルデザインができてしまう!

カテゴリ1

カテゴリ2

カテゴリ3

カテゴリ4

カテゴリ5

カテゴリ6

カテゴリ7

カテゴリ8

 

ジャンル1

ジャンル2

ジャンル3

ジャンル4

ジャンル5

ジャンル6

ジャンル7

ジャンル8

 

こうしてみるとiPhoneの写真アプリを参考にしてるなんて誰も気づかないことだろう…よしよし。

Photoshopなどでアイコンごと明暗を調整すれば、さらにバリエーションが増えますよ!
カラフルな配色でお困りの方はぜひ試してみてはいかがでしょうか(^_^)