Material Design 3（Material 3）とは？Expressiveの変更点と各実装の対応状況

Material Design 3（Material 3、略してM3）は、Googleが公開しているデザインシステムの第3世代です。2021年にMaterial Youとして発表され、壁紙などから配色を組み立てるダイナミックカラーとデザイントークンを土台にしています。2025年5月にはその拡張としてMaterial 3 Expressiveが発表されました。

仕様の定義に加えて、実装で迷いやすいのが、どのライブラリのどの版でExpressiveが使えるかという点です。この記事では、Jetpack Compose・Android Views・Flutter・Webの配布物を版番号とソースコードで確かめ、2026年9月29日時点の対応状況をまとめました。

まとめ：Material 3とExpressiveの要点と実装の現在地

• Material 3は2021年のMaterial Youを起点とするGoogleのデザインシステムで、色・文字・形をデザイントークンで管理します。
• Material 3 Expressiveは「Material 4」ではなく、M3の上に形状・モーション・部品を足した拡張です。
• Jetpack Composeの安定版1.4.0で使えるExpressive関連の部品はナビゲーションバーとナビゲーションレールだけで、テーマやボタングループなどは1.5.0のアルファ版が必要です。
• Android Views版のライブラリは1.14.0でExpressiveに対応したあと、2026年5月のGoogle I/Oでメンテナンスモードに入りました。
• Flutterは本体から切り出したmaterial_uiパッケージで段階的に対応中で、1.5.0ではアイコンボタンだけがExpressive表示に切り替えられます。
• Webの公式実装Material Webはメンテナンスモードで、Expressiveはlabs（実験扱い）にとどまります。ReactのMUIはM3自体に未対応です。

Material Design 3の定義とMaterial 2からの変更点

Material Designは2014年に発表され、2018年のMaterial Theming（のちのMaterial 2）を経て、2021年5月18日のGoogle I/O初日に発表されたMaterial Youで第3世代に入りました。公式サイトはm3.material.ioで、Figma用のMaterial 3 Design Kitや配色ツールもここから辿れます。

ダイナミックカラーとカラーロールによる配色

M2との最大の差は配色の決め方です。M2はブランドのプライマリ色とセカンダリ色を人が選んでいました。M3では1つのシード色から、色相・彩度・明度の3軸で色を扱うHCT色空間を使って、明度を段階的に変えたトーナルパレットを自動生成し、それを「primary」「on-primary」「primary-container」のような役割（カラーロール）へ割り当てます。Android 12以降の端末では、壁紙から抽出した色をシードにしてアプリの配色を変えるダイナミックカラーが使えます。

役割に割り当てる設計なので、ボタンの背景と文字色の組み合わせは「primaryの上にon-primary」と決まっています。自前で色を組み合わせるよりコントラスト不足が起きにくいのが実務上の利点です。ただし生成された色を上書きした場合は、コントラスト比を自分で確かめる必要があります。配色の生成ロジックはGoogleがmaterial-color-utilitiesとして公開しており、FlutterのColorScheme.fromSeedもこの仕組みで色を作ります。Flutter版にはcontrastLevelという引数があり、0.0が標準、0.5が中コントラスト、1.0が高コントラストに当たります。コントラスト比の基準そのものはWebアクセシビリティのコントラスト比：4.5対1と3対1の適用範囲・CSS実装・自動検証の落とし穴で扱っています。

デザイントークンとタイプスケール

色・文字・形の値はmd.sys.color.primaryのような名前のデザイントークンで定義されます。Webの公式実装では、同じトークンがCSSカスタムプロパティ--md-sys-color-primaryとして公開されています。

文字はdisplay・headline・title・body・labelの5つの役割に、large・medium・smallの3サイズを掛けた15スタイルです。デザイナーと実装者がtitleMediumと言えば同じ値を指せます。トークンで仕様を共有する考え方は、社内のデザインシステムとは？構成要素・作り方とデザインガイドラインとの違いを解説にもそのまま応用できます。

Material 3 Expressiveで変わった点

Material 3 Expressiveは2025年5月13日に発表されました。M3を置き換える新世代ではなく、M3のトークンとカラーロールの上に形状・モーション・文字の強調と新しい部品を加えた拡張です。

追加・更新されたコンポーネント

公式サイトはExpressiveで追加・更新した部品を14件挙げています（アプリバー、ボタングループ、カルーセル、ボタン、拡張FAB、FABメニュー、FAB、アイコンボタン、ローディングインジケーター、ナビゲーションバー、ナビゲーションレール、プログレスインジケーター、スプリットボタン、ツールバー）。Jetpack Composeのmaterial3ライブラリのソースで関数名まで確認できる主な部品は次のとおりです。Android Views版の1.14.0でも、ボタン・アイコンボタン・ボタングループ・FAB・トップアプリバー・ナビゲーションバー・ナビゲーションレール・検索・プログレスインジケーター・スライダーにExpressive用のスタイルが追加されています。

既存画面に影響が大きいのはナビゲーションです。ナビゲーションドロワーより展開できる幅広のナビゲーションレールが推奨されるようになり、ドロワー前提の画面は設計の見直しが要ります。

35種類の形状とスプリングで動くモーション

ComposeのMaterialShapesには、Circle・Pill・Cookie12Sided・Clover4Leaf・Heartなど35種類の形状が定義されています。形状どうしをモーフィング（変形）させる前提で、押したボタンの角が丸から四角へ変わるといった表現に使います。

モーションは時間とイージング曲線で指定する方式から、ばねの物理（スプリング）で指定する方式へ移りました。ComposeではMotionScheme.standard()とMotionScheme.expressive()の2種類が用意されています。ソース中の説明では、standardは実用的な要素と繰り返しの操作向け、expressiveは主役になる要素向けで、後者のほうが跳ねるような動きになります。

Googleが公表した調査結果と、その読み方

Googleのデザインチームは、調査記事Better, Easier, Emotional UXで、Expressiveの根拠として46件の調査と世界18,000人超の参加者を挙げています。視線計測では10個のアプリでM3とExpressive版を比べ、重要な要素を見つける速さが最大4倍になったこと、45歳以上の参加者が若い参加者と同じ速さで要素を見つけられたことを報告しています。18〜24歳ではExpressive版を好む割合が最大87%でした。

同じ記事は限界も書いています。表現を強めた設計は万能ではなく、メディアプレーヤーやメールで機能する表現が銀行のような画面に合うとは限らないこと、既存の操作パターンを崩した試作は見た目の評価が高くても使いやすさの評価が下がったこと、見慣れなさが評価を下げていたことです。数字だけを引用して「Expressiveにすれば操作が4倍速くなる」と説明するのは不正確です。

端末側でMaterial 3 Expressiveを使う方法（Pixel・Wear OS）

スマートフォンの利用者として新しい見た目を使いたい場合、設定画面にExpressiveを切り替えるスイッチはありません。OSとアプリの更新で届くデザインです。

• Pixel：2025年9月4日のPixel Drop（Android 16のアップデート）から、Pixel 6以降とPixel Tabletに順次配信されました。端末のシステムアップデートを最新にするのが唯一の方法です。
• スマートウォッチ：Wear OS 6がExpressiveを採用しています。最初の搭載機は2025年7月のGalaxy Watch8シリーズです。
• Pixel以外のAndroid端末：メーカーが独自のUI（One UIなど）を載せているため、同じ見た目にはなりません。Googleのアプリ（Gmail・Googleフォトなど）は、アプリ側の更新でExpressive化されたものが届きます。
• Magiskモジュール等での有効化：非公式の改造で、端末の保証やセキュリティ更新に影響します。業務端末では使わないでください。

プラットフォーム別の対応状況（2026年9月29日時点）

同じ「Material 3対応」でも、Expressiveまで使えるかはライブラリごとに異なります。

Jetpack Compose：安定版1.4.0とアルファ版1.5.0の対応範囲の差

Compose Material3の安定版1.4.0は2025年9月24日に公開されました。ただし、その前の1.4.0-beta01（2025年7月30日）でExperimentalMaterial3ExpressiveApiの付いた公開APIがすべて削除され、1.5.0のアルファ版へ移されました。1.4.0のソースを確かめると、公開APIとして残ったExpressive関連の部品は、それ以前に安定化していたShortNavigationBarとWideNavigationRailです。MaterialExpressiveThemeやMotionScheme.expressive()は1.4.0ではinternal（外部から呼べない）で、ボタングループやFABメニューは存在しません。1.5.0は2026年9月23日の1.5.0-alpha29時点でもアルファのままです。

alpha29のソースを見ると、MaterialExpressiveTheme・ButtonGroup・FloatingToolbarなどからは実験扱いのアノテーションが外れています。一方でLoadingIndicatorとMaterialShapesは@ExperimentalMaterial3ExpressiveApiのままです。アルファ版はAPIが予告なく変わる前提なので、本番アプリで採用するなら版を固定し、更新のたびにリリースノートを確認する運用が要ります。Compose自体の仕組みとBOMでの版管理はJetpack Composeとは？宣言的UIの仕組みとBOM運用・採用判断を解説を参照してください。

// build.gradle.kts（BOMの版ではなくmaterial3だけを明示指定）
dependencies {
    implementation("androidx.compose.material3:material3:1.5.0-alpha29")
}

// Theme.kt
import androidx.compose.material3.MaterialExpressiveTheme
import androidx.compose.material3.MotionScheme
import androidx.compose.material3.expressiveLightColorScheme
import androidx.compose.runtime.Composable

@Composable
fun AppTheme(content: @Composable () -> Unit) {
    MaterialExpressiveTheme(
        colorScheme = expressiveLightColorScheme(),
        motionScheme = MotionScheme.expressive(),
        content = content,
    )
}

MaterialExpressiveThemeは、引数を省略するとExpressive用の配色とモーションを既定値として使います。文字の既定値はソース中にTODOが残っており、現時点では通常のTypography()です。

Android Views：1.14.0でExpressive対応、その後メンテナンスモード

XMLレイアウトで作るAndroid Views向けのMaterial Components for Android（MDC-Android）は、少し事情が複雑です。2025年9月3日の1.13.0では、安定版を早く出すためにExpressiveを外しました。Expressiveが安定版に入ったのは2026年5月13日の1.14.0です。

<!-- res/values/themes.xml（material 1.14.0以降） -->
<style name="Theme.MyApp" parent="Theme.Material3Expressive.DayNight.NoActionBar">
</style>

その6日後の2026年5月19日、Google I/O 2026に合わせてAndroidは「Compose First」を宣言し、MDC-AndroidのREADMEにはメンテナンスモードの告知が入りました。Views向けの機能追加は今後予定されていません。廃止や削除の予定もないため既存アプリはそのまま動きますが、Expressiveの今後の更新はCompose側にしか入りません。

Flutter：material_uiパッケージで段階的に対応中

Flutterチームは2025年5月14日、Expressiveを当面は開発しないと表明しました。同年7月29日には、MaterialとCupertinoをフレームワーク本体から独立パッケージへ切り出し、Expressiveはそちらで進める方針に改めています。

こうして2026年8月12日に公開されたのがmaterial_ui 1.0.0です。9月8日の1.2.0でスタイルの種類を表すStyleVariantが追加され、9月28日の1.5.0でアイコンボタンがExpressive表示に対応しました。1.4.0以降はFlutter 3.47以上が必要です。現時点で切り替えられるのはアイコンボタンだけで、ソースのコメントにも「Expressive対応は開発中で、この値を選んだアプリは今後見た目が変わりうる」と書かれています。

import 'package:material_ui/material_ui.dart';

final theme = ThemeData(
  colorScheme: ColorScheme.fromSeed(
    seedColor: const Color(0xFF6750A4),
    contrastLevel: 0.5, // 中コントラスト
  ),
  iconButtonTheme: const IconButtonThemeData(
    variant: StyleVariant.material3Expressive,
  ),
);

// material_ui側のMaterialAppに渡す
void main() => runApp(MaterialApp(theme: theme, home: const Scaffold()));

旧来のpackage:flutter/material.dartに依存するパッケージが残っている場合は、MaterialApp.builderでMaterialUiCompatibilityBridgeを挟むと、古いウィジェットにもテーマが渡ります。

Flutter本体に同梱されているMaterialライブラリは、今後の安定版で非推奨になる予定です。移行の手順と期限はFlutter 3.47とは？material_ui分離とIntel Mac終息で決まる移行判断【2026年8月時点】で解説しています。

Web・React：公式実装は保守のみ、ReactのMUIはM3自体が保留

GoogleのWeb向け公式実装Material Web（@material/web）は、2024年6月からREADMEに「新しいメンテナーが見つかるまでメンテナンスモード」と掲げています。それでも2026年7月14日に2.5.0が公開され、Expressiveのボタン・FAB・スプリットボタン・リスト・メニューがlabs（実験扱いのディレクトリ）に追加されました。安定版の部品ではないので、本番で使うなら書き換えられる前提で取り込む必要があります。

/* Material Theme Builderで書き出した値を貼る */
:root {
  --md-sys-color-primary: #6750A4;
  --md-sys-color-on-primary: #FFFFFF;
}
.cta {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

Angular Materialは2024年5月22日の18.0.0でM3対応を安定版にしましたが、Expressiveには対応していません。ReactのMUI（Material UI）は、2021年10月27日に立てられたM3対応のIssueが「on hold（保留）」のまま開いており、現行の9.4.0もM2系のデザインです。Expressive対応を求めるIssueは、このIssueの重複として閉じられました。Reactで「Material 3 Expressive」の見た目が必要なら、MUIのテーマを上書きして近づけるか、トークンだけ使って自前で組むことになります。MUIの導入とテーマ設定はMaterial UIとは：v9系の導入からGrid・テーマ設定までコード付きで解説にまとめています。

FigmaとMaterial Theme Builderでのテーマ作成手順

デザイン側は、実装より先にExpressiveを使えます。

1. FigmaのCommunityでGoogle公式の「Material 3 Design Kit」を複製します。
2. Material Theme Builder（WebアプリまたはFigmaプラグイン）でシード色を1つ決め、ライト・ダーク・コントラスト別の配色を生成します。
3. 生成した配色をデザインキットの変数に適用し、画面を組みます。
4. Theme Builderの書き出し機能で、Compose・Flutter・Web（CSS）など実装先の形式に変換して開発者に渡します。

注意したいのは、デザインキットにある部品が実装先のライブラリにあるとは限らない点です。前章の表のとおり、FlutterやWebではExpressiveの部品の多くがまだ使えません。画面を作る前に、実装先で使える部品を確かめておくと手戻りを防げます。UIのアニメーション試作はFigma Motionとは｜2026年新搭載タイムラインでUIアニメーションを作る方法でも扱っています。

Material 3 Expressiveを採用しない方がよい場面

M3は業務アプリでもそのまま使える土台です。Expressiveは別で、次の条件に当てはまるなら通常のM3にとどめる判断を勧めます。

• FlutterやWebで、Androidネイティブと同じ見た目を約束する案件：Composeにある部品の多くがFlutterとWebには安定版で存在しません。「全プラットフォームでExpressive」を要件にすると、足りない部品を自作する費用が発生します。
• 金融・医療・業務システムなど、正確さと慣れが優先される画面：Google自身が銀行の画面には合わない場合があると書いています。操作パターンを崩した試作で使いやすさが落ちた結果も公表されています。
• Composeのアルファ版を本番に入れられない案件：安定版1.4.0で使えるのはナビゲーションバーとナビゲーションレールだけです。アルファ版を使えない品質基準なら、この2部品にとどめ、テーマやボタンの切り替えは1.5.0の安定版を待つことになります。
• iOSでも同じアプリを出す案件：iOS 26以降のLiquid Glassとは設計思想が違います。両OSで同じ見た目を狙うと、iPhoneの利用者には操作の作法が違うアプリに見えます。OSごとの流儀に合わせるかどうかを、先に要件として決めておく必要があります。Liquid Glassの考え方はLiquid Glassとは？仕組みと対応OS、SwiftUI・CSSでの実装方法【iOS 27の変更点まで】で解説しています。

逆に、Composeで作るAndroid専用の消費者向けアプリで、ブランドの印象を強く出したい場合はExpressiveを試す価値があります。その場合も、まずMaterialExpressiveThemeとボタンだけ差し替え、ナビゲーションの構成変更は利用者の反応を見てから進めるのが安全です。

よくある質問

Material Design 3（Material 3・MD3・M3）とは何ですか？

Googleが公開しているデザインシステムの第3世代です。2021年にMaterial Youとして発表されました。シード色から自動生成する配色（ダイナミックカラー）と、色・文字・形を名前で管理するデザイントークンが特徴です。

Material 3 ExpressiveとMaterial 3の違いは何ですか？

ExpressiveはM3の拡張で、別の世代ではありません。M3のトークンとカラーロールを引き継いだうえで、35種類の形状、スプリングで動くモーション、ボタングループやフローティングツールバーなどの部品が加わりました。

Material 3はいつから使えますか？

M3そのものは2021年から使えます。Expressiveは2025年5月13日の発表で、Androidの端末ではAndroid 16のアップデートで届きます。開発ライブラリでは、Android Viewsが2026年5月の1.14.0から安定版で使えます。Composeは安定版1.4.0でナビゲーションバーとナビゲーションレールが使え、それ以外は2026年9月時点でもアルファ版のみです。

FlutterでMaterial 3 Expressiveは使えますか？

一部だけ使えます。material_uiパッケージ1.5.0（2026年9月28日公開）で、IconButtonThemeDataのvariantにStyleVariant.material3Expressiveを指定したアイコンボタンだけがExpressive表示になります。M3の通常の部品は、Flutter 3.16以降useMaterial3が既定で有効です。

ReactでMaterial 3を使うにはどうすればよいですか？

MUIはM3に対応しておらず、対応のIssueは保留のままです。Material Web（Web Components）をReactから使う方法か、Material Theme Builderで書き出したCSSトークンを自前のコンポーネントに当てる方法が現実的です。

関連記事

• Jetpack Composeとは？宣言的UIの仕組みとBOM運用・採用判断を解説
• Flutter 3.47とは？material_ui分離とIntel Mac終息で決まる移行判断【2026年8月時点】
• Material UIとは：v9系の導入からGrid・テーマ設定までコード付きで解説
• FlutterのLiquid Glass対応はどこまで来たか｜cupertino_ui 1.0でも入らない現状と代替手段【2026年8月時点】
• デザインシステムとは？構成要素・作り方とデザインガイドラインとの違いを解説