MaterialDesign3に入門してみた ～ 概要/Color編
こんにちは、sktnです。
普段はバックエンド領域やフロントエンドのロジック側の開発を受け持つことが多いのですが、UI周りの知見も広げたく Material Design3の勉強を始めました。
こちらのサイトを読み進めつつ、ポイントになりそうな部分をまとめてみます。
Expand
Material Design3(M3) のサイトには下記のように書かれています。
Material 3は、Googleのオープンソースデザインシステムの最新バージョンです。Material 3を使って、美しく、使いやすい製品をデザイン、構築しましょう。
最新バージョンであるMaterial3は、ダイナミックカラーやアクセシビリティの強化から、大画面レイアウトやデザイントークンの基盤に至るまで、パーソナルでアダプティブ、そして表現力豊かな体験を可能にします。
M3はGoogleが提供(提唱)するデザインシステムで、プロダクトのUIを考える際の基準となりうるもののようですね。
M3を構成する要素は
Accessibility
スクリーンリーダー等の支援機能を使うユーザーへの配慮について
"見やすさ" "操作しやすさ" について
Layout
各パーツの役割に則った配置
適切なスペーシングやサイズについて
色
役割に応じた色の適用やカラースキームの設定について
デザイントークン
色やフォント、その他スタイルについて役割別で呼び分けるプロパティとその命名について
状態
各UIコンポーネントの状態( Disabled / Loading / Hoverなど )とそれに応じた見た目の変化について
など多岐にわたっていますが、ここでは色について見ていこうと思います。
サイト上ではこのあたりの内容が該当します。
https://m3.material.io/foundations/accessible-design/patterns#f72f3851-5184-4132-b871-bc8224e062e2
https://m3.material.io/foundations/customization
https://m3.material.io/styles/color/roles
上記の画像のようにボタンの例が分かりやすいですが、私たちが普段Webを触っていて「この要素は押せるのか‥？」と迷うことが少ないのはコントラストが適切に設定されているためと言えます。
背景色と同化したボタンだったらどうでしょうか？ぱっと見で「押せる」「押せない」の判断ができず、カーソルを持っていって初めてボタンであることが分かる要素になってしまいます。
試しにこのtumblrの投稿ボタンの色を触ってみました。
どちらが迷わず「ボタン」と認識できるかは明らかですね。
ちなみにこのコントラストは「押させたい要素」に対して有効で、非活性のものやFABボタンについては要件を満たす必要はないとされています。
ではプロダクトのUIにおいて、色はどのように決めていけば良いのでしょうか。
優れたセンスを持つ人はもしかすると、適切な色をスマートに選択していけるかもしれませんが、誰もがそうとは限りません。
M3では "Color Role" として優先度 / 背景色とその上に乗る色などにそれぞれ名前を付け、扱えるように提唱されています。
https://m3.material.io/styles/color/roles#e9fc5b00-8355-4641-b35f-58b0bac639f3
初めて見ると英単語の羅列と種類の多さに身構えてしまいますが、よく見てみると命名規則が揃っており プログラマにとっては文脈としてとらえやすいと感じるのではないでしょうか。
アクセントカラー (Primary / Secondary / Tertiary / Error)
UIの中で目立たせたい要素にはこれらのアクセントカラーを使用します。
強調したい順にPrimary > Secondary > Tertiary を使用します。
またエラー表示にはErrorのアクセントカラーを用いるとよいでしょう。
それぞれに4つのRoleが定められており、{accentColor}ごとに
{accentColor}: それぞれの優先度として目立たせたい要素の背景色に使用
On {accentColor}: 指定のアクセントカラーの上に乗せる文字やアイコンの色
{accentColor} Container: {accentColor}よりは強調度が低い部分や広めの要素の背景色として使用
※Primary ContainerはFABボタンなどに使われるとされています
※この色は文字やアイコンの色としては使うべきではありません
On {accentColor} Container: {accentColor} Containerの要素の上に乗せる文字やアイコンの色
というように定められています。
親要素とその上にくる色 のセットになっているので使いやすそうですね。
固定のアクセントカラー ( Fixed accent colors )
ライトテーマとダークテーマの切り替えの影響を受けたくない要素に対して使用できます。
一部新しい用語が出てきました。
{accentColor} Fixed Dim は通常のFixedカラーよりも濃い色が割り当たっており、Fixedカラーとは別で固定動作が必要なものに対して使用されます。
On {accentColor} Fixed Variant は通常のFixedカラーよりも強調度が低い文字やアイコンの色として使用されます。
Fixed accent colorはコントラスト要件を満たしていないため、強調するアイコンなど コントラスト要件を満たす必要がある要素に対しては使えないことに注意が必要です。
カードやシート、ダイアログ要素には Surface Containerを用いると良いとされています。
Surface Containerには5つの強調度が定められており、"Surface Container" をデフォルトとしてそれよりも強調するかしないかで色を選択することができます。
これは拡張画面用のレイアウトで階層や入れ子のコンテナを作成するのに役立つものとなっています。
Surfaceに対して使用される輪郭の色を表します。
Outline: テキストフィールドの輪郭など、重要な境界線に使用されます
Outline Variant: divider要素など、装飾用として使われます
OutlineとOutline Variantはコントラスト要件が異なるため、適切に使い分けが必要です。
カードや異なる複数の要素の境界線としてはOutline Variantを使用するべきで、逆にchipの集合要素やinput要素など 明確に区分する必要があるものに対してはOutline色を用いるべきとされています。
ここまで見てくると、それぞれの要素に対してどういう役割の色を当てれば良いかの指標が分かってきました。
配色に迷う時間が減りそうです。
では、そもそもの色はどう決めていくのが良いのでしょうか。
Primaryに対してSecondaryだったりSurfaceだったりを一つ一つ考えていくのは大変そうです。
M3ではFigmaの拡張機能として「Material Theme Builder」が提供されています。
https://www.figma.com/community/plugin/1034969338659738588/material-theme-builder
これを使うことで、自分で決めたPrimaryカラーをもとに上記のそれぞれのColor Roleに応じた色の定義を自動で生成することができます。
CSSやJSON形式でエクスポートできるので、時間をかけず色を決め それらを効率的に使うことができそうです。
ここまでMaterial Design3の色にフォーカスを当てて内容をまとめてみました。
これまで配色に迷うことも多かったですが、Roleをもとに考えていくことで違和感の少ない選択ができるようになりそうです。
色以外のM3の要素についても引き続き掘り下げていこうと思います。
dededos
theartofmadeline
turnnoffyourmind
janainaart
stormborns
origamiaround
ellievsbear