SWELLのスマホ開閉メニューをカスタマイズする3つの型を伝授

SWELLのスマホ開閉メニュー、なんとなく初期設定のままにしていませんか。どこからカスタマイズすればいいのか分からず、ハンバーガーメニューには触らないままの人も多いと思います。

結論を先に言うと、SWELLのスマホ開閉メニューは「中身の設計」「ブログパーツ＋ウィジェット」「CSSで見た目を整える」という3ステップで考えると、迷わずカスタマイズできるようになります。

SWELLのスマホ開閉メニューをカスタマイズすると何が変わる？

スマホ開閉メニューと他のメニューの違いを整理しよう

SWELLには、スマホ開閉メニュー以外にもいくつかのメニューが用意されています。役割を整理するとイメージしやすくなります。

メニューの種類	表示される場所・タイミング	主な役割
スマホ開閉メニュー（ハンバーガー）	スマホ画面の端のボタンをタップすると、画面の横や全体にスッと出てくるメニュー	サイト全体の案内板。重要ページへの導線をまとめて見せる
スマホ用ヘッダーメニュー	スマホ画面上部のバーに並ぶメニューやアイコン	ロゴ横などに少数のリンクを置き、よく使うページへ素早く誘導する
フッターメニュー	ページ最下部に固定で表示されるメニュー	プロフィールや利用規約など、補助的な情報への導線
グローバルメニュー（PCメインメニュー）	PC表示時のヘッダーに出るメニュー	カテゴリーやサービス一覧など、サイト全体の構造を見せる

スマホ開閉メニューは、スマホでサイトを見ている人にとっての「玄関ドア」のような存在です。ヘッダーやフッターよりも多くのリンクをまとめられ、開いた瞬間に視界のほとんどを占めるので、構成次第でユーザーの動きが大きく変わります。

初期設定のままでも使えますが、リンクの並べ方や見た目を少しカスタマイズするだけで、次のような変化が期待できます。

• 読んでほしいカテゴリーや商品ページに、迷わず誘導できる
• メニューがスッキリ整理されて、ユーザーの迷子感が減る
• 色やレイアウトを揃えることで、サイト全体の世界観やブランド感を出せる

SWELLスマホ開閉メニューが活きるシーンとメリット

私が実際にSWELLサイトを作っていて、「スマホ開閉メニューをちゃんと整えたほうがいいな」と感じるのは、こんなケースです。

• 記事数が増え、カテゴリーが3つ以上に増えたブログ
• サービスや商品が複数あり、ユーザーに選んでほしいサイト
• プロフィール、実績、お問い合わせなど、見せたい導線がいくつもあるポートフォリオサイト

スマホ開閉メニューをカスタマイズするメリットを、もう少しかみ砕いて言うとこうなります。

• 「どのリンクがよく押されてほしいか」を意識して配置できるので、収益記事や問い合わせページへ誘導しやすくなる
• 構成を工夫するだけで、「このサイトは誰に何を提供しているのか」が一目で伝わる
• ブログパーツやボックスメニューを使えば、アイコン付きで直感的に分かるナビが作れる

「とりあえずメニューを並べておいただけ」の状態から一歩抜けるには、次の見出しで紹介するステップで考えるとスムーズです。

Swellのスマホ開閉メニューをカスタマイズする前の準備と基本設定

カスタマイザーでスマホ開閉メニューの表示を整える

スマホ開閉メニューの基本的な見た目は、WordPress管理画面のカスタマイザーから設定できます。テーマによってメニュー名は多少違いますが、SWELLでは「外観」→「カスタマイズ」→「サイト全体設定」→「スマホ開閉メニュー」といった項目から触れるようになっています。

主に次のような項目を確認しておきましょう。

項目	どんな設定か	最初のおすすめ
文字色	メニュー内のテキストの色	背景が暗めなら白系、背景が明るめなら濃いグレー系
背景色	メニューの背景全体の色	サイトのメインカラーか、少し暗めのグレー
背景の透明度	背景がどれくらい透けるか	基本はやや不透明寄り。読みやすさ重視で設定
オーバーレイカラー	メニューを開いたときに、ページ全体にかかる色	黒や濃いグレーを薄く重ねるイメージ
表示設定	メニューのタイトル名や、サブメニューの開閉など	タイトルは「メニュー」や「MENU」など、直感的な名前にする

ここをざっくり整えておくだけでも、「なんとなくダサい…」という印象はかなり減ります。逆に、背景を透過させすぎると、下のページが透けて文字が読みにくくなるので、最初はシンプルな配色から試してみると失敗しにくいです。

WordPressメニューでスマホ専用メニューを作る

次に、スマホ開閉メニュー内に表示するリンクの「元」となるメニューを準備します。

流れとしては、次のようなイメージです。

• 管理画面の「外観」→「メニュー」を開く
• 「新しいメニューを作成」から「スマホメニュー」などの名前でメニューを作る
• 固定ページや投稿、カテゴリーなどを追加し、並び順を整える
• 「メニューの位置」で「スマホ開閉メニュー内」のようなスマホ用の位置にチェックを付けて保存する

どのページへのリンクを入れるかはサイトによって変わりますが、例えば次のような構成から始めるとまとまりやすいです。

• 雑記ブログなら、トップページ、人気記事一覧、主要カテゴリー数個、プロフィール、問い合わせ
• 特化ブログなら、トップページ、カテゴリートップ、ランキング記事、レビューまとめ、問い合わせ
• 事業サイトなら、サービス一覧、料金、実績・事例、プロフィール（会社概要）、問い合わせや予約

この段階では、多少リンクが多めでも問題ありません。あとでブログパーツやボックスメニューに置き換えながら整理していく前提で、「必要そうな導線は一度メニューに集めておく」くらいの感覚で作っておくと、のちのち楽です。

追加CSSの書き方と注意点

スマホ開閉メニューをカスタマイズしていくと、色や余白、ボタンの形などをCSSで微調整したくなる場面が出てきます。どこにCSSを書くかも、先に決めておくと安心です。

書く場所	メリット	注意点
カスタマイザーの「追加CSS」	ブラウザだけで編集でき、気軽に試せる	量が増えると、どこに何を書いたか分かりづらくなる
子テーマのstyle.css	ファイルごとに管理でき、バックアップもしやすい	テーマエディターやFTPを使う必要がある
カスタムCSS系プラグイン	複数サイトで同じCSSを使い回しやすい	プラグインが増えすぎると管理が大変になる

慣れないうちは、カスタマイザーの「追加CSS」に書くのが一番ハードルが低いです。あとから子テーマのstyle.cssに移すこともできるので、小さなコードから試して、少しずつ自分なりの書き方を整えていけば大丈夫です。

スマホ開閉メニューの中身をカスタマイズする考え方

サイトタイプ別のおすすめメニュー構成

まずは、「このサイトで、ユーザーに最終的に何をしてほしいのか」を決めておくと、メニュー構成がブレにくくなります。

サイトのタイプごとに、優先度を整理すると次のようなイメージになります。

サイトタイプ	最優先で見せたいもの	メニュー上部に置きたいリンク
アフィリエイト系ブログ	成約につながりやすい記事	ランキング記事、商品レビュー、カテゴリートップ
雑記ブログ	自分の得意分野や人気記事	人気記事一覧、カテゴリー一覧、プロフィール
事業・店舗サイト	サービス内容と申し込み窓口	サービス一覧、料金表、予約・問い合わせ
制作・ポートフォリオ	実績と連絡先	制作実績、プロフィール、問い合わせ

ここで整理した内容を、そのままスマホ開閉メニューの構成に落とし込んでいくイメージです。「カテゴリーを全部並べる」のではなく、「メニュー上部に置くリンクは3〜5個にしぼる」と意識すると、かなり見やすくなります。

ブログパーツとウィジェットで中身を自由に作る

SWELLの強みは、ブログパーツとウィジェットを組み合わせることで、スマホ開閉メニューの中身をかなり自由に作れるところです。

大まかな手順は次のような流れになります。

こうしておくと、スマホ開閉メニューを開いたときに、ブログパーツで作ったおしゃれなメニューエリアが一緒に表示されます。私も最初にこのやり方を知ったとき、「スマホメニューって、ここまで自由に組めるんだ」とかなりテンションが上がりました。

デフォルトメニューを消すか残すか決める

ブログパーツでメニューを作り込んでいくと、もともとのテキストメニューを残すか、CSSで非表示にするかを決める必要が出てきます。

ざっくりとした目安はこんな感じです。

• シンプルなテキストリンクだけで十分なら、デフォルトメニューをそのまま残す
• ボックスメニューや画像付きメニューで世界観を出したいなら、デフォルトメニューは隠してしまう
• いきなり消すのが不安なら、しばらくはデフォルト＋ブログパーツを併用し、慣れてきたらCSSでデフォルトを非表示にする

デフォルトメニューを消したいときは、追加CSSでスマホメニュー用のクラスをdisplay:noneにする方法がよく使われます。少し踏み込んだ内容になるので、実際にCSSを書くときは、事前にバックアップを取ってから試してみてください。

実例で学ぶSwellスマホ開閉メニューカスタマイズ3パターン

パターン1 フルスクリーンメニューで世界観を見せる

1つ目は、スマホ開閉メニューをフルスクリーン風に見せるパターンです。背景に少し暗めの色を敷き、リンクを縦に大きめの行間で並べると、ランディングページのような雰囲気を出せます。

構成イメージを表にすると、次のような感じです。

要素	設定のイメージ
背景色	濃いめのグレーか、ブランドカラーを少し暗くした色
文字色	白か薄いグレーで、コントラストをしっかり取る
メニュー項目	サービス一覧、カテゴリー、人気記事などをしぼって5〜7個
補助要素	下部にプロフィールやお問い合わせ、プライバシーポリシーなどを小さめに配置

ブログパーツでリンクリストを作り、行間や余白を広めに取るCSSを足してあげると、タップしやすく、落ち着いた印象のメニューになります。

パターン2 ボックスメニューでカテゴリを見せる

カテゴリーやサービスが複数あるサイトなら、ボックスメニューを使ったグリッド型のスマホ開閉メニューも相性がいいです。

例えば、次のような見せ方が考えられます。

• 4つ前後のボックスに、主要カテゴリーやサービスを配置する
• 各ボックスにアイコンやサムネイル画像を入れて、一目で内容が分かるようにする
• PCではトップページのボックスメニューとして使い、スマホ開閉メニューにも同じブログパーツを呼び出す

トップページで見せているボックスメニューを、そのままスマホ開閉メニューにも再利用すると、デザインの統一感が出ますし、ブログパーツを1つ直せば両方のメニューを一度に更新できるので管理も楽になります。

パターン3 ミニマルなテキストメニューでスッキリ見せる

「デザインはそこそこでいいから、とにかく見やすくしたい」という場合は、あえてシンプルなテキストだけのメニューに振り切るのもアリです。

ミニマルでも使いやすいメニューにするための工夫を挙げておきます。

• メニュー項目数は5〜7個にしぼる
• 文字サイズを少し大きめにし、行間もゆったりめにする
• 区切り線や枠線をあえて減らし、余白で区切るイメージにする
• 一番押してほしいリンクだけ太字にしたり、ボタン風のスタイルを付ける

ミニマルなメニューは、装飾が少ないぶん、情報設計の良し悪しがストレートに伝わります。だからこそ、「何を一番上に置くか」「何を思い切ってメニューから外すか」を、しっかり決めておくことが大事です。

ハンバーガーボタンと背景のカスタマイズ

ボタンの色・太さ・ラベルを変える基本CSS

SWELLのハンバーガーボタンは、テーマ側でスタイルが用意されているので、それを上書きする形でCSSを足していきます。

例えば、次のような調整をすると、ぐっと分かりやすくなります。

• 3本線の色をサイトのアクセントカラーに合わせる
• 線の太さを少し太めにして、「ここがタップする場所だ」と分かりやすくする
• ボタンの横に「MENU」や「メニュー」といったラベルテキストを表示する
• メニューを開いたときは「CLOSE」などの表示に切り替える

CSSを書くときのコツは、最初から複雑なアニメーションに挑戦しないことです。まずは色と太さ、ラベルのオンオフくらいから始めて、「どこを触るとメニューが開くか」がきちんと伝わる状態を目指しましょう。

背景とオーバーレイカラーを整える

スマホ開閉メニューが開いているあいだは、ユーザーの視線はほぼメニューに集中します。そのときに背景やオーバーレイの設定が強すぎたり弱すぎたりすると、見づらさや「戻りづらさ」につながります。

背景まわりで意識したいポイントをいくつか挙げておきます。

• 背景色は真っ黒・真っ白より、少しだけトーンを落としたグレーのほうが目に優しいことが多い
• オーバーレイの透明度が低すぎると、下のページが透けて文字が読みにくくなる
• 逆に濃すぎると、ユーザーが「さっきまでどのページを見ていたか」を見失いやすい
• 背景画像を使う場合は、文字とのコントラストが十分か必ず確認する

色の組み合わせに迷ったら、「背景＝濃いめのグレー」「文字色＝白」「リンクのホバー＝アクセントカラー」の三角形をまず作ってみてください。それだけでも、かなり読みやすく、落ち着いたスマホメニューになります。

ユーザー目線で見直すスマホ開閉メニューのチェックリスト

UXチェックリスト（スマホ開閉メニュー用）

実際に自分のスマホでサイトを開き、次のチェック項目を一つずつ確認してみてください。

チェック項目	基準	自分のサイトの状態
タップしやすさ	メニュー項目同士が近すぎず、指で押しやすいか	例：余白が狭い／ちょうどよい など
読みやすさ	背景と文字のコントラストが十分か	例：白文字が背景に埋もれていないか
情報量	メニュー項目が多すぎて迷わないか	例：7〜10個に収まっているか
優先度	一番押してほしいリンクが上か、目立つ位置か	例：上から2つ目に配置 など
統一感	サイト全体のデザインと違和感なくなじんでいるか	例：ボタンの色が別テーマのように浮いていないか

このチェック表は、紙に印刷したり、メモアプリに写しておいて、サイトごとにチェックしていくと整理しやすいです。

よくあるトラブルとチェックポイント

スマホ開閉メニューをカスタマイズしていると、どうしてもトラブルが起きることがあります。そんなときに見直したいポイントを表にまとめました。

トラブル	よくある原因	見直すポイント
メニューが表示されない	メニュー位置の設定ミス、プラグインの競合	「外観」→「メニュー」で、スマホ用の位置にチェックが入っているか
CSSが反映されない	記述ミス、優先度の問題、キャッシュ	セレクタ名のスペル、キャッシュ削除、!importantの使いすぎに注意
デザインが崩れた	デフォルトCSSの上書きが強すぎる	影響範囲を限定するクラスを付けているか確認する
PC表示までおかしくなった	共通クラスにスマホ用のCSSを書いてしまった	メディアクエリでスマホだけにCSSを効かせているか

トラブルが起きたときは、一気に全部直そうとせず、「直前に追加したCSSをコメントアウトしてみる」「怪しそうなプラグインを一時的に停止してみる」といったシンプルな切り分けから始めると、原因を追いやすくなります。

よくある質問（Swell スマホ開閉メニュー カスタマイズ）

Q1. スマホ開閉メニューをカスタマイズするとき、最初に何から手を付けるべきですか？

A. いきなりCSSから入らず、まずは「メニューの中身」を整理するのがおすすめです。WordPressのメニュー機能でスマホ専用メニューを作り、「どのリンクを上に置くとユーザーが動きやすいか」を考えてから、ブログパーツやウィジェット、CSSでSwellのスマホ開閉メニューをカスタマイズしていくと、迷いにくくなります。

Q2. ブログパーツを使ったスマホ開閉メニューのカスタマイズは、サイトが重くなりませんか？

A. ブログパーツを1つ呼び出す程度であれば、体感できるほど極端に重くなることはあまりありません。むしろ、複雑なプラグインを増やしすぎたり、画像を詰め込みすぎたりするほうが表示速度に影響しやすいです。Swellのスマホ開閉メニューをカスタマイズするときは、画像サイズを抑えたり、必要以上にアニメーションを多用しないことを意識すると安心です。

Q3. CSSが苦手でも、Swellのスマホ開閉メニューをカスタマイズできますか？

A. できます。カスタマイザーで色や表示設定を変えるだけでも、見た目の印象はかなり変わりますし、ブログパーツとウィジェットを組み合わせるだけならCSSを書かなくても大丈夫です。そのうえで、どうしても必要になった部分だけ、色や余白を変える程度の短いCSSから試していけば、少しずつSwellのスマホ開閉メニューを自分好みにカスタマイズできるようになります。

まとめ｜Swell スマホ開閉メニュー カスタマイズの最初の一歩

この記事のポイントを整理します

今日できる最初の一歩としては、まず紙やメモアプリに「今のメニュー構成」と「理想のメニュー構成」を書き出してみてください。そのうえでSWELLのカスタマイザーを開き、スマホ開閉メニューの色と、メニューの中身を少しだけ整えてみましょう。

それだけでも、「ユーザーの動き方がちょっと変わったかも」という感覚がつかめるはずです。そこから少しずつ、Swellのスマホ開閉メニューを自分のサイトらしい形に育てていってみてください。