はじめに

Google I/O 2025で発表された「Material 3 Expressive」は、UIの感情的な表現をよりリッチかつ柔軟に実現する新しい設計思想です。
本記事では、視覚的なデザインの紹介ではなく、コードとしての「トークン設計」 にフォーカスし、開発者目線でそのポイントを整理します。

Material 3 Expressiveとは？

Material 3 Expressiveは、Material Designの新たなスタイル体系で、以下のような特徴があります。

UIの「表情」を表現するための豊富なデザイントークン
より柔軟なカラーパレットと形状設計
ユーザーの感情やデバイスに適応するアニメーション指針

Material 3 Expressiveを使うメリット

色や形状をトークン単位で柔軟にカスタマイズできる
感情表現豊かなUIをコードベースで定義しやすい
アプリ全体のトーンや雰囲気を一貫して保てる

とはいえ、Jetpack Composeを使っている開発者にとって重要なのは、実際にどのようにコードで扱えるのかという点です。
以下にその具体例を紹介します。

色トークンの基本構造

まずは色指定についてです。
MaterialThemeから取得できる colorScheme がExpressive対応となり、従来よりも感情や意図を反映しやすい色設計が可能になっています。

val colors = MaterialTheme.colorScheme

Text(
  text = "注目要素",
  color = colors.primary
)

Box(
  modifier = Modifier
    .background(colors.surfaceVariant)
)

Expressiveでは surfaceContainerHighest や onTertiaryContainer など、視覚的な階層や強調度に応じた色名が拡充されています。

形状トークンのカスタマイズ

次に形状（Shape）のトークン設計です。
角丸や切り欠きなどがあらかじめ定義され、再利用可能な形で提供されています。

val shapes = MaterialTheme.shapes

Card(
  shape = shapes.medium
) {
  Text("感情的なカード！")
}

さらに、Material 3 Expressiveでは以下のような表現も可能です。

extraSmall / extraLarge などの豊富なサイズバリエーション
roundedRectangle のような明示的な形状指定
cutCornerTopStart のような部分的な形状調整

カスタムも簡単に行えます。

val expressiveShape = RoundedCornerShape(
  topStart = 24.dp,
  bottomEnd = 8.dp
)

Surface(shape = expressiveShape) {
  Text("カスタムシェイプ！")
}

カラーパレットを自作するには？

独自のトーンを持つアプリを開発したい場合は、トークンレベルでカラーパレットを定義することも可能です。

private val expressiveLightColors = lightColorScheme(
  primary = Color(0xFF8E24AA),
  onPrimary = Color.White,
  surfaceContainerHigh = Color(0xFFF8E8F5),
  surfaceContainerHighest = Color(0xFFF3E3F1)
)

MaterialTheme(
  colorScheme = expressiveLightColors,
  typography = Typography(),
  content = { AppContent() }
)

このようにカラーパレットをカスタマイズすることで、アプリ全体の雰囲気をより一貫性のあるものにできます。

関連リンク

おわりに

Material 3 Expressiveは、単なる見た目の刷新にとどまらず、再利用可能なトークン設計によるUIの表現力向上を目指す設計思想です。
トークンを適切に定義し活用することで、UIの一貫性とメンテナンス性を大きく高められます。

UIをデザイナー任せにせず、開発者としても「表情あるUI」づくりに貢献してみてはいかがでしょうか？