Skip to main content
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →
ビジュアルデザイン8 分で読めます·Updated 2026年10月·ExodeUI チーム

触覚の復活: モダンな UI における奥行き、ガラス、物理的フィードバック

なぜフラットデザインの後、奥行き、半透明、物理的な動きが UI デザインに戻ってきたのか、Apple の Liquid Glass とマテリアル 3 Expressive で何が変わったのか、そしてそれを使い続けられるようにする方法。

要点まとめ

核心

10 年間のフラット デザインを経て、奥行きと物理的なフィードバックが戻ってきました。 2025 年に、Apple はコントロールとナビゲーション用の半透明マテリアルである Liquid Glass を導入し、Google はより感情に訴えるデザインの研究に裏付けられたマテリアル 3 エクスプレッシブを導入しました。うまく使えば、深さは何がインタラクティブであるかを示し、動きはアクションを確認します。不用意に使用すると、半透明によりコントラストが低下し、可読性が損なわれます。

2025年に何が変わったのか

2025 年 6 月 9 日、Apple は、Liquid Glass と呼ばれる新しい素材を中心に構築された、最も広範なソフトウェア設計のアップデートを発表しました。これは半透明で、背後にあるものを反射および屈折し、iOS 26、iPadOS 26、macOS Tahoe 26、watchOS 26、tvOS 26 にまたがっています。一方、Google は、18,000 人以上の参加者による 46 件の調査に基づいて、マテリアル 3 エクスプレッシブを最も研究されたデザイン システムのアップデートであると説明しました。 Google の報告によると、参加者は表現力豊かなデザインで主要な UI 要素を最大 4 倍の速さで発見し、その好みは 18 ~ 24 歳の間で最大 87% と最も強かったとのことです。

やるべき仕事の深さ

Apple のガイドラインでは、マテリアルがどこに属するかについて具体的に規定されています。Liquid Glass は、コンテンツの上に浮かぶコントロールとナビゲーションの機能レイヤーを形成するため、コンテンツ レイヤー自体で使用すべきではありません。これがトレンド全体の背後にある有用な原則です。深さは構造を説明し、何を行動に移せるのか、何を読んだのかを区別する必要があります。

触覚 UI の 4 つの原則: レイヤ化、押下フィードバック、物理的な動きと拘束、押されたボタンの例
触覚デザインは、深さがインタラクティブであることを示し、動きがアクションを確認する場合に機能します。

ユーザビリティコスト

誰もが納得しているわけではありません。 Nielsen Norman Group は、iOS 26 の Liquid Glass がコンテンツを隠し、他のものの上に置かれたもの、特に混雑した背景上のテキストが見づらくなると主張しました。実際の教訓は、半透明にはガードレールが必要であるということです。つまり、実際のコンテンツでコントラストをテストし、テキストの背後のぼかしまたは不透明度を高め、透明度を下げてコントラストを高めるシステム設定をサポートします。

物理的なフィードバックは耐久性のある部分です

視覚的なトレンドは去来しますが、物理的なフィードバックは人々を助けるため、持続します。押すとわずかに圧縮されるボタン、指に追従してバネで固定されるシート、または所定の位置にカチッと収まるトグルはすべて、アクションが登録されたことを確認します。 Spring Physics は、実際のオブジェクトと同じように割り込みやジェスチャの速度に応答するため、このための自然なツールです。

慎重に取り入れる方法

装飾ではなく、フィードバックから始めましょう。

  • 人々が最もよく使用するコントロールに、押す、ドラッグする、放すというフィードバックを追加します。
  • レイヤ化とシャドウを使用して、コントロールをコンテンツから分離します。
  • 半透明の表面上のテキストのコントラストを確認します。
  • 動きの減少、透明度の減少、コントラスト設定の増加を尊重します。
  • モーション トークンとエレベーション トークンを通じて効果の一貫性を保ちます。

覚えておきたい原則

  • Apple は 2025 年 6 月に Liquid Glass を発表しました。 Google がマテリアル 3 Expressive を導入
  • 深さはコントロールをコンテンツから分離するときに機能します
  • 半透明はコントラストと可読性を損なう可能性があります。実際のコンテンツでテストする
  • 物理的なフィードバック (プレス、ドラッグ、スプリングの定着) はトレンドの永続的な部分です
  • 動きの減少、透明度の減少、コントラストの増加を尊重します。

よくある質問

出典

  1. Apple introduces a delightful and elegant new software design — Apple ニュースルーム (2025 年 6 月 9 日)
  2. Materials — Apple ヒューマン インターフェイス ガイドライン
  3. Liquid Glass Is Cracked, and Usability Suffers in iOS 26 — Nielsen Norman Group
  4. Expressive Design: Google's UX Research — Google デザイン

関連ガイドと事例

スプリングの違いを感じてください

ブラウザ内でドラッグ、フリック、押して、フィードバックが適切に感じられるまで剛性と減衰を調整します。

遊び場を開いてください
Exode を無料で試す