【Next.js】透明な固定ヘッダーの作り方を解説
Published: September 8, 2026 · 11 min read
Next.js のファーストビューをヘッダーで潰さない、透明な固定ヘッダーの作り方を解説します。最初は透明、スクロールで色が付く、左右に余白のあるフローティングの3通り。古い横帯に見える理由と、モバイルメニューの失敗もまとめます。
先に結論：今っぽいヘッダーは「場所を取らない」
要約すると、ヘッダーを今っぽく見せるには、リンクの数より先に、ファーストビューをどれだけ残すかを決めます。画面上端に太い帯が常にあると、ヒーローもギャラリーも一段古く見えます。背景が透ける、スクロールしてから色が付く、島のように浮かぶ。このどれかが見えると、同じロゴでもページの印象が変わります。
作り方は3つあります。CSS だけで透明の sticky にする。スクロール量で背景と文字色を切り替える。すでに完成しているフローティングヘッダーを自分のページに載せる。メガメニューのライブラリから入る必要はありません。
この記事を読み終える頃には、ファーストビューを邪魔しないヘッダーを1本出せるようになります。
古い横帯に見える3つの理由
ロゴ左、リンク中央、ボタン右。悪い配置ではありません。ただ、高さ72pxの不透明な白（または黒）が最初から乗っていると、2008年のコーポレートサイトと同じ顔になります。
1つ目は、ヒーローの写真や動きを、帯が最初から切ることです。入場アニメーションを付けても、上端が常に隠れます。
2つ目は、スクロールしても状態が変わらないことです。ページの途中でも、開いた瞬間と同じ帯だと、読んでいる場所の手がかりがありません。
3つ目は、リンクを詰めすぎることです。7項目のナビは情報量ではなく、迷いです。今っぽいヘッダーは、項目を減らして、残りを「もっと」に逃がします。
完成イメージ：この記事で作るヘッダー
目指す見た目は次のとおりです。
ページを開いたときは、ヘッダーの背景が透明。ロゴとリンクは、ヒーローの上に乗って読める。少しスクロールすると、背景が薄く色付き、下に1pxの境界が付く。さらに進むと、帯が画面幅いっぱいではなく、左右に余白のあるフローティングになるか、そのまま細いバーで残る。
モバイルは、3本線で全画面メニューを被せない方が扱いやすいです。下から出るシート、または右から出る短いリスト。項目は5つまで。ドキュメントの多階層ナビは扱いません。まずは LP の上端です。
作り方は3つある
同じ完成形でも、手数は分かれます。
方法1は CSS の sticky と半透明です。依存は増えません。スクロール量に応じた切替はできません。
方法2はスクロール位置でクラスを変えます。透明 → 色付き、を自分で書けます。"use client" が必要です。
方法3は、フローティングやブランドバーまで組んであるヘッダーを自分のアプリに載せる方法です。余白とホバーを一から決めなくて済みます。リンクとロゴの差し替えが仕事になります。多階層のドキュメントナビ、ログイン後のアプリシェルには向きません。
迷ったら、まず方法1で透明の sticky を置き、ヒーローが見えてから方法2か3に進むのが早いです。
方法1：CSS だけで透明の sticky にする
サーバーコンポーネントのまま始められます。position: sticky と背景の透明度だけです。ヒーローの写真が、リンクの後ろに透けます。
ポイントは最初から不透明にしないこと
bg-white を最初から置くと、方法の選択以前に帯になります。まずは背景を透明にし、文字色だけヒーローに合わせて白（または黒）にします。読みにくければ、文字のうしろにごく薄いグラデーションを足します。ヘッダー全体を塗らない。
export function SiteHeader() {
return (
<header className="sticky top-0 z-50 px-6 py-4">
<div className="flex items-center justify-between">
<a href="/" className="text-sm font-semibold tracking-wide">
NORTHLINE
</a>
<nav className="hidden gap-8 text-sm md:flex">
<a href="#work">Work</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
</div>
</header>
);
}この段階で足らないもの
方法1は、スクロールしても透明のままです。ギャラリーや本文の上に白い文字が乗ると、途中から読めなくなります。本文に入ったら背景を付けるなら、方法2です。
方法2：スクロールしたら、色が付く
ページ先頭では透明、一定量スクロールしたら背景と文字色を切り替えます。Next.js では、ヘッダーだけ "use client" にします。layout.tsx 全体をクライアントコンポーネントにする必要はありません。
弱い指定と強い指定
弱い例は、scroll イベントのたびに style を直接書き換えることです。ブレます。
強い例は、閾値を超えたかどうかだけ state に持ち、見た目は Tailwind のクラスで切り替えることです。閾値は 8〜24px で足ります。ヒーローの高さまで待ったは、切替が遅すぎて「壊れた透明」に見えます。
"use client";
import { useEffect, useState } from "react";
export function ScrollHeader() {
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 16);
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
return (
<header className="sticky top-0 z-50 px-6 py-4">
<div
className={
scrolled
? "rounded-full bg-white/90 px-5 py-2 shadow-sm backdrop-blur"
: "px-5 py-2"
}
>
<a href="/" className="text-sm font-semibold">
NORTHLINE
</a>
</div>
</header>
);
}フローティングにするなら、左右に余白を残す
画面幅いっぱいのバーを、途中から丸くするだけでも今っぽく見えます。ただし左右の余白が 0 のままだと、カプセルになりません。px-4 以上を header 側に残し、中の島だけ背景を付けます。
下方向のスクロールでヘッダーを隠す動きは、ギャラリーのピンと喧嘩しやすいです。作品が切り替わるページでは、隠さず薄く残す方が安全です。
方法3：完成しているフローティングヘッダーを載せる
中央にナビ、右に小さな CTA、背景がガラス、項目のホバーが島の中だけで動く。こうした塊は、方法2のクラス切替だけでは半日かかることがあります。
その場合は、ブラウザで実際のヘッダーを見てから、React と Tailwind でできたナビを自分の Next.js に載せる方法があります。DesignLayer のカタログは、その置き場です。閲覧にカードは不要です。https://design-layer.com/components
向き不向きを先に言います。LP、ポートフォリオ、製品の紹介ページに向きます。ドキュメントの左ナビ、ログイン後のアプリバー、多階層のメガメニューには向きません。そこは方法1の素のリンクの方が速いです。
載せるときの仕事は3つです。ライブでスクロールして「帯か、島か」を決める。ソースを自分のリポジトリに置く。ロゴ・リンク・CTA だけ差し替える。影と角丸を一から作る必要はありません。
無料のソースコピーは日本時間で1日1回です。今日ヘッダー1本、で足ります。ヒーローは https://design-layer.com/articles/nextjs-animated-hero-section-guide 、ギャラリーは https://design-layer.com/articles/nextjs-scroll-gallery-guide です。3つとも強く動かすと、上端が忙しいです。ヘッダーは静かに、下のセクションで動かす方が安定します。
公開前チェックリスト
動きが付いたあとに見るのは、次の5点です。
1. コントラスト。透明ヘッダーの白い文字が、白いヒーローの上で消えていないか。
2. フォーカスリング。キーボードでリンクを辿ったとき、輪郭が見えるか。
3. モバイルのタップ領域。高さ 44px 以上。ロゴとメニューボタンが近すぎないか。
4. sticky の下に隠れる見出し。ページ内リンクで #about へ飛んだとき、見出しがヘッダーに被らないか。scroll-mt を付けます。
5. prefers-reduced-motion。背景の切替は色だけで行い、大きくスライドさせない。
よくある失敗
失敗1：backdrop-blur を強くしすぎる。10px を超えると、スマホでヘッダーだけ重くなります。6〜8px で足ります。
失敗2：スクロールでロゴの形まで変える。読んでいる途中でブランドが伸び縮みすると、今っぽさより広告感が出ます。変えるのは背景と文字色だけです。
失敗3：ハンバーガーの中に、デスクトップと同じ7リンクと SNS と言語切替を全部入れる。モバイルは、Work / About / Contact の3つと、電話またはメール1つで足りることが多いです。
よくある質問
実装で繰り返し出る質問です。
Next.js で今っぽいヘッダーを作るには何が必要ですか？
最初は sticky と透明な背景だけで足ります。スクロールして色を付けるなら、ヘッダー用のクライアントコンポーネントが1つ。フローティングの完成形が欲しいなら、完成セクションです。
固定ヘッダーと sticky の違いは？
fixed は文書の流れから外れ、ヒーローの上に重なります。sticky は流れの中にあり、指定位置まで来たら貼り付きます。LP の上端なら、どちらでも見た目は近いです。ページ内リンクのズレは、fixed の方が起きやすいです。
サーバーコンポーネントのままヘッダーを置けますか？
透明の sticky だけなら可能です。scrollY を読むなら、ヘッダーのファイルだけ "use client" にします。
スクロールでヘッダーを隠すべきですか？
長い記事や SNS 型のフィードでは有効です。ピン留めギャラリーの上では、隠れると「今何枚目か」が分かりにくくなります。LP では薄く残す方が無難です。
フローティングとフル幅バー、どちらが今っぽいですか？
左右に余白のあるフローティングの方が、2026年の LP では多く見えます。情報量が多い BtoB や、常に検索したいサイトは、フル幅バーの方が迷いません。見た目の新しさより、項目数で選んでください。
shadcn/ui の NavigationMenu では足りませんか？
多階層のメニューには向きます。透明からフローティングへの見た目は、別途クラスを足す必要があります。素の部品と、完成した島型は役割が違います。
アクセシビリティはどうしますか？
nav に名前を付ける。モバイルメニューは開閉を aria-expanded で伝える。開いているとき、背景のスクロールを止める。Esc で閉じる。
既存の layout.tsx のどこに置けばよいですか？
body 直下、page の外です。各ページのヒーローより前に置かないと、sticky がページの途中から始まります。ヘッダーの高さ分、ヒーローに上余白を足します。