{"id":"liquid-glass","no":117,"name":"Liquid Glass","ja":"リキッドガラス","era":"2025–","family":"Apple UI","kind":"スタイル","collection":"Dictionary expansion 07","addedAt":"2026-08-18","source":{"title":"Apple Human Interface Guidelines — Materials","url":"https://developer.apple.com/design/human-interface-guidelines/materials"},"reference":{"status":"verified","pageUrl":"https://developer.apple.com/design/human-interface-guidelines/materials","credit":"Apple Human Interface Guidelines — Materials"},"essence":"内容の上に浮かぶ操作・ナビゲーション層を、背景色を受けて光学的に変化する流動的なガラス素材として統一する。","cues":["動的な屈折","同心形の角丸","浮遊する操作層","背景色の反映"],"intents":["未来","技術","高級"],"works":["Appleのプラットフォームで、内容を全面に見せ操作だけを上へ浮かせるとき","ライト、ダーク、壁紙が変わっても操作の位置を保ちたい画面"],"recipe":{"type":"文字を素材の上に直接置かず、実測した対比から最小サイズを決める","layout":"操作を画面の端へ寄せ、外形と内側の角丸を同心にそろえる","material":"屈折する層は一段だけ重ね、背景の色をそのまま拾わせる"},"avoid":"操作層に留め、内容を半透明カードで飾らない。層を重ねるほど背景が透けて文字が読めなくなるので、実機で可読性を確かめ、透明度低減設定を守る。","colors":["#eaf3f5","#87acbd","#233746"],"motif":"ui","pair":["glassmorphism","skeuomorphism"],"study":["Apple Human Interface Guidelines","regular and clear variants","content and functional layers"],"en":{"essence":"Unifies the floating control and navigation layer as a fluid glass material that refracts and adapts to the content beneath.","cues":["Dynamic refraction","Concentric corner radii","Floating control layers","Reflected background color"],"works":["Apps that show content full bleed while floating only the controls above it.","Screens where light, dark and wallpaper change but control positions must hold."],"recipe":{"type":"Keep text off the material itself and set minimum sizes from measured contrast.","layout":"Hold controls to the edges and make inner and outer radii concentric.","material":"Use one refracting layer only, letting it pick up the color beneath."},"avoid":"Keep it to the control layer rather than decorating content with translucent cards. Each added layer lets more background through until text fails, so check legibility on devices and honor Reduce Transparency.","study":["Apple Human Interface Guidelines","regular and clear variants","content and functional layers"]},"links":{"page":"https://indexstyle.org/styles/liquid-glass","json":"https://indexstyle.org/api/styles/liquid-glass","designSpec":"https://indexstyle.org/styles/liquid-glass/design.md","imagePrompt":"https://indexstyle.org/styles/liquid-glass/prompt.txt"},"usage":{"license":"CC-BY-4.0","licenseName":"Creative Commons Attribution 4.0 International","licenseUrl":"https://creativecommons.org/licenses/by/4.0/","attribution":"IndexStyle — https://indexstyle.org","attributionUrl":"https://indexstyle.org","scope":"Original IndexStyle text and structured data. Reference images, quoted works, and third-party material are excluded and retain their own rights."}}