Apple、WebコンテンツにLiquid Glass効果を追加する非公開CSSプロパティを導入

• AppleがiOS 26で利用できる非公開CSSプロパティ -apple-visual-effect を追加
• このプロパティにより、Liquid Glassや標準のblurマテリアルのような新しいデザイン効果をWebコンテンツにも適用可能
• この機能は SafariブラウザやWKWebViewでデフォルトでは有効になっていない
• WKWebViewで使うには useSystemAppearance という非公開設定を有効にする必要があるが、これを変更すると App Storeの承認が難しくなる
• この機能は主に Apple内部で独自に使用されているとみられ、一般の開発者は当面活用できない

---

概要

• 筆者はWebKitのGitHub ChangeLogを趣味でよくチェックし、iOSの次期アップデートを予測している
• 最近、WWDC直後にWebKitへ「[Materials] Rename 'hosted blur' materials to reference 'glass'」というPull Requestが上がっているのを発見
• 2025年のWWDCで強調された Liquid Glass は、iOS 7以降で最大のユーザーインターフェース(UI)の変更点
• これまではネイティブUIにのみ適用されるデザイン変更だったが、今回のPRはWebビューとの関連を示唆している

Appleの非公開CSSプロパティ

• PRから、Appleが -apple-visual-effectという非公開CSSプロパティ を導入したことが明らかになった
• このプロパティにより、iOS 26では Liquid Glass効果（例: -apple-system-glass-material）を適用できる
• すべてのバージョンで 標準のblurマテリアル（-apple-system-blur-material-thin など）を使うことも可能
• 公式のデザインガイドでも、こうしたマテリアルに言及されている

実際の適用可能性

• SafariでCSSを編集して適用しようとしても、Web上では動作しない
• WKWebViewベースのアプリでも デフォルトでは無効
• WKPreferencesのuseSystemAppearance の値をtrueに変更しなければ動作しないが、この設定自体が非公開のため、正式な手段では利用できない
• 非公式にハックして値を有効化したうえで、以下のようなCSSを適用すると効果を確認できる

  .toolbar {  
    border-radius: 50%;  
    -apple-visual-effect: -apple-system-glass-material;  
    height: 75px;  
    width: 450px;  
  }  
  

CSSの例と条件付き適用

• Appleはこの効果をCSSプロパティとして実装し、サポート有無に応じてさまざまなルールを簡単に指定できるようにしている

• たとえば @supports クエリを使えば、対応デバイスでのみ -apple-visual-effect を適用できる

  .toolbar {  
    border-radius: 50%;  
    height: 75px;  
    width: 450px;  
    background: rgba(204, 204, 204, 0.7);  
  }  
  
  @supports (-apple-visual-effect: -apple-system-glass-material) {  
    background: transparent;  
    -apple-visual-effect: -apple-system-glass-material  
  }  
  

意味と限界

• Apple内部を除けば一般の開発者は使えない機能である
• ただし、これによって「なぜアプリ内webviewがしばしば評判が良くないのか」へのヒントが得られる
• シームレスにうまく統合されたwebviewは、ユーザーがその存在自体を意識しないため、問題が表面化しにくい
• Appleがこれを開発したことは、自社のサービスやアプリで実際に活用していることを間接的に示唆している
• 私たちは日常の中で、気づかないうちにwebviewベースのUIを体験している可能性がある