UIデザインの変遷とAppleの新素材Liquid Glassデザイン
Appleによる新たなUIデザイン「Liquid Glass」
＊Apple Inc.
2025年6月9日、AppleはWWDC25にて新しいUIデザイン「Liquid Glass」を発表しました。UIのパーツを表現する素材がまるで現実のガラスのような透明性と質感を持ち、画面のなかで流動的な、ダイナミックな動きをみせます。
＊Apple Inc.
発表では、実物のガラスを用いて可読性や視認性を確認している様子も描かれており、現実世界の「ガラス」という物質の特性を忠実に再現しようとしたことが伺えます。
コントラストを確保するために周囲の明度にあわせてカラーを変化させる挙動をしますが、これによって身近な素材であるガラスをモチーフにしながら、これまでに無いより豊かなUI体験を提供することになりそうです。
そして、この「物理的特性を再現したUIマテリアル」というデザインは、明らかに「スキューモーフィックデザイン」への回帰と言えるでしょう。
今回は、主にスマートフォンにおけるこれまでのUIデザインの変遷を振り返りながら、Appleによる新UI「Liquid Glass」に至るアプローチやデザインについてまとめていきます。
UIデザインの変遷
手で画面をタッチする、というインターフェースが普及したスマートフォンの出現以降、おおまかなUIデザインの変遷は上図のようなものになります。
特に、1988年にリリースされたIBMのReal thingsとそれを踏襲したiOSの「スキューモーフィックデザイン」のアプローチは興味深いものがあります。
現実世界を再現するスキューモーフィックデザイン
＊IBM
それまで「手で操作」する、というUIはそれほど一般的ではありませんでした。PalmやApple NewtonといったPDAも存在しましたが、スマートフォンのような幅広い年齢層に向けたものではありません。
＊Apple Inc.
そうした状況の中で2007年に発表されたAppleのスマートフォン向けiOSは、現実世界のデザイン要素を用いて、ユーザーに直感的な操作方法を提示する手法を取りました。
「現実世界で押せるボタンは、UI上でも操作が可能である」、というスキューモーフィックアプローチは非常に明快で、タッチパネル未経験のユーザーにも分かりやすいデザインとして受け入れられました。
UIデザインにおけるメタファーの再構成
こうしたスキューモーフィックアプローチは、スマートフォンの使い方が普及し、リテラシーがある程度獲得されたタイミングで、大きく方向性を変えることとなります。
現実世界の物を引用するデザインから、UI独自のメタファーを志向することになりました。
＊Microsoft
2010年に開催されたWindows Phone 7 発表イベントで公開されたのが、Windowsによる「Metro UI」です。スイスのクラシカルなデザインや、ロンドンの地下鉄の標識などをデザインモチーフにしたとのことで、名称にもそのまま使われています。
Appleによるスキューモーフィックデザインとは対照的な、平面的で極めて抽象的なアイコンによるUIデザインです。アイコンは白で統一され、ディティールの描き込み度合いのコントロールも、明確な意図を読み取れるものです。
カラーパレットは、色相環の全方位的な色相をベースにやや彩度を抑えているため、調和しているとは言い難い面もありますが、Microsoft社からここまでチャレンジングなデザインが発表されたことは驚きでした。
＊Apple Inc.
2013年には、Appleから「Flat design」が発表されます。
「Flat」と名のつくように「Metro UI」に近いアプローチです。現実世界の素材感を再現することは避けられ、シンプルなモノトーンのアイコンが描かれています。
Appアイコンのデザインには、グラデーションやシャドウなどの立体的な表現が見受けられますが、コントロールセンターといった、OSの基盤となるUIパーツは、半透明のレイヤーによって重ねられた表現です。
Microsoftと近しいアプローチですが、こちらの方がやや洗練された印象です。
＊Google LLC
マテリアルデザインは、2014年にGoogleが発表したUIデザインのガイドラインです。
直訳すると「物質的なデザイン」となり、その名の通り現実世界の物質的な法則に則ったデザインになっています。ユーザーの直感的な操作を可能にし、ストレスの少ないユーザビリティの実現を目的としています。
こうしたコンセプトを見ると、スキューモーフィックアプローチに近いものと言えます。当時、Googleは技術開発に重点を置く傾向が強かったため、このマテリアルデザインの導入は、同社が（広義の）デザインにも本格的に注力し始めた姿勢を示すものとなりました。
こうしたUIのデザインは、徐々に現実世界から距離を置きながら独自のデザインとして発展しました。
これまでのデザインに見られるような、ぼかしやグラデーションの表現は、UI独自のデザイン言語となり、紆余曲折を経てユーザーへ効果的な情報提示と直感的な操作性を両立するに至りました。
UIの中だけに存在する実在感
UIを操作する私たちユーザーも、こうしたデザインスタイルの変遷を受入ながら、徐々にUI独自のデザインテイストを受容するようになります。
もはや現実世界を引用する必要すらなく、UIの画面の中で完結する高品位なUIデザインに（ひとまずは）辿り着いたと言えるのではないでしょうか。
以下のUIデザインは、そうした文脈の中でそれぞれのブランドが発表したデザインシステムです。
＊Microsoft
Microsoftは年次開発者会議「Build 2017」でWindows 10の新しいデザインシステム「Fluent Design System」を発表しました。
UWP（Universal Windows Platform）のデザインとユーザーインタフェース（UI）構築のための指針や基礎的構成要素を示すもので、GoogleのAndroid向け「マテリアルデザイン」に相当するシステムと言えます。
＊Apple Inc.
2021年にAppleは、自らの「Flat design」を進化させ、よりリッチなテクスチャーを配した「Glassmorphism（グラスモーフィズム）」と呼ばれるUIデザインを発表します。
グラスモーフィズムは、透明度とぼかしを組み合わせることで、UIパーツを磨りガラスように見せるデザイン手法です。
その特徴は背景が透けて見えるぼやけた透明感にあり、これにより奥行きと光沢感が効果的に演出されます。特に、異なる透明度のグラスモーフィズムを重ねて使用することで、UIの階層構造が明確になり、ユーザーにとって直感的で操作しやすいデザインが実現されます。
この頃から、AppleのMacやiPhoneといった製品群でもこのグラスモーフィズムが積極的に採用されており、その洗練された表現がユーザー体験の向上に貢献しています。
現実を模倣したスキューモーフィックから、
存在しない「Liquid Glass」の開発へ
Appleが発表した「Liquid Glass」というUIデザインは、これまでのUIデザインの変遷をベースにしながら現実世界には「存在しない」物性を表現したUIと言えます。
視覚的にはガラスに似た、滑らかなテクスチャーと透明度を持ちます。しかし、インタラクションに応じて有機的に形状が変わり、周囲の明度によってコントラストを確保するためのカラーシフトが行われます。
Appleのニュースリリースによると、
新しいデザインは、（中略）アプリやシステムの体験をさらに表現力豊かで楽しいものにします。これは新しい半透明の素材であるLiquid Glassで作られています。
「Liquid Glass」を新たな素材として位置づけ、同社の展開するすべてのプロダクトに適用させるようです。
発表では、ガラスのようなオブジェクトが水滴が合わさるように形を変える様が描かれていました。滑らかな表面のテクスチャーは維持されながらも、ガラスと水という身近な素材の特徴を兼ね備えたような挙動です。
＊Apple Inc.
「Liquid Glass」は、現実世界を模倣したスキューモーフィックアプローチから、新たなUIデザイン世界の構築へ向かうデザインと捉えることができそうです。
この新たなAppleの挑戦が、業界の新たな潮流となるのか今後の動向が注目されます。
スキューモーフィックデザインについての考察は以下にもまとめています。
※ ※ ※
Balloon Inc.の視点から分析・考察したデザインリサーチの最新記事をご覧いただけます
