概要
Dynamic colorは、Google I/Oで話題になったMaterial Youの仕組みの1つです。
ユーザーによって、デバイスやアプリの色が変わるってどういうこと？ と思ったり、
何がいいのなど疑問に思うことが多いので、
この記事では、Dynamic colorについての解説しようと思います。
実際にMaterial Design 3（通称：M3）のDynamic colorを読んで
個人的に思った事をまとめました。
Dynamic color とは？
Dynamic colorは、Material Design 3（通称：M3）で定義されてれた新しい色の定義です。
Dynamic colorは、mobile(Android12以降)の壁紙やその他のカスタマイズ設定により、ユーザー独自の配色を生成することができます。
M3から、ユーザーが生成した色とアプリの色を共存させることで、さまざまな視覚体験をカスタマイズすることができます。
(引用: Material Design 3)
↓ つまり
Dynamic colorのポイントは、
- ユーザーのデバイス設定に合わせた、ユーザー独自の配色を生成されること
- 独自に生成された色とアプリの色を共存させ、色々な色をカスタマイズできるようになること
のようです。
ユーザーの色はどのように生成されているの？
イメージは↓こんな感じです。
1. 背景画像を選択
ユーザーが背景画像を選択することで、選択した背景画像から色が抽出されます。
2. 色を抽出
背景画像から独自のアルゴリズムで1色の色を抽出されます。
抽出された1色から、カラーパレットの基礎となる5つのキーカラーが作られます。
(引用: 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個の色調パレットが作られるます。
(引用: https://m3.material.io/styles/color/the-color-system/key-colors-tones)
② 作られた色調パレットから、カラーパレットを作成する
1つのKey Colorから作られた色調パレットからカラーパレットを作成します。
(引用: https://m3.material.io/styles/color/the-color-system/key-colors-tones)
③ 5つのKey Color + Error Color から、 ライトモードとダークモードのカラーパレットを作る
5つのKey Color + Error Colorの それぞれのカラーパレットを1つにして
ライトモードとダークモードようのパレットを作成していきます。
 |
|---|
アプリの色はどのように作られるの？
アプリのKey ColorをCustom Key Colorとして設定することで、
ユーザーの色と同様に、アプリのKey Colorをベースとした
カラーパレットが作成されます。
例えば、アプリのKey Colorをこんな感じ指定します。
黄色: #EBC248、オレンジ: #FD9B40、緑: #6E970C
ユーザーのKey Colorで作成したカラーパレットと同じように、
アプリのKey Colorをベースとして、こんな感じのカラーパレットが作成されます。
そして、アプリで使えるカラーパレットは、
ユーザーのKey Colorから作られた、Core scheme と
アプリのKey Colorからつくらっれた Custom colors から
作られます。
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）のDynamic colorを読んで、
考えたことと疑問に思ったことをまとめました。
いちデザイナーとしては、
新しくアプリを作るなら、Tryしてみてもいいかなとおもうものの、
既存のサービスでは、取り入れたくないなと感じました
もしかしたら、デザイナーにとって、色はアプリ・サービスにコミットできることの１つが
取られることが嫌なだけかもしれません。
これがAIに仕事が奪われる感覚に近いのかもしれません。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。