こんにちは。株式会社GIG デジタルコミュニケーション事業部でプロデューサーをしているまつおです。

普段は、ブランディング支援やWebマーケティング支援を中心に、提案からプロジェクト進行まで幅広く担当しています。

Webサイトのリニューアルや新規制作では、デザインやコンテンツに注目が集まりがちですが、意外と見落とされやすいのが「ヘッダーの挙動」です。

ヘッダーは、どのページにも表示される重要な導線です。固定するのか、スクロール時に隠すのか、メニューをどう見せるのかによって、ユーザーの使いやすさは大きく変わります。

本記事では、代表的なヘッダーの挙動と、サイトの目的に合わせた選び方を紹介します。

まつお：デジタルコミュニケーション事業本部にてプロデューサーを担当。 ブランディング支援やWebマーケティング支援を中心に、セールスからプロジェクトマネジメントまで幅広く従事。

ヘッダーとグローバルナビゲーションとは

ヘッダーとは、Webサイトの上部に表示される共通エリアのことです。ヘッダー内に配置される主要メニューのことを、一般的にグローバルナビゲーションと呼びます。

ロゴやメニュー、検索窓、CTA（お問い合わせ・資料請求など）が配置され、ユーザーが主要ページへ移動するための導線になります。

ヘッダーには、主に以下の3つの役割があります。

・回遊導線：主要ページへ移動しやすくする
・ブランド表現：ロゴや配色でサイトの印象を伝える
・サイト構造の提示：ユーザーや検索エンジンに主要カテゴリを伝える

これらの役割を、限られたスペースの中でどう見せるか。その設計に関わるのが、ヘッダーの挙動です。

（参考：情報設計からWebサイトの導線を考えたい方はこちら）

代表的なヘッダーの挙動8パターン

ヘッダーは、常に見えているかどうかだけでもユーザーの動きが変わります。

固定ヘッダーはメニューやCTAにアクセスしやすい一方で、画面の表示領域を圧迫することがあります。反対に、スクロールで隠れるヘッダーはコンテンツに集中しやすい一方で、別ページへ移動するときに手間がかかる場合があります。

つまり、ヘッダーの挙動は見た目だけでなく、回遊性・読みやすさ・問い合わせなどのコンバージョンにも関わる設計要素です。

（関連：Webサイト設計に必要なワイヤーフレームと情報設計はこちら）

ここからは、代表的なヘッダーの挙動を8パターンに分けて紹介します。

パターン1：静的ヘッダー（固定なし）

ページ最上部に配置され、スクロールすると画面外へ消えるヘッダーです。

コンテンツに集中してもらいやすい一方で、別ページへ移動するには上部まで戻る必要があります。長文記事やブランドサイトなど、読み物やビジュアルを重視するサイトに向いています。

※PCのみ動作対象

パターン2：上部固定ヘッダー（fixed）

常に画面上部に固定されるヘッダーです。

どの位置からでもメニューやCTAにアクセスできるため、回遊や問い合わせにつなげたいサイトに向いています。一方で、画面の表示領域を圧迫しやすいため、特にモバイルでは高さに注意が必要です。

※PCのみ動作対象

パターン3：スティッキーヘッダー（position: sticky）

最初は通常の位置に表示され、スクロール後に固定表示へ切り替わるヘッダーです。

ファーストビューでは自然に見せつつ、必要なタイミングでナビゲーションを使いやすくできます。

※PCのみ動作対象

パターン4：スクロール方向追従型（下で隠れる／上で再表示）

下にスクロールすると隠れ、上にスクロールすると再表示されるヘッダーです。

記事を読んでいる間は画面を広く使え、メニューに戻りたいときだけ表示できます。メディアサイトやスマホサイトなど、長いコンテンツを読ませたいサイトに向いています。

（関連：動きのあるWebサイトの実装方法はこちら）

※PCのみ動作対象

パターン5：縮小ヘッダー（スクロールで高さが縮む）

スクロールに合わせて、ヘッダーの高さやロゴサイズが小さくなるパターンです。

ファーストビューではブランドの印象を強く見せ、スクロール後はコンパクトに表示できます。レイアウトシフトが起きないよう、実装時には高さの変化に注意が必要です。

※PCのみ動作対象

パターン6：透明→不透明切替型（ヒーロー上で透過）

ヒーローエリアでは透明、スクロール後は白背景などに切り替わるヘッダーです。

写真や動画を大きく見せたいブランドサイト、観光、不動産、ファッション系サイトなどに向いています。背景によって文字が読みにくくならないよう、色の切り替え設計が重要です。

※PCのみ動作対象

パターン7：メガメニュー展開型

メニュー項目にホバーすると、複数のリンクをまとめて表示するパターンです。

サービス数やカテゴリ数が多いサイトでも、目的のページへ移動しやすくなります。ECサイトや大規模ポータル、ページ数の多いコーポレートサイトに向いています。

※PCのみ動作対象

パターン8：ハンバーガーメニュー型

三本線のアイコンをタップすると、メニューが展開される形式です。

限られた画面幅でもメニューを整理して表示できるため、スマホサイトでよく使われます。ただし、メニューが隠れる分、重要な導線は見つけやすく設計する必要があります。

（関連：UIデザインの基本ルールを知りたい方はこちら） 

※PCのみ動作対象

【事例紹介】目的別・ヘッダーの挙動の選び方

実際のWebサイトでは、デバイスやページの役割に応じて複数の挙動を組み合わせることが一般的です。

ここでは、弊社が手掛けた実績サイトをもとに、組み合わせ例をご紹介します。

コーポレートサイト／IRサイト - ミクシィ様

挙動仕様：スクロール方向追従型 + メガメニュー + ハンバーガーメニュー
サイトURL：https://mixi.co.jp/
弊社実績紹介ページ：https://giginc.co.jp/works/mixi

ミクシィ様のサイトでは、スクロール方向に合わせてヘッダーの表示・非表示が切り替わります。コンテンツ閲覧中は視界を邪魔せず、上に戻ったタイミングでメニューにアクセスできます。

メガメニューやハンバーガーメニューも組み合わせ、ページ数が多いサイトでも目的の情報にたどり着きやすい設計にしています。

採用サイト - ボルテックス様

挙動仕様：上部固定ヘッダー + 透明→不透明切替型 + ハンバーガーメニュー
サイトURL：https://recruit.vortex-net.com/
弊社実績紹介ページ：https://giginc.co.jp/blog/casestudy/vortex

ボルテックス様の採用サイトでは、ファーストビューでヘッダーを透明にし、大型ビジュアルの印象を活かしています。スクロール後は白背景に切り替え、メニューの視認性を保ちます。

採用検討に必要な情報へ常にアクセスしやすくすることで、求職者がサイト内をスムーズに読み進められる設計です。

メディアサイト - タイミー様

挙動仕様：透明→不透明切替型 + スクロール方向追従
サイトURL：https://lab.timee.co.jp/
弊社実績紹介ページ：https://giginc.co.jp/blog/casestudy/timee

タイミーラボでは、記事を読んでいる間はヘッダーを隠し、上にスクロールしたときに再表示される設計を採用しています。

本文への集中を妨げず、別の記事やカテゴリを見たくなったタイミングでナビゲーションに戻れる点が特徴です。

ブランドサイト - パイロットコーポレーション様 PILABOT

挙動仕様：上部固定ヘッダー
サイトURL：https://www.pilabot.jp/
弊社実績紹介ページ：https://giginc.co.jp/blog/casestudy/pilot-corporation

PILABOTでは、シンプルな上部固定ヘッダーを採用しています。

余計な動きを加えず、ブランドの世界観を邪魔しないシンプルな見た目にしています。「ニュース」「プロジェクト」「ブログ」などの主要カテゴリへいつでも移動できる設計です。

ブランドサイト - アイダ様 KAGURA

挙動仕様：スティッキーヘッダー + スクロール方向追従型 + ハンバーガーメニュー
サイトURL：https://www.kagura.co.jp/
弊社実績紹介ページ：https://giginc.co.jp/works/aida-kagura

KAGURAでは、無垢材家具のビジュアルをしっかり見せながら、必要なタイミングでメニューに戻れるヘッダー設計を採用しています。

スクロール後は固定表示に切り替わり、下スクロール時には隠れ、上スクロール時に再表示されます。ブランドの世界観を損なわず、製品情報や店舗情報への導線も確保しています。

まとめ

ヘッダーは、単なる共通パーツではありません。

固定するのか、スクロールに合わせて隠すのか、メニューをどう展開するのかによって、ユーザーの回遊しやすさや情報の探しやすさに影響します。

今回紹介したパターンを参考に、自社サイトの目的やユーザー行動に合ったヘッダー設計を検討してみてください。

株式会社GIGは、コーポレートサイト・採用サイト・ステークホルダー向けサイトのリニューアルや、企業理解を踏まえた情報設計、サイトリリース後の運用伴走支援がそろったデジタルコミュニケーション企業です。

・制作実績1,500社以上
・サービス利用継続率98%以上
・「Web制作会社」Google検索 1位獲得率55.8％
・AWS公式Technology Partner認定
・ASPICクラウドアワード先進技術賞受賞

ブランド表現と更新しやすさを両立したサイト設計と、公開後も改善し続ける伴走支援が強みです。

株式会社GIGは、お客様と丁寧で密なコミュニケーションを重ねてきたと自負しております。「まず話だけでも」という段階でも、ぜひお問合せ（https://giginc.co.jp/contact）ください。専任の担当者が、お客様の状況にあわせた最適な提案をいたします。

■株式会社GIG
・お問い合わせはこちら
https://giginc.co.jp/contact
・制作実績はこちら
https://giginc.co.jp/works
・事例インタビューはこちら
https://giginc.co.jp/blog/casestudy
・求人応募はこちら（GIG採用サイト）
https://recruit.giginc.co.jp/
・求人応募はこちら（Wantedly）　
https://www.wantedly.com/companies/giginc

まつお

デジタルコミュニケーション事業本部にてプロデューサーを担当。 ブランディング支援やWebマーケティング支援を中心に、セールスからプロジェクトマネジメントまで幅広く従事。