ホームページのヘッダーは、ページ上部に表示される共通エリアです。ロゴやメニュー、お問い合わせ・予約ボタンなどを置き、訪問者が「どのサイトにいるか」「次にどこへ進めばよいか」をすぐ判断できるようにします。
大切なのは、情報をたくさん載せることではありません。ロゴ・主要な移動先・最も重要な行動を優先し、パソコンでもスマートフォンでも迷わず使える状態にすることです。
30秒でわかる結論
30秒でわかる結論
- ヘッダーの基本は「ロゴ・主要メニュー・重要CTA」の3つ
- 会社サイトはサービス・料金・会社情報・お問い合わせなどを優先する
- 店舗サイトはメニュー・営業時間・アクセス・予約などを優先する
- メニューは増やしすぎず、小規模サイトなら5〜7項目程度から整理すると考えやすい
- 電話番号は電話対応するサイトだけ載せ、必要なら受付時間も併記する
- スマホではロゴ・メニューボタン・重要CTAを優先し、情報を詰め込みすぎない
- 最終判断は「訪問者が次の行動へ迷わず進めるか」で決める
ホームページのヘッダーとは？
ヘッダーとは、Webページ上部に表示される共通エリアです。トップページだけでなく、サービスページ・会社概要・お問い合わせなど、複数ページで共通表示されることが多い部分です。
ヘッダーによく載せる項目
- ロゴ・サイト名
- グローバルナビゲーション
- お問い合わせ・予約などのCTA
- 必要に応じて電話番号
- 必要に応じて検索
- 会員サイトならログイン導線
ヘッダーの役割
ヘッダーは単なる飾りではありません。サイトの正体を伝え、主要ページと次の行動へ案内するナビゲーションとして設計します。
ヘッダーに最低限載せたい3項目
小規模な会社サイトや店舗サイトなら、まず次の3項目から考えれば十分です。
| 項目 | 役割 |
|---|---|
| ロゴ・サイト名 | どのサイトか伝える |
| 主要メニュー | 重要ページへ案内する |
| CTA | 問い合わせ・予約など次の行動へ進める |
この3つが整理されていれば、訪問者は「ここは何のサイトか」「どこを見ればよいか」「必要ならどう連絡するか」を判断しやすくなります。
1．ロゴ・サイト名
ヘッダーには、会社ロゴ・店舗ロゴ・サイト名などを置きます。一般的には左側や中央に配置し、トップページへ戻る導線として使います。
ロゴで確認すること
- 会社名・店舗名・サイト名が分かる
- スマホでも小さすぎない
- 背景と同化していない
- クリックするとトップページへ戻れる
- 横幅が大きすぎてメニューを圧迫しない
ロゴ画像だけで読みにくくならないようにする
細かい文字を含む横長ロゴは、スマートフォンでは会社名を読みにくくなることがあります。必要ならロゴの簡略版やサイト名のテキスト表示も検討してください。
2．グローバルナビゲーション
グローバルナビゲーションは、サイト内の主要ページへ移動するための共通メニューです。
すべての固定ページをヘッダーへ並べる必要はありません。訪問者がよく使うページ、またはサイト運営者が見てもらいたい主要ページだけを選びます。
会社サイトの例
- サービス
- 料金
- 導入事例・実績
- 会社概要
- よくある質問
- お問い合わせ
既存のWordPressメニュー記事では、初心者は必要なページだけを見せ、最初は5〜7項目程度から整理する考え方を採用しています。ヘッダーでも、項目が多くなりすぎる場合はフッターや下層メニューへ分けます。
全部載せなくてよい
プライバシーポリシー、利用規約、採用情報などは重要でも、必ずヘッダーへ置く必要はありません。補助的なリンクはフッターへ回す方法があります。
3．お問い合わせ・予約などのCTA
CTAは「Call To Action」の略で、訪問者に取ってほしい行動へ案内するボタンやリンクです。
CTAの例
- お問い合わせ
- 無料相談
- 資料請求
- 見積もり依頼
- 来店予約
- Web予約
ヘッダーにはCTAを何個も並べず、サイトで最も重要な行動を優先します。
CTAはサイトの目的で決める
会社案内サイトならお問い合わせ、飲食店や美容室なら予約、資料を検討材料にしてもらうサービスなら資料請求など、最も重要な行動を1つ、必要でも2つ程度に絞ると分かりやすくなります。
電話番号は載せるべき？
電話での問い合わせ・予約を受け付けている会社や店舗なら、電話番号をヘッダーへ載せる価値があります。
ただし、番号だけではなく、必要に応じて受付時間も併記します。
表示例
0120-000-000
受付 平日10:00〜17:00
電話対応できない時間が多いなら目立たせすぎない
大きく電話番号を表示すると、訪問者は「今すぐ電話できる」と受け取ります。実際の対応体制と表示内容を合わせてください。
営業時間・受付時間は載せる？
店舗サイトでは、営業時間や定休日をヘッダーへ載せる方法があります。ただし、情報量が増えるため、すべての店舗に必須ではありません。
飲食店・美容室
優先度：高め
「今営業しているか」が来店判断につながるため、営業時間への導線を目立たせます。
一般的な会社サイト
優先度：中
電話番号を載せるなら、受付時間を近くに表示すると分かりやすくなります。
Web完結サービス
優先度：低
24時間フォームで受け付けるなら、営業時間をヘッダーに常時表示する必要はありません。
検索ボックスは必要？
ページ数が少ない会社サイトでは、検索機能を無理に置く必要はありません。
一方、記事数が多いメディア、商品数が多いECサイト、マニュアル・FAQが多いサイトでは、検索が役立ちます。
| サイト | 検索の優先度 |
|---|---|
| 5〜10ページ程度の会社サイト | 低い |
| 記事が多いブログ・メディア | 高い |
| 商品数が多いEC | 高い |
| FAQ・マニュアルサイト | 高い |
ページ数が少ないならメニューを分かりやすくする方が先
検索を追加するより、主要ページへ1〜2回の操作で移動できるメニュー構成にした方が分かりやすいサイトもあります。
SNSアイコンは載せる？
SNSを継続的に運用し、訪問者にも見てもらいたい場合は掲載できます。ただし、主要CTAより目立たせる必要はありません。
載せる前に確認
- 現在も更新しているSNSか
- 公式アカウントだと分かるか
- 外部SNSへ移動させる必要があるか
- お問い合わせ・予約導線を邪魔しないか
何年も更新していないSNSへ誘導すると、かえって運営が止まっている印象を与える場合があります。
ログイン・マイページは必要なサイトだけ載せる
会員サイト、ECサイト、SaaSなどでは「ログイン」「マイページ」をヘッダーへ置くことがあります。
一方、一般的な会社案内サイトや店舗サイトでは不要です。機能がないのに、形だけ似たリンクを増やす必要はありません。
ヘッダーはサイトごとに変わる
すべてのホームページに共通する必須項目は多くありません。サイトの目的と訪問者の行動に合わせて選びます。
会社サイトのヘッダー例
小規模会社サイト
- ロゴ
- サービス
- 料金
- 実績
- 会社概要
- FAQ
- お問い合わせCTA
会社サイトでは、何を提供している会社かを理解できるページと、信頼確認・問い合わせに進むページを優先します。
店舗サイトのヘッダー例
飲食店・美容室など
- 店舗ロゴ
- メニュー・サービス
- 料金
- 営業時間
- アクセス
- 予約CTA
店舗サイトは「何の店か」だけでなく、「いつ行けるか」「どこにあるか」「どう予約するか」へすぐ進めることが重要です。
スマホのヘッダーで優先するもの
スマートフォンは横幅が狭いため、PC版と同じ情報を横一列に並べることはできません。
スマホで優先する項目
- ロゴ
- メニューボタン
- お問い合わせ・予約など重要CTA
- 必要なら電話ボタン
その他のメニューは、ハンバーガーメニュー内へまとめる方法があります。
アイコンだけにしすぎない
意味を判断しにくいアイコンには、「メニュー」「予約」などの文字を添えると分かりやすくなります。
固定ヘッダーは使うべき？
スクロールしても画面上部へ残る固定ヘッダーは、長いページでメニューやCTAへ戻りやすいメリットがあります。
| メリット | 注意点 |
|---|---|
| いつでもメニューを開ける | 本文表示領域が狭くなる |
| CTAへ進みやすい | 目立ちすぎると邪魔になる |
| 長いページで便利 | スマホでは高さの影響が大きい |
固定するなら高さを抑える
PC・スマホとも、本文を邪魔しない高さにします。固定ヘッダー自体がSEO順位を上げる機能ではないため、使いやすさを基準に判断してください。
ヘッダーとフッターの役割を分ける
| 場所 | 優先する情報 |
|---|---|
| ヘッダー | 主要ページ・最重要CTA |
| フッター | 補助リンク・法的ページ・詳細情報 |
お問い合わせや会社概要などは両方に置いても構いませんが、すべてのリンクを完全に重複させる必要はありません。
ヘッダーは優先順位を見せる場所
「重要なページは何か」が分かるように絞り、その他のページをフッターやサイトマップへ回すと整理しやすくなります。
ヘッダーで避けたい失敗
よくある失敗
- メニュー項目が多すぎる
- CTAが3〜4個並んで優先順位が分からない
- ロゴが大きすぎて本文開始位置が下がる
- 電話番号だけ載せて受付時間が分からない
- スマホで文字やボタンが重なる
- 固定ヘッダーが画面の大部分を占める
- 使っていないSNSへのリンクを残す
「載せられるか」ではなく、「訪問者が迷わないか」で削る判断も必要です。
公開前に確認すること
ヘッダーチェックリスト
- ロゴを押すとトップページへ戻れる
- 主要ページへ移動できる
- お問い合わせ・予約ボタンが正しく動く
- 電話番号のリンク先が正しい
- スマホでメニューを開閉できる
- メニューが画面外にはみ出していない
- 固定ヘッダーが本文を隠していない
- 不要なリンク・古い情報が残っていない
教科書判定
ヘッダーは「ロゴ＋主要導線＋最重要CTA」から作る
小規模な会社サイトなら、サービス・料金・実績・会社概要・FAQ・お問い合わせなどから重要なページだけを選びます。すべてのページを載せる必要はありません。
店舗サイトなら、営業時間・アクセス・予約の優先度が上がります。ブログやメディアなら主要カテゴリーや検索を優先します。
PCで見栄えを整えるだけでなく、スマートフォンで「メニューを開ける」「CTAを押せる」「本文を邪魔しない」状態になっているかまで確認してください。
FAQ
Q．ヘッダーのメニューは何個くらいがよいですか？
固定の正解はありません。小規模サイトなら5〜7項目程度から考えると整理しやすく、増える場合は親子メニューやフッターへ分けます。
Q．お問い合わせはヘッダーに必要ですか？
問い合わせ獲得が目的の会社サイトなら、ヘッダーへ置く価値があります。訪問者が問い合わせたいと思ったときにすぐ移動できるようにします。
Q．スマホでもPCと同じメニューを全部表示するべきですか？
いいえ。スマホは表示幅が狭いため、ロゴ・メニューボタン・重要CTAを優先し、その他をハンバーガーメニューへまとめる方法があります。
Q．固定ヘッダーはSEOに有利ですか？
固定ヘッダー自体で検索順位が上がると考える必要はありません。ナビゲーションやCTAへ移動しやすくなるかという使いやすさで判断してください。
Q．プライバシーポリシーもヘッダーに入れるべきですか？
必須ではありません。重要なページですが、利用規約などと同様にフッターへ配置し、ヘッダーは主要導線へ絞る方法があります。
まとめ
ヘッダーは情報を増やすより、主要導線を迷わず使える状態にする
- 基本はロゴ・主要メニュー・CTA
- 会社サイトはサービス・会社情報・お問い合わせを優先する
- 店舗サイトは営業時間・アクセス・予約を優先する
- 電話番号は必要に応じて受付時間とセットで掲載する
- 検索は記事数・商品数が多いサイトで検討する
- スマホでは情報を絞る
- 固定ヘッダーは高さを抑える
- 補助的なリンクはフッターへ回す
- 公開前にPC・スマホ両方で操作確認する
「フッターに何を載せる？必要な項目を解説」「会社ホームページのトップページ構成」「店舗ホームページのトップページ構成」「WordPressのメニューを作る方法｜初心者向け設定手順・項目数の目安」もあわせて確認してください。