グラスモーフィズム
Glassmorphism
後ろの色や写真がすりガラス越しにぼやけて透ける、半透明のパネル。
別名すりガラス風フロストガラスガラスUI
見た目の特徴
- 白の半透明パネル
- 背景をぼかす効果
- 細い白の縁取り
- カラフルな背景の上に置く
色の組み合わせ （押すと色のコードをコピー）
合うフォントの例
InterNoto Sans JP
どこで使われている？
- よく見かける場所
- iPhoneのコントロールセンター、macOS、Windows 11
- 使うとよい場面
- カラフルな背景や写真の上に情報を重ねたいとき
- 避けたい場面
- 白や単色の背景の上（効果が見えない）
- 向いているもの
- アプリのトップ画面、カード決済、音楽アプリ
似ている雰囲気と見比べる
AIへの指示文
Webサイト を作るときの指示文です。作るものは右上の「何を作る？」で変えられます。
Webサイトを「グラスモーフィズム（Glassmorphism）」のデザインで作ってください。 見た目：白の半透明パネルに背景のぼかし（backdrop-filter: blur）をかけ、細い白の縁取りを付けて、カラフルな背景の上に置く。 特徴：白の半透明パネル／背景をぼかす効果／細い白の縁取り／カラフルな背景の上に置く 色：背景 #1B1440、ガラス #FFFFFF29、ピンク #FF5E8A、ブルー #3AA8FF、イエロー #FFC83A フォントの例：Inter、Noto Sans JP