Avance.Lab

技術紹介

モバイルアプリの新デザイン 〜 Material 3 Expressive と Liquid Glass

公開日:2025.07.18 更新日:2025.07.15

tag: スマートデバイス

こんにちは、n/aです。

2025年、モバイルアプリデザインの世界に新しい動きがありました。
Googleは「Material 3 Expressive」を、Appleは「Liquid Glass」を発表。どちらも表現力豊かで親しみやすいというテーマを掲げています。

今回は、これら2つの最新デザイン言語の特徴と、アプリ開発者が知っておくべきポイントをご紹介します。

※ベータ版時点の公開情報を元に記載しています。今後変更になる可能性があります。

Material 3 Expressive とは

画像引用元:Android and Wear OS are getting a big refresh

Material 3 Expressiveの特徴

Material 3 Expressiveは、Googleが推進するMaterial Designの最新スタイルです。
従来のMaterial Design 3(Material You)をベースに、感情に訴える豊かな表現力とパーソナライズ性を強化しています。

ばねのように弾むモーション

より自然で弾力のあるアニメーションが滑らかな操作感を実現し、喜びや心地よさを感じさせます。

新しいUIコンポーネントとシェイプ

表現力豊かなUIコンポーネントと多様なシェイプ(形状)が追加され、装飾的で個性や楽しさを感じるUIを作りやすくなりました。

鮮やかでダイナミックなカラー

豊富なカラーバリエーションにより、情報の階層や重要なアクションを分かりやすく表示できます。
また、自分のスタイルや好みに合わせてカスタマイズできます。

視覚的に強調されたタイポグラフィ

強調された新しい書体スタイルを使用すると、さまざまな感情や情報の階層、重要なアクションを表現できます。

画像引用元:Start building with Material 3 Expressive

Liquid Glass とは

画像引用元:Apple、iOS 26でiPhoneの体験をさらに上のレベルへ

Liquid Glass の特徴

Liquid Glassは、本物のガラスのような質感と液体のような流動性をデジタルで再現したAppleの最新デザインです。
透明感のあるUIがダイナミックに変化してコンテンツへの注目を高め、より楽しく生き生きとしたユーザー体験を生み出します。

リアルなガラス質感の再現

現実世界のガラスのような反射、屈折を忠実に再現し、デジタル空間にリアルな質感と優雅な印象をもたらします。

ダイナミックなインタラクション

ユーザー操作やアプリの状況に応じて、コントロールやナビゲーションが液体のように流動的に変化します。

コンテンツ重視の設計

透明感のあるUIが背景に溶け込み、コンテンツを際立たせます。
周囲の色や明るさに応じて自動的に色が調整され、コンテンツとの調和と見やすさを両立しています。

Apple製品全体での一貫性

Liquid GlassはiPhone、iPad、MacなどのApple製品全体で採用され、統一されたユーザー体験を提供します。

画像引用元:Apple、iOS 26でiPhoneの体験をさらに上のレベルへ

Material 3 Expressive と Liquid Glass の比較

両者の違い

Material 3 Expressive と Liquid Glass を比較すると、以下のような違いがあるように感じます。

観点Material 3 ExpressiveLiquid Glass
色彩表現カラフルで鮮やか透明感と光を表現
デザインコンセプト楽しさ、遊び心、個性美しさ、優雅、リアル
アニメーション弾む動き流れる動き
方向性従来のフラットなデザインを継承しつつ表現力を強化実世界の質感や動きを再現したリアルな表現に転換

共通点

一見するとテイストの違いが目立ちますが、どちらも同時期に発表された主にモバイル向けのデザインということで、実は要素や目指すところは似ている部分もあります。

  • リッチなアニメーション表現
  • 丸みを帯びたUIパーツ
  • 個人の好みに合わせるパーソナライズ性
  • 表現力豊かで親しみやすいことを目指している

モバイルアプリデザインのこれまでとこれから

モバイルアプリデザインの変遷

スマートフォン黎明期、モバイルアプリデザインはスキューモフィズム(現実を模倣したデザイン)が主流でした。

2013年〜2014年頃にiOS 7やMaterial Designが登場すると、デザインの主流はフラットデザインへと大きく変化しました。
その後、改良や変化がありつつも、フラットデザインを基本とする流れが現在まで続いています。

スマートフォン黎明期は同じアプリでもiOSとAndroidでUIデザインが異なることが多々ありました。
しかし近年、OS間の機能・見た目が近づいたことや、クロスプラットフォーム開発技術の進化もあり、両OSでほぼ共通のUIデザインを採用することが一般的になっています。

そこへ登場したのが、フラットなまま表現力を拡張するMaterial 3 Expressiveと、リアルな表現に回帰するLiquid Glassという、似ている部分がありつつも方向性の異なる2つの新デザインです。

(蛇足ですが、iOSのデザイン変化の背景にはVision Pro(visionOS)の登場があります。
現実空間にUIを投影するvisionOSでは、背景に馴染む半透明なUIが以前から使われていました。
そのデザイン思想が、Apple製品全体で共通のUI/UXを提供するという方針の元でiOSにも導入されました。)

アプリ開発者はどう対応すれば良いか

新デザインに対応する際には、次の2つのバランスをどう取るかが問われます。

  • それぞれのOSの標準や慣習に最適化する
  • プロダクト全体でUI/UXの一貫性を保つ

OSの標準に合わせる方がユーザーには違和感が無く使いやすくなります。

しかし、OSごとに見た目を大きく変えると、Web版などその他プラットフォームとの一貫性が失われる懸念があります。
もちろん対応コストも増えるでしょう。
さらに、描画コスト増加によるパフォーマンスにも注意が必要です。
アプリによっては、Liquid GlassやMaterial 3 Expressiveの特徴的なデザイン要素は「あえて使わない」という選択肢も考えられます。

新しいデザイン要素を採用する場合は、それぞれのガイドラインを読んで使いどころを押さえ、適切に使うことで効果的なUI/UXとなります。

また、OSアップデートに伴い、アプリ側で意図せず見た目や動作が変わる場合もあります。
例年の対応スケジュールでは、

  • iOS:2026年4月までに新しいSDK(Xcode)への対応が必要
  • Android:2026年8月までに新しいAPIレベルへの対応が必要

となります。

早めに動くことで、不具合やデザイン変更への対処も余裕を持って行えます。

まとめ

Material 3 Expressive と Liquid Glass の登場により、モバイルアプリデザインは新しい局面を迎えています。

アプリ開発者にとって重要なのは、これらの新しいデザインの特徴を理解し、自社のプロダクトにとって最適なアプローチを選択することです。
ユーザー体験を向上させるために、適切なバランスを保ちながら新しいデザイン要素を効果的に活用していきましょう。

n/a

主にモバイルアプリを開発しています。
最近はAWSを勉強しています。

関連記事