glassmorphism

グラスモーフィズムパターン

オーバーレイや浮遊する UI 要素に、すりガラスのエフェクトを作成します。

コアクラス

// Standard glassmorphic container
<div className="bg-black/20 backdrop-blur-md border border-white/10">
  ...
</div>

バリエーション

ダークオーバーレイ（画像・メディア上）

画像や動画に重ねるコントロールに最適です。

<div className="bg-black/20 backdrop-blur-md border border-white/10 rounded-full px-3 py-2">
  {/* Content */}
</div>

ライトオーバーレイ（暗い背景上）

<div className="bg-white/10 backdrop-blur-md border border-white/20 rounded-xl px-4 py-3">
  {/* Content */}
</div>

控えめなガラス効果（最小限のエフェクト）

<div className="bg-black/10 backdrop-blur-sm border border-white/5 rounded-lg px-3 py-2">
  {/* Content */}
</div>

強いガラス効果（目立つエフェクト）

<div className="bg-black/40 backdrop-blur-lg border border-white/20 rounded-2xl px-5 py-4">
  {/* Content */}
</div>

トークンリファレンス

プロパティ	ライトガラス	標準	強
背景	bg-black/10	bg-black/20	bg-black/40
ぼかし	backdrop-blur-sm	backdrop-blur-md	backdrop-blur-lg
枠線	border-white/5	border-white/10	border-white/20

よくあるユースケース

カルーセルのインジケーター

<div className="absolute bottom-3 left-1/2 -translate-x-1/2">
  <div className="flex items-center gap-2 px-3 py-2 rounded-full bg-black/20 backdrop-blur-md border border-white/10">
    {/* Indicator dots */}
  </div>
</div>

フローティングアクションボタン

<button className="fixed bottom-6 right-6 p-4 rounded-full bg-black/20 backdrop-blur-md border border-white/10 hover:bg-black/30 transition-colors">
  <Icon className="w-6 h-6 text-white" />
</button>

ツールチップ／ポップオーバー

<div className="absolute top-full mt-2 px-3 py-2 rounded-lg bg-black/30 backdrop-blur-md border border-white/10">
  <span className="text-white text-sm">Tooltip content</span>
</div>

ナビゲーションバー（ヒーロー上）

<nav className="fixed top-0 left-0 right-0 z-50 bg-black/10 backdrop-blur-md border-b border-white/10">
  {/* Nav content */}
</nav>

テキストのコントラスト

グラスモーフィズムを使用する場合は、テキストに十分なコントラストを確保してください。

背景の不透明度	テキストの色
bg-black/10 - bg-black/20	text-white または text-white/90
bg-black/30 - bg-black/40	text-white
bg-white/10 - bg-white/20	text-white または text-zinc-100

パフォーマンスに関する注意

backdrop-blur は、性能の低いデバイスでパフォーマンスに影響することがあります。次の点を検討してください。

• 頻繁に更新される要素には、小さめのぼかし値（backdrop-blur-sm）を使用する
• ビューポートの大部分を覆う、大きなグラスモーフィズム領域を避ける
• モバイルデバイスでテストする

チェックリスト

• 背景に透明度がある（例：bg-black/20）
• すりガラス効果を得るために backdrop-blur-* が適用されている
• 透明度のある控えめな枠線（border-white/10）がある
• テキストに十分なコントラストがある
• 角の丸みがデザインの方向性に合っている
• パフォーマンスについて、性能の低いデバイスでテスト済み