配色センスに自信がなくても大丈夫！マテリアルデザイン用の配色を簡単に構築できるサイト3選

近年、頻繁に耳にする「マテリアルデザイン」。

マテリアルデザインの醍醐味はユーザーにとっての使い心地度、利用しやすさ、ストレスを感じないデザインを実現できることです。
しかし、実際、マテリアルデザインを作成すると迷う部分も多く、特に配色パターンに悩まされる方も多いのではないでしょうか。

今回は、注目を集めているマテリアルデザイン用の配色を簡単に作れるサイトをご紹介します。

マテリアルデザインの配色はある程度決まっている

Googleが提供している「マテリアルデザイン」は、基本的に使用可能な色が指定されています。
立体系のデザインが特徴的で、ドロップシャドウや彩度の調整などの細かなルールも存在します。

配色作成サービス

1.Material Design

http://www.materialui.co/colors

Googleが考案した「マテリアルデザイン」のガイドラインがあり、その配色一覧をわかりやすくしたものが「Material Design」です。

フルスクリーン上にカラーパレットが並んでおり、直感的に色を認識することが可能です。
色をクリックするだけでRBGカラーコードがコピーされるので、そのまま直接ソースにペーストするだけで作業完了です。
タブをクリックすると、アイコンやFLAT UIのカラーチャート、Facebookやツイッター、Instagramなど基調色のコードが確認できます。

また、応用として例えば「グレー」の配色だけを見たい場合は、「http://www.materialui.co/colors」のURL末尾に「/grey」を入れるだけで500を基準とした階層の一覧が表示されるので、集中して選ぶことが可能です。。

2.coolors

https://coolors.co/

「coolors」はブラウザに5色の配色が掲示され、個別にHSB、RBG、CMYK用の調整が可能です。

ひとつのカラーを選択し、スペースキーを１回押すごとにカラースキームが生成されるので、あらゆる色味を確認できます。
上部タブのREFINEでは彩度の調整がクリックでできたり、エクスポート機能も充実しているのでURLをコピーできたりするうえ、ブラウザをpng形式でダウンロードすることも可能なので、あらゆる用途に対応できます。

3.pltts.me

http://pltts.me/

「pltts.me」は、様々なテーマや用途に合わせたタイトルが記載されており、その内容に合わせたカラー配色がなされています。

複数の配色が組み合わさっており、配色比率も出来上がっているので、テーマが決まっていれば全くの初心者の方には選びやすいかもしれません。
各テーマによってユーザーのお気に入りスターやビュー数が確認できるので、人気のタイプや実際のユーザーの声が聞けるので使い心地がわかりやすいでしょう。

テーマをクリップするとPHPやRubyのコードが出てくるので、制作側にとっても使い勝手が良く重宝します。

まとめ

マテリアルデザインの配色は限定的に思われがちですが、今回ご紹介したようにカラーパターンは無数に存在します。

配色はある程度基本を理解できれば自分自身で決めることも可能ですが、デザインが本業でない場合やマテリアルデザイン自体に慣れていない場合などは積極的に外部サービスを利用しましょう。

このニュースを読んだあなたにおすすめ

Photoshop初心者必見！Photoshopを使いこなすために知っておくべき情報まとめ
全て無料！デザインの魅力をさらに引き立てる高品質PSDファイル60選
コミカルなデザインで活用したいマンガ風フォントまとめ

このニュースに関連するカリキュラム