STYLE PROFILE

グラスモーフィズム

Glassmorphism

半透明の面と背景のぼかしを重ね、すりガラスのような質感と奥行きをつくる、UIを中心としたデザインスタイル。

見本はこの図鑑のためにAIで生成した画像です。

グラスモーフィズムの代表配色例

色コードと役割をまとめてコピーできます。

背景（`#0B1026`）とのコントラスト比
色	役割	比	文字に使う目安
`#2563EB`	背景グラデーションの主色	3.63:1	大きな文字や図形なら使える
`#8B5CF6`	背景グラデーションの副色	4.44:1	大きな文字や図形なら使える
`#F8FAFC`	文字・輪郭線・ガラス面	17.97:1	本文の文字にも使える

比はWCAG 2.2の計算式で求めた値です。4.5:1以上は本文の文字、3:1以上は大きな文字や図形に使える目安です（達成基準1.4.3・1.4.11）。

グラスモーフィズムのプロンプト例

グラスモーフィズムでデザインしてください。半透明の面を前景に重ね、面の背後をぼかしてすりガラスのように見せ、細い半透明の輪郭線やグラデーションで奥行きを表現してください。

グラスモーフィズムの主な視覚的特徴

半透明の面を前景に重ねる構成
不透明度を下げた面を、写真やグラデーションなどの背景の上に重ねます。背景が透けて見えることで、前景と背景の前後関係と奥行きが生まれます。
面の背後をぼかし、すりガラスのように見せる処理
面の背後にある背景をぼかし、形はわかっても細部は見分けにくくします。すりガラスの扉のように、向こう側の様子をぼんやりとだけ伝えます。
細い半透明の輪郭線やグラデーションで、面の厚みと光の反射を示す表現
面の縁にうっすらとした細い線を引いて、ガラスに厚みがあるように見せます。面の塗りにグラデーションを加えると、ガラスに光が反射した様子を表せます。

グラスモーフィズムが向いている成果物

- ダッシュボード
背景を制御した画面で、半透明のカードを重ねて情報の前後関係を示せる。文字の背後のコントラスト確保が前提となる。
- 商品・サービス紹介ページ（LP）
- イベントサイト
背景の色や光を透かす面で内容を区切り、デジタル製品や催しの先進的な世界観を画面全体に展開できる。

グラスモーフィズムとは

グラスモーフィズムは、2020年ごろから広まったUI（ユーザーインターフェース）のビジュアルデザインの傾向です。画面の部品をすりガラスのように見せる表現で、アップルやマイクロソフトのデザインシステムでは「素材（マテリアル）」の一種として扱われます。

半透明の面を前景に置き、その背後をぼかすことで、前景と背景のあいだに奥行きと対比をつくります。縁の細い線やグラデーションで、面の厚みやガラスに映る光を表すこともあります。うまく使えば、見た目の階層と奥行きをはっきりさせる助けになります。

代表的な例が、マイクロソフトのFluent Design Systemの半透明の素材「アクリル」で、コンテキストメニューやフライアウトなど、一時的に表示される部品に使うよう勧められています。Nielsen Norman Groupは、アップルのiPadOSのアプリのフォルダやmacOSの通知、Apple Vision Proの半透明の重なりも、この表現の例に挙げています。

一方で、背景が透けるため、文字が複数の色に重なって読みにくくなることがあります。Nielsen Norman Groupは、文字のコントラストを確保すること、背景のぼかしを強めること、利用者が透明度を調整できるようにすることを勧めています。アクリルも、利用者が設定で透明効果を切ると単色で表示されます。

見分けるときは、次の点を確かめてみてください。