2015年のデザイントレンドとして「フラットデザイン」「マテリアルデザイン」が挙げられる。今までのデザインではあまり見られなかった特徴的な配色を用いられることが多くなってきました。幅広く大きな範囲を同色で塗られることが多い、上記のデザイントレンドでは、上にのってくるコンテンツ（文字情報など）の可読性なども考慮したものでなければなりません。

今回は、その「フラットデザイン」「マテリアルデザイン」らしい、配色のパターンと便利なツールを紹介します。

トレンドデザインらしい色の条件と選択

「フラットデザイン」「マテリアルデザイン」では、大きい面で色を塗られることが多い。そのため、広い面積で使った時に見ていて「目に優しい色」を選択する必要がある。また「白文字を載せた時に映える色」「複数色を合わせて使用した時に違和感がない色」を意識することが大切になってきます。

【左】loubsol - http://loubsol.com/

【右】APIA - http://www.apiajapan.com/

上記サイトでは、大きな面積で色を塗られているが、コンテンツはとても見やすい。配色を考慮していることがわかる。

フラットデザインの配色パターンサイト

Flat UI colors

Flat UI colorsでは、フラットデザインによく用いられることが多い色を集めまとめられているサイトです。

マテリアルの配色パターンサイト

Material UI Colors

マテリアルデザインに使える配色をまとめたサイト。

material palette

選んだ2色よりマテリアルデザインに合うカラーパレットを生成してくれるサービスです。生成されたカラーパレットはCSS/SASS/LESS/SVG/XML/PNGに書き出すことができます。

配色を助けるツール

Adobe Color CC (Adobe Kuler)

Adobe Color CC (Adobe Kuler)はバランスの良い配色パターンを生成してくれるAdobeのサービスです。人気の配色や他の方が生成した配色のパターンも参考にすることができます。自分のイメージしているような配色を見つけた時に、そのまま使ってしまっても◎

画像をアップロードして色を抽出することもできます。

Color Scheme Designer

Color Scheme DesignerはAdobe Color CCと少し似ていますが、色相環から、指定した色数から配色パターンを生成してくれます。

キーカラーの同系色からパターンを作るには

適当に色を組み合わせただけでは、全体的に調和がとれた配色にすることは難しい。そこで全体的のキーとなるカラーをまず選択し、そこから同系色でまとめていくのが近道◎

【左上】Kameleon - http://www.kameleon.pics/

【右上】Shopify - http://www.shopify.com/2014

【左下】JS Conf - https://www.jsconfar.com/

【右下】LEONARDO ZAKOUR - http://leozakour.com/

配色のサポートツール

COLOURlovers

配色カラーパレットのコミュニティサイト

color hailpixel

アクセスした瞬間「？」が浮かぶですが、クリックした時に一瞬で理解できる少し変わった配色サポートツール。

HUE/ 360

色相環より選択した1色に合う配色を生成してくれます。

NIPPON COLORS

日本の伝統色を見ることができる美しいサイト。アニメーションなどの動きも日本らしく美しい。

まとめ

自分で配色をすべてやろうと思うと、なかなか難しいですよね。そんな時に、上記のような配色をサポートしてくれるようなツールを活用してきたいですね◎