あやね
リキッドガラス（Liquid Glass）は、UI要素に光の屈折を伴うガラスのような質感を与え、インターフェース内に高度な奥行きと階層構造を構築するビジュアルエフェクトです。本機能はシェーダーベースのエフェクトとして、単なる表面的な装飾に留まらず、背面コンテンツの知覚を物理的に変化させます。AppleのiOSおよびiPadOSデザインシステムによって普及したこの表現は、モダンUIデザインにおける極めて重要なトレンドとなっています。
現在、リキッドガラスはフレーム、コンポーネント、インスタンス、およびコンポーネントセットに適用可能であり、視覚的に豊かでダイナミックなインターフェースを実現するための強力なツールキットとなります。
I. イントロダクションとプロパティ設定
リキッドガラスの定義
「ガラス」は、オブジェクトに屈折率を持つガラスのようなサーフェスを付与する新しいエフェクトです。
設計における2つの核心的要素：
知覚の変化： ガラスはシェーダーまたはラスターエフェクトとして機能し、フレームオブジェクトに適用することで、下層レイヤーのレンダリング結果を動的に変化させます。
デザイン・メタファー： この標準的なガラススタイルはAppleが先駆けて導入したものであり、iOSおよびiPadOS 16のUIキットにおいて最も象徴的に活用されています。
適用スコープ
現バージョンでは、本エフェクトはフレーム、フレームコンポーネント、インスタンス、およびコンポーネントセットにのみ適用が制限されています。
エフェクトパネルでの操作
エフェクトパネルのドロップダウンメニューから「Liquid Glass」を選択することで、フレームにエフェクトをアサインできます。適用後、詳細なパラメータ群による微調整が可能になります。
リキッドガラスのパラメータ設定
Light Angle / Intensity（光源の角度 / 強度）
フレームに投射される光の方向（ハイライトのフォーカス位置）および、その発光強度を制御します。
Uniform Lighting（均一照明）
フレーム全体に均一な配光を行い、エッジに沿って一定の輝度を持つハイライトを生成します。
Refraction（屈折）
フレーム境界における光の屈折率を制御します。この値が高いほど、背面要素の歪み（ディストーション）が顕著になります。
Depth（深度）
ガラス素材の物理的な厚みをシミュレートし、フレームエッジの立体的な陰影を強調します。
Chromatic Dispersion（色分散）
分散値を高めることで、プリズム効果による微細な色ずれをエッジに付加します。屈折（Refraction）と併用することで、よりフォトリアルな質感を獲得できます。
Blur（ぼかし）
フレーム背面のブラー強度を調整します。複雑な背景における視認性（コントラスト）を確保し、要素の独立性を高めます。
Brightness（明るさ）
エフェクト全体の明度を調整し、光の透過量や反射の知覚をコントロールします。
Saturation（彩度）
ガラスエフェクトの色彩強度を制御し、ビビッドな表現からニュートラルな質感まで柔軟に調整可能です。
II. リキッドガラスのユースケース
実装ステップとクリエイティブ・インスピレーション
リキッドガラスの導入方法と、デザインの質を高めるための活用術を解説します。
リキッドガラスの実装
フレームの選択： 対象となるフレームを選択し、エフェクトパネルから「Liquid Glass」を新規にアサイン（適用）します。
リアルタイム・プレビュー： キャンバス上でフレームをドラッグし、背面レイヤーのコンテンツがどのように屈折・変形するか、その視覚的変化（Perception）を確認します。
パラメータの最適化
リキッドガラスは背景に干渉するエフェクトです。下層の要素に対して、インターフェースが最も洗練された印象を与えるよう、各数値を微調整します。
エフェクトパネルの操作： 詳細設定パネルを開き、各パラメータを操作します。
背面オブジェクトへの干渉： 設定値の変化が、背景オブジェクトの歪みや質感にどのような影響を及ぼすかを検証します。
⚠ 注意: 「Refraction（屈折）」と「Depth（深度）」のパラメータは相互に依存しています。どちらか一方の値が極端に低い場合、ガラスの質感が十分にレンダリングされず、視覚効果が失われる可能性があります。
自由な表現の探求
物理的な実在オブジェクトをデジタル上で再構築するほか、抽象的なフレームに適用することで、独自性の高いスタイリッシュなグラフィックアセット（Graphic Assets）の生成にも活用してください。
III. 留意事項
リキッドガラス使用時の重要な考慮点
リキッドガラス・エフェクトの実装にあたっては、現時点でいくつかの制限事項が存在します。本機能は現在ベータ版として提供されており、ユーザーエクスペリエンス向上のため、今後継続的な改善と最適化を予定しています。実制作に投入する前に、以下の点をご確認ください。
フレームレイヤー限定
現在、リキッドガラスはフレームレイヤーにのみ適用可能です。ベクトルデータやテキストレイヤーには直接適用できません。今後のアップデートで、サポートするレイヤータイプの拡大を予定しています。
SVGエクスポート非対応
リキッドガラス・エフェクトが適用されたレイヤーは、現時点でSVG形式でのエクスポートをサポートしていません。
角丸の均一性
個別の角に異なる半径が設定されているフレームには適用できません。エフェクトを正常にレンダリングするためには、全ての角が同一の半径である必要があります。
エフェクトの重なり（オーバーラップ）に関する仕様
リキッドガラスを適用したレイヤーを、同じエフェクトが適用された別のレイヤーの上に重ねた場合、背面にあるガラス効果は前面のガラスのレンダリング結果には反映されません（エフェクトの累積・相互干渉は行われません）。
プロトタイププレビュー非対応
現時点では、プロトタイプモードのプレビュー画面においてリキッドガラス・エフェクトは表示されません。この機能については、将来のアップデートでの実装を予定しています。
