17
Help us understand the problem. What are the problem?

posted at

updated at

Organization

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

概要

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つのキーカラーが作られます。

image.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://m3.material.io/styles/color/the-color-system/key-colors-tones)

② 作られた色調パレットから、カラーパレットを作成する

1つのKey Colorから作られた色調パレットからカラーパレットを作成します。
スクリーンショット 2022-04-14 9.32.54.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

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

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

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

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

ユーザーのKey Colorで作成したカラーパレットと同じように、
アプリのKey Colorをベースとして、こんな感じのカラーパレットが作成されます。
image.png

そして、アプリで使えるカラーパレットは、
ユーザーのKey Colorから作られた、Core scheme
アプリのKey Colorからつくらっれた Custom colors から
作られます。
image.png

Dynamic colorの良い点と気になる点

良い点

● デバイスの色からアプリまで、色に統一感がでること

デバイスのPrimaryから、アプリのカスタムカラーまで、
同じアルゴリズムで色相と彩度が調整されるので、色に統一感が出ます。

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

● 色の保守管理がやりやすくなったこと

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

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

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

気になる点

● ブランドカラーが浮くこと

サービス・アプリには、ブランドカラーという、色があります。
サービス・アプリを印象付ける色です。

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

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

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

● デザインデータが作りにく、デザイン改善がしにくいこと

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

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

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

まとめ

この記事では、Dynamic colorについての解説と、
Material Design 3(通称:M3)のDynamic colorを読んで、
考えたことと疑問に思ったことをまとめました。

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

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

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


最後まで読んでくださってありがとうございます!
さらに詳しい内容を聞きたい方は、Devトークで直接お話しましょう!

Twitterでも情報を発信しているので、良かったらフォローお願いします!

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
17
Help us understand the problem. What are the problem?