見出し画像

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など。

この記事が気に入ったらサポートをしてみませんか?