Material Design 3 要点まとめ #8 Color - Dynamic color

Material Design 3 ガイドラインの要点をまとめたものです。
第6・7・8回はColorの章。長いので記事を3つに分けます。今回はDynamic colorの項について。

Dynamic color – Material Design 3

Overview

Dynamic color – Material Design 3

・ユーザー設定／コンテンツに応じた配色
・M3基本配色とトークン

ダイナミックカラーによるカラースキームの自動生成には以下の2つのロジックがある。

ユーザー設定／コンテンツに応じた配色

• ユーザーが選択した壁紙など、ユーザーの設定をもとにして配色を自動生成する。

• 音楽アプリのアルバムサムネイル画像など、アプリ内のコンテンツに由来する色から配色を自動生成する。

M3基本配色とトークン

• M3基本配色とは、

  • ライトテーマとダークテーマのUIを作成するためのデフォルトの色のセット。

  • カラーロールやトーンの関係を使って構成されているため、ユーザーが作成した任意の配色にシームレスに置き換えることができる。

  • カスタムカラーとして、アプリに必要な任意のカラーロールを追加することもできる。

---

User-generated color

Dynamic color – Material Design 3

・色抽出から配色までの流れ
・コンテンツに応じた配色の使用

色抽出から配色までの流れ

前段のユーザー設定／コンテンツに応じた配色の流れから…

1. 壁紙やコンテンツから1色が選択される。

2. 選択された1色をもとに5つの配色が生成される。原文図像参照

3. 5色それぞれが13段階のトーンに分解される。

4. トーンに特定のカラーロールが割り当てられる。

5. カラーロールに基づいてコンポーネントにマッピングされる。

前回の記事↓をめっちゃ要約するとこの1〜5のような流れになります。

コンテンツに応じた配色の使用

• コンテンツに応じた配色は、ユーザー設定に応じた配色やアプリの基本配色とは別のカラーセットで、同アプリ内で両立可能。

• コンテンツの存在を強調したい場面だけを選んで適用することができる。

• ひとつの画面内に基本配色とコンテンツに応じた配色を共存させることも可能。例えばコンテンツの周囲の関連が強いUIにだけコンテンツ配色を適用する、など。原文図像参照

• コンテンツの存在感を高める感情的な効果や、コンテンツとUIの関連付けを明確にするユーザービリティ上の効果がある。

• コンテンツ配色を使用する時、配色の元になっているコンテンツは画面上に表示されているようにする。

• 配色の共存は、1画面に最大2種類までにする。

---

Imagery

Dynamic color – Material Design 3

・ダイナミックカラーをイラストに適用する
・ダイナミックカラーが適用できる画像形式

ダイナミックカラーをイラストに適用する

• ダイナミックカラーは、イラスト内にマッピングして適用することができる。

• イラスト内の配色をカラーロールに基づいて指定することで実現する。

• 肌の色など、いくつかの要素を固定することで、違和感の少ない配色の変化になる。

ダイナミックカラーが適用できる画像形式

• ダイナミックカラーと相性がいい画像ファイル形式はSVG。

• 透過PNGも有効だが、ダイナミックカラーが適用できる色が1色に限定される。

UIと一緒にイラストの配色まで流動的に変化させられるのは画期的ですね。使いこなすのは難しそうだけど、うまくいけばすごい表現ができそう。