{"id":"glassmorphism","no":26,"name":"Glassmorphism","ja":"グラスモーフィズム","era":"2020s","family":"UI表現","essence":"半透明の層で奥行きと階層を示し、情報を軽く浮かせる。","cues":["背景ぼかし","半透明","細い白枠","色のにじみ"],"intents":["未来","静けさ","高級"],"works":["階層のある情報を軽やかに見せる","OS的な洗練と奥行きを出す"],"recipe":{"type":"ニュートラルなサンセリフ","layout":"カードを重ね、前後関係を明確に","material":"色のある背景＋半透明面＋微細な境界"},"avoid":"背景次第で可読性が壊れる。本文面には十分な不透明度を持たせる。","colors":["#11213c","#6567e9","#9ee7e7"],"motif":"glass","pair":["deconstructivism","minimalism"],"study":["macOS Big Sur","Windows 11"],"kind":"スタイル","collection":"btrax 50","source":{"title":"UX Collective — Glassmorphism in user interfaces (Michal Malewicz)","url":"https://uxdesign.cc/glassmorphism-in-user-interfaces-1f39bb1308c9"},"reference":{"status":"verified","pageUrl":"https://uxdesign.cc/glassmorphism-in-user-interfaces-1f39bb1308c9","credit":"UX Collective — Glassmorphism in user interfaces (Michal Malewicz)","gallery":[{"imageUrl":"https://commons.wikimedia.org/wiki/Special:FilePath/Spotlight%20on%20macOS%20Big%20Sur.png?width=640","pageUrl":"https://commons.wikimedia.org/wiki/File:Spotlight%20on%20macOS%20Big%20Sur.png","credit":"Apple《macOS Big Sur の Spotlight》 — Wikimedia Commons / Public domain"},{"imageUrl":"https://commons.wikimedia.org/wiki/Special:FilePath/GNOME%20Shell%20v40%20showing%20workspaces%20in%20overview%20mode.png?width=640","pageUrl":"https://commons.wikimedia.org/wiki/File:GNOME%20Shell%20v40%20showing%20workspaces%20in%20overview%20mode.png","credit":"GNOME プロジェクト《GNOME Shell 40 のアクティビティ画面》 — Wikimedia Commons / CC BY-SA 4.0"}]},"addedAt":"2026-08-16","en":{"essence":"Shows depth and hierarchy through translucent layers, floating information lightly.","cues":["Background blur","Translucency","Thin white borders","Color bleed"],"works":["Making layered information feel light","OS-grade refinement and depth"],"recipe":{"type":"A neutral sans-serif","layout":"Stack cards with clear front-to-back order","material":"Colored ground, translucent panes, fine edges"},"avoid":"Legibility breaks with the wrong background. Give text surfaces real opacity."},"links":{"page":"https://indexstyle.org/styles/glassmorphism","json":"https://indexstyle.org/api/styles/glassmorphism","designSpec":"https://indexstyle.org/styles/glassmorphism/design.md","imagePrompt":"https://indexstyle.org/styles/glassmorphism/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."}}