GoogleのモバイルOS最新版「Android – 5.0 Lollipop」には新しいUX体系「マテリアルデザイン」が採用されています。Googleは自社サービスに続々とマテリアルデザインを採用しており、サードパーティ製のアプリなどでも、マテリアルデザインを採用したものがたくさん登場してきています。そこで今回は、マテリアルデザインをする上で大変便利なサイト「Material UI Colors」をご紹介したいと思います。

「Material UI Colors」

マテリアルデザインでは使用可能な色が指定されていますが、「Material UI Colors」では、マテリアルデザインで使えるカラーを並べたカラーパレットを表示し、使用したいカラーをクリックすると、なんとカラーコードが一瞬でコピーできてしまうんです！！

マテリアルデザイン指定のカラーパレットを一覧表示する「Material UI Colors」トップページ

ページ上のカラーをクリックすると

カラーコードが一瞬でコピーされます！

4つの形式のカラーコードがコピー可能

画面上部にはHEX(16進数)、#HEX(先頭にハッシュ記号がつく16進数)、RGB、RGBAのボタンがあり、これらをクリックすると4つの形式のカラーコードがコピーできます。

同系統のカラーのみで表示可能

URL「http://www.materialui.co/」に「colors/色名」を追加すれば、同系統のカラーのみで表示できます。※色名は半角小文字に修正。半角スペース部分がある場合にはハイフン(-)を追加

同系統のカラーのみで表示できる色

• Red(赤)
• Pink(ピンク)
• Purple(紫)
• Deep Purple(深紫)
• Indigo(紺)
• Blue(青)
• Light Blue(ライトブルー)
• Cyan(シアン)
• Teal(緑青)
• Green(緑)
• Light Green(ライトグリーン)
• Lime(ライム)
• Yellow(黄)
• Amber(琥珀)
• Orange(オレンジ)
• Deep Orange(ディープオレンジ)
• Brown(茶)
• Grey(グレー)
• Blue Grey(ブルーグレー)

例えば、青系統のカラーだけで表示させる場合は、URL「http://www.materialui.co/」に「colors/blue」を追加

「http://www.materialui.co/colors/blue」のURLとなり、青系統のカラーだけで表示!

また、イラストレーターやPhotoshopで使用できるスウォッチもダウンロード可能です。詳細は公式ページにてご確認ください。
Material UI | Material Design | Material UI Colors

まとめ

「Material UI Colors」、とても便利なサイトですね。これを使えばデザイン作業が一層効率化できますね！ぜひご活用ください！！