1. ホーム
  2. 用語辞典
  3. ヘッダー

ヘッダー

読み: へっだー 英語: Header

ヘッダーとは、Webページの最上部に表示される領域のことです。ロゴ、ナビゲーションメニュー、検索ボックスなど、サイト全体で共通する要素が配置されます。

ヘッダーとは

ヘッダー（Header）は、Webサイトの最上部に位置する領域で、すべてのページで共通して表示されるパーツです。訪問者が最初に目にする場所であり、サイトの第一印象を決める重要な要素です。

💡 ヘッダーの主な構成要素
  • ロゴ：サイトの顔となるブランドロゴやタイトル
  • ナビゲーションメニュー：主要ページへのリンク
  • 検索ボックス：サイト内検索機能
  • お問い合わせボタン：CTAボタン
  • SNSリンク：ソーシャルメディアへのリンク
  • 言語切替：多言語サイトの場合

ヘッダーの役割

1. サイトの第一印象を作る

訪問者が最初に目にする場所であり、サイトの信頼性やプロフェッショナル感を伝えます。

2. ナビゲーションの提供

主要ページへのリンクを配置することで、訪問者がサイト内を簡単に移動できるようにします。

3. ブランドアイデンティティの表示

ロゴやサイト名を配置し、どのページにいてもサイトを識別できるようにします。

4. ユーザー体験の向上

検索機能やお問い合わせボタンなど、重要な機能に素早くアクセスできるようにします。

WordPressでヘッダーをカスタマイズする方法

方法1：カスタマイザーを使う

  1. 「外観」→「カスタマイズ」を開きます。
  2. 「ヘッダー画像」または「サイト基本情報」を選択します。
  3. ロゴをアップロードしたり、サイトタイトルを編集できます。
  4. 変更をプレビューしながら調整します。
  5. 「公開」ボタンをクリックして保存します。

方法2：メニューを編集

  1. 「外観」→「メニュー」を開きます。
  2. 新しいメニューを作成するか、既存のメニューを編集します。
  3. 固定ページやカスタムリンクをメニューに追加します。
  4. ドラッグ&ドロップで順序を調整します。
  5. 「メニューの位置」で「ヘッダーメニュー」を選択します。
  6. 「メニューを保存」をクリックします。

方法3：テーマのヘッダー設定

テーマによっては、独自のヘッダー設定画面があります。「外観」→「テーマ設定」または「カスタマイズ」で確認しましょう。

効果的なヘッダーデザインのポイント

✅ 良いヘッダーの条件
  • シンプルで分かりやすい：情報を詰め込みすぎない
  • レスポンシブ対応：スマホでも見やすい
  • 高速読み込み：重い画像を避ける
  • 視認性が高い：コントラストがしっかりしている
  • 一貫性がある：全ページで同じデザイン
  • ブランドを反映：ロゴや色使いが統一されている

スマホ対応（ハンバーガーメニュー）

スマートフォンでは、ヘッダーのナビゲーションメニューをハンバーガーメニュー（三本線のアイコン）に折りたたむのが一般的です。ほとんどのモダンなWordPressテーマは、自動的にレスポンシブ対応しています。

固定ヘッダー（スティッキーヘッダー）

固定ヘッダーとは、ページをスクロールしても常に画面上部に表示され続けるヘッダーのことです。

メリット

  • どこにいてもメニューにアクセスできる
  • ユーザビリティが向上する
  • ブランドを常に表示できる

デメリット

  • コンテンツの表示領域が減る
  • スマホでは特に邪魔になることがある
💡 固定ヘッダーの設定方法
多くのWordPressテーマでは、カスタマイザーやテーマ設定から固定ヘッダーを有効化できます。テーマによっては、追加CSSで実装する必要があります。

よくある質問（FAQ）

Q1. ヘッダーのロゴを変更するには？
「外観」→「カスタマイズ」→「サイト基本情報」から、ロゴ画像をアップロードできます。推奨サイズは横250〜400px程度です。テーマによって推奨サイズが異なるため、テーマのドキュメントを確認しましょう。
Q2. ヘッダーメニューの項目を増やせますか？
はい、できます。「外観」→「メニュー」から、メニュー項目を自由に追加・削除できます。ただし、項目が多すぎるとデザインが崩れたり、分かりにくくなるため、5〜7項目程度が適切です。
Q3. ヘッダーだけ別のページで変更できますか？
標準機能では難しいですが、プラグイン（Elementor、Beaver Builderなど）を使うことで、ページごとに異なるヘッダーを設定できます。また、テーマによっては、固定ページごとにヘッダーを変更する機能があります。
Q4. ヘッダーが表示されません。
テーマファイル（header.php）が破損しているか、テーマのヘッダー設定で非表示になっている可能性があります。「外観」→「カスタマイズ」でヘッダーの表示設定を確認してください。解決しない場合は、テーマを一度デフォルトテーマに変更して確認しましょう。
Q5. スマホでヘッダーメニューが見にくいです。
テーマがレスポンシブ対応していない可能性があります。モダンなレスポンシブ対応テーマに変更することをおすすめします。また、メニュー項目が多すぎる場合も見にくくなるため、スマホでは重要な項目だけを表示するようにしましょう。

まとめ

ヘッダーは、Webサイトの顔とも言える重要な要素です。ロゴ、ナビゲーション、検索機能など、訪問者が使いやすいヘッダーを作ることで、サイト全体のユーザビリティが向上します。

✅ ヘッダー設定のチェックリスト
  • ロゴが適切なサイズで表示されている
  • ナビゲーションメニューが分かりやすい
  • スマホでも見やすく表示される
  • 読み込みが速い（重い画像を避ける）
  • 全ページで一貫したデザイン
  • ブランドカラーが反映されている

関連用語

フッター

ヘッダーと対になるページ下部の領域です。
テーマ

ヘッダーのデザインはテーマで決まります。
↑