Material Design 3ガイドライン概要

Android Advent Calendar 10日目です。
Material Designの一般的な話に留まってしまいました。Android特有の話やコードは出てきませんが、「ふーん」と流し読みいただければ幸いです。

Material Design 3とは

2014年にGoogleから発表されたMaterial Designですが、2018年にMaterial Themingが登場し、今年2021年にMaterial Youが新たに発表されました。発表当初は「Material You」という呼称での発表でしたが、先日ガイドラインが登場し、そこでは「Material Design 3」、略称として「M3」と記載されていました。このタイミングで、Material ThemingをM2、Material YouをM3と整理されたようです。
下記のガイドラインの用語集の中に詳細が記載されています。

なお、Material ThemingおよびMaterial YouはM2/M3それぞれの特徴のひとつであり、厳密には「M3=Material You」ではないようです。が、そこまで気にするところではないかなと思っています。

M1/M2のガイドラインも残っているようですので、記載しておきます。

• M1ガイドライン : https://material.io/archive/guidelines/
• M2ガイドライン : https://material.io/design
• M3ガイドライン : https://m3.material.io/

URLのpathからわかるように、M1はarchive扱いになっていて、M2がmaterial.ioのドメインを使っています。そしてM3は新しいドメインを使っていることから、M3登場のタイミングでM1~M3の採番が行われたことがわかります。

ガイドライン自体はとてもボリューミーなので、ポイントをいくつか絞って説明したいと思います。また、本記事中の画像は基本的にはMaterial Designガイドラインのものを使用しております。

M3の特徴

Material You

Google I/Oで大体的に発表されたMaterial Youが、一番大きな特徴でしょう。ユーザの端末の壁紙から色を抽出し、その色をベースにウィジェットやアプリの配色が変わる機能です(Dynamic Color)。ただし、対象端末はPixelと機種が限られている上、対応するためにはデザインもアプリ実装もM3のカラースキームに対応する必要があります。Googleアプリは対応しているようですが、これが浸透するには時間がかかりそうな気がします。
なお、チュートリアルにはデザイナー向けにFigmaのものも用意されていました。

また、Dynamic colorの対象はアプリのViewだけではなく、イラストにも適用させることが推奨されています。¹

Color Ruleの変更

Accent colors

M2ではPrimary/Secondaryが定義されていましたが、M3ではTertiary key color(3番目の意味)が追加されました。
これは単純に表現力向上の目的で追加されています。また、この3色をまとめてAccent colorsと呼ばれています。²

また、それぞれの色に"On"ColorがあるのはM2と同じですが、"Container"が新たに追加されました。元の色よりも弱めの薄い色が指定されていて、比較的強調度が低い場合に利用します。

一方、M2のPrimary Variant/Secondary Variantはなくなっているようです。M2ではPrimary VariantにはPrimary Colorの濃い色を設定し、status barの背景色などに使っていましたが、M3ではstatus barの背景はAppBarと同じ色になったようです。

M2	M3
status barはPrimary Variant	status barはPrimary Color(AppBarと同色)

Neutral colors

M2ではBackground/Surfaceとして定義されていた色が、纏めてNeutral key colorとして定義されました。さらに、色味の少し異なるNeutral Variant key colorが追加されています。この2色をNeutral colorsと呼びます。両者とも、主に背景やアウトラインなどに利用する色です。²

また、Accent colorsとNeutral colorsの5色をあわせて Key colors と呼びます。

Tonal palettes

さて、Key colorsで紹介した画像に”Primary80"など10から100の数字が入っていたことにお気づきでしょうか？
ひとつのKey colorから4色(Neutral Varian Key Colorのみ3色)が派生していますが、これはKey colorのトーンにより自動的に割り当てられています。²

上記のように、ひとつの色をトーンによって13色に分類します。0〜100の数値で表され、0が濃くなり(黒)、100が薄く(白)なります。これを自動で割り振るため、5つのKey colorを決めるだけで派生色は自動的に決まるようになっています。
例えばPrimary Colorの場合は、ベースがトーン40になり、On Primaryがトーン100（白）、Primary Containerが少し薄めのトーン90、On Primary Containerがトーン10（黒っぽいPrimary Color）といった形です。

Design Tokenの導入

Design Tokenとは、雑にいってしまうとデザインから開発まで一貫して利用できる共通言語のようなものでしょうか。色、マージン、フォント、Shapeなど見た目に関する全ての値(情報)すべてがDesign Tokenとなります。Design Tokenの概念自体は2014年頃に登場したものなので、調べると多くの解説記事が見つかると思います。

Material Designでは以下3つのTokenが定義されています。

• Reference token
  • 生の値のエイリアス
• System token
  • Reference tokenを参照
  • 役割を示す
  • light/dark themeによる参照先の切り替えは、このTokenの役目
• Component token
  • System token(またはReference token)を参照
  • UIパーツの各部分を示す
    • 例）ボタンの背景色、テキストのサイズ
  • 現在Googleにて開発中

M3における各UIパーツのSpecは、このDesign Tokenを使って、細かく値が定義・管理されています。
FigmaやVSCodeでは、Pluginを使うことでツール間でDesign Tokenの設定を取り込むことができるようです。

その他の特徴

他にTypographyの再編がありました。また、Foldable端末やLarge Screen、デスクトップなどの言及がされています。Foldable端末の場合、ヒンジ部が考慮されたガイドラインが少ないながら記載されています。詳細は割愛しますが、Foldable端末の普及状況次第ではこちらのガイドラインも追加されるかもしれないですね。

UIパーツの変更

全体的な変更

ぱっと眺めるとわかるように、丸くなった印象を受けます。また、画面サイズが大きくなったためか、デフォルトのサイズもやや大きくなりました。
さらにガイドラインを細かく読むと、Shadowがデフォルト無しになっているパーツが増え、色味でパーツ間の区別をさせるようになっています。次に紹介するSurface Tonesが、その役割を担います。

Surface Tones

M3ではオブジェクトの表層に半透過のレイヤーが重ねられており、Elevationに応じてこのレイヤーの透過度が変わります。色はPrimary Colorが使われます。下表はガイドラインに示された例です。

	+1	+2	+3	+4	+5
見た目					なし
透過度	5%	8%	11%	12%	14%

※Elevationは0~+5の6段階が定義されていますが、Androidのdpでの数値は明記されていません。³

実はM2でもElevation Overlayとして、Elevationに応じてレイヤーの色を変えるというガイドラインはありましたが、Shadowの見えづらいDark Themeのためのガイドラインでした。
M3では、Light Theme、Dark Theme共にこれが採用されることで、Shadow以外でのコンテンツ間の境界がわかりやすくなります。また、アクセシビリティ観点でも、コントラストがつくことで改善されます。

State Layer

なお、Surface Tonesとは別にState Layerと呼ばれる半透過のレイヤーも存在します。ここでも同じくPrimary Colorが使われます。
Hover/Focus/Press/DragおよびSelected/Activated、Disabledそれぞれの状態によって透過度が変化します。

UIパーツごとの変更点

ここからは標準UIパーツのガイドラインを少しずつ紹介します。

FAB

• Large(96dp)が追加
  • M2ではDefault(56dp)とMini(40dp)の２つだけだった
  • Defaultのサイズは変更なし
  • Miniは、M3でSmallに呼称が変更（サイズは変更なし）
• 円形から角丸に変更
  • 賛否両論ありそう。個人的にはまだ違和感…
• 配色が一新され、背景色がPrimary ColorからPrimary Containerに変更
  • 他にもSurface、Secondary Container、Tertiaryを用いたカラーマッピングも提供されている
• Extended Fabの高さとElevationが、Fabと同じになった
  • M2では差分があったので、M3で違和感が解消された

ボタン

• 角丸から半円に変更
  • 基本的には角丸にしない。角丸はFABとChipで利用。
  • 高さも36dpから40dpに変更
• Elevated、Filled、Filled Tonalが追加⁴
  • M2で定義されていたContainedが、Elevated/Filled/Filled Tonalに細分化されています

	M2	M3
Contained		Elevated/Filled/Filled Tonalに細分化された
Filled	なし
Filled　Tonal	なし
Elevated	なし
Outlined
Text

重要度に応じてボタンを使い分けます。基本的には表の上の方が強調したいときに使用します。

Chip

• 半円から、角丸に変更
  • 半円はボタンに使われています
    • ボタンは静的で事前にアクションが決まっている
    • Chipは要素が動的で、サポート的な役割を持つ
• 種類も整理されている
• 影はデフォルトなし（elevationもゼロ）
  • 画像の上に配置する場合など、Chipが背景に同化させないために影を使うことはOK

	M2	M3
Input
Choice		Filterのサブセットとなる
Filter
Action		AssistとSuggestionに細分化
Assist	なし
Suggestion	なし

※画像はM3ガイドラインをベースに持ってきましたが、M2のデザインがガイドラインに沿っていなかったため、M2のガイドラインから持ってきました。

Navigation bar

• M2ではBottom navigationと呼ばれていたが、呼称が変更された
• Drop shadowが無くなった
  • ただしElevationはLevel2で、Surface ToneによりPrimary Color透過度8%の背景色になる
• active状態の表示が変更
• 高さが少し高くなった

	M2(Bottom　Navigation)	M3(Navigation　Bar)
inactive状態	opacityで色を薄く表現	アイコンはoutline
active状態	透過なし	アイコンはfilledで、アイコン部分にIndicatorを表示
shadow	あり	なし

Top app bar

• ドロップシャドウなし(Elevation0)
• スクロールするとElevation2へと変化する
  • Surface ToneによりPrimary Color透過度8%の背景色になり、コンテンツとの境界がわかりやすくなる
• 高さが高くなった
• 4タイプが定義

M3での呼称	M2	M3
Cener-aligned	なし	height = 64dp
Small	height = 56dp	height = 64dp
Medium		height = 112dp
Large	height = 128dp	height = 152dp

M2のデフォルトは、M3だとSmall相当になります。また、M2のExtended top app barのSpecは128dpとして紹介されていましたので、M3だとMediumとLargeの中間くらいに相当しそうです。

また、今年のAdventCalendar6日目で実装に関する詳しい記事が投稿されていましたので、紹介いたします。スクロール時に背景の色が変わる様子はガイドラインでは見れませんが、こちらの記事では動画で紹介されているため、イメージしやすいと思います。

その他のUIパーツ

• Card
  • elevated、Filled、Outlinedの3タイプが定義
  • デフォルトでは影なし
    • elevationはLevel1だが、影なしがデフォルト
• Navigation Drawer
  • Indicateの形が半円になった
  • Standard navigation drawerとModal navigation drawerが定義
    • 今まで広く認識されていたのはModalの方
    • Standardは、タブレットなど大画面端末で常に表示されているメニューのこと
• ダイアログ
  • 角丸のradiusが増え、丸みが増した

所感

M3については、dynamic colorに対応しているのがPixelのみなど、できることが限られていることもあり、対応しているアプリはとても少ないと思います。また、見た目も大きく変わるため、ブランドイメージなどを考えるとそのまま導入するのは難しく、浸透には時間がかかると思います。工数観点でも、簡単な対応ではないので、M3が実際に浸透するかどうかも不透明だと感じています。

ただ、M3の思想・ガイドラインを理解し、一部だけでもM3を取り込むことでより良いサービスにブラッシュアップできる可能性はあると思います。この記事がそのお手伝いになれば幸いです。

おまけ

先日、2021/11/29-30に開催されたFlutterKaigi でもMaterial Youについての発表がありました。セッションの前半はMaterial Design全般に関する話ですので、こちらもご参考にどうぞ。
（私も運営スタッフとしてMCなどを担当させていただきました）

1. dynamic colorの出典：https://m3.material.io/styles/color/dynamic-color/imagery
   
   ガイドラインでは肌や髪の色は不変とすること(dynamic colorに依存しないこと)、背景を固定色(白など)で塗りつぶさないこと、コントラストを保つためにトーンは出来るだけ40~90にすること、などが説明されています。 ↩

2. color ruleの画像出典：https://m3.material.io/styles/color/the-color-system/key-colors-tones ↩ ↩² ↩³

3. DesignTokenの章に tokens for components, elevation, and size measurements are in development と記載があり、2021年12月現在開発中とのことです。 ↩

4. ボタン画像の出典：https://m3.material.io/components/buttons/overview ↩