グラスモーフィズムのログインモーダル

グラスモーフィズムは、すりガラス越しに背景が透けるあの質感をUIに持ち込んだスタイルです。2013年の iOS 7、そして2020年の macOS Big Sur が「frosted glass（曇りガラス）」を全面採用したことで一般化しました。背景を完全に隠さず、ぼかしながら透かす——ログインモーダルにとって、この性質は単なる流行以上の意味を持ちます。

文脈を保ったまま認証させる

ログインモーダルが背景を真っ黒な不透明レイヤーで覆うと、ユーザーは一瞬「どこに来たのか」を見失います。グラスモーフィズムのパネルは、背後のヒーロービジュアルやプロダクト画面を透かして残す。ユーザーはさっきまで見ていた世界の延長で認証しているという連続性を保てます。これは離脱率に直結する——文脈が途切れないことが、認証という面倒な作業のストレスを和らげるのです。

ぼかしで作る、刺さない階層

通常、UIの奥行きは影（drop shadow）で表現します。影はコントラストが強く、ときに画面を「刺々しく」見せる。グラスモーフィズムは、ぼかし（backdrop-filter: blur）と透過と微光で奥行きを作る。同じ階層表現でも、後者ははるかに柔らかく、認証フローのような「身構えさせたくない」場面に適しています。

仕上げの判断軸

最大の弱点はコントラストです。すりガラスパネルの上にテキストを置くと、背景の明暗によって可読性が崩れる。

パネルに十分な不透明度の下地を敷き、入力欄とラベルのコントラスト比は必ず実測してください。すりガラスは背景の明暗で可読性が崩れます。

backdrop-filter は非対応ブラウザがあるため、半透明の単色塗りをフォールバックとして用意します。SSOボタンは3つまでに絞り、選択肢過多で迷わせないことも重要です。