【Material Design】そういえばDynamic colorってなんだっけ？

## 概要
Dynamic colorは、Google I/Oで話題になったMaterial Youの仕組みの1つです。

ユーザーによって、デバイスやアプリの色が変わるってどういうこと？　と思ったり、
何がいいのなど疑問に思うことが多いので、
この記事では、Dynamic colorについての解説しようと思います。

実際に[Material Design 3（通称：M3）](https://m3.material.io/)のDynamic colorを読んで
個人的に思った事をまとめました。

## Dynamic color とは？

> <img src="https://lh3.googleusercontent.com/RY0vSndUvP4ErZbsZkO_QqlOpxED-KlgCb-bMZ5zHyMNSgMkNRU5p6UAflwDiwdvUr-nS7rLKjWtPHY0N3ypkVTq1gKLc2EWAYmskhp-Xg8CMe5Jw6c=w1200-rj">
> Dynamic colorは、Material Design 3（通称：M3）で定義されてれた新しい色の定義です。
>
> Dynamic colorは、mobile(Android12以降)の壁紙やその他のカスタマイズ設定により、ユーザー独自の配色を生成することができます。
>
> M3から、ユーザーが生成した色とアプリの色を共存させることで、さまざまな視覚体験をカスタマイズすることができます。

(引用: [Material Design 3](https://m3.material.io/styles/color/dynamic-color/overview))

↓ つまり

Dynamic colorのポイントは、

+ **ユーザーのデバイス設定に合わせた、ユーザー独自の配色を生成されること**
+ **独自に生成された色とアプリの色を共存させ、色々な色をカスタマイズできるようになること**

のようです。


## ユーザーの色はどのように生成されているの？
イメージは↓こんな感じです。

```mermaid
graph LR
色を選択-->A[色を抽出]
A　&　B[色の選択]-->カラーパレット作成

```

### **1. 背景画像を選択**
ユーザーが背景画像を選択することで、選択した背景画像から色が抽出されます。

### **2. 色を抽出**
背景画像から独自のアルゴリズムで1色の色を抽出されます。
抽出された1色から、カラーパレットの基礎となる5つのキーカラーが作られます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/987d0dff-b999-9d73-5423-ae75ff81b2cf.png)
(引用: https://m3.material.io/styles/color/the-color-system/key-colors-tones)

+ 5つのキーカラー
    + `Primary Key Color`： UI全体を通して目立つ部分に使うキーカラーで、UIを特徴づける色。
    + `Secondary Key Color`： Primaryよりは目立たないが、バリエーションを広げるために使われる。
    + `Tertiary Key Color`： PrimaryとSecondaryのバランスをとったり、より高い注意を引かせたい部分に使う色。
    + `Neutral Key Color`： SurfaceやBackgroundとして、テキストやアイコンに使う色
    + `Neutral Variant Key Color`： テキストやアイコンを控えめに見せたい部分に使う色。

※`Error color` も自動的に作られるけど、色抽出アルゴリズムには含まれていないようです。

### **3. カラーパレット作成**

1つのKey Colorから13個の色調パレットが作られ、
色調パレットから明るいテーマと暗いテーマのカラーパレットを作る

#### ① 1つのKey Colorから13個の色調パレットが作られる
こんな感じに、 1つのKey Colorから13個の色調パレットが作られるます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/3bafcd7a-ae37-0889-31ad-0eb4ff95735d.png)
(引用: https://m3.material.io/styles/color/the-color-system/key-colors-tones)

#### ② 作られた色調パレットから、カラーパレットを作成する
1つのKey Colorから作られた色調パレットからカラーパレットを作成します。
![スクリーンショット 2022-04-14 9.32.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/f631734e-e84b-c318-954c-a86f0bd6d42b.png)
(引用: https://m3.material.io/styles/color/the-color-system/key-colors-tones)

#### ③ 5つのKey Color + Error Color から、 ライトモードとダークモードのカラーパレットを作る

5つのKey Color + Error Colorの　それぞれのカラーパレットを1つにして
ライトモードとダークモードようのパレットを作成していきます。

|![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/9d235878-81c8-5f3e-b855-50e324a5f343.png)|
|----|


## アプリの色はどのように作られるの？

アプリのKey ColorをCustom Key Colorとして設定することで、
ユーザーの色と同様に、アプリのKey Colorをベースとした
カラーパレットが作成されます。


例えば、アプリのKey Colorをこんな感じ指定します。

黄色: `#EBC248`、オレンジ: `#FD9B40`、緑: `#6E970C`

ユーザーのKey Colorで作成したカラーパレットと同じように、
アプリのKey Colorをベースとして、こんな感じのカラーパレットが作成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/50f25c1f-c2e6-1869-c7a4-3b1b88411345.png)


そして、アプリで使えるカラーパレットは、
ユーザーのKey Colorから作られた、**Core scheme** と
アプリのKey Colorからつくらっれた **Custom colors** から
作られます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/b1855601-5ad6-b933-ee8d-5a5f2a953490.png)



## Dynamic colorの良い点と気になる点
### 良い点
#### **● デバイスの色からアプリまで、色に統一感がでること**
デバイスのPrimaryから、アプリのカスタムカラーまで、
同じアルゴリズムで色相と彩度が調整されるので、色に統一感が出ます。

そのため、色に関する知識がなくても、色を決めるのに苦労しません。


#### **● 色の保守管理がやりやすくなったこと**
普段サービス・アプリを作っていると、
「ここの赤は、こっちの赤と微妙に違う。」みたいなことが起こりやすいです。

しかし、Dynamic colorでは、
各サービス・アプリで指定しないといけない色が
Custom Key Colorの数種類になります。

そのため、色が微妙に違ったりみたいなことが起きにくく
色の保守管理がやりやすくなったと思います。


### 気になる点
#### **● ブランドカラーが浮くこと**
サービス・アプリには、ブランドカラーという、色があります。
サービス・アプリを印象付ける色です。

このブランドカラーは、UIにもよく使われ、
Qiitaだと`#55c500`で、Primary colorとしても使っています。

このブランドカラーをCustom Key Colorとして指定すると
ユーザーに応じて、微妙に、ブランドカラーがブレてしまいます。

また、ブランドカラーだけを別で指定すると、
Dynamic colorと色相と彩度がことなるため浮いてしまいます。



#### **● デザインデータが作りにく、デザイン改善がしにくいこと**
Dynamic colorを意識して、作ったことはないですが、
サービス・アプリを作るときには、設計図(プロトタイプ・デザイン)を作ってコーディングに入っていきます。

**Core scheme** を使ったUIを作ると、
サービス・アプリとしてユーザーに見せたいデザインが設計図(プロトタイプ・デザイン)通りになりません。

また、ユーザー１人１人違うため、色についての課題が発見しにくくなると思います。


## まとめ
この記事では、Dynamic colorについての解説と、
[Material Design 3（通称：M3）](https://m3.material.io/)のDynamic colorを読んで、
考えたことと疑問に思ったことをまとめました。

いちデザイナーとしては、
新しくアプリを作るなら、Tryしてみてもいいかなとおもうものの、
既存のサービスでは、取り入れたくないなと感じました

もしかしたら、デザイナーにとって、色はアプリ・サービスにコミットできることの１つが
取られることが嫌なだけかもしれません。

これがAIに仕事が奪われる感覚に近いのかもしれません。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510