2026年8月、Web UIの潮流は「静的な透明感」から「反応するガラス」へ、そして「静止したロゴ」から「動くブランド」へと進んでいます。今回はAppleが提案したリキッドグラスの考え方がWebにどう波及しているか、YouTubeの新しいモーション・アイデンティティ、そしてAwwwards受賞サイトの実例ギャラリーを通じて、2026年夏のUI/UXトレンドの中身を見ていきます。
ガラスモーフィズムの次章「リキッドグラス」
2025年にAppleがOS全体に導入した「Liquid Glass」は、単なる半透明パネルだった従来のグラスモーフィズムから一歩進み、光の屈折・反射・周囲コンテンツへの追従といった「物理的な振る舞い」を持つマテリアルです。Design Signalの比較記事によれば、両者の違いは見た目の好みではなく「静的な透過効果」から「状態に応じて動的に振る舞うガラス面」への哲学的な転換だと説明されています。
Web側でもこの表現を追う動きが活発です。kube.ioの解説では、CSSのbackdrop-filterとSVGのfeDisplacementMapを組み合わせ、コンポジタースレッド上でリアルな屈折歪みを再現する手法が紹介されています。オープンソースでもnikdelvin/liquid-glassのようにiOS 26のガラス表現をCSSとSVGフィルタだけで再現するライブラリが登場し、freefrontendの実装集には手軽に試せるコードスニペットがまとまっています。
| 観点 | グラスモーフィズム(旧来) | リキッドグラス(2026) |
|---|---|---|
| 視覚効果 | 静的なぼかし＋半透明 | 光・動き・周囲コンテンツに反応する屈折 |
| 技術 | backdrop-filter: blur()のみ |
backdrop-filter+ SVG feDisplacementMap等の組み合わせ |
| 使いどころ | カード全面・背景など主役級の装飾 | ボタンやナビ等、限定的な「素材」として |
| 位置づけ | 単体のトレンド | 奥行きと質感を足すための一手法へ成熟 |
2026年時点では、グラス表現は主役の装飾というより「必要な箇所だけに使う仕上げの素材」という位置づけに落ち着きつつある点が、実装時の判断基準として参考になります。
ブランドが「動く」時代——モーション・アイデンティティ
2026年1月から展開されているYouTubeの大型ブランド刷新は、この潮流を象徴する事例です。20周年を機に、ロゴの幾何学形状を土台にした新書体「YouTube Display」(Sharp Type制作)、新しいイラストレーション体系、そして同社初となる正式なモーション・アイデンティティ・システムを導入しました。手持ちカメラのような微細な揺れなど、クリエイター動画の「体感」を反映した動きが特徴です。
ブランドトレンドの分析記事でも、静止画のロゴだけでなく「動く前提」でブランドを設計するMotion-firstという考え方が、2026年のアイデンティティ設計の主要な変化のひとつとして挙げられています。Webサイトでは、ロゴやキーカラーそのものにイージングとタイミングを設計し、ページ遷移やホバー時に一貫した「ブランドらしい動き」を出す実装が増えています。
ネイティブCSSでフローティングUIを支える「アンカーポジショニング」
リキッドグラスのボタンやツールチップ、ドロップダウンを違和感なく配置するための地味だが重要な進化がCSS Anchor Positioningです。2026年にBaseline入りし、Chrome 125+・Firefox 132+・Safari 18.2+で動作、世界のブラウザトラフィックの約91%をカバーするまで普及しました(nexgismoの解説より)。ある要素を別の要素(アンカー)に対して位置決めし、画面端では自動的に反転配置する——という、これまでJavaScriptの計算とスクロール監視で実装していた処理をCSSだけで完結できます。詳しい仕様はW3Cのドラフトで確認できます。
実例ギャラリー——2026年8月のAwwwards受賞サイトから
Awwwards Sites of the Dayを追うと、8月だけでも粒ぞろいの受賞サイトが並びました。以下は8月中旬〜下旬の受賞から、リキッドグラスやモーション表現の観点で参考になりそうな例です。
- Sharplink(8月28日 Site of the Day) — 直近の受賞サイト
- MIU MIU「A House that we shaped」(8月26日) — ラグジュアリーブランドらしい繊細な質感表現
- Kononenko Architectural Bureau(8月24日) — 建築系サイトの奥行き表現
- SSTR – Friction Reduction(8月17日) — インタラクションの摩擦を減らす設計思想を体現したUI
ギャラリー全体はSites of the Monthのアーカイブでも辿れます。直近ではLama Lama(7月)、Son Daven(6月)などが月間受賞に選ばれており、いずれも透明感のあるレイヤー表現とタイミングの効いたモーションを併用している点が共通しています。
ミニマリズムは「主張する」方向へ
Really Good Designsのトレンド解説では、2026年のミニマリズムは単なる余白と省略ではなく、強く表現的なタイポグラフィと組み合わさる形に変化していると指摘されています。背景や装飾を削ぎ落とす一方で、見出しの文字そのものが主役になる構成が増えており、リキッドグラスやモーションといった「動き・質感の派手さ」と、情報設計としての「静かなミニマリズム」が同居しているのが2026年夏のUI/UXの特徴と言えそうです。
主な情報源
- Glassmorphism vs Liquid Glass: Which UI Trend Wins in 2026? – Design Signal
- Liquid Glass in the Browser: Refraction with CSS and SVG — kube.io
- 10+ CSS Liquid Glass Effects: Free Code Snippets & Examples – freefrontend
- YouTube Unveils First Motion Identity System in Major Visual Brand Refresh for 2026 – ALM Corp
- Brand identity trends 2026: 8 shifts defining the future of brands – Three Rooms
- CSS Anchor Positioning in 2026: Replace JavaScript Tooltip Libraries for Good – nexgismo
- CSS anchor positioning – MDN Web Docs
- Sites Of The Day – Awwwards
- Top 10 Web Design Trends 2026 – Really Good Designs
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。