![見出し画像](https://assets.st-note.com/production/uploads/images/88476998/rectangle_large_type_2_064cbafdb94e287fe26a4171c467a76e.png?width=1200)
Material Design 3 要点まとめ #3 Customizing Material
Material Design 3 ガイドラインの要点をまとめたものです。
第3回はCustomizing Materialの章。Android12からの新機能である、ダイナミックカラーによるUIカラーのパーソナライズの紹介。ここでは触りだけ紹介されていて、詳細は別章にそれぞれジャンプする構成になってます。
概念の紹介なので書きぶりが抽象的です。このページで深く理解しようとせず、さらっと流して各詳細に当たりに行ったほうがイメージがつきやすいと思います。
要点
・ダイナミックカラー:UIカラーにユーザーの設定を反映
・ブランドカラーとダイナミックカラーは共存させることができる
・Dynamic color codelab:ダイナミックカラー導入のための入口
・Material Theme Builder:Dカラー活用のためのFigmaプラグイン
・1色から配色セット全体を自動で構築できる
・色の役割は5つのグループに分類される
ダイナミックカラー:UIカラーにユーザーの設定を反映
M3のカラースキームを使ってUIを構築しておくことで、アプリのUIカラーをユーザーごとにパーソナライズすることができる。
パーソナライズは、ユーザーは端末に設定した壁紙の色や、ユーザー自身による設定に基づく。
ダイナミックカラーは、MDデフォルトでないカスタムコンポーネントにも適用できる。
ブランドカラーとダイナミックカラーは共存させることができる
ブランドカラーを優先する箇所と、ダイナミックカラーを優先する箇所は開発者がコントロールできる。
例えば、アプリのプロフィール画面やアカウント画面にだけユーザーの配色設定を反映させる、など。
Dynamic color codelab:ダイナミックカラー導入のための入口
デザインとブランドカラーが、ダイナミックカラーとどのように相互作用するかを視覚化する、実践のためのチュートリアル。
Material Theme Builder:ダイナミックカラー活用のためのFigmaプラグイン
デザインの視覚化、M3カラーシステムへの移行、ダイナミックカラーの活用が簡単にできる。
複数形式のコード出力にも対応している。
トークンを使ってFigmaと複数の実装でパラメータを共通させることができる。
1色から配色セット全体を自動で構築できる
主要なブランドカラーなど1色の指定をもとに、UI全体に適用されるカラーセットが自動的に生成される。
自動生成されたカラーセットは、UIを構築するために必要な明度、彩度のバリエーションやコントラストを満たすように調整されている。
2色目、3色目を指定することも可能。指定を追加することで、得られる配色全体に影響を及ぼす。
色の役割は5つのグループに分類される
UIにおける目的に応じて、主要な色には役割が割り当てられている。
Primary
Secondary
Tertiary
Neutral
Neutral Variant
役割分担された5種類の色それぞれについてカラーグループが形成される。例えば、Primaryを起点にon-primary、primary containerなど。