{"id":"glassmorphism","no":31,"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","luxury-minimal"],"study":["macOS Big Sur","Windows 11"],"kind":"スタイル","collection":"btrax 50","source":{"title":"btrax — 50の主要デザインスタイル","url":"https://blog.btrax.com/jp/50-design-styles/"},"reference":{"status":"verified","imageUrl":"https://blog.btrax.com/jp/wp-content/uploads/sites/3/2026/04/glassmorphism-graphic-design-styles.png","pageUrl":"https://blog.btrax.com/jp/50-design-styles/","credit":"btrax記事掲載ムードボード"},"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."}}