WWDC25でAppleが示した“新しいデザイン”と、その中でもっとも象徴的なコンセプトであるLiquid Glassは、2026年以降のAppleプラットフォームのために作られたデザインシステムの構成要素であり、サードパーティ・デベロッパーである私たちは、是が非でもこれと向き合っていかなくてはなりません。そのためには、プラットフォーマーが示したデザイン言語をしっかりと理解し、どのようにして私たちのソフトウェア製品に取り入れていくのか、その勘所を見極める必要があります。

すでに公式からは新しいデザインに言及する多くのセッションビデオや解説資料が案内されているので、まずはこれらをとっかかりとして学んでいくことになるはずです。セッションビデオの多くには日本語字幕が組み込まれているため、日本語によって最新のデザインに触れられる絶好の機会がすでに用意されています。この環境を有効活用し、2026年以降のAppleプラットフォームに向けてデザインの下準備を進めていきましょう。

重要なセッションと資料

Appleが公開している関係資料を引用します。

102 – Platforms State of the Union

Platforms State of the Unionの冒頭では、Keynoteにも登場したHuman InterfaceのシニアディレクターであるBilly Sorrentino氏が、新しいデザインとLiquid Glassのコンセプト、Appleのデザイン哲学をわかりやすく解説しています。

219 – Meet Liquid Glass

セッション219では、Liquid Glassデザインの基本コンセプトを学ぶことができます。WWDC18の803 – Designing Fluid InterfacesのセッションやWWDC23の10194 – Design dynamic Live Activitiesのセッションでお馴染みのChan Karunamuni氏をはじめ、Human Interfaceに関わるデザインチームの面々がデザインの概要を丁寧に解説しています。

356 – Get to know the new design system

セッション356は、新しいデザインシステムの基本コンセプトや設計原則を理解するために試聴必須です。ここで紹介されているトピックはこの記事内で引用していきます。

220 – Say hello to the new look of app icons

セッション220は、新しいデザインにおける新しい見た目のアイコンシステムについての解説です。新しいアプリアイコンはこれまでの平面的かつ静的な画像ではなくなり、Liquid Glassのコンセプトを反映したレイヤー構造で表現されます。アイコンフォーマットも.iconと改められ、ベクターとJSONで構造化されたアセットの形でアプリに組み込まれます。Icon Composerでアプリアイコンを作る前に、是非ともチェックしておきたいセッションです。

Icon Composer関連では、セッション361 – Create icons with Icon Composerもあります。

208 – Elevate the design of your iPad app

セッション208は、iPadOSのデザインに焦点を当てていますが、新しいデザインシステムによってiPadOSのアプリがどのように変わっていくのかが丁寧に解説されています。iPadアプリを作る予定がないとしても、これは参考になるものが多いと感じられます。

359 – Design foundations from idea to interface

セッション359は新しいデザインそのものの解説ではないものの、これまでのiOSをはじめとしたAppleプラットフォームにおける情報アーキテクチャの設計について、あらためて丁寧に踏み込んで解説する内容になっています。

類似トピックは、過去にもWWDC22の10001 – Explore navigation design for iOSにて取り上げられたことがあり、わざわざこのようなデザインセッションが用意されているということは、インターフェイスデザインにおける情報アーキテクチャの構築技術は依然として重要であり、未だ大きな課題でもあるという、Appleなりのメッセージなのかもしれません。

Human Interface Guidelines

HIGにはデザインの重要な説明がまとまっていますが、セッションでしか語られていないトピックも多いため、どちらもチェックすることを推奨します。

重要なキーワード

セッションビデオを確認していると、次のようなキーワードがよく現れてくることに気がつきました。いくつかを引用します（私の解釈に基づいて翻訳した表現も含みます）。

・新しいデザイン
・デザインシステム
・統一デザイン言語
・Liquid Glass
・機能レイヤー／意味的な構造化・階層化 (hierarchy)
・要素同士の文脈維持
・コンテンツ中心 (Content-first)
・同心性 (Concentricity)
・一貫性 (Consistency)
・調和 (Harmony)
・ダイナミズム／いきいきとした表現
・楽しさ (Joyful and delightful)
・イマーシブ (Immersive)
・アクションは可能な限りアイコンを伴う

AquaやiOS 7の直系である

セッション219で紹介されていたように、Mac OS XのAqua、iOS 7の平面と透過とレイヤー化によるインターフェイス、visionOSのイマーシブな体験、Dynamic Islandのなめらかで有機的なインタラクションが、今回の新しいデザインのコンセプトを支えています。Liquid Glassの発想も印象としてはどこかAquaを彷彿とさせますし、その動きはDynamic Islandを拡張したようなデザインになっています。iOS 7で取り入れられたリアルタイム磨りガラス効果やレイヤーを用いた構造化のコンセプトは、依然として有効です。

過去のデザインは今見るともっと静的でカチッとした印象がありましたが、Liquid Glassをはじめとした“新しいデザイン”は、もっとダイナミック（動的）に振る舞うことを意図してデザインされているように見えます。AquaやiOS 7の直系ではあるものの、よりダイナミックである点が特に新しく、これからのデザインの中核になるコンセプトなのだと考えられます。

Appleのデザインシステム／Liquid Glassの位置付け

Liquid Glassは非常に象徴的であるので、Appleの新しいデザインとはすなわちLiquid Glassである、と誤解してしまいそうになるのですが、この見方は良くありません。Liquid Glassは“新しいデザイン”の構成要素ではあるものの、そのすべてを表しているわけではないからです。ここが少し説明が難しいのですが、“新しいデザイン”にはおそらく固有名詞的な名前（ブランド名）がありません。Appleは今回取り入れたデザインのスタイルを何か特定のブランド名を使って表すのではなく、単に「新しいデザイン」または「新しいデザインシステム」と表現しています。GoogleにはMaterial Designとブランディングされているデザインがありますが、これとは異なるアプローチをとっているように見えます。

なぜそのような姿勢をとっているのか、はっきりとは読み取れませんでしたが、私は、Appleはこの“新しいデザイン”を『挿げ替え可能な、複数あるデザインシステムのうちの1つ』としては見られたくなかったのではないか、と考えました。数ある選択肢の1つではなく、Appleプラットフォーム上で唯一絶対のデザインシステムとしたかったのではないでしょうか。

例えばWeb開発だと、デザインシステムとは、自社製・他社製問わず、数あるデザインフレームワークやその開発スタイルをまとめたキットの1つにすぎません。製品ごとに、都合に合った好きなシステムを採用することができる前提があり、その上で各々がデザインシステムを使ったソフトウェアデザインに取り組んでいます。

しかしAppleプラットフォームは、ある意味で大きく閉塞的なエコシステムを形成しており、ここではOSやデバイスとの親和性を重視します。特にUIのネイティブ性が重要なコンセプトになりますから、デザインシステムをフレームワークのように自由に選べるものとするのではなく、アーキテクチャとしてシステム全体を包括する基盤とすることを目指したのだと思います。

ハードウェアに着目すると、特にAppleは自社開発の半導体「Apple Silicon」を持っており、リッチなグラフィック表現を処理するために必要な要件を満たせる環境を自社で作り出せる特異な立場にあります。Apple SiliconのブレークスルーによってMacやiPhoneは飛躍的にパフォーマンスが向上し、もたらされた価値は一般ユーザーの目でも明らかです。ソフトウェアではリアルタイムのガウスブラーにとどまらず、レンズによる光の屈折効果を再現したような液体ガラスを模したグラフィック表現が高フレームレートで実現可能となり、GUI表現を次のレベルまで一気に押し上げているように感じられます。

いずれにおいても、Appleは自分でプラットフォームをデザインすることを貫いています。これはプラットフォーマーとしてそうブランディングしているということであって、彼らの特徴であり、戦略でもあるのでしょう。デザインシステムにおいては、“そういうデザインの”デザインシステムなのだから、外野が一方的に何かを肯定したり、あるいは否定したりする評価姿勢は別の観点であり、適切であるとは思えません。そもそも、世の中に数あるデザインシステムは、それがどのような設計思想・コンセプトに基づいているのかはそれぞれ事情が異なるわけでありますから、Appleのデザインシステムの場合は「“そういう設計思想”に基づいているのだ」と見ることがまず必要なのだと思います。評価はその次になるでしょう。

Appleのデザインシステムとどう向き合うか

もし私の記憶違いだったらこの解釈は間違いになるのですが、過去数年の間、世間でデザインシステムという言葉が流行語になってから現在まで、Appleがはっきりと「デザインシステム」という言葉を使ったことは、これまでほとんどなかったように思います。その彼らがついに、明示的に「デザインシステム」と強く述べたことを、私たちはまず受け止めるべきであるのだと思います。

プラットフォーマーがデザインシステムを示したのであれば、その上に乗っかってソフトウェアを展開するサードパーティの私たちは、プラットフォーマーのデザインシステムに是が非でも関わっていかなくてはなりません。普段、自社製品のデザインシステムを作ってアピールしているような人々は、プラットフォーマーのデザインシステムだけ無視します、というような姿勢を取れるはずがありません。そのコンセプトが自社のデザインシステムとまったく毛色が異なっていたとしても、そこに生じる“摩擦”を解消していくためには、これから数年間はデザイン（特にインターフェイスデザイン）で苦労することになるでしょう。

いちデベロッパーとしての所感を述べておくと、現時点でベータ版とはいえ、正直Liquid Glass含め“新しいデザイン”はそのまま受け入れるには厳しいと感じられる部分があり、現在取り組んでいるアプリケーションのデザインをどのように再適合させていこうかと、非常に頭を抱えている真っ最中であります。もしこれが事業会社が展開するような大規模なデザインシステムにおける“摩擦”ともなれば、たかだかアプリ1つの適合作業などよりも、何十倍もの再検討コストが生じることを予想できてしまうので、すでに無視を決めているデベロッパーもいらっしゃるのではないか、と勘繰ってしまうところもあります。

なので、Appleさん、これはかなり大胆な挑戦に出たな、という印象を持っています。私は過去にMac OS X (Aqua)やiOS 7へのトランジションを経験しましたが、当時よりも市場との対話が難しいような気がしています。

Liquid Glass風のものはすべて「似非」に見えてしまう強力なブランディング

新しいデザインが本当にうまくいくのかと不安を抱く一方で、UIやデザインにまた大きな変革が来ることそのものは、非常にワクワクした気持ちで捉えることもできています。iOS 7からこれまでの潮流であった平面とレイヤー構造を基調としたいわゆる「フラットデザイン」は十分に枯れてきており、別にネイティブのフレームワークでなくとも“それっぽい”インターフェイスは簡単に作れるようになりました。もはやそのデザインスタイルは何も特別ではなく、誰もが似たようなものを量産できてしまうほどに市場が成熟し切ったのです。そこにAppleが再び自社システムとデザインの強みを強力に推し出すために、今回の新しいデザインと、その中核コンセプトであるLiquid Glassを投入したのではないかとも見ることができそうです（もちろんそれが主目的ではないとは思いますが）。

実際、今「Liquid Glass風」として作られている多くの実験的アーティファクトはすべて「似非」に見えてしまっています。かつてWindowsのAqua風カスタムUIがMacの偽物と見えてしまったように、これからああいった粘性液体をモニョモニョさせるUIを作ってしまうと、そのつもりがなくても結局iOSのビジュアルがどうしても頭を過ってしまいます。私たちは既にこれを見てしまったわけですから……。

Liquid Glassが良いのか悪いのかはさておき、対プラットフォーマーという立場を見れば、私たちはそういうブランディングを仕掛けられている側ですので、エコシステム内ではそのデザインシステムに忠実になれば良いのですが、外部の文脈がつながらないプラットフォームの場では、むやみに「Liquid Glass風」を目指すことは、避けておいた方が無難かもしれません。

同心性がレイアウトを支配する

レイアウトで重要なコンセプトは同心性 (Concentricity) です。iPhone Xから所々で意識されてきた同心性は、“新しいデザイン”の中ではっきりとデザイン言語に昇華しました。

新しいデザインでは、デバイスのベゼル形状を前提として、ソフトウェアはそのベゼルが持つ角Rに対し同心のシェイプを描画することを強く求めています。iPhoneのようなディスプレイの角が丸いデバイスでは、その角Rの値をソフトウェア側で適切に読み取り、描画するUI要素すべての角や余白に適用していかなくてはなりません。そのための仕組みはすでにAppleのUIフレームワークに備わっており、適切なネイティブAPIを使用していれば大きな問題は生じにくいとされています。

このコンセプトが目指す価値は、デバイス（ハードウェア）とソフトウェアが一体のように感じられ、インターフェイス全体に調和 (Harmony) をもたらすことです。角Rの比率が崩れていると、そこには視覚的に緊張感が生まれ、全体のバランスが失われてしまいます。ここでは、デバイス全体の調和が保たれたデザインを志向することが求められます。

装飾に頼らないインターフェイスの構造化

関連セッションのいくつかでは、「Liquid Glassは機能レイヤーである」という説明があります。Liquid GlassはUIで常にアクティブになっているのではなく、コンテンツレイヤーの手前に必要になったら現れる機能レイヤーとして位置付けられているので、タブバーのフォーカスがそうであるように、ユーザーがコントロール要素に触れた際に、ダイナミックにそれが現れるような形を目指します。

機能レイヤーとしてのLiquid Glass

機能レイヤーを定義することによってコンテンツとコントロール要素が明確にレイヤーで分かれ、奥行きがはっきりと生じるようになったため、コンテンツのためにより多くのスクリーンリソースを使えるようになったとのことです。

またLiquid Glassの液体のコンセプトをコントロール要素の振る舞いにも反映し、それらがコンテクストに合わせてダイナミックにくっついたり離れたりする表現が意味を伴ったUIのステート変化を実現しています。そしてコントロール要素はEdge-to-edgeである必要はなくなり、これまでの常識であった「○○バー」に代表されるような座布団レイヤーは排除され、コントロールは浮いて見えるようになり、バーの背景（座布団）がなくなったことでコンテンツをスクリーンの隅まで広く展開しやすくなりました。

文脈を維持する構造化と階層化

Liquid Glassのコントロールからは、それに関係する詳細ビューを直接展開させることができます。あるボタンを押したら何かの情報表示ビューが現れる関係だとしたら、ビューはただスクリーン下部から現れるのではなく、ボタンが直接形状変化させながらニュッとビューに遷移させるというものです。この考え方はiOS 7以降のデザインでも時折見ることができたものですが、そのコンセプトをデザインシステム全体で取り入れているのが特徴です。

このような効果は、元の要素と次の要素との間にある意味のつながりを空間的に維持するため、インタラクションがシンプルに保たれます。

ディミングレイヤーを使った構造化とモードの制御は依然有効

ディミングレイヤーを使ったこれまでのデザインテクニックは、新しいデザインでも有効です。モーダル型シートの表示時に裏側に半透明の黒いレイヤーを敷いて、裏側が操作不可能であることを示すテクニックです。Liquid GlassではiOSのマテリアル（磨りガラス効果）をさらに発展させ、シートの拡大縮小に合わせて透過率をダイナミックに変化させる表現も取り入れています。

装飾による構造化に頼らない

コントロール要素に枠線や何かのテクスチャを貼って視覚的に強調させたりするテクニックは、Liquid Glassのコンセプトでは推奨されません。レイアウトによって視覚的な奥行きと情報レベルの階層を作り出して構造化するアプローチにすることが求められます。それは紹介したコンセプトやテクニックによって実現できるとのことです。

そのほか、俗にProgressive Blurと呼ばれている境界へのブラー効果は、機能としては「Scroll Edge Effect（スクロールエッジ効果）」と言い、スクロールビューの手前側にフローティング要素が重なる場合の視認性確保のために使われます。これも構造化のための措置として用いるべきであり、「意味はないが何となくブラーにしたら見た目がかっこよくなる」というような装飾目的の理由では使ってはいけません。

検索の位置付け

macOSではMac OS X Tiger以降、「検索は基本的に右上」というブランディングが続けられてきました。それによって、macOSのアプリは多くの場面で右上あたりから検索機能に触れることができるようになっており、インターフェイスのイディオムが形成されています（ただし最近はiOS発祥のデザインが入ってきたことで、これは崩れつつある）。

新しいデザインの特にiOSでは、タブバーの新しい特徴として独立した検索タブの位置付けがあります。ほとんどのアプリは何らかの検索機能を有しているので、ユーザーがよく触れるであろう検索機能への動線は、タブバーでもツールバーでも「下側」に置くことが新しいイディオムになっていきます。もしもナビゲーションバーに検索ボタンを置いているデザインがあるなら、下に降ろす絶好の機会です。

イマーシブ

イマーシブ（没入感）といえばvisionOSですが、この言葉は新しいデザインでもよく目にするようになりました。Visionにおけるイマーシブは視野や視覚に対する映像の投影方法を区別することでしたが、新しいデザインで示されているイマーシブは、Scroll Edge Effectや、サイドバーの背景に映り込むコンテンツの様子を表します。

サイドバー背景への映り込みは「Background Extension Effect（背景拡張効果）」と言い、コンテンツエリアの描画内容を鏡像にしたレイヤーをサイドバーの裏に敷き、リアルタイムにブラーをかけながら描画することで実現しています。実際にはそこにコンテンツの延長部分が存在しているわけではないものの、コンテンツに基づく色や形の印象がサイドバーにも映り込むため、コンテンツがインターフェイス全体に広がったように感じられます。

そしてスクロールビューもサイドバーの裏側まで拡張されるので、横スクロールすると実際のコンテンツがサイドバーの裏に潜り込んで見えるようになります。

アクションは可能な限りアイコンを伴う……のか？

macOSのメニューには、長い間暗黙のルールがありました。メニューバーやコンテクストメニューに並べるアクション（コマンド）には、基本的にはアイコンを付けてはいけないというものです。アクションはテキストで表すことがベストであり、抽象的な動作や機能を象形化する必要はない、という考えが根底にあるのだと理解していました（私は今もそう信じていますが）。

新しいデザインは、このルールに方針転換が生じたようです。macOSのメニューデザインはアイコンの付与が強く推奨されており、システム標準の多くのメニュー項目にはアイコンが伴っています。これらはSF Symbolsや、そのスタイルを模したカスタムアイコンによって表されます。そして、プラットフォーム間——macOS, iOS, iPadOS等——でアクションの意味や表現を統一させることも求められています。

しかし、セッション356を確認すると、このことには限界があり、時にはテキストでアクションを示すことも引き続き有効であると触れられています。明示的で象徴的なアクションはアイコン化しやすいが、編集や選択は無理にアイコンにしても他のアクションと混同する懸念が高まるので、テキストで表しましょうということです。この考えは以前のiOSから引き継がれたものであり、新しいデザインで追加された発想ではありません。ですので、私は現在のところ次のように理解しています。

・・・

追記の可能性を持たせるため、ここで一旦区切ります。

上記の解説はAppleの公式の説明から引用したものもあれば、私が解釈したものや、一部憶測に基づく表現も含みます。正しい情報を得るためには、この記事ではなく公式の資料にあたるようにしてください。