ナビゲーション · ナビゲーション
すりガラス調の追従ナビゲーション
半透明のすりガラス越しに背景のパステルが透けて見える、カプセル型の追従ナビゲーション。スクロール時もコンテンツの世界観を壊さず、モダンなSaaSやプロダクトサイトの上部に向きます。
このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。
印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。
Vibehaus · デザイン資料
https://vibe.itlibra.com/design/glass-navbar/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由
プレビュー
画面に合わせる
指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。
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サイト向け
右側クラスタを以下に差し替え: 検索入力 + バッジ付きカートアイコン + ログイン。 ナビの下に、同じガラス調の(追従ではない)細い行を追加。カテゴリピル(レディース / メンズ / キッズ / セール)を並べる。
このプレビューのコード
HTML・CSS・JavaScriptの1ファイルです。外部依存・広告・解析コードはありません。架空の製品の追従ナビです。スマホのメニュー開閉・Escape・フォーカス復帰・ページ内の移動を試せます。ログイン・登録・決済は行いません。JavaScriptなしでもリンクを表示します。
コードを表示
<!doctype html>
<!-- Vibehaus — CC0。CSS・SVGとページ内操作の1ファイル版。製品・星図・路線とリンク先は架空の表示見本です。 -->
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex" />
<title>すりガラス調の追従ナビゲーション — Vibehaus プレビュー</title>
<style>
:root {
--fg: #1a1a22;
--muted: #555563;
--accent: #5a6cff;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
"Hiragino Sans", "Noto Sans JP", sans-serif;
color: var(--fg);
line-height: 1.6;
background:
radial-gradient(900px 500px at 10% 0%, #cfd9ff 0%, transparent 50%),
radial-gradient(700px 500px at 90% 30%, #ffd6f0 0%, transparent 55%),
radial-gradient(800px 500px at 50% 100%, #b9ffe8 0%, transparent 55%),
#f5f5f9;
min-height: 100dvh;
}
/* Sticky glass nav */
nav.nav {
position: sticky;
top: 1rem;
z-index: 10;
margin: 1rem auto 0;
width: min(1120px, calc(100% - 2rem));
display: flex;
align-items: center;
gap: 1rem;
padding: 0.6rem 0.75rem 0.6rem 1.1rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 10px 40px -10px rgba(25, 30, 80, 0.18);
}
.brand {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 800;
text-decoration: none;
color: inherit;
letter-spacing: -0.01em;
}
.brand .mark {
width: 24px;
height: 24px;
border-radius: 7px;
background: conic-gradient(from 210deg, #5a6cff, #9f6bff, #ff6ac0, #5a6cff);
}
nav.nav ul {
list-style: none;
display: flex;
gap: 0.25rem;
margin: 0 auto;
padding: 0;
}
nav.nav ul a {
display: inline-block;
padding: 0.5rem 0.95rem;
color: inherit;
text-decoration: none;
font-size: 0.92rem;
border-radius: 999px;
opacity: 0.8;
transition: background 0.18s, opacity 0.18s;
}
nav.nav ul a:hover {
opacity: 1;
background: rgba(255, 255, 255, 0.7);
}
nav.nav ul a.active {
opacity: 1;
background: rgba(90, 108, 255, 0.12);
color: var(--accent);
font-weight: 600;
}
nav.nav .right {
display: flex;
align-items: center;
gap: 0.5rem;
}
.btn-ghost {
padding: 0.45rem 0.85rem;
border-radius: 999px;
color: inherit;
text-decoration: none;
font-size: 0.88rem;
opacity: 0.75;
}
.btn-ghost:hover { opacity: 1; }
.btn-primary {
padding: 0.55rem 1.1rem;
border-radius: 999px;
text-decoration: none;
background: linear-gradient(135deg, #5a6cff, #9f6bff);
color: #fff;
font-size: 0.9rem;
font-weight: 600;
box-shadow: 0 8px 20px -8px rgba(90, 108, 255, 0.55);
transition: transform 0.12s, box-shadow 0.12s;
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 12px 24px -8px rgba(90, 108, 255, 0.7);
}
.burger {
display: none;
border: 0;
background: transparent;
padding: 0.35rem;
cursor: pointer;
}
.burger span {
display: block;
width: 20px;
height: 2px;
background: currentColor;
margin: 4px 0;
border-radius: 2px;
}
/* Demo content behind the nav to show the glass */
main {
max-width: 1120px;
margin: 3rem auto;
padding: 0 1rem;
}
main h1 {
font-size: clamp(2rem, 5vw, 3.4rem);
letter-spacing: 0;
line-height: 1.3;
margin: 0 0 0.6rem;
}
main p {
max-width: 56ch;
color: var(--muted);
font-size: 1.05rem;
}
.thumbs {
margin-top: 2.5rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}
.thumb {
aspect-ratio: 4/3;
border-radius: 18px;
background-size: cover;
background-position: center;
box-shadow: 0 20px 40px -20px rgba(25, 30, 80, 0.3);
}
.thumb.a { background: linear-gradient(135deg, #ffd6f0, #5a6cff); }
.thumb.b { background: linear-gradient(135deg, #b9ffe8, #5a6cff); }
.thumb.c { background: linear-gradient(135deg, #cfd9ff, #9f6bff); }
.thumb.d { background: linear-gradient(135deg, #fff1b9, #ff6ac0); }
@media (max-width: 720px) {
nav.nav ul { display: none; }
.burger { display: inline-flex; flex-direction: column; margin-left: auto; }
nav.nav .right .btn-ghost { display: none; }
}
[hidden] { display: none !important; }
nav.nav { flex-wrap: wrap; }
nav.nav ul { flex-wrap: wrap; }
nav.nav a, .burger { min-height: 44px; min-width: 44px; }
nav.nav a { display: inline-flex; align-items: center; }
.burger { align-items: center; justify-content: center; color: var(--fg); }
nav.nav.is-enhanced.is-mobile .burger { display: inline-flex; }
.btn-primary { background: linear-gradient(135deg, #3d48b8, #7140b8); }
nav.nav ul a.active { color: #242b80; }
a:focus-visible, button:focus-visible { outline: 3px solid #3544bb; outline-offset: 3px; }
.demo-note { margin: 3rem 0; font-size: 1rem; line-height: 1.8; letter-spacing: 0; }
.demo-note h2 { font-size: 1.15rem; line-height: 1.4; }
.demo-note p { scroll-margin-top: 13rem; }
@media (max-width: 720px) {
nav.nav { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-radius: 24px; gap: 0.5rem; max-height: calc(100svh - 2rem); overflow-y: auto; }
.brand { grid-column: 1; }
.burger { grid-column: 2; grid-row: 1; margin: 0; }
nav.nav .right { grid-column: 1 / -1; flex-wrap: wrap; }
nav.nav .right .btn-ghost { display: inline-flex; }
nav.nav ul { grid-column: 1 / -1; display: flex; flex-direction: column; margin: 0; }
nav.nav ul a { width: 100%; }
nav.nav.is-enhanced.is-mobile:not(.is-open) ul { display: none; }
nav.nav:not(.is-enhanced) { position: static; max-height: none; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) { a { transition: none !important; transform: none !important; } }
</style>
</head>
<body>
<nav class="nav" aria-label="製品の案内">
<a class="brand" href="#demo-overview"><span class="mark" aria-hidden="true"></span> Prism</a>
<ul id="primary-links">
<li><a href="#demo-product" class="active" aria-current="location">製品</a></li>
<li><a href="#demo-cases">導入事例</a></li>
<li><a href="#demo-pricing">料金</a></li>
<li><a href="#demo-docs">ドキュメント</a></li>
<li><a href="#demo-blog">ブログ</a></li>
</ul>
<div class="right">
<a class="btn-ghost" href="#demo-login">ログイン</a>
<a class="btn-primary" href="#demo-signup">無料ではじめる</a>
</div>
<button type="button" class="burger" aria-label="メニューを開く" aria-expanded="false" aria-controls="primary-links" hidden>
<span></span><span></span><span></span>
</button>
</nav>
<main>
<h1>新しい形の、追従するナビゲーション。</h1>
<p>
ページをスクロールしてみてください。カプセルは上部に留まったまま、背景の色だけが下で変化します。すりガラスの層が、下にあるものを柔らかく読める状態に翻訳する。モダンなプロダクトサイトが選ぶ、定番のトーンです。
</p>
<div class="thumbs">
<div class="thumb a"></div>
<div class="thumb b"></div>
<div class="thumb c"></div>
<div class="thumb d"></div>
<div class="thumb a"></div>
<div class="thumb c"></div>
</div>
<aside class="demo-note" aria-labelledby="demo-title"><h2 id="demo-title">リンク先の説明（表示見本）</h2><p>架空のサイトの案内例です。リンクはこのページ内の説明へ移動し、外部への移動・送信・登録は行いません。配布HTMLはCC0・利用料¥0です。</p><p id="demo-overview" tabindex="-1"><strong>この見本について</strong> — Prismは架空の製品です。追従するナビとページ内の移動を試せます。配布HTMLはCC0・利用料¥0です。</p><p id="demo-product" tabindex="-1"><strong>製品</strong> — 製品の特長を案内する入口の例です。実際の製品や外部との連携機能は含みません。</p><p id="demo-cases" tabindex="-1"><strong>導入事例</strong> — 導入の背景や利用例へつなぐ構成です。実在する導入実績は掲載していません。</p><p id="demo-pricing" tabindex="-1"><strong>料金</strong> — 料金と利用条件を案内する入口の例です。契約や決済は行いません。</p><p id="demo-docs" tabindex="-1"><strong>ドキュメント</strong> — 使い方や実装条件をまとめる構成例です。外部のドキュメントへは移動しません。</p><p id="demo-blog" tabindex="-1"><strong>ブログ</strong> — 更新や記事の一覧へつなぐ構成例です。記事の配信機能は含みません。</p><p id="demo-login" tabindex="-1"><strong>ログインについて</strong> — 認証の入口を置く例です。この見本ではログイン情報の入力・認証・保存を行いません。</p><p id="demo-signup" tabindex="-1"><strong>無料ではじめるについて</strong> — 登録の入口を置く例です。この見本ではアカウント登録や申し込みを受け付けていません。</p></aside>
</main>
<script>
const nav = document.querySelector('nav.nav');
const button = nav.querySelector('.burger');
const menu = nav.querySelector('ul');
const mobile = matchMedia('(max-width: 720px)');
const close = (restore = false) => {
nav.classList.remove('is-open');
button.setAttribute('aria-expanded', 'false');
button.setAttribute('aria-label', 'メニューを開く');
if (restore && mobile.matches) button.focus();
};
button.addEventListener('click', () => {
if (nav.classList.contains('is-open')) return close(true);
nav.classList.add('is-open');
button.setAttribute('aria-expanded', 'true');
button.setAttribute('aria-label', 'メニューを閉じる');
menu.querySelector('a').focus();
});
nav.addEventListener('keydown', event => {
if (event.key === 'Escape' && nav.classList.contains('is-open')) { event.preventDefault(); close(true); }
});
document.addEventListener('pointerdown', event => { if (!nav.contains(event.target)) close(menu.contains(document.activeElement)); });
nav.addEventListener('focusout', () => setTimeout(() => { if (!nav.contains(document.activeElement)) close(); }, 0));
nav.querySelectorAll('a').forEach(link => link.addEventListener('click', () => close()));
const current = () => {
const hash = location.hash || '#demo-product';
menu.querySelectorAll('a').forEach(link => {
const active = link.getAttribute('href') === hash;
link.classList.toggle('active', active);
if (active) link.setAttribute('aria-current', 'location'); else link.removeAttribute('aria-current');
});
};
window.addEventListener('hashchange', current);
mobile.addEventListener('change', () => {
const active = document.activeElement;
nav.classList.toggle('is-mobile', mobile.matches);
close();
if (mobile.matches && menu.contains(active)) button.focus();
else if (!mobile.matches && active === button) menu.querySelector('a').focus();
});
button.hidden = false;
nav.classList.toggle('is-mobile', mobile.matches);
nav.classList.add('is-enhanced');
current();
</script>
</body>
</html>
2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。
概要
すりガラス調の追従ナビゲーションは、「ヘッダーを主役にしない」という思想を視覚化したものです。下のコンテンツが半透明に透けることで、ヘッダーはページの上に薄く浮いているだけのように見え、スクロール中もコンテンツの世界観を遮りません。グラスモーフィズムが macOS Big Sur 以降に一般化したことで、SaaSのナビでも定番になりました。
不透明なヘッダーが奪うもの
不透明なヘッダーは、スクロール時に背景を押しのける「壁」として機能します。情報は提供しますが、その下にあるはずのコンテンツやヒーロービジュアルを物理的に隠してしまう。すりガラス調のナビは逆に、下のコンテンツを光学的に透かしながら、機能だけを上に足します。プロダクトの世界観が背景やヒーローに強く出ているサイトほど、この「世界観を損なわずに機能を乗せる」性質が効きます。
崩れる形不透明なヘッダーを置く
スクロール時に背景を押しのける壁として働きます。情報は提供しますが、その下にあるはずのヒーロービジュアルを物理的に隠します。
効く形ぼかして透かす
下のコンテンツを光学的に透かしながら、機能だけを上に足せます。世界観が背景に強く出ているサイトほど、この性質が効きます。
カプセルが生む「浮遊」
ナビ全体を角丸のカプセル型にすると、画面端に張り付いた「バー」ではなく、コンテンツの上を漂う「オブジェクト」に見えます。この浮遊感がすりガラスの透過性と組み合わさって軽やかさを生みます。角ばったフルワイドのヘッダーより、はるかに圧迫感が少なくなります。
仕上げの判断軸
backdrop-filter はぼかし18px＋彩度160%程度が基準。彩度を少し上げると背景がわずかに鮮やかに透け、ガラスの奥行きが出ます。上辺に1pxの白ハイライトを入れると縁が立体的に。
blur 18pxぼかしの基準値。強すぎると下の内容が消える
彩度 160%少し上げると背景が鮮やかに透け、ガラスの奥行きが出る
1px上辺の白ハイライト。縁が立体的に見える
配置は中央にリンク・右側に認証系という業界標準に従い、モバイルでは中央を畳んでバーガーに。最大の弱点はコントラストで、透過パネルの上の文字は背景の明暗に左右されるため、十分な下地と実測でのコントラスト確保が必須です。
ナビゲーションの構成要素
aria-current を併記します。使いどころ
- モダンなSaaSやプロダクトのマーケティングサイトで、古びた印象のヘッダーを避けたいとき
- ヒーロー背景やセクション背景の色味を活かしつつ、ヘッダーで邪魔したくないとき
- スクロール中にヘッダーの情報量は増やさず、存在感だけ保ちたいとき
このデザインの分類
背景と狙いどころ
よくある質問
Safariで透過が濁って見える場合は？
backdrop-filter は Safari で `-webkit-backdrop-filter` のプレフィックスが必要です(このプロンプトには含まれています)。iOS Safari では GPU 負荷を考慮してぼかし半径を 12〜16px 程度に抑えると安定します。
アクセシビリティで注意すべき点は？
背景が派手な場合、透過ナビ上のテキストコントラストが落ちがちです。最小 4.5:1 を担保するために、ナビ背景の不透明度は 0.5 以上を維持してください。focus-visible のアウトラインは必ず残します。
backdrop-filter 非対応ブラウザでは？
古い Firefox など一部ブラウザでは、半透明の白ナビにフォールバックします。読みづらくはならないので致命的ではありませんが、重要な情報をヘッダー透過部分に入れすぎない設計にすると安心です。
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
星座図・天体図風のサイトナビゲーション
夜空の星座と天体観測カタログを再構築したサイトナビゲーション。各ページを「恒星」、カテゴリを「星座」として配置し、現在地を北極星（Polaris）の脈動で示す、神秘的で詩的な尖った設計。
東京メトロ路線図風のサイトナビゲーション
東京メトロ・大江戸線などの路線図グラフィックを再構築したサイトナビゲーション。各カテゴリを「路線」、各ページを「駅」として見立て、駅ナンバリングや路線記号で迷わせない尖った設計。
寒色グラデーションのAIツール機能紹介
紺の地に水色から藍色へのグラデーションを重ねた、AI議事録ツールの機能紹介セクション。見出しの一部だけを文字の幅で塗り、大きなカード1枚と小さなカード3枚で「何がどれだけ減るか」を数字と帯の長さで見せる。