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

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

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

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

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

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

仕上げの判断軸

最大の弱点はコントラストです。すりガラスパネルの上にテキストを置くと、背景の明暗によって可読性が崩れる。パネルに十分な不透明度の下地を敷き、入力欄とラベルのコントラスト比は必ず実測すること。backdrop-filter は非対応ブラウザがあるため、半透明の単色塗りをフォールバックとして用意します。SSOボタンは3つまでに絞り、選択肢過多で迷わせないことも重要です。