デザインに感情を取り戻す旅――Material 3 Expressiveとその可能性

Material 3 Expressiveとは「表現の余白」を取り戻す試み

　Material 3 Expressive最大の特徴は、「機能性」や「一貫性」だけでなく、「感情」や「印象」といった人の感性にフォーカスを当てた点にあります。従来の「視認性・操作性」に“情緒”という第3のレイヤーが加わったことで、デザインの空気感や余韻までを意図的に設計できるようになりました。

3つの主要アップデート

ダイナミックカラー：色が感情をまとうように

従来のMaterial Youでは、壁紙から自動生成されるカラーパレットがUI全体に適用されていましたが、ExpressiveではそこにCalm、Bold、Expressiveといった感情トーンが導入。同じ壁紙でも「静けさ」や「力強さ」といった印象をUI全体に持たせることができます。

Expressive Motion：動きが語る「温度」

これまでのモーションはおもに状態変化の説明的演出にとどまっていましたが、Expressiveではただ状態を示すのではなく、「期待感を演出する動き」「静けさを保つゆるやかな展開」など、動きが感情を語る存在に。

構造の柔軟化：整いすぎないことの美学

従来のMaterialでは厳格なグリッドや整列が基本でしたが、あえて整いすぎない構成、非対称性のあるレイアウトなど、「きれいすぎない美しさ」が表現可能に。合理性にのみ傾倒しているのではなく、文脈や感情に沿った構成の自由がデザインに戻ってきたと言えるでしょう。

ただこれらは、Material Designの美徳であった「一貫性」や「明確さ」を否定するものではありません。むしろそのうえで、「このUIが何を感じさせたいのか」「この場面にふさわしい表情とは何か」という、デザインの本質的な問いを重ねるための選択肢が増えたと捉えるべきでしょう。表現の余白は、ガイドラインの隙間に生まれるものではなく、意図を持った選択によってはじめて成立するもの。Expressiveはその選択の自由を、もう一度わたしたちデザイナーの手に戻してくれたのかもしれません。

「自由」が与えられても、なぜまた似るのか

　Material 3 Expressiveは、「表現の余白」を取り戻すためのアップデートです。しかしそれにもかかわらず、多くのUIがまたしても似た雰囲気に収束していくこの現象は、Material Designに限らず、FigmaキットやTailwind UI、Bootstrapなどあらゆるデザインシステムで見受けられます。その理由は、表現の自由があっても、それを扱う力と時間がなければ「選ばれない」からです。

　その結果として量産されるのが「明確には違うけれど、なんとなく似ている」という、個性に満たないの微妙なズレなのです。

「違い」を出すための使いかたとは

　Material 3 Expressiveは「似る」のではなく、「似せずに使える」デザイン言語です。そのために大切なのは、素材ではなく「構成で差をつける」視点です。

1.ヒーローモーメントで「似たUI」から抜け出す

従来のMaterial Designでは、ガイドラインに沿うあまりUIが均質化しがちでした。Material 3 Expressiveでは、あえて“特別な瞬間”に表現を加える「ヒーローモーメント」という考え方が提案されています。色や動き、構成を組み合わせて、体験の核心を際立たせることで、画一的なUIから脱し、サービスやブランドらしさを鮮やかに伝えることができます。

2. 色は「感情」で決める

配色を感情のトーンで選ぶ思想が導入されています。たとえば「静けさ」を伝えたいなら、従来のブルーではなく、グレーとサンドベージュを使ってみる。単にブランドカラーを使うのではなく、「どう感じてほしいか」を起点に色を構成します。

3. 文字は「声」を持つ

文字は情報だけでなく「態度」も伝えます。同じフォントでもサイズやウェイト、行間で印象はガラッと変わります。Expressiveでは「書体選び」の自由度も増しており、温かみのあるアプリにはセリフ体を、理知的な印象にはジオメトリックなサンセリフを使う、といった具合です。

4. アニメーションは空気をつくる

Expressive Motionを使えば、ただのフェードではなく「期待」「余韻」「テンポ」などの感情を動きに込められるため、自然な形でそれらがUIに宿ります。