4
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Material Color Tool が便利そう

Last updated at Posted at 2019-08-30

概要

Material Design の Color Tool というのを見つけました。
https://material.io/resources/color/

FireShot Capture 006 - Color Tool - Material Design - material.io.png

※ 筆者が Android エンジニアのため、 Android をベースに書いています。

最新の Material Design の Color Pattern を、好きな色を選ぶだけで自動でいい感じにしてくれるみたいです。

ちなみに2019年8月時点の Android の Material Design Support は 1.1.0-alpha09 で、 1.0.0 とかだとうまく適用できないかもしれません。 (1.0.0 と 1.1.0 は結構大きく変わっているようです)
https://github.com/material-components/material-components-android/releases

使い方

まず Primary Color を選択する

FireShot Capture 004 - Color Tool - Material Design - material.io.png

これだけでもなんとなくいい感じになってる。

次に Secondary Color を選択する

FireShot Capture 007 - Color Tool - Material Design - material.io.png

必要に応じて、 Text on Primary / Secondary を変更することもできますが、白のままでちょうど良いのでそのままで。

可読性もわかりやすく示してくれます

FireShot Capture 008 - Color Tool - Material Design - material.io.png

どこでどの色が使われるのかも一目瞭然

ss2019-08-31 7.12.32.pngss2019-08-31 7.14.10.png

各 Platform 向けに Export もできる

ss 2019-08-31 7.18.22.pngss 2019-08-31 7.15.51.png

できた成果物がこちら。

colors.xml
<!--?xml version="1.0" encoding="UTF-8"?-->
<resources>
  <color name="primaryColor">#3f51b5</color>
  <color name="primaryLightColor">#757de8</color>
  <color name="primaryDarkColor">#002984</color>
  <color name="secondaryColor">#007769</color>
  <color name="secondaryLightColor">#48a697</color>
  <color name="secondaryDarkColor">#004a3f</color>
  <color name="primaryTextColor">#ffffff</color>
  <color name="secondaryTextColor">#ffffff</color>
</resources>

感想

非常に簡単に使えました。
デザイナさんにも使ってもらえるとエンジニアが幸せになれそうな気がする。

4
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?