SWELLハンバーガーメニューをPCに表示にする3つの手順

SWELLを使っていて、「スマホみたいなハンバーガーメニューをPCでも出したいな」と感じたことはありませんか。

この記事では、SWELLのハンバーガーメニューをPC表示でも使えるようにする基本の流れから、レイアウト調整や注意点までまとめて解説します。

この記事を読むと分かる事

PCにハンバーガーメニューを表示するまでの具体的な手順
SWELLでのレイアウトとデザインを整えるときの考え方
よくあるつまずきポイントと、事前に押さえておきたい注意点

結論としては、SWELLの仕組みを軽く理解して、必要なCSSを少しだけ追加すれば、PCでも自然な形でハンバーガーメニューを使えるようになります。

SWELLのハンバーガーメニューをPC表示にする前に知っておきたいこと
SWELLでPCにハンバーガーメニューを出す基本3ステップ
SWELL ハンバーガーメニュー pc のレイアウト調整テクニック
デザインとUXを両立させるSWELLハンバーガーメニューpcの考え方
よくある質問：SWELL ハンバーガーメニュー pc に関するQ&A
まとめ：SWELLのハンバーガーメニューをPCでも気持ちよく使おう

SWELLのハンバーガーメニューをPC表示にする前に知っておきたいこと

ごとう

ここでは、SWELLのヘッダー周りがどんな仕組みになっているのかと、PCでハンバーガーメニューを使うときに考えておきたいポイントを整理します。ざっくり全体像をつかんでおくと、このあとCSSを触るときに迷いにくくなります。

SWELL標準のメニュー構成をざっくり整理しよう（表あり）

まずは、SWELLが標準でメニューをどう切り分けているかを整理しておきましょう。

ここを理解しておくと、「どのメニューをPCでハンバーガー表示するのか」がはっきりします。

デバイス	デフォルト表示	説明
スマホ・タブレット	ハンバーガーメニュー（スマホ開閉メニュー）	三本線アイコンをタップすると、メニューが開く仕組み
PC	横並びのグローバルナビ	ロゴの横にメニューが並ぶ、よくあるヘッダー
共通	追従ヘッダー	スクロール時に上部に固定できるヘッダー

ポイントは、スマホ用の「スマホ開閉メニュー」と、PCで使う横並びの「グローバルナビ」が別モノとして用意されていることです。

PC側でもスマホ開閉メニューを使いたい場合は、「スマホ開閉メニューとして作ったメニューを、PC表示でも見えるようにする」という考え方になります。

私も最初は「ヘッダーは1種類で、表示方法だけ変えているのかな」と思い込んでいて、うまくいかない理由が分からずにハマりました。

スマホ用とPC用でメニューの扱いが違う、という前提だけでも頭に入れておくと、このあとがかなりスムーズです。

PCでハンバーガーメニューにするメリット・デメリット

PC表示でハンバーガーメニューをメインに使うのは、おしゃれな反面、注意したいこともあります。

ざっくりメリットとデメリットを整理すると、こんな感じです。

メリット
ヘッダーがスッキリして、余計な情報を見せずに済む
メニュー数が多くても、ヘッダー周りがごちゃごちゃしにくい
スマホとPCで見た目をそろえやすく、ブランドの世界観を統一しやすい

デメリット
PCユーザーの中には「メニューがどこか分かりにくい」と感じる人もいる
お問い合わせや予約ボタンなどを隠すと、クリックされにくくなる可能性がある
カスタマイズ箇所が増え、あとからデザインを変えるときに手間がかかりやすい

私の感覚では、PCでのハンバーガーメニューは、次のようなサイトと相性が良いです。

写真やビジュアルを大きく見せたいポートフォリオサイト
ブランドイメージを大事にしたいコーポレートサイト
世界観やストーリーを見せたいLPやブランディングサイト

一方で、情報量が多いメディア型のブログや、年齢層が高めのユーザーが多いサービスサイトでは、ハンバーガーだけに頼らず、重要なメニューだけはヘッダーに常に出しておく、というバランスが大事になります。

こうした点をイメージしながら、「自分のサイトではどこまでハンバーガーメニューに寄せるか」を考えてみてください。

SWELLでPCにハンバーガーメニューを出す基本3ステップ

ごとう

ここからは、SWELLでPC表示にもハンバーガーメニューを出したいときの全体の流れを3ステップで説明します。具体的なCSSの話に入る前に、やることを一覧で押さえておきましょう。

ステップ1：スマホ開閉メニュー用のメニューを作る（表あり）

最初にやるべきことは、「スマホ開閉メニューにどのメニューを出すか」を決めて、ちゃんと登録しておくことです。

すでに設定済みの人も多いと思いますが、念のため手順を表でまとめておきます。

手順	場所	やること
1	外観 → メニュー	新しいメニューを作成（例：スマホ用メニュー）
2	メニュー設定	固定ページやカテゴリーなど、表示したい項目を追加
3	メニューの位置	「スマホ開閉メニュー」にチェックを入れて保存

ここで設定したメニューが、スマホやタブレットのハンバーガーメニューの中身になります。

PCでも同じハンバーガーメニューを使うなら、このメニューに「PCユーザーに見てほしいページ」をきちんと入れておくイメージです。

私も以前、スマホ開閉メニューにほとんど何も入れていない状態でPC表示だけ先にカスタマイズしてしまい、「ボタンはあるのに中身がスカスカ」という状態になりました。

まずはメニューの中身を整理する、というところから始めるのがおすすめです。

ステップ2：ヘッダーと追従ヘッダーのレイアウトを決める

次に、ハンバーガーメニューをヘッダーのどこに置くかを決めていきます。

これは見た目だけでなく、使いやすさにも直結する部分なので、軽くイメージしながら設定していきましょう。

外観 → カスタマイズ → ヘッダー → ロゴ・キャッチフレーズ
外観 → カスタマイズ → ヘッダー → グローバルメニュー
外観 → カスタマイズ → ヘッダー → 追従ヘッダー

このあたりの項目を触りながら、以下のような方針を決めておくと、あとから迷いにくくなります。

PCではロゴを左、ハンバーガーメニューを右上に置くのか
追従ヘッダーにもハンバーガーメニューを出すのかどうか
横並びメニューとハンバーガーを併用するのか、ハンバーガーのみでいくのか

私がよくやるのは、「最初はハンバーガーメニューをメインにして、アクセスの多いページだけ横並びで出してみる」というやり方です。

実際に運用しながら、クリックされているメニューとそうでないメニューを見て、配置を少しずつ変えていくと、無理なく調整できます。

ステップ3：PC表示でもハンバーガーメニューを出すCSSを追加する

ここが、いわゆる「SWELLのハンバーガーメニューをPCでも表示させる」ための一番大事な部分です。

やっていることはシンプルで、「PC幅のときにもスマホ開閉メニューのボタンと中身を表示するようにCSSで指定する」だけです。

流れとしては次のようなイメージになります。

画面幅がPCサイズのときにも、スマホ開閉メニューのボタンを表示する
必要に応じて、PC用の横並びグローバルナビは非表示にする
ハンバーガーの位置や余白を調整して、右上など好きな場所にきれいに配置する

CSSを書く場所は、主に次の2箇所のどちらかです。

外観 → カスタマイズ → 追加CSS
子テーマのstyle.css

まずは追加CSSに書いて表示を確認し、問題なさそうであれば子テーマに移す、という進め方が私は一番やりやすいと感じています。

このあと、レイアウト調整の考え方も含めて、もう少し具体的に見ていきます。

SWELL ハンバーガーメニュー pc のレイアウト調整テクニック

ごとう

ここからは、PC表示でハンバーガーメニューを使うときのレイアウト調整について具体的に見ていきます。ハンバーガーの位置や、横並びメニューとの組み合わせを少し変えるだけで、サイトの雰囲気や使いやすさがかなり変わります。

PC右上にハンバーガーメニューを固定表示する（表あり）

私がよく採用するのは、「PCの右上にハンバーガーメニューを固定表示する」パターンです。

ユーザーにとっても分かりやすく、追従ヘッダーと組み合わせても違和感が少ないレイアウトです。

【稼げるキーワード教えます】
▼　　▼　　▼

位置調整のときに意識して触ることが多いCSSプロパティをまとめると、次の通りです。

プロパティ	役割
position	fixedなら画面に固定、absoluteならヘッダー内で相対的に配置
top / right	画面（またはヘッダー）のどの位置に置くかを決める座標
z-index	他の要素より前面に出したいときに使う重なり順
padding / margin	ボタン周りの余白を整え、押しやすさや見た目を整える

実際には、PC幅のときにハンバーガーボタンを表示させて、topとrightを少しずつ動かしながら「ロゴとのバランスがいい位置」を探していくイメージです。

z-indexは、ほかのパーツに隠れないように少し高めにしておくと安心です。

ブラウザの検証ツールを使って、その場で数値を変えながら確認すると、感覚がつかみやすくなります。

横並びメニューとハンバーガーを併用するパターン

SWELLでPC表示にハンバーガーメニューを導入するとき、いきなり「横並びメニューを全部やめる」のは不安、という人も多いと思います。

そんなときにおすすめなのが、「横並びメニューとハンバーガーを併用する」パターンです。

例えば、次のような構成が考えられます。

横並びメニューには、メインとなる3〜5ページだけを置く
細かいカテゴリーや下層ページはハンバーガーメニューの中にまとめる
お問い合わせや申し込みボタンは、ヘッダー右上に常に出しておく

こうすると、PCユーザーにとっては「よく見るメニューはすぐ分かるし、その他はハンバーガーを開けば見つかる」という状態になります。

情報量が多いサイトや、コンバージョンが大事なサイトでは、この折衷案から試してみるのが安全です。

ハンバーガーメニューの中に全部のメニューを入れつつ、「本当に見てほしいページ」だけを横並びメニューに残しておくイメージで設計すると、回遊性も保ちやすくなります。

フルスクリーンメニュー風に見せる簡単なコツ

ハンバーガーメニューをクリックしたときに、画面いっぱいにメニューが広がるような「フルスクリーンメニュー風」の見せ方も人気です。

SWELLのスマホ開閉メニューをベースに、PCでもそれに近い印象を出すことができます。

フルスクリーンっぽく見せるときのコツを挙げると、次のような感じです。

メニューの背景色を、サイトのキーカラーか、背景としっかり差が出る色にする
メニューの幅を広めに取り、文字の周りにゆったりとした余白をつける
フォントサイズと行間を少し大きめにして、1行ごとの読みやすさを意識する

こうしてあげると、「ただリンクが並んでいる場所」ではなく、「サイトの世界観を見せる1つのページ」のような雰囲気になります。

特に、写真やイラストを見せたいポートフォリオやブランドサイトでは、フルスクリーン風のハンバーガーメニューはかなり相性が良いと感じています。

デザインとUXを両立させるSWELLハンバーガーメニューpcの考え方

ごとう

ここからは、SWELLでPC表示にもハンバーガーメニューを使うときに、デザインと使いやすさのバランスをどう取るかを考えていきます。見た目だけで決めてしまうと、ユーザーが迷いやすいサイトになってしまうので、少しだけUXも意識してみましょう。

PCハンバーガーメニューが向いているサイト・向いていないサイト（表あり）

まずは、「どんなサイトにPCハンバーガーメニューが向いているのか、または慎重に使った方がいいのか」を具体的に整理します。

サイトのタイプ	ハンバーガーメニューpcとの相性
写真・イラスト中心のポートフォリオ	とても良い。ビジュアルを邪魔せず、世界観を出しやすい
ブランド重視のコーポレートサイト	良い。メイン導線だけヘッダーに出しつつ、詳細はハンバーガーにまとめやすい
役所・病院・公共系サイト	あまり向かない。ユーザーが迷わず情報にたどり着けることが最優先
情報量の多いメディア・ブログ	工夫次第。重要カテゴリーだけヘッダーに出し、残りをハンバーガーに入れる形ならあり

私がクライアントと相談するときも、まずは「このサイトに来る人は、どれくらいWebに慣れているか」「一番やってほしい行動は何か」を一緒に考えています。

そのうえで、「ハンバーガーメニューをどこまで前面に出すか」「重要なボタンはヘッダーに出したままにするか」を決めると、ブレが少なくなります。

メニュー設計とSEO・回遊性のバランスを意識する

PCにハンバーガーメニューを導入するときは、見た目の話だけでなく、回遊性やSEOの観点も軽く意識しておくと安心です。

メニューは、ユーザーにとって「サイト内でのナビゲーション」であり、どこをクリックしてもらうかをコントロールする場所でもあります。

ハンバーガーメニューに入れるのは、「特に読んでほしいページ」に絞る
カテゴリーページだけでなく、「目的別の入り口ページ（まとめページ）」も用意しておく
お問い合わせや申し込みなどの重要な行き先は、ヘッダーにボタンとして常に出しておく

こうした工夫をしておくと、ハンバーガーメニューを導入しても、成果面でのマイナスが出にくくなります。

むしろ、「どのメニューをどこに置くか」を整理することで、サイト全体の構造が分かりやすくなることも多いです。

CSSを書く場所を決める：追加CSSと子テーマの比較（表あり）

最後に、ハンバーガーメニューのためのCSSを「どこに書くか」という話をしておきます。

ここを決めておくと、あとから修正したいときに慌てずに済みます。

書く場所	メリット	デメリット
追加CSS	管理画面からすぐ試せて、初心者でもハードルが低い	コードが増えると、どこに何を書いたか分かりにくくなりがち
子テーマ（style.css）	変更履歴を管理しやすく、バックアップも取りやすい	子テーマの準備が必要で、最初の一歩は少し重く感じるかもしれない