[O]フラットデザインカラーリングのコツを探すための7つの検証

Flatdesigncoloring

最近、ネット上の記事でもフラットデザインについて書かれているものも多くなってきていますが、実際フラットデザイン的なものを作ろうと思っても、コツというかどうしていいのか分からない部分も多くあります。

フラットデザインといえば、
・塗りにグラデーションやテクスチャを使わない
・ドロップシャドウなどをつかって立体感を出さない
・角丸を使わない
・背景や余白によって境界線を設ける
・ピクトグラムなどを利用して最低限の視覚情報で

といった感じでしょうか

この中で僕が気になっていたのがカラーリングのコツというものです。なにかルール的なものが潜んでいるのかな、とも思ったりしていました。

今回は、この謎を探るべく数種類のフラットデザイン的なUIをピックアップして配色周りなどを調べてみました。

検証1

FlatDesignColorAnalize1
http://dribbble.com/shots/1059591-Home-Automation-Flat-App-Design

まずはこちらを検証してみました。

色のバランスを見てみるとペンタードと呼ばれるバランスに近いような気がします。色数が増える場合には、このようなバランスを保って配色を心がけるといいでしょう。(フラットデザインに限らず)

※ペンタード配色とは?
色相環を5等分した色相同士の配色のこと

背景がブラックということもあってか、彩度は押さえ気味な印象でトーンも高くありません。こう、見た感じパンチのある色はほとんどありませんよね。落ち着いた印象です。

そうすることによって背景色とのバランスも取れるように考えてあります。

検証2

FlatDesignColorAnalize2
http://dribbble.com/shots/1052090-AirportChatter-V2-Concept/attachments/128500

こちらも検証1と同様に背景はブラックとなっています。配色のバランスを見ても、先ほどと似ていてペンタード(五角形)のような感じですね。青から緑にかけて色数は他よりも多いのでバランスが崩れているようにも見えますが、きれいにまとめられています。

検証1と同じように彩度は抑え目でバランスがとってあります。

検証3

FlatDesignColorAnalize3
http://dribbble.com/shots/1039135-Spendee-Add-New/attachments/126060

こちらは背景色がホワイトとなっています。全体の印象も淡いカラーリングで、俗にいうパステル調のような感じでしょうか。かわいらしい印象を受けますね。

配色バランスも先ほどと同じような感じですが、全体的に彩度が落としてあるようですね。それは、背景色が明るいい(今回でいうホワイト)ということもあって、あまり彩度を上げると目が痛い印象を受けてしまいます。

個人的にはこういう配色がとても大好きです(なかなかできないけど)。

検証4

FlatDesignColorAnalize4
http://timeless-app.com/

こちらは今までと少しタイプが違って、背景色を同色2色で彩ってあります。

文字にはグレー系とホワイト系を用いて、明度バランスの差によってアテンションさせる部分を変えている感じですね。とてもかわいらしい感じで大好きです。

配色もきれいなトリアード(三角形)でバランスがとれていますし、背景色がメイン色であることからも推測できるように、あまり奇抜な色は選んでいません。ソフトなパステル調の配色ですね。よって、彩度もあまり高くありません。少しアッシュ(灰色)がかかったような印象も受けますね。

検証5

FlatDesignColorAnalize5
http://www.wiselistapp.com/

こちらは上下にブラックを用いることによって背景色がブラックであるかのように印象付けられますが、実際は段ごとに背景色を用いたUIになっていますね。これといった背景色を持たないという点では一風変わったようなデザインになっています。

しかし、配色のバランスはトリアードで、彩度はちょっと高めに設定してあります。そのために、UI全体がはっきりとした色合いで打ち出されてきます。より活発な印象を受けますね。

検証6

FlatDesignColorAnalize6
http://dribbble.com/shots/920909-Lolly-A-Sweet-Little-Theme/attachments/102049

こちらはスマートフォンサイトのデザインになりますが、背景色に黒ではなくグレーを用いることで、少しやわらかい印象を感じます。

配色も同じようにパステル系の色に少しアッシュを感じるような色を選んでいるようですね。
背景色もUI内の色も共に彩度が低めに統一されていますので、とても目に馴染みやすい印象を受けます。

検証7

FlatDesignColorAnalize7
http://www.behance.net/gallery/METROSHOP-opencart-theme/6786587

こちらはWebサイトのデザインとなります。

背景色はホワイトなので、やはり気持ちパステル調な雰囲気を持っています。全体のデザインでは、無理に色を使う異なるホワイトスペースを活用して、ポイントごとに色を配置しているような印象を受けます。

いろいろなデバイスをアイコン的に用いていることも影響しているのでしょうね。アテンションとしての配色を意識しているようです。

実際読んでみてUIデザインの勉強になった本

こちらの書籍たちはフラットデザインという枠に捕われず、実際に読んでみてとても勉強になりましたのでオススメしてみます。

まとめ

計7点のUIなどを検証してみましたが、どれも配色のバランスをある程度守りながら、きちんと配色しているような印象を受けました。

また、メインとなる色によって(背景色など)全体の配色の明度を落とし気味にしたり、彩度を高めにしたりと、カラーマネージメントがしっかりとされている印象を受けました。さすがプロの技ですね。

色を前面に押し出す時には、彩度を抑えパステル調を用いる傾向は強く感じました。また、背景色が強い場合は、彩度のバランスがキーポイントになってくるようですね。

感覚的なレビューになってしまいましたが、フラットデザインを構築するにあたってのカラーマネージメントのお役に立てれば幸いです。