Style · グラスモーフィズム
グラスモーフィズムWebデザインの参考例とAIプロンプト
半透明のすりガラス風パネルを重ねるグラスモーフィズム系AIプロンプト集。iOS/macOS風のモダンUI。
グラスモーフィズムについて
半透明のすりガラス風パネルを重ねる表現。macOS Big Sur、Windows 11、iOS 16 で主流化し、backdrop-filter と薄い境界線、浮遊感のある影で実現します。背景に彩度の高いレイヤーがあってはじめて成立する様式です。影ではなくぼかしで階層を作るので、刺々しさが出ません。認証やモーダルのように身構えさせたくない場面に向きます。最大の弱点はコントラストで、背景の明暗によって可読性が崩れます。十分な不透明度の下地を敷き、非対応ブラウザ用に単色の代替を用意すること。
グラスモーフィズムの視覚パラメータ
- #0B1020 地
- #7DD3FC 透過の反射
- #F0ABFC 副反射
- #E8ECF5 文字
- 書体
- サンセリフ。細めのウェイトで軽さを出す
- 形
- 角丸16〜24px。backdrop-filter: blur(18px) と1pxの白い縁
- 動き
- 200〜300msの浮き上がり
よく使われる場面
- モダンなSaaSのランディングページ
- モバイルアプリのUI
- クリエイティブツール
- 音楽・メディアプレイヤー
- 個性を出したい個人ポートフォリオ
成功のポイント
- backdrop-filter: blur() を20-30pxで
- 背景に鮮やかな色を置いてガラス感を出す
- 境界線は白の透過1-2pxでふちどる
- 影は薄く、2層に分ける（近+遠）
- Safari/Firefoxのフォールバックを用意
