axiom-liquid-glass-ref

Name: axiom-liquid-glass-ref
Author: charleswiltgen

github.com/charleswiltgenデザイン・UI1.2k193 回インストール今日更新

axiom-liquid-glass-ref について

axiom-liquid-glass-refは、AppleプラットフォームアプリでLiquid Glassを導入するためのリファレンススキルです。画面の見直し、アクセシビリティ、ナビゲーション、コントロール、レイヤー構成のアプリアイコンを扱います。

主な機能

01Liquid Glassの導入と移行ガイド
02システムコンポーネント更新の監査
03アクセシビリティ設定の確認
04Icon Composerによるレイヤーアイコン設計
05ナビゲーション、メニュー、コントロールの指針

活用シーン

01Liquid Glass導入前のアプリレビュー
02システム素材を妨げる背景の特定
03アクセシビリティ設定時の可読性確認
04レイヤー構成のアプリアイコン素材の準備

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/charleswiltgen/axiom --skill axiom-liquid-glass-ref

インストール後、Claude Code で/axiom-liquid-glass-refを入力して読み込まれたか確認します。

詳細

Liquid Glass の採用 — リファレンスガイド

このスキルを使用する場面

次の場合に使用します：

アプリ全体で Liquid Glass を包括的に採用する計画を立てる
既存のインターフェースが Liquid Glass に対応しているか監査する
Icon Composer を使用してアプリアイコンを更新する
プラットフォームごとの Liquid Glass の動作（iOS、iPadOS、macOS、tvOS、watchOS）を理解する
以前のマテリアル（ぼかし効果、カスタムの半透明効果）から移行する
Liquid Glass インターフェースのアクセシビリティ準拠を確保する
検索、ナビゲーション、または整理用コンポーネントの更新を確認する

概要

Liquid Glass の採用は、アプリを一から作り直すという意味ではありません。まず、最新バージョンの Xcode でアプリをビルドし、変更を確認します。アプリが SwiftUI、UIKit、または AppKit の標準コンポーネントを使用している場合、最新のプラットフォームリリースでは、インターフェースに最新のルック＆フィールが自動的に適用されます。

主な採用戦略

最新の Xcode SDK でビルドする
最新のプラットフォームリリースで実行する
このリファレンスを使って変更を確認する
ベストプラクティスを段階的に取り入れる

ビジュアルの刷新

自動的に変更される内容

標準コンポーネントに Liquid Glass が適用される

ナビゲーションバー、タブバー、ツールバー
シート、ポップオーバー、アクションシート
ボタン、スライダー、トグル、コントロール
サイドバー、分割ビュー、メニュー

仕組み

Liquid Glass はガラスの光学特性と流動性を組み合わせます
コントロールとナビゲーションのための独立した機能レイヤーを形成します
重なり、フォーカス状態、環境に応じて変化します
背後にあるコンテンツに視線を集めやすくします

システムフレームワークを活用する

✅ 推奨：標準コンポーネントを使用する

SwiftUI、UIKit、AppKit の標準コンポーネントには、最小限のコード変更で Liquid Glass が自動的に適用されます。

// ✅ Standard components get Liquid Glass automatically
NavigationView {
    List(items) { item in
        Text(item.name)
    }
    .toolbar {
        ToolbarItem {
            Button("Add") { }
        }
    }
}
// Recompile with Xcode 26 → Liquid Glass applied

❌ 非推奨：カスタム背景で上書きする

// ❌ Custom backgrounds interfere with Liquid Glass
NavigationView { }
    .background(Color.blue.opacity(0.5)) // Breaks Liquid Glass effects
    .toolbar {
        ToolbarItem { }
            .background(LinearGradient(...)) // Overlays system effects
    }

監査対象

分割ビュー
タブバー
ツールバー
ナビゲーションバー
カスタム背景や外観を持つすべてのコンポーネント

解決策 カスタム効果を削除し、背景の外観はシステムに任せます。

アクセシビリティ設定を使ってテストする

Liquid Glass は、「透明度を下げる」（より曇った表示）、「コントラストを上げる」（白黒の境界線）、「視差効果を減らす」（弾むアニメーションなし）に適応します。各設定で読みやすさが保たれること、またカスタム要素にフォールバックの表示が用意されていることを確認します。詳しいアクセシビリティテストのワークフローについては、axiom-liquid-glass の規律スキルを参照してください。

app.launchArguments += ["-UIAccessibilityIsReduceTransparencyEnabled", "1",
    "-UIAccessibilityButtonShapesEnabled", "1", "-UIAccessibilityIsReduceMotionEnabled", "1"]

Liquid Glass の過剰な使用を避ける

Liquid Glass は背後にあるコンテンツに視線を集めます。複数のカスタムコントロールに多用すると、コンテンツへの集中を妨げます。.glassEffect() は、重要な機能要素（ナビゲーション、主要なアクション）にのみ適用し、コンテンツカード、リストの行、装飾要素には使用しないでください。

// ✅ Content layer: no glass. Navigation layer: glass on functional buttons only.
ZStack {
    ScrollView { ForEach(articles) { ArticleCard($0) } }
    VStack {
        Spacer()
        HStack {
            Button("Filter") { }.glassEffect()
            Spacer()
            Button("Sort") { }.glassEffect()
        }.padding()
    }
}

アプリアイコン

アプリアイコンは、動的で表現力豊かなデザインになりました。アイコングリッドの更新により、デバイス間で視覚的に一貫した標準アイコンが実現します。アプリアイコンは、光や視覚効果に動的に反応するレイヤーで構成されます。

プラットフォームのサポート

レイヤー化されたアイコン：iOS/iPadOS 26 以降、macOS Tahoe 以降、watchOS（円形マスク）。外観のバリエーション：デフォルト（ライト）、ダーク、クリア、色付き（ホーム画面のパーソナライズ）。

デザインの原則

単色の塗りと半透明のオーバーレイを使って、すっきりとシンプルなレイヤーをデザインします。効果（反射、屈折、シャドウ、ぼかし、マスキング）はシステムに任せます。あらかじめぼかしを適用したり、手動でシャドウを付けたり、ハイライトをハードコードしたり、マスキングを固定したりしないでください。

レイヤーを使ったデザイン

レイヤーは3つです。フォアグラウンド（主要な要素）、ミドル（補助的な要素）、バックグラウンド（基盤）。各レイヤーを、透明度を維持したまま @1x/@2x/@3x の PNG または SVG として書き出します。

アイコンコンポーザー

Xcode 26 以降に含まれています（developer.apple.com/design/resources から単体でも入手できます）。レイヤーをドラッグ＆ドロップし、背景を任意で追加して、属性（不透明度、位置、スケール）を調整できます。システムエフェクトとすべての外観バリエーションをプレビューし、アセットカタログに直接書き出せます。

更新されたグリッドでプレビューする

グリッド：iOS／iPadOS／macOS では角丸長方形のマスクを使用し、watchOS では円形のマスクを使用します。developer.apple.com/design/resources からダウンロードできます。要素が切り取られないよう中央に配置し、すべてのサイズでテストして、すべての外観バリエーションが意図したとおりに見えることを確認してください。

コントロール

コントロールの外観が各プラットフォームで刷新され、操作すると生き生きと反応します。ノブは操作中に Liquid Glass に変化し、ボタンはメニュー／ポップオーバーへ滑らかに変形します。コントロールの曲線はハードウェアの形状を反映します（より丸みを帯びた形状は角に収まります）。

更新された外観

枠線付きボタンはデフォルトでカプセル形状になります（macOS ではミニ／小／中サイズは引き続き角丸長方形です）。ノブは操作中にガラスへ変化し、ボタンはメニュー／ポップオーバーへ変形します。新しい controlSize(.extraLarge) オプションが追加され、macOS では高さがわずかに大きくなります。後方互換性のある高密度レイアウトには controlSize(.small) を使用してください。標準コントロールには自動的に適用されるため、ハードコードされた .frame() の寸法は削除してください。

更新されたコントロールを確認する

スライダー、トグル、ボタン、ステッパー、ピッカー、セグメントコントロール、進行状況インジケーターを確認してください。外観がインターフェイスに合っていること、間隔が自然であること、コントロールが切り取られていないこと、操作へのフィードバックがすばやく反応することを確認してください。

コントロールの色

システムカラー（.tint(.blue)、.accentColor）を使用すると、ライト／ダークのコンテキストに自動的に適応します。適応しない可能性があるハードコードされた RGB 値（Color(red:green:blue:)）は避けてください。両方のモードでテストし、WCAG AA のコントラスト比を満たしていることを確認してください。

混雑や重なりを確認する

Liquid Glass の要素には余白が必要です。ガラスボタンにはデフォルトの HStack 間隔（spacing: 4 ではなく）を使用してください。要素を詰め込みすぎたり、ガラスを重ねたりすると、視覚的なノイズが生じます。複数のガラス要素を近接させる必要がある場合は、GlassEffectContainer を使用してください。

スクロールエッジエフェクトで読みやすさを高める

コントロールの下をスクロールするコンテンツを隠すには、.scrollEdgeEffectStyle(.hard, for: .top) を使用してください。システムバー（ツールバー、ナビゲーションバー、タブバー）には自動的に適用されますが、カスタムバーでは明示的に指定する必要があります。

コントロールの形状をコンテナに合わせる

containerRelativeShape() を使用してコントロールの曲率をコンテナに合わせると、コントロールからシート、ウィンドウ、ディスプレイまで、同心円状の視覚的な連続性が生まれます。

新しいボタンスタイル

カスタムのガラスエフェクトではなく、組み込みのスタイルを使用してください。.borderedProminent（プライマリ。.tint() と組み合わせます）、.bordered（セカンダリ）、.plain + .glassEffect()（ターシャリ／カスタム）があります。どのスタイルも Liquid Glass に自動的に適応します。

Liquid Glass は、ナビゲーションを定義する最上位のレイヤーに適用されます。タブバーやサイドバーなどの主要なナビゲーション要素は、この Liquid Glass レイヤーに浮かぶことで、ユーザーが下層のコンテンツに集中できるようにします。

明確なナビゲーション階層を保つ

2 つのレイヤーを明確に分けてください。ナビゲーション（タブバー、サイドバー、ツールバー — Liquid Glass）は、コンテンツ（記事、写真、データ — ガラスなし）の上に浮かびます。リスト行などのコンテンツ項目には .glassEffect() を適用しないでください。コンテンツレイヤー上のガラスは境界をぼかし、ナビゲーションと競合します。

サイドバーに適応するタブバー

.tabViewStyle(.sidebarAdaptable)（iOS 26）を使用すると、iPad／macOS ではタブバーをサイドバーに適応させながら、iPhone ではタブバーのままにできます。ウィンドウサイズに合わせて滑らかに切り替わります。

TabView {
    ContentView().tabItem { Label("Home", systemImage: "house") }
    SearchView().tabItem { Label("Search", systemImage: "magnifyingglass") }
}
.tabViewStyle(.sidebarAdaptable)

サイドバー＋インスペクターのレイアウトにスプリットビューを使う

サイドバー、コンテンツ、詳細の各列を含む NavigationSplitView を使用してください。Liquid Glass はサイドバーとインスペクターに自動的に適用されます。iOS では列の表示状態が適応し、iPadOS／macOS では大きな画面にすべての列が表示されます。

NavigationSplitView {
    List(folders, selection: $selectedFolder) { Label($0.name, systemImage: $0.icon) }
        .navigationTitle("Folders")
} content: {
    List(items, selection: $selectedItem) { ItemRow($0) }
} detail: {
    InspectorView(item: selectedItem)
}

コンテンツのセーフエリアを確認する

サイドバー/インスペクターの下でコンテンツが適切に覗いていることを確認します。コンテンツがサイドバー/インスペクターのスペースを考慮する必要がある場合は、.safeAreaInset(edge:) を使用します。

エッジツーエッジのガラスを使用する場合のパディング

ガラスが .ignoresSafeArea() によってエッジツーエッジに広がる場合は、コンテンツレイヤーに .padding() ではなく .safeAreaPadding() を使用して、デバイスのセーフエリア（ノッチ、Dynamic Island、ホームインジケーター）を尊重します。

// ❌ .padding(.horizontal, 20) — doesn't account for safe areas
// ✅ .safeAreaPadding(.horizontal, 20) — 20pt beyond safe areas

適用対象: マテリアルを使用した全画面シート、エッジツーエッジのツールバー、フローティングパネル、カスタムのガラス製ナビゲーションバー。iOS 17 以降が必要です。.safeAreaPadding() と .padding() の完全なガイダンスについては axiom-swiftui-layout-ref を参照してください。

確認: サイドバー/インスペクターの下でコンテンツが表示されている、切り取られていない、覗き見が意図的に見える、ノッチ/Dynamic Island/ホームインジケーターから適切にインセットされている。

背景拡張エフェクト

コンテンツを実際にそこへスクロールさせることなく、サイドバー/インスペクターの下でコンテンツをミラーリングしてぼかし、没入感のあるエッジツーエッジの印象を生み出します。ヒーロー画像、フォトギャラリー、メディアリッチなスプリットビューに最適です。

NavigationSplitView {
    SidebarView()
} detail: {
    DetailView()
        .backgroundExtensionEffect()
}

タブバーを自動的に最小化する（iOS）

タブバーは .tabBarMinimizeBehavior()（iOS 26）によってスクロール時に後退させることができます。オプション: .onScrollDown（閲覧/メディアアプリに推奨）、.onScrollUp、.automatic、.never。タブバーは反対方向にスクロールすると拡大します。

メニューとツールバー

メニューはプラットフォーム全体で刷新された外観になっています。Liquid Glass を採用し、一般的なアクションのメニュー項目にはアイコンが使用され、ユーザーがすばやくアクションをスキャンして識別できるようになっています。iPadOS には一般的なコマンドにすばやくアクセスするためのメニューバーが追加されました。

プラットフォーム間のメニューの一貫性

メニューは iOS と macOS で一貫したレイアウトになりました — アイコンは先頭側に配置され、同じ API（Label または標準コントロールのイニシャライザー）が両方のプラットフォームで同じ視覚的結果を生み出します。

標準アクション用のメニューアイコン

アイコンの自動採用

// ✅ Standard selectors get icons automatically
Menu("Actions") {
    Button(action: cut) {
        Text("Cut")
    }
    Button(action: copy) {
        Text("Copy")
    }
    Button(action: paste) {
        Text("Paste")
    }
}
// System uses selector to determine icon
// cut() → scissors icon
// copy() → documents icon
// paste() → clipboard icon

標準セレクター

cut() → ✂️ はさみ
copy() → 📄 書類
paste() → 📋 クリップボード
delete() → 🗑️ ゴミ箱
share() → ↗️ 共有矢印
その他多数...

カスタムアクション

// ✅ Provide icon for custom actions
Button {
    customAction()
} label: {
    Label("Custom Action", systemImage: "star.fill")
}

トップメニューのアクションをスワイプアクションに一致させる

一貫性と予測可能性のために

// ✅ Swipe actions match contextual menu
List(emails) { email in
    EmailRow(email)
        .swipeActions(edge: .leading) {
            Button("Archive", systemImage: "archivebox") {
                archive(email)
            }
        }
        .swipeActions(edge: .trailing) {
            Button("Delete", systemImage: "trash", role: .destructive) {
                delete(email)
            }
        }
        .contextMenu {
            // ✅ Same actions appear at top
            Button("Archive", systemImage: "archivebox") {
                archive(email)
            }
            Button("Delete", systemImage: "trash", role: .destructive) {
                delete(email)
            }

            Divider()

            // Additional actions below
            Button("Mark Unread") { }
        }
}

理由ユーザーはスワイプアクションとメニューアクションが一致することを期待します。一貫性は信頼と予測可能性を築きます。

ツールバーのグループ化、スペーサー、モーフィング

ツールバー API の完全な網羅については axiom-swiftui-26-ref を参照してください: ToolbarSpacer、ToolbarItemGroup の視覚的グループ化、.sharedBackgroundVisibility(.hidden)、ツールバーのモーフィング、DefaultToolbarItem、ユーザーがカスタマイズ可能なツールバー、モノクロアイコンのレンダリング、後方互換のツールバーラベル、フローティングガラスボタン。

Liquid Glass 固有のツールバーガイダンス:

ツールバーの背景グループごとに 1 つのスタイル（アイコンまたはテキスト）を選ぶ — 混在させるとガラスの下で一貫性のない視覚的な重みが生じます
.tint() は意味を伝えるため（コールトゥアクション、次のステップ）にのみ使用し、装飾には使用しない — モノクロにすることで Liquid Glass の下での視覚的なノイズが減ります

アイコンにアクセシビリティラベルを提供する

すべてのアイコンのみのボタンには、VoiceOver および音声コントロールのユーザー向けに .accessibilityLabel("Action Name") が必要です。Label("Share", systemImage: "square.and.arrow.up") を使用すると、自動的にアクセシビリティサポートが得られます。

ツールバーのカスタマイズを監査する

カスタムスペーサー、項目、可視性が Liquid Glass の背景で機能することを確認します。よくある問題: ToolbarItem 内で条件付きでコンテンツを非表示にすると空のピルが作成されます — 代わりに if を外側に移動して ToolbarItem 全体を非表示にします。

ウィンドウとモーダル

ウィンドウはコントロールやナビゲーション要素に合わせて角がより丸くなります。iPadOS アプリはウィンドウコントロールを表示し、継続的なウィンドウのリサイズをサポートします。シートとアクションシートは Liquid Glass を採用し、コーナー半径が大きくなります。

任意のウィンドウサイズ（iPadOS）

iPadOS 26 のウィンドウは継続的にリサイズされます（プリセットサイズの遷移はありません）。.windowResizability(.contentSize) と柔軟なレイアウトを使用します。ハードコードされたサイズの想定を削除し、さまざまなウィンドウサイズでテストします。

流動的な列のサイズ変更に対応する分割ビュー

ウインドウのサイズを連続的に変更する際にコンテンツを自動的に再配置するには、NavigationSplitView(columnVisibility:) を使用します。手動でのレイアウト計算やカスタムのアニメーションコードは不要です。

レイアウトガイドとセーフエリアを使用する

.safeAreaInset(edge:) を使用すると、ウインドウコントロール、タイトルバー、ウインドウ装飾の周囲に合わせてコンテンツが自動的に調整されます。

シート：コーナー半径の拡大

シートのコーナー半径が大きくなりました。ハーフシートは画面端から内側に配置され（コンテンツが隙間から見えます）、全画面の高さに移行する際には不透明度が高くなります。角がより丸くなったことでコンテンツが切れていないこと、背景が隙間から見える状態が意図どおりであることを確認してください。

presentationBackground を削除する

シートから .presentationBackground() を削除します。システムが Liquid Glass のシートマテリアルを自動的に適用するためです。カスタム背景は新しいマテリアルの適用を妨げます。

シート／ポップオーバーの背景を確認する

ポップオーバーやシートからカスタムの VisualEffectView／UIBlurEffect 背景を削除します。システムが Liquid Glass を自動的に適用するため、背景用のモディファイアは不要です。

アクションシート：インライン表示

アクションシートは画面下端ではなく、起点となる要素から表示されるようになり、インターフェイスのほかの部分も操作できるようになりました。トリガーとなるボタンに .confirmationDialog() を付けてください。システムがシートを自動的に配置します。

構成とレイアウト

リスト、テーブル、フォームでは行の高さとパディングが大きくなり、コンテンツにゆとりが生まれます。セクションのコーナー半径も大きくなり、コントロールの曲線に揃います。

行の高さとパディングの拡大

リスト、テーブル、フォーム、セクションでは、高さ、パディング、間隔、コーナー半径がすべて大きくなりました。標準コンポーネントには自動的に適用されます。ハードコードされた .frame(height:) と .padding(.vertical:) を削除し、行の高さとパディングはシステムに任せてください。

セクションヘッダーの大文字表記

iOS 26 ではセクションヘッダーがすべて大文字に変換されなくなり、指定したとおりに表示されます。タイトル形式の大文字表記に更新してください。例：Section(header: Text("User Settings"))。"user settings" ではありません。

プラットフォームに最適化されたレイアウトにフォームを採用する

.formStyle(.grouped) を使用すると、プラットフォーム間でコントロールに揃った行の高さ、パディング、間隔、セクションのコーナー半径が自動的に適用されます。

検索

検索位置や動作に関するプラットフォームの規約は、デバイスごとの使いやすさを最適化します。魅力的な検索エクスペリエンスを提供するため、検索フィールドのデザイン規約を確認してください。

検索の起動時のキーボードレイアウト

変更点（iOS）

検索フィールドをタップしてフォーカスすると、キーボードの表示に合わせてフィールドが上方向にスライドします。

テスト

検索フィールドをタップする
上方向にスムーズにスライドすることを確認する
検索フィールドが隠れずにキーボードが表示されることを確認する
Spotlight や Safari など、システムの検索エクスペリエンスと一貫していることを確認する

コード変更は不要です

// ✅ Existing searchable modifier adopts new behavior
List(items) { item in
    Text(item.name)
}
.searchable(text: $searchText)

セマンティック検索タブ

.tabRole(.search) を含む Tab API のパターンについては、swiftui-nav-ref スキルのセクション 5（タブナビゲーションの統合）を参照してください。

プラットフォームに関する考慮事項

Liquid Glass の外観や動作は、プラットフォーム、状況、入力方法によって異なる場合があります。マテリアルの表示を把握するため、さまざまなデバイスでテストしてください。

watchOS と tvOS

プラットフォーム	採用状況	主な要件
watchOS	最新リリースでは、最新 SDK がなくても自動的に適用	watchOS 10 の標準ツールバー API と `.buttonStyle(.bordered)` を使用する
tvOS	フォーカスベース。コントロールがフォーカスを得るとガラス効果が表示されます（Apple TV 4K 第 2 世代以降）	標準コントロールには `.focusable()` を使用し、カスタムコントロールには `@FocusState` によって制御される不透明度とともに `.glassEffect()` を適用する

glassBackgroundEffect()

背後のコンテンツを反映する必要があるカスタムビュー（上からガラスマテリアルを適用するだけではないビュー）には、.glassBackgroundEffect() を使用します。これにより、背後のコンテンツが透けて見えるガラスのような背景を作成できます。ガラスをオーバーレイマテリアルとして適用する .glassEffect() とは異なります。

// Custom floating panel with glass background reflecting content behind it
struct FloatingPanel: View {
    var body: some View {
        VStack {
            Text("Panel Content")
            // ...
        }
        .padding()
        .glassBackgroundEffect() // Reflects content beneath, not on top
    }
}

.glassEffect() と .glassBackgroundEffect() の違い：ボタンやツールバーなどのコントロールやナビゲーション要素には .glassEffect() を使用します。背後のレイヤーが透けて見えるコンテンツコンテナー（奥行きが必要なパネルやカード）には .glassBackgroundEffect() を使用します。

ScrollView + Glass の相互作用

Liquid Glass 要素をスクロール可能なコンテンツに重ねる場合は、クリッピングと表示状態に注意してください。

ZStack {
    ScrollView {
        LazyVStack {
            ForEach(items) { item in
                ItemRow(item)
            }
        }
        .safeAreaInset(edge: .bottom, spacing: 0) {
            Color.clear.frame(height: 80) // Space for floating glass controls
        }
    }

    VStack {
        Spacer()
        HStack {
            Button("Action") { }
                .glassEffect()
        }
        .padding()
    }
}

よくある問題：Glass 要素はスクロールビューの境界でクリップされたり、効果が失われたりすることがあります。スクロールコンテンツに（Glass 要素ではなく）.clipped() を使用し、Glass 要素がスクロールビューの階層内ではなく、その外側にあることを確認してください。

UIBlurEffect の移行対応表

レガシー版（iOS 26 より前）	Liquid Glass の同等機能
`UIBlurEffect(style: .systemMaterial)`	`.glassEffect()`（標準）
`UIBlurEffect(style: .systemUltraThinMaterial)`	`.glassEffect(.clear)`（条件付き）
`UIBlurEffect(style: .systemChromeMaterial)`	システムのツールバー／ナビゲーション用 Glass（自動）
ぼかしを適用した `UIVisualEffectView`	完全に削除し、SwiftUI ビューで `.glassEffect()` を使用
`.background(.thinMaterial)`	`.glassEffect()` またはマテリアルを維持（自動的に適応）
`.background(.ultraThinMaterial)`	コンテンツコンテナーには `.glassBackgroundEffect()`
カスタムの `NSVisualEffectView`（macOS）	`.glassEffect()` またはシステムコンポーネント

移行手順：（1）UIVisualEffectView／NSVisualEffectView のラッパーを削除します。（2）SwiftUI ビューに .glassEffect() を適用します。（3）「透明度を下げる」を有効にしてテストし、フォールバックを確認します。（4）パフォーマンスをプロファイルします。Glass エフェクトでは GPU による合成が使用されます。

カスタム Liquid Glass エフェクトの組み合わせ

複数の .glassEffect() ビューを GlassEffectContainer { } で囲むと、レンダリングが最適化され、Glass の形状間の滑らかな変形が可能になり、コンポジターの負荷が軽減されます。近接する Glass 要素、変形アニメーション、パフォーマンスが重要なインターフェースで使用してください。

パフォーマンスのテスト

Instruments（Time Profiler、SwiftUI、Allocations、Core Animation）を使用して、スクロール、アニメーション、メモリ、CPU をプロファイルします。SwiftUI Instruments のワークフローについては axiom-swiftui-performance を、Instruments の判断ツリーについては axiom-performance-profiling を参照してください。

下位互換性

Info.plist に UIDesignRequiresCompatibility = true を追加すると、iOS 26 SDK でビルドしながら、iOS 18 の外観を維持できます（Liquid Glass は無効になり、以前のぼかし／マテリアルスタイルが使用されます）。移行戦略：このキーを有効にしてリリースし、別のビルドで変更点を監査してから段階的に更新し、準備ができたらキーを削除します。

クイックリファレンス：API チェックリスト

Liquid Glass の主要 API

glassEffect() - Liquid Glass マテリアルを適用
glassEffect(.clear) - クリアバリアント（3 つの条件が必要）
glassEffect(in: Shape) - カスタム形状
glassBackgroundEffect() - 背後のコンテンツを反映するカスタムビュー向け

スクロール端のエフェクト

scrollEdgeEffectStyle(_:for:) - Glass とスクロールコンテンツが接する箇所で可読性を維持
固定されたアクセサリビューには .hard スタイル
徐々にフェードさせるには .soft スタイル

コントロールと形状

containerRelativeShape() - コントロールの形状をコンテナーに合わせる
.borderedProminent ボタンスタイル
.bordered ボタンスタイル
適応するシステムカラーと .tint()

ツールバーとメニュー

ToolbarSpacer(.fixed) - ツールバーのグループを区切る
メニューアイコンを自動表示する標準セレクター
コンテキストメニューのアクションをスワイプアクションに合わせる

構成とレイアウト

.formStyle(.grouped) - プラットフォームに最適化されたフォームレイアウト
セクションヘッダーにタイトルスタイルの大文字表記を適用する
行の高さとパディングは自動設定を尊重する

パフォーマンス

GlassEffectContainer - 複数のガラスエフェクトをまとめる
Instruments でプロファイリングする
アクセシビリティ設定を有効にしてテストする

下位互換性

必要に応じて Info.plist の UIDesignRequiresCompatibility を設定する

監査チェックリスト

アプリで Liquid Glass の採用状況を監査する際に、このチェックリストを使用してください。影響の大きい上位 30 項目をカテゴリ別にまとめています。

ビルドとテスト

Xcode 26 SDK でビルドし、最新のプラットフォームリリースで実行した
透明度を下げる、コントラストを上げる、視差効果を減らす設定を有効にしてテストした
Instruments でパフォーマンスをプロファイリングした（スクロール、アニメーション、メモリ）

カスタムオーバーライドの削除

ナビゲーションバー、ツールバー、タブバーからカスタム背景を削除した
シートとポップオーバーから presentationBackground を削除した
ハードコードされたコントロールの高さと行の高さを削除した
シートとポップオーバーからカスタムのぼかし／マテリアル背景を削除した

アイコンとアプリアイコン

アプリアイコンに前景／中景／背景レイヤーを使用し、Icon Composer で合成した
すべての外観バリエーション（ライト／ダーク／クリア／色付き）をテストした
すべてのツールバー／メニューアイコンにアクセシビリティラベルを設定した

コントロール

新しいカプセル形状のボタンを確認した。高密度のレイアウトでは controlSize(.small) を使用する
システムカラーを使用し（RGB のハードコードは避け）、.borderedProminent／.bordered を採用した
コントロールに十分な間隔を確保した（ガラス同士が密着しないようにする）
ガラスとスクロール可能なコンテンツが接する箇所にスクロールエッジエフェクトを適用した

ナビゲーションとレイアウト

階層を明確にした。ナビゲーションレイヤー（ガラス）とコンテンツレイヤー（ガラスなし）を区別する
適切な箇所でタブバーがサイドバーに適応する（.sidebarAdaptable）
コンテンツのセーフエリアを確認した。画面端まで広がるガラスには .safeAreaPadding() を使用する
分割ビューで背景拡張エフェクトを検討した
セクションヘッダーをタイトルスタイルの大文字表記に更新した
フォームに .formStyle(.grouped) を採用した

メニューとツールバー

メニューアイコンの自動表示に標準セレクターを使用した
スワイプアクションをコンテキストメニューのアクションに合わせた
ツールバー項目を論理的にグループ化した（axiom-swiftui-26-ref を参照）

ウィンドウとモーダル

任意のウィンドウサイズに対応した（iPadOS）。柔軟なレイアウトを使用した
シートのコンテンツが大きくなった角丸に適切に収まることを確認した

プラットフォーム

watchOS：標準のツールバー API とボタンスタイルを採用した
tvOS：Liquid Glass のフォーカス表示に標準のフォーカス API を使用した
近接する複数のガラスエフェクトに GlassEffectContainer を使用した
必要に応じて UIDesignRequiresCompatibility キーを検討した

リソース

WWDC：2025-219、2025-323（新しいデザインで SwiftUI アプリを構築する）

ドキュメント：/TechnologyOverviews/liquid-glass、/TechnologyOverviews/adopting-liquid-glass、/design/Human-Interface-Guidelines/materials

サンプルコード：/SwiftUI/Landmarks-Building-an-app-with-Liquid-Glass

スキル：axiom-liquid-glass、axiom-swiftui-performance、axiom-swiftui-debugging、axiom-accessibility-diag

最終更新日：2025-12-01 最小プラットフォーム：iOS/iPadOS 26、macOS Tahoe、tvOS、watchOS、visionOS 3 Xcode バージョン：Xcode 26+ スキルの種類：リファレンス（包括的な採用ガイド）

Markdown 対応

ログインしてコメント

基本情報

作者: charleswiltgen
リポジトリ: charleswiltgen/axiom
カテゴリ: デザイン・UI
インストール数: 193
GitHub スター: 1,231

問題を報告

axiom-liquid-glass-ref

axiom-liquid-glass-ref について

主な機能

活用シーン

インストール

詳細

Liquid Glass の採用 — リファレンスガイド

このスキルを使用する場面

関連スキル

概要

主な採用戦略

ビジュアルの刷新

自動的に変更される内容

標準コンポーネントに Liquid Glass が適用される

仕組み

システムフレームワークを活用する

✅ 推奨：標準コンポーネントを使用する

❌ 非推奨：カスタム背景で上書きする

監査対象

アクセシビリティ設定を使ってテストする

Liquid Glass の過剰な使用を避ける

アプリアイコン

プラットフォームのサポート

デザインの原則

レイヤーを使ったデザイン

アイコンコンポーザー

更新されたグリッドでプレビューする

コントロール

更新された外観

更新されたコントロールを確認する

コントロールの色

混雑や重なりを確認する

スクロールエッジエフェクトで読みやすさを高める

コントロールの形状をコンテナに合わせる

新しいボタンスタイル

ナビゲーション

明確なナビゲーション階層を保つ

サイドバーに適応するタブバー

サイドバー＋インスペクターのレイアウトにスプリットビューを使う

コンテンツのセーフエリアを確認する

エッジツーエッジのガラスを使用する場合のパディング

背景拡張エフェクト

タブバーを自動的に最小化する（iOS）

メニューとツールバー

プラットフォーム間のメニューの一貫性

標準アクション用のメニューアイコン

アイコンの自動採用

標準セレクター

カスタムアクション

トップメニューのアクションをスワイプアクションに一致させる

一貫性と予測可能性のために

ツールバーのグループ化、スペーサー、モーフィング

アイコンにアクセシビリティラベルを提供する

ツールバーのカスタマイズを監査する

ウィンドウとモーダル

任意のウィンドウサイズ（iPadOS）

流動的な列のサイズ変更に対応する分割ビュー

レイアウトガイドとセーフエリアを使用する

シート：コーナー半径の拡大

presentationBackground を削除する

シート／ポップオーバーの背景を確認する

アクションシート：インライン表示

構成とレイアウト

行の高さとパディングの拡大

セクションヘッダーの大文字表記

プラットフォームに最適化されたレイアウトにフォームを採用する

検索

検索の起動時のキーボードレイアウト

変更点（iOS）

テスト

コード変更は不要です

セマンティック検索タブ

プラットフォームに関する考慮事項

watchOS と tvOS

glassBackgroundEffect()

ScrollView + Glass の相互作用

UIBlurEffect の移行対応表

カスタム Liquid Glass エフェクトの組み合わせ

パフォーマンスのテスト

下位互換性