Material Design 3 要点まとめ #8 Color - Dynamic color
Material Design 3 ガイドラインの要点をまとめたものです。
第6・7・8回はColorの章。長いので記事を3つに分けます。今回はDynamic colorの項について。
Overview
ダイナミックカラーによるカラースキームの自動生成には以下の2つのロジックがある。
ユーザー設定/コンテンツに応じた配色
ユーザーが選択した壁紙など、ユーザーの設定をもとにして配色を自動生成する。
音楽アプリのアルバムサムネイル画像など、アプリ内のコンテンツに由来する色から配色を自動生成する。
M3基本配色とトークン
M3基本配色とは、
ライトテーマとダークテーマのUIを作成するためのデフォルトの色のセット。
カラーロールやトーンの関係を使って構成されているため、ユーザーが作成した任意の配色にシームレスに置き換えることができる。
カスタムカラーとして、アプリに必要な任意のカラーロールを追加することもできる。
User-generated color
色抽出から配色までの流れ
前段のユーザー設定/コンテンツに応じた配色の流れから…
壁紙やコンテンツから1色が選択される。
選択された1色をもとに5つの配色が生成される。原文図像参照
5色それぞれが13段階のトーンに分解される。
トーンに特定のカラーロールが割り当てられる。
カラーロールに基づいてコンポーネントにマッピングされる。
コンテンツに応じた配色の使用
コンテンツに応じた配色は、ユーザー設定に応じた配色やアプリの基本配色とは別のカラーセットで、同アプリ内で両立可能。
コンテンツの存在を強調したい場面だけを選んで適用することができる。
ひとつの画面内に基本配色とコンテンツに応じた配色を共存させることも可能。例えばコンテンツの周囲の関連が強いUIにだけコンテンツ配色を適用する、など。原文図像参照
コンテンツの存在感を高める感情的な効果や、コンテンツとUIの関連付けを明確にするユーザービリティ上の効果がある。
コンテンツ配色を使用する時、配色の元になっているコンテンツは画面上に表示されているようにする。
配色の共存は、1画面に最大2種類までにする。
Imagery
ダイナミックカラーをイラストに適用する
ダイナミックカラーは、イラスト内にマッピングして適用することができる。
イラスト内の配色をカラーロールに基づいて指定することで実現する。
肌の色など、いくつかの要素を固定することで、違和感の少ない配色の変化になる。
ダイナミックカラーが適用できる画像形式
ダイナミックカラーと相性がいい画像ファイル形式はSVG。
透過PNGも有効だが、ダイナミックカラーが適用できる色が1色に限定される。
この記事が気に入ったらサポートをしてみませんか?