やってみよう背景の丸を左右にドラッグして、ガラスの向こうが透ける様子を見てください
デザインスタイルマイナー（知る人ぞ知る）
グラスモーフィズム
Glassmorphism
後ろの色や写真がぼやけて透けて見える、すりガラスのような半透明のパネル。
別名すりガラス風フロストガラスガラスUI半透明ぼかし
どこで使われている？
- よく見かける場所
- iPhoneのコントロールセンター、macOS、Windows 11、音楽アプリ
- 使うとよい場面
- カラフルな背景や写真の上に、情報を重ねたいとき
- 避けたい場面
- 白や単色の背景の上（効果がわからない）、読みやすさが最優先の画面
補足デザインの「雰囲気」の名前です。AIに「グラスモーフィズムで」と伝えると、この見た目で作ってくれます。
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「グラスモーフィズム（Glassmorphism）」を実装してください。 動き：パネルを白の半透明（例：不透明度20%）で塗り、背景をぼかす効果（ブラー）をかけて後ろがすりガラス越しに見えるようにする。縁に細い白い線を入れ、カラフルな背景の上に置く。 使う部品：backdrop-filter: blur() + 半透明の背景
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | backdrop-filter: blur() + 半透明の背景 |
|---|---|
| iPhoneアプリなら | .background(.ultraThinMaterial) |
| Androidアプリなら | 標準部品なし（Android 12以降は RenderEffect でぼかし） |
| Flutterなら | BackdropFilter + ImageFilter.blur |
| React Nativeなら | expo-blur の BlurView |