この記事ではSWELLのグローバルナビをおしゃれなデザインにカスタマイズする方法とお伝えします。
順番に押さえていけば難しくないので、一緒にグローバルナビを整えていきましょう。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
SWELLグローバルメニューの基本と役割（SWELLグローバルナビの前提）
最初に、「グローバルメニューってそもそも何者なのか」と「なぜSWELLのグローバルナビを整えるべきなのか」を共有しておきます。ここを押さえておくと、闇雲にメニューを増やしたり減らしたりせず、必要なところにだけ手を入れられます。
グローバルメニューがサイトにもたらす役割を理解しよう
グローバルメニューは、サイト全体の「地図」や「案内板」のような役割を持っています。
ここが分かりやすいと、初めて来た人でも迷わず目的のページにたどり着けて、「思っていたサイトと違った」とすぐ離脱されるリスクも下がります。
主な効果をざっくりまとめると、次のようなイメージです。
| 項目 | グローバルメニューが与える主な効果 |
|---|---|
| 回遊性 | 別のページへ移動しやすくなり、PV数や滞在時間が伸びやすくなる |
| 分かりやすさ | サイトの全体像が伝わり、「どこに何があるか」がすぐ分かる |
| 信頼感 | メニューが整理されていると、運営者の本気度やプロっぽさが伝わる |
| 成約率 | 見てほしいページを目立つ位置に置けるので、問い合わせやCVにつながりやすい |
実際に、私のクライアントさんでも「お問い合わせ」と「料金ページ」をグローバルナビにきちんと配置し直しただけで、その2ページの閲覧数が増えたケースがいくつもあります。
デザイン前に、「何を置くか」「どう並べるか」をしっかり考えるのがスタートラインです。
SWELLで使うグローバルメニューの種類をざっくり把握する
SWELLのヘッダーまわりには、グローバルメニュー以外にもメニューの枠がいくつかあります。
ここを混同すると、「設定したはずなのに表示されない」「思った位置に出てこない」といったトラブルにつながりやすいです。
主なメニューの種類と役割はこのあたりです。
- グローバルナビ（グローバルメニュー）：PC表示時にヘッダーに出る、サイトのメインの案内板
- ヘッダーメニュー：ロゴの上や横に配置できる、補助的なリンク用メニュー
- フッターメニュー：ページの一番下に常に表示されるメニュー
- スマホメニュー：スマホ表示時に、ハンバーガーアイコンから開くメニュー
この記事では、メインとなる「グローバルナビ」にフォーカスしつつ、スマホメニューとのバランスもあわせて見ていきます。
SWELLグローバルメニューの作り方と初期カスタマイズ
ここからは、「グローバルメニューを表示させるまで」の基本的な流れと、最初にやっておきたい設定をまとめていきます。この土台ができていないと、どんなにデザインを工夫しても反映されなかったり、メニュー自体が出てこなかったりするので要注意です。
まずはメニュー構成を決める（ブログと企業サイトの違い）
いきなりWordPressの画面を触る前に、紙やメモアプリで「どんなメニュー項目を置くか」を書き出して整理しましょう。
サイトのタイプによって、よく使う構成が少しずつ違います。
| サイトタイプ | グローバルメニュー構成の例 |
|---|---|
| 個人ブログ・雑記ブログ | ホーム / プロフィール / カテゴリーA / カテゴリーB / お問い合わせ |
| 特化ブログ・アフィリエイト | トップ / カテゴリー一覧 / 人気記事 / 比較・ランキング / 資料請求・申し込み |
| 企業サイト・事業サイト | ホーム / 事業内容 / 実績・導入事例 / 会社概要 / 採用情報 / お問い合わせ |
| 教室・サロン系 | ホーム / メニュー・料金 / 予約方法 / お客様の声 / アクセス / お問い合わせ |
私もクライアントごとにナビを設計するときは、まずこういった「型」に当てはめてから、要不要を一緒に確認していきます。
最初から10個もメニューを並べると、見る側が混乱しやすいので、ひとまず5〜7項目に絞るのがおすすめです。
WordPressでグローバルメニュー用のメニューを作る
構成が決まったら、WordPressの管理画面で実際にメニューを作成します。
大まかな流れは次のとおりです。
- 管理画面の「外観」→「メニュー」を開く
- 新しいメニューに名前を付けて作成する（例：グローバルナビ）
- 左側から固定ページ・投稿・カテゴリー・カスタムリンクなどを追加する
- ドラッグ＆ドロップで順番を入れ替えたり、少し右にずらして親子関係（ドロップダウン）を作る
- 「メニューの位置」で「グローバルナビ（ヘッダーメニュー）」にチェックを入れて保存する
意外と多いのが、「メニューは作ったのに、どの位置に表示するかをチェックしていなかった」というパターンです。
グローバルメニューがヘッダーに出てこないときは、まずここを確認してみてください。
SWELL側でグローバルナビの表示位置とロゴ配置を決める
次に、SWELLのカスタマイザーなどでヘッダーのレイアウトを整えます。
ロゴとグローバルナビの配置バランスだけでも、サイトの雰囲気はかなり変わります。
よく使われるパターンを挙げると、こんな感じです。
- ロゴ左＋グローバルナビ右（もっともオーソドックスで使いやすい配置）
- ロゴ上＋グローバルナビ下（コーポレートサイトでよくあるすっきりした見せ方）
- 中央ロゴ＋下にグローバルメニュー（ブランド感を出したいときに映える配置）
どれが正解というより、「ロゴの大きさ」「メニューの数」「サイトの雰囲気」で決めていくイメージです。
ロゴが大きくて項目数も多い場合は、中央ロゴにすると窮屈になりがちなので、ロゴ左＋メニュー右の構成の方がスッキリまとまりやすいです。
SWELLグローバルナビ デザインを整える5つのポイント
ここからは、コードをほとんど触らなくてもできるグローバルナビのデザイン調整について、5つの視点でお話しします。大きなことをしなくても、ちょっとした工夫だけで「なんとなく素人っぽい」から「ちゃんとしてるサイト」に一歩近づけます。
メニュー名とサブテキストで「分かりやすさ」と「おしゃれ」を両立する
SWELLでは、メニューの「説明」欄を使って、小さなサブテキストを表示できます。
ここに英語や補足説明を入れることで、日本語タイトル＋小さな英語表記という、よく見るおしゃれなグローバルナビを再現できます。
| メニュー名（メイン） | 「説明」欄に入れる例 |
|---|---|
| サービス | SERVICE / メニュー一覧 |
| 実績 | WORKS / 制作事例 |
| ブログ | BLOG / コラム |
| お問い合わせ | CONTACT / フォームはこちら |
やり方の流れはこんな感じです。
- 「外観」→「メニュー」で、右上の「表示オプション」をクリックする
- 「説明」にチェックを入れて、各メニュー項目の「説明」欄を表示させる
- サブテキストにしたい英語や補足文を入力し、「メニューを保存」する
SWELLは、この「説明」に入力したテキストを自動的に小さく表示してくれるので、特別なCSSを書かなくてもきれいにサブテキストが出ます。
英語だけにしてしまうと人によっては読みにくいので、メインは日本語、下に英語を添える形が一番バランスが良いと感じています。
アイコン付きSWELLグローバルメニューで直感的なナビにする
次に試してほしいのが、アイコンを使ったグローバルメニューです。
SWELLはFont Awesomeなどのアイコンフォントを読み込んで使えるので、ちょっとした設定でメニューにアイコンを足せます。
例えば、こんな組み合わせです。
- 家のアイコン＋「ホーム」
- メガホンのアイコン＋「お知らせ」
- メールや電話のアイコン＋「お問い合わせ」
文字だけのメニューよりも直感的に内容が伝わるので、特にスマホでパッと見たときの分かりやすさが変わってきます。
ただ、全部の項目にアイコンを付けると賑やかになりすぎるので、「お問い合わせ」「予約」「申し込み」など、特に押してほしいところを優先してアイコンを付けるのがおすすめです。
文字サイズ・余白・行間を調整して読みやすくする
グローバルナビのデザインというと色や形に目が行きがちですが、文字サイズや余白、行間の調整もかなり効いてきます。
ここが整うだけで、「なんとなく安っぽい」印象から抜け出せることが多いです。
チェックしておきたいポイントは次のとおりです。
- PC表示で、メニューの文字が小さすぎて読みにくくなっていないか
- メニュー同士の間隔が詰まりすぎて、窮屈な印象になっていないか
- サブテキストを表示している場合、行間が狭すぎて読みづらくなっていないか
SWELLのカスタマイザーや追加CSSで、「文字サイズを少し大きくする」「左右の余白をちょっと広げる」だけでも、印象はガラッと変わります。
私も、クライアントサイトの調整をするときは、まずここから手を付けることが多いです。
ホバー時の色・下線・背景で「今どこか」を伝える
ユーザーは、マウスを動かしながら何となくメニューを眺めています。
そのとき、「今カーソルがここにあるよ」が一瞬で分かると、クリックまでの迷いが減ります。
例えば、こんなホバー表現があります。
- ホバー時だけ文字色をメインカラーに変える
- 下線がスッと出るようにする
- 背景色をうっすら変えてボタン風にする
- メニューの下側に細いラインを出す
派手にしすぎると逆に素人感が出てしまうので、サイトの基調カラーに合わせて、少しだけ変化を付けるのがコツです。
私はよく、「通常時は落ち着いた色、ホバー時だけメインカラー寄り」にする設定を採用しています。
現在位置（現在のページ）を分かりやすく表示する
最後に、「今、自分がどのメニュー配下のページにいるのか」を示すことも大切です。
WordPressでは現在表示中のページに自動でクラスが付くので、そのクラスに対して色を変えたり、下線を出したりすることで、「今ここ」のメニューを強調できます。
- ブログ記事を読んでいるときは「ブログ」メニューを強調する
- 料金ページにいるときは「サービス」や「メニュー」項目を強調する
ページ数が多いサイトほど、この「現在位置表示」の有無で、ユーザーの迷子具合が変わります。
【稼げるキーワード教えます】
▼ ▼ ▼
グローバルメニューのデザインを整えるときは、「作って終わり」ではなく、「今どこかも分かるようにする」ところまでセットで考えてあげると親切です。
スマホ向けSWELLグローバルメニューのカスタマイズ
ここでは、スマホで見たときのグローバルメニューについて掘り下げていきます。PCでは問題なくても、スマホで開いてみたら「押しづらい」「どこからメニューが開くのか分かりにくい」ということはよくあります。
PCとスマホでのSWELLグローバルナビ デザインの違いを意識する
同じグローバルナビでも、PCとスマホでは「見え方」も「使い方」も別物です。
まずは、その違いをざっくり整理しておきましょう。
| 項目 | PCのグローバルナビ | スマホのグローバルメニュー |
|---|---|---|
| 表示位置 | 画面上部のヘッダーに常に表示される | ハンバーガーアイコンをタップして開く |
| 操作方法 | マウスでポイント＆クリック | 親指でタップしながらスクロール |
| 見える情報量 | 横一列にメニューが並ぶ | 縦に一覧表示されるが、スクロールが必要 |
| 注意点 | 項目数を詰め込みすぎない | タップ領域を十分に広く取る |
スマホでは、そもそもグローバルメニューが最初は隠れているので、「このアイコンをタップするとメニューが開く」と気づいてもらう必要があります。
ハンバーガーアイコンだけだと分かりづらい場合は、「MENU」や「メニュー」などのラベルを添えると親切です。
スマホメニュー内の並び順と項目数を見直す
スマホのグローバルメニューをPCとまったく同じ構成にすると、縦に長くなりすぎて、途中で見るのをやめられてしまうことがあります。
特に、カテゴリーを全部並べてしまうと、スクロールが果てしなくなってしまうので注意です。
スマホ側では、次のような工夫をしてみてください。
- 一番上に「お問い合わせ」「予約」「資料請求」など、最優先のメニューを置く
- その下に主要なカテゴリーを3〜5個ほどに絞って並べる
- 細かい分類は、サイドバーや記事下のリンクなど別の導線でカバーする
私自身は、スマホのグローバルメニューを「よく使うショートカット一覧」と考えるようにしています。
全部を並べる場所ではなく、「とりあえずここを見れば困らない」という行き先だけを置いてあげるイメージです。
ボックスメニューや固定ボタンと組み合わせて回遊性アップ
SWELLには、トップページで使えるボックスメニューや、画面下の固定ボタンなど、スマホ向けの導線を強化する仕組みがいろいろ用意されています。
グローバルメニューだけに頼らず、これらと組み合わせると、全体としてかなり使いやすいサイトになります。
例えば、こんな組み合わせが定番です。
- グローバルメニュー：サイト全体のナビゲーション（地図）として使う
- ボックスメニュー（トップページ）：主要カテゴリーや特集ページへのショートカットにする
- 画面下の固定ボタン：お問い合わせ・予約・LINEなど、最重要アクションへの直通ボタンにする
スマホユーザーは、「親指がどれだけ楽か」で行動が大きく変わります。
親指が届きやすい画面下に重要なボタンを置き、グローバルナビで全体の道案内をする、という役割分担を意識してデザインしてみてください。
サイトタイプ別SWELLグローバルナビ デザイン事例
ここからは、実際にどんなグローバルナビを作ると良いか、サイトタイプ別に具体例を紹介します。自分のサイトに近いパターンをイメージしながら読んでみてください。
ブログ型・メディア型のSWELLグローバルメニュー例
まずは、個人ブロガーさんやオウンドメディアによくある構成からです。
ポイントは、「記事を探しやすくすること」と「運営者を知ってもらいやすくすること」です。
| サイトタイプ | メニュー構成の例 | デザインのポイント |
|---|---|---|
| 雑記ブログ | ホーム / プロフィール / 人気記事 / カテゴリー / お問い合わせ | プロフィールと人気記事を目立つ位置に置いて、ファンになってもらいやすくする |
| 特化ブログ | トップ / カテゴリーA / カテゴリーB / 比較・ランキング / 使い方ガイド | 比較・ランキングページを太字やアイコン付きにして、クリックを集める |
| 公式メディア | トップ / カテゴリー一覧 / 特集 / お知らせ / 企業サイトへ | 特集やキャンペーンカテゴリを、色やラベルで少し強調して目に留まりやすくする |
私がよくやるのは、「人気記事」や「おすすめ記事」をグローバルメニューに1枠確保することです。
そこから入ってもらって、関連記事へどんどん回遊してもらうイメージで設計すると、PVも伸びやすくなります。
企業サイト・コーポレートサイトのSWELLグローバルナビ デザイン
企業や事業サイトの場合は、特にデザインと信頼感が重要です。
メニューがごちゃごちゃしているだけで、「この会社大丈夫かな？」と不安に感じる人も実際にいます。
- メニュー項目は6〜7個以内に抑える
- 「会社概要」「事業内容」「実績」「採用」「お問い合わせ」あたりは外さない
- サブテキストに英語を入れて、上品な雰囲気にまとめる
背景は白ベース、文字は濃いグレー、ホバー時だけメインカラーを効かせる、くらいのシンプルな配色でも十分プロっぽく見えます。
SWELLはもともとデザインの素地が整っているので、やりすぎないくらいがちょうどいいです。
ランディングページ・キャンペーン用のSWELLグローバルメニュー
ランディングページ（LP）やキャンペーンページでは、グローバルメニューの考え方が少し変わります。
理由はシンプルで、「ほかのページに寄り道してほしくない」からです。
- グローバルメニューを1〜2項目に絞り、「資料請求」「無料相談」などのCTAを強調する
- 場合によってはグローバルナビ自体を非表示にし、ページ内のボタンや目次で完結させる
- LP専用テンプレートだけ、別のメニューを割り当てることも検討する
ここでは、「回遊させるナビ」ではなく、「申し込みや登録に集中してもらうナビ」として考えるのがポイントです。
SWELLの柔軟さを活かして、通常ページ用とLP用で役割の違うグローバルメニューを準備しておくと運用が楽になります。
少し踏み込んだSWELLグローバルメニューのカスタマイズ術
ここからは、もう一歩ステップアップしたい方向けに、少しだけ踏み込んだカスタマイズアイデアを紹介します。全部をいきなりやる必要はないので、「これならできそう」と思ったところから試してみてください。
ページごとにSWELLグローバルメニューを出し分ける考え方
「ブログ記事では通常のナビ」「LPではCTA重視のシンプルなナビ」といった形で、ページごとにグローバルメニューを変えたくなることがあります。
WordPressの機能やコードスニペットを使うと、条件によって表示するメニューを切り替えることも可能です。
具体的には次のような使い分けが考えられます。
- 通常の投稿・固定ページ：標準のグローバルナビ
- LP・セールスページ：CTAに特化した、ごくシンプルなメニュー
- 会員専用エリア：ログイン・マイページ・設定など、会員向けのメニュー
実装自体は少しPHPの知識が必要ですが、「必要になったときに制作者さんに相談すればできる」というイメージだけ持っておくと、サイト設計の幅が広がります。
クリック計測でSWELLグローバルメニューを改善する
グローバルメニューは作って終わりではなく、「ちゃんとクリックされているか」を数値で見てあげると、サイト全体の成果が伸びやすくなります。
アクセス解析ツールを使えば、「どのメニューがどれくらいクリックされているか」を追いかけることができます。
改善の流れはこんなイメージです。
- 各メニューのクリック数やクリック率を確認する
- ほとんどクリックされていない項目を減らすか、下の階層に移す
- 重要なのにクリックされていない項目は、名前や位置を見直す
私も実際に、数字を見ながら「ほぼ誰も押していないメニュー」を削ったら、その分ほかのメニューのクリックが増えたことがあります。
グローバルナビは、「何となく置いておくリンクの集合」ではなく、「押されるべきリンクの集合」として捉えると、改善ポイントが見つけやすくなります。
アクセシビリティとユーザビリティを意識したデザイン
最後に、少しだけ上級者向けの視点として、アクセシビリティ（使いやすさの幅広さ）も意識してみましょう。
難しく考える必要はなく、「いろいろな人にとって使いやすいナビにする」という発想です。
- 文字色と背景色のコントラストを十分に取る（薄いグレー×白の組み合わせは避ける）
- スマホのメニュー項目は、指でタップしやすい高さと幅を確保する
- ハンバーガーアイコンだけでなく、「MENU」「メニュー」などのラベルも付ける
- キーボード操作でもメニューを移動しやすいようにしておく
ここまで意識しているサイトはまだ多くありませんが、だからこそ差がつきやすい部分です。
SWELLのデザイン性に加えて、こうした気遣いも込めたグローバルナビにしておくと、「なんかこのサイト使いやすいな」と感じてもらえる可能性が高まります。
よくある質問：SWELLグローバルメニューとグローバルナビ
ここからは、SWELLでグローバルメニューをカスタマイズするときによく聞かれる質問を、Q&A形式でまとめました。自分の悩みに近いものがあれば、参考にしてみてください。
Q1.SWELLグローバルナビ デザインは初心者でもカスタマイズできますか？
A1.はい、できます。
この記事で紹介している範囲であれば、ほとんどが「外観→メニュー」とSWELLのカスタマイザーや設定画面から変更できる内容です。
特に、サブテキストの追加やアイコン付きメニューは、手順に沿って進めればコピペに近い感覚で実装できます。
むしろ、テーマ側で機能が整っているからこそ、グローバルメニューのカスタマイズに挑戦しやすいと思ってもらって大丈夫です。
Q2.SWELL グローバルメニュー カスタマイズで、やりすぎてはいけないことはありますか？
A2.一番のNGは、「メニュー項目を増やしすぎること」です。
せっかくSWELLでグローバルナビのデザインを整えようとしても、あれもこれもと詰め込みすぎると、かえって迷いやすいナビになってしまいます。
まずは5〜7項目に絞り、「本当にグローバルメニューに置くべきページかどうか」を一つずつ確認していきましょう。
Q3.PCとスマホでSWELLグローバルメニューの構成を変えた方がいいですか？
A3.まったく別物にする必要はありませんが、スマホ側では優先度の高いメニューを上に持ってくるなどの調整はした方が良いです。
スマホユーザーは、長いメニュー一覧を最後までじっくり見るケースが少ないので、「上から3〜4個くらいしか見られていないかも」と想像しながら構成を考えるとちょうどいいです。
PCでは全体の地図としての役割、スマホではショートカットとしての役割、と分けて考えると、グローバルメニューのカスタマイズ方針を決めやすくなります。
まとめ：SWELLグローバルメニューを今日から整えよう
この記事のポイントを整理しておきます
- グローバルメニューはサイトの「地図」であり、SWELLのグローバルナビを整えると回遊性や信頼感が上がる
- まずはサイトタイプ別にメニュー構成を考え、項目数を5〜7個に絞るところから始める
- サブテキストやアイコン、文字サイズやホバー演出など、ノーコードでできる調整でも見た目はかなり変えられる
- スマホでは、並び順とタップしやすさを重視し、ボックスメニューや固定ボタンと組み合わせて導線を設計する
- 余裕があれば、クリック計測やアクセシビリティも意識して、グローバルナビを継続的に改善していく
今日からの最初の一歩としては、今のグローバルメニューをスクリーンショットして、「本当に必要な項目はどれか」「逆に削れそうな項目はどれか」を紙やメモに書き出してみてください。
そのうえで、この記事の流れに沿ってひとつずつ設定を見直していけば、SWELLで作ったあなたのサイトのグローバルナビは、見た目も使いやすさも少しずつ確実にレベルアップしていきます。
記事を読んだらコチラ
▼ ▼ ▼
