浮遊するグラスモーフィズム・ナビ
パステルの背景を透過するすりガラス風のカプセル型追従ナビ。スクロール追従・backdrop-filter・柔らかい影だけで構成し、モダンなSaaS/プロダクトサイトのトーンを一行で決めるヘッダー設計。
プレビューを開く
概要
グラスモーフィズムなナビは、「ヘッダーそのものを主役にしない」という設計思想を視覚化する。下のコンテンツがうっすら透けることで、ヘッダーはページの上にただ浮いているような印象になり、スクロール中もコンテンツの邪魔をしない。
なぜ効くのか
伝統的な不透明ヘッダーは、スクロール時に「背景を押し出す壁」として働く。対してグラスナビは、下にあるコンテンツを光学的に翻訳するチューブのような役割。プロダクトサイトの世界観が背景・ヒーローに強く宿っている場合、その世界観を殺さずに機能性だけ追加できる。
構造
- カプセル型:
border-radius: 999pxで両端を完全円に。角ばったヘッダーより「浮遊感」が強くなる - backdrop-filter: ぼかし18px + saturate160% が基本値。saturateを少し上げることで背景が少しビビッドに見え、ガラスの奥行きが出る
- inner highlight: 上辺に1pxの白ハイライトを入れると「ガラスの縁」が立体化する
- center ul + right cluster: 中央リンク、右に認証系という業界標準配置。モバイルでは中央を隠してバーガーに畳む
- gradient primary CTA: シアン→紫の対角グラデで、ナビ内で唯一の「色の主役」をはっきり決める
使いどころ
- モダンなSaaSやプロダクトマーケティングサイトで「古臭くないヘッダー」を短時間で決めたいとき
- ヒーロー背景やセクション背景の色を活かしつつ、ヘッダーを邪魔にしたくないとき
- スクロール中に情報密度を増やさず、存在感だけ維持したいとき
適した技術スタック
- カテゴリ
- ナビゲーション
- スタイル
- グラスモーフィズム / ソフト / グラデーション / SaaS / クール
- 想定用途
- SaaS向け
- SPA
- No
- Hosting
- any
- Notes
- backdrop-filter対応ブラウザ（Chromium / Safari / 最新Firefox）で真価を発揮。非対応環境では自動で半透明の白ナビにフォールバック。
AIへの指示文
Build a sticky capsule-shaped "glassmorphism" navbar for a modern SaaS site. Page canvas: - Soft pastel background built from three radial gradients (lavender top-left, pink top-right, mint bottom-center) over an off-white base (#f5f5f9). - Some decorative gradient thumbnails behind the nav so the glass effect is actually visible. Navbar: - Position: sticky, 1rem from the top, max-width 1120px, horizontal margin auto. - Rounded pill (border-radius: 999px), padding 0.6rem 0.75rem 0.6rem 1.1rem. - Background: rgba(255,255,255,0.55), backdrop-filter: blur(18px) saturate(160%). - 1px inner highlight (inset 0 1px 0 rgba(255,255,255,0.9)) and a soft drop shadow (0 10px 40px -10px rgba(25,30,80,0.18)). Contents (left → right): 1. Brand: small conic-gradient square mark + bold wordmark. 2. Center nav ul: 5 pill links; the active one has a tinted blue background and colored text. 3. Right cluster: ghost "Sign in" link + gradient primary "Start free" button (linear-gradient 135deg, #5a6cff → #9f6bff, white text, rounded pill). Behavior: - Below 720px: hide the center ul, hide the ghost link, show a burger icon at the right edge. - Primary button has subtle translateY(-1px) on hover with deeper shadow. Interactions are pure CSS; JS only needed to toggle a mobile sheet.
バリエーション
ダークテーマ版
Swap the palette: - Canvas: near-black (#0b0c14) with low-opacity indigo/purple radial accents. - Nav background: rgba(20, 22, 36, 0.55), inner highlight at the top, shadow deeper and slightly purple-tinted. - Active link: rgba(159, 107, 255, 0.22) background with lilac text. - Primary button gradient stays, text stays white.
e コマース版
Replace the right cluster with: search input + cart icon with badge + login. Add a secondary thin row under the nav containing category pills (Women / Men / Kids / Sale) that also uses the same glass style but is not sticky.
よくある質問
Safariで透過が濁る問題は？
backdrop-filterはSafariで`-webkit-backdrop-filter`のprefixが必要（このプロンプトには含まれる）。iOS SafariではGPU負荷対策でぼかし半径を控えめ（12〜16px）にすると安定する。
アクセシビリティで注意点は？
背景が派手な場合、透過ナビ上のテキストコントラストが落ちがち。最小4.5:1を担保するため、ナビ背景の不透明度は0.5以上を維持する。focus-visibleのアウトラインは必ず残すこと。
backdrop-filter非対応ブラウザは？
Firefoxの古いバージョンやレガシーブラウザでは半透明白ナビにフォールバックする。読みづらくはならないので致命的ではないが、重要な情報をヘッダーに入れすぎない設計にしておくと安心。