Style · グラスモーフィズム

グラスモーフィズムなWebデザインのAIプロンプト集

半透明のすりガラス風パネルを重ねるグラスモーフィズム系AIプロンプト集。iOS/macOS風のモダンUI。

Designs002 Styleグラスモーフィズム Keywordグラスモーフィズム

グラスモーフィズムについて

グラスモーフィズムは半透明のすりガラス風パネルを重ねる表現。macOS Big Sur、Windows 11、iOS 16で主流化したスタイルで、`backdrop-filter: blur()`と薄い境界線、浮遊感のある影で実現します。背景に彩度の高いカラフルなレイヤーが必要。

よく使われる場面

  • モダンなSaaSのランディングページ
  • モバイルアプリのUI
  • クリエイティブツール
  • 音楽・メディアプレイヤー
  • 個性を出したい個人ポートフォリオ

成功のポイント

  • backdrop-filter: blur() を20-30pxで
  • 背景に鮮やかな色を置いてガラス感を出す
  • 境界線は白の透過1-2pxでふちどる
  • 影は薄く、2層に分ける(近+遠)
  • Safari/Firefoxのフォールバックを用意

このスタイルのデザイン

他のスタイル