【SWELL基本設定編】ヘッダー・グローバルナビ設定ガイド｜メニュー構成と表示カスタマイズの基本

WordPressテーマ「SWELL」でサイトを立ち上げたものの、ヘッダー周りの設定で手が止まっていないでしょうか。

「メニューに何を並べればいいのか分からない」「ロゴとナビの配置がしっくりこない」——こうした悩みは、SWELLを導入した直後に多くの方がぶつかるポイントです。

ヘッダーとグローバルナビは、訪問者がサイトに到着して最初に操作するパーツであり、回遊率や直帰率に直結します。
ここが整理されていないと、ユーザーは目的のページにたどり着けず、離脱に繋がるケースも少なくありません。

本記事では、メニュー構成の考え方から作成手順、ヘッダーのレイアウト調整、スマホ対応まで、実務で必要な設定を詳しく解説します。

ヘッダーとグローバルナビの役割を押さえる

まず用語を整理しておきましょう。

「ヘッダー」とは、サイト上部のエリア全体を指します。ロゴ画像、検索ボタン、電話番号、SNSアイコンなどが含まれる領域です。
一方「グローバルナビ」は、ヘッダー内に配置されるメニュー部分のことを指します。

グローバルナビの設計がサイト運営に与える影響は大きく、主に以下の3点が挙げられます。

なお、SWELLではPC表示時とスマホ表示時でグローバルナビの扱いが異なります。
PCではヘッダー内にメニュー項目が横並びで表示されるのに対し、スマホではハンバーガーメニュー（三本線アイコン）の中に格納される仕様です。
この違いを前提として、設定を進めていきましょう。

メニュー構成を考える ― 何を載せるべきか

設定作業に入る前に、「メニューに何を並べるか」を先に決めておくことが重要です。
ここを曖昧にしたまま作業を始めると、後から項目を増やしすぎたり、ユーザーにとって分かりにくい構成になったりしがちです。

業種別のメニュー構成例

業種やサイトの目的によって、最適なメニュー構成は変わります。以下に代表的な3パターンを示します。

サイト種別	メニュー構成例	ポイント
コーポレートサイト	サービス紹介／会社概要／実績・事例／採用情報／お問い合わせ	「お問い合わせ」は右端に配置し、目立たせる
店舗サイト（飲食・美容など）	メニュー・料金／アクセス／ご予約／スタッフ紹介／お知らせ	「ご予約」への導線を最優先に設計する
ブログ・メディアサイト	カテゴリーA／カテゴリーB／カテゴリーC／運営者情報／お問い合わせ	カテゴリーは3〜4個に絞り、主要テーマを明示する

親メニュー・子メニューの使いどころ

SWELLのグローバルナビでは、親メニューの下に子メニュー（ドロップダウン）を設定できます。
PC表示ではマウスホバー時にふわっと表示される仕組みです。

ただし、子メニューはホバーしないと表示されないため、重要なページを子メニューだけに配置するのは避けてください。
例えば「お問い合わせ」や「料金表」のように、訪問者が頻繁にアクセスするページは親メニューとして直接見える位置に置くのが原則です。
子メニューは、カテゴリーの細分化や補足的なページの格納に使うのが実用的な運用方法でしょう。

グローバルナビの作成手順

ここからは実際の設定手順を解説します。

ヘッダーのレイアウトとデザインを調整する

グローバルナビのメニュー項目を作成したら、次はヘッダー全体のレイアウトとデザインを整えます。
設定場所は「外観」→「カスタマイズ」→「ヘッダー」です。

ヘッダーレイアウト4パターンの選び方

SWELLでは、ロゴとグローバルナビの配置パターンを4種類から選択できます。

レイアウト	特徴	向いているサイト
ロゴ横・ナビ右寄せ	最もスタンダードな配置。ロゴが左、ナビが右に並ぶ	コーポレートサイト、ビジネス系全般
ロゴ横・ナビ左寄せ	ロゴのすぐ右からナビが始まる。コンパクトな印象	メニュー項目が少ないシンプルなサイト
ナビを下に配置	ロゴの下にナビが横一列で並ぶ。メニューの横幅を広く確保できる	メニュー項目が多い、またはロゴを大きく見せたいサイト
ナビを上に配置	ロゴの上にナビが配置される。独特のレイアウト	デザイン性を重視したい場合

迷った場合は「ロゴ横・ナビ右寄せ」から始めるのが無難です。
企業サイトでもメディアサイトでも違和感なく機能します。

ホバーエフェクトの設定

ヘッダーメニューの各項目にマウスを乗せた際のエフェクトを5種類から選べます。
「ラインの出現（下線）」が最もオーソドックスで、サイトのジャンルを問わず使いやすい選択肢です。
「ブロックの出現」はメニュー項目の背景色が変わるタイプで、視認性を高めたい場合に適しています。

ラインやブロックの色は「メインカラー」か「テキストカラー」のどちらかを選択可能です。
サイト全体のカラー設計と合わせて調整してください。

追従ヘッダーの活用

ページをスクロールした際に、ヘッダーを画面上部に固定表示させる機能です。
記事の途中からでもグローバルナビにアクセスできるため、ユーザーの利便性が高まります。

特にコンテンツ量が多いサイトや、ページ内の移動が頻繁に発生するサイトでは有効な設定です。
PC表示では背景の不透明度も調整できるため、コンテンツの邪魔にならない程度に透過させると洗練された印象になるでしょう。

グローバルナビをワンランクアップさせるカスタマイズ

基本設定が完了したら、見た目と機能性をさらに高めるカスタマイズに取り組んでみましょう。

サブテキスト（英語表記）の追加

メニュー項目の下に小さな文字を表示する機能です。
「サービス」の下に「Service」のように英語表記を添えると、デザイン性が一気に上がります。

設定方法は以下の通りです

1. 「外観」→「メニュー」を開く
2. 画面右上の「表示オプション」をクリックし、「説明」にチェックを入れる
3. 各メニュー項目を展開し、「説明」欄にサブテキストを入力する
4. 「メニューを保存」をクリック

アイコンの挿入

SWELLでは、グローバルナビの各メニュー項目にアイコンを表示できます。
設定にはショートコードを使用します。

メニュー項目の「ナビゲーションラベル」欄に、以下の形式で入力してください。

メニュー名

例えば、ホームアイコンを付ける場合は ホーム のように記述します。
使用できるアイコンとクラス名はSWELL公式サイトで公開されているので、そちらを参照してください。

ヘッダーバーの活用

グローバルナビの上部に表示される細いバーが「ヘッダーバー」です。
「外観」→「カスタマイズ」→「ヘッダー」の中にある「ヘッダーバー設定」から、背景色やテキスト色を調整できます。

ヘッダーバーにはキャッチフレーズやSNSアイコンリストなどを表示することができますが、不要な場合は非表示にすることも可能です。

スマホ表示の設定と注意点

SWELLでは、スマホ用のヘッダーメニューをPC用とは別に設定できます。

スマホ用ヘッダーメニューの設定方法

グローバルナビの作成手順とほぼ同じです。異なるのは「メニューの位置」で「スマホ用ヘッダー」にチェックを入れるという点だけです。

PCと同じメニューをスマホでも表示させたい場合は、1つのメニューに対して「グローバルナビ」と「スマホ用ヘッダー」の両方にチェックを入れてください。

PCとスマホでメニューを分けるべきケース

以下のような場合は、PCとスマホで別々のメニューを用意することを検討してください。

• PCのメニュー項目が7個以上あり、スマホでは数を絞りたい場合
• スマホユーザーの行動パターンがPCと異なる場合（例：店舗サイトで「電話で予約」ボタンをスマホだけに表示したい）
• PCでは子メニューを活用しているが、スマホでは階層を浅くしたい場合

スマホの開閉メニュー内にはウィジェットも配置できるため、バナーや検索フォームなどを追加してユーザーの利便性を補完するのも効果的な手段です。

まとめ

ヘッダーとグローバルナビは、サイトの「玄関」にあたるパーツです。
設定自体はSWELLのカスタマイザーとメニュー管理画面から比較的簡単に行えますが、重要なのは作業に入る前の設計段階にあります。

押さえておきたいポイントを改めて整理します。

設定は一度で完璧にする必要はありません。
アクセス解析で訪問者の動きを確認しながら、メニューの順番や項目を少しずつ見直していくことも重要です。