SvelteKit × Tailwind CSS で、グラスモーフィズムのスティッキーヘッダーを作った話

2025-12-04

Discord Nitro のヘッダーがかっこいい

Discord の Nitro（有料プラン）の案内が来ていたのでちらっと見てみたら、そこにグラスモーフィズム（Glassmorphism）の固定ヘッダーがあって「やっぱかっこいいな…」と思ってしまった。

うちにも固定ヘッダーがある。スクロールしたら上から出てくるヘッダー。スティッキーヘッダー。でもこれグラスデザインじゃないよね。だからこれをかっこよくしたくなった。

グラスモーフィズム（Glassmorphism）は、背景をぼかして、半透明の背景色を重ねることで、ガラスのような見た目を作るデザインパターンです。最近のモダンな Web サイトでよく見かけるデザインですね。

実は、スティッキーのグラスデザインヘッダーは前にも作ったことがあるけど、今回の Web サイトでは実装してなかったんだよね。なんでだったかなぁ。忘れてただけなんかなぁ。

グラスモーフィズムを実現するには、主に以下の要素が必要です：

背景が明るいときに見えにくくならない工夫もした。背景色は少しだけ暗くなるようにして、bg-slate-900/10 という半透明の背景色を設定しました。

ヘッダーの高さは微調整した。パディングを p-3 に設定して、適切な高さにしました。

SVG のロゴにも文字にも影をつけた。drop-shadow というクラスを使って、ロゴと文字に影を追加しました。これで、背景が明るくても見やすくなります。

ぼかしの加減も微調整した。backdrop-blur の強さを調整して、ちょうどいい感じのぼかし具合にしました。

ぼかしの加減とか、どれぐらい暗くするとか、すごい微妙で難しい。好みも分かれるところだよね。何度も調整して、ようやく「これかな？」という感じになりました。

ヘッダー下部の境界にも、うすーくラインを引いたり工夫してる。border-b border-white/10 というクラスで、うすい白いラインを追加しました。これで、ヘッダーとコンテンツの境界が明確になります。

ロゴは SVG で作っているんだけど、アウトラインがなんかカッコ悪いな。よし、表示するかしないかは指定できるようにしよう。で、アウトラインはカッコ悪かったので影をつけるようにしたらいい感じにデザインがシャキッとした。

LogoIcon コンポーネントに radius というプロパティを追加して、アウトラインの表示/非表示を制御できるようにしました。でも、結局アウトラインは使わずに、drop-shadow で影をつけることにしました。これで、ロゴがよりシャープに見えるようになりました。

まだヘッダーデザインは納得がいっていないので、これからもバージョンアップしていくと思う。

デザインって、完璧にしようとするとキリがないんだよね。でも、その「もっと良くしたい」という気持ちが、サイトを成長させていくんだと思います。