ナビゲーション · ナビゲーション

すりガラス調の追従ナビゲーション

半透明のすりガラス越しに背景のパステルが透けて見える、カプセル型の追従ナビゲーション。スクロール時もコンテンツの世界観を壊さず、モダンなSaaSやプロダクトサイトの上部に向きます。

PUBLISHED — 2026年4月23日 UPDATED — 2026年4月23日 CATEGORY — ナビゲーション LICENSE — CC0 1.0

プレビュー

vibe.itlibra.com/preview/glass-navbar/

概要

すりガラス調の追従ナビゲーションは、「ヘッダーを主役にしない」という思想を視覚化したものです。下のコンテンツが半透明に透けることで、ヘッダーはページの上に薄く浮いているだけのように見え、スクロール中もコンテンツの世界観を遮りません。グラスモーフィズムが macOS Big Sur 以降に一般化したことで、SaaSのナビでも定番になりました。

不透明なヘッダーが奪うもの

不透明なヘッダーは、スクロール時に背景を押しのける「壁」として機能します。情報は提供しますが、その下にあるはずのコンテンツやヒーロービジュアルを物理的に隠してしまう。すりガラス調のナビは逆に、下のコンテンツを光学的に透かしながら、機能だけを上に足します。プロダクトの世界観が背景やヒーローに強く出ているサイトほど、この「世界観を損なわずに機能を乗せる」性質が効きます。

カプセルが生む「浮遊」

ナビ全体を角丸のカプセル型にすると、画面端に張り付いた「バー」ではなく、コンテンツの上を漂う「オブジェクト」に見えます。この浮遊感がすりガラスの透過性と組み合わさって軽やかさを生む。角ばったフルワイドのヘッダーより、はるかに圧迫感が少なくなります。

仕上げの判断軸

backdrop-filter はぼかし18px＋彩度160%程度が基準。彩度を少し上げると背景がわずかに鮮やかに透け、ガラスの奥行きが出ます。上辺に1pxの白ハイライトを入れると縁が立体的に。配置は中央にリンク・右側に認証系という業界標準に従い、モバイルでは中央を畳んでバーガーに。最大の弱点はコントラストで、透過パネルの上の文字は背景の明暗に左右されるため、十分な下地と実測でのコントラスト確保が必須です。

使いどころ

モダンなSaaSやプロダクトのマーケティングサイトで、古びた印象のヘッダーを避けたいとき
ヒーロー背景やセクション背景の色味を活かしつつ、ヘッダーで邪魔したくないとき
スクロール中にヘッダーの情報量は増やさず、存在感だけ保ちたいとき

カテゴリ: ナビゲーション
スタイル: グラスモーフィズム / ソフト / グラデーション / SaaS / クール

背景と狙いどころ

Context

Category · ナビゲーション

グラスモーフィズム

半透明すりガラスの重なり。

スタイル一覧を見る →

Style · ソフト

ソフト

パステル・丸み・優しさ。

スタイル一覧を見る →

AIへの指示文

モダンなSaaSサイト向けの、カプセル型・追従式のすりガラス調ナビゲーションを作ってください。

ページキャンバス:
- off-white (#f5f5f9) の上に、3つの放射状グラデーション(左上ラベンダー、右上ピンク、下中央ミント)を重ねた柔らかいパステル背景。
- ナビの下に、ガラス効果が確認できるように装飾的なグラデーションサムネイルを配置。

ナビ本体:
- position: sticky、上から 1rem、最大幅 1120px、水平方向は margin auto。
- カプセル型(border-radius: 999px)、パディング 0.6rem 0.75rem 0.6rem 1.1rem。
- 背景 rgba(255,255,255,0.55)、backdrop-filter: blur(18px) saturate(160%)。
- 上辺に 1px の白インナーハイライト(inset 0 1px 0 rgba(255,255,255,0.9))と、柔らかいドロップシャドウ(0 10px 40px -10px rgba(25,30,80,0.18))。

中身(左から右):
1. ブランド: conic-gradient の小さい正方形マーク + ボールドなワードマーク。
2. 中央のナビ ul: ピル型リンクを 5つ。アクティブなものは青味のかかった背景と色付きテキスト。
3. 右側クラスタ: ゴースト表示の "Sign in" リンク + グラデーションのプライマリボタン "Start free" (linear-gradient 135deg, #5a6cff → #9f6bff、白文字、カプセル型)。

挙動:
- 720px 未満では、中央の ul を非表示にして、右端にバーガーアイコンを表示。
- プライマリボタンは hover で translateY(-1px) + より深いシャドウ。

インタラクションはすべてCSSのみ。モバイルメニュー開閉だけJSが必要。

バリエーション

ダークテーマ版

配色を入れ替え:
- キャンバス: 近黒 (#0b0c14) + 低透明度のインディゴ/パープルの放射状アクセント。
- ナビ背景: rgba(20, 22, 36, 0.55)。インナーハイライトは上辺、シャドウをやや深くパープル寄りに。
- アクティブリンク: rgba(159, 107, 255, 0.22) の背景にライラックのテキスト。
- プライマリボタンのグラデーションはそのまま、文字も白のまま。

ECサイト向け

右側クラスタを以下に差し替え: 検索入力 + バッジ付きカートアイコン + ログイン。
ナビの下に、同じガラス調の(追従ではない)細い行を追加。カテゴリピル(レディース / メンズ / キッズ / セール)を並べる。

よくある質問

Safariで透過が濁って見える場合は？

backdrop-filter は Safari で `-webkit-backdrop-filter` のプレフィックスが必要です(このプロンプトには含まれています)。iOS Safari では GPU 負荷を考慮してぼかし半径を 12〜16px 程度に抑えると安定します。

アクセシビリティで注意すべき点は？

背景が派手な場合、透過ナビ上のテキストコントラストが落ちがちです。最小 4.5:1 を担保するために、ナビ背景の不透明度は 0.5 以上を維持してください。focus-visible のアウトラインは必ず残します。

backdrop-filter 非対応ブラウザでは？

古い Firefox など一部ブラウザでは、半透明の白ナビにフォールバックします。読みづらくはならないので致命的ではありませんが、重要な情報をヘッダー透過部分に入れすぎない設計にすると安心です。

星座図・天体図風のサイトナビゲーション

夜空の星座と天体観測カタログを再構築したサイトナビゲーション。各ページを"恒星"、カテゴリを"星座"として配置し、現在地を北極星（Polaris）の脈動で示す、神秘的で詩的な尖った設計。

ナビゲーションダークミニマル

東京メトロ路線図風のサイトナビゲーション

東京メトロ・大江戸線などの路線図グラフィックを再構築したサイトナビゲーション。各カテゴリを"路線"、各ページを"駅"として見立て、駅ナンバリングや路線記号で迷わせない尖った設計。

ナビゲーションエディトリアルボールド

スマホフレーム重ねの3画面アプリショーケース

モバイルアプリのプロダクトサイト向けに、傾けた3枚のスマホフレームに UI スクリーンを並べるショーケース。フィットネス・健康・SaaS モバイルアプリの定番表現を CSS だけで構築する尖った設計。

グラデーションソフト