- スマホのスクロールが長い原因はサイドバーにあるカテゴリーの重複です
- 全て自動表示されるカテゴリーとは違いメニュー機能なら手動で整理できます
- あえて表示しない裏メニューの活用でスマホ表示が劇的にスッキリします
みなさん、自分のブログを「スマホ」でちゃんと確認していますか？ 私は……正直に告白します。PC のプレビュー画面だけで満足していました。
「よし！ PC のサイドバーに『人気記事』と『カテゴリー』を置いたぞ。これで読者さんも使いやすいはず！」 そう思って、意気揚々とスマホの実機で自分のサイトを開いた瞬間です。
管理人さん「……長い。長すぎる……！！」
記事を読み終わった後、延々とエンドロールのように続く情報群。 しかも、2度目の「カテゴリー」が出現！
初心者さん「あれ？ これさっき見なかった？ デジャヴ？」
上（スマホではサイドバーは下部に表示）にもカテゴリー。下（フッター）にもカテゴリー。 完全に情報の渋滞が発生していました。
管理人さん「これじゃあ、読者さん分かりづらいよなぁ～」
今回は、この「スマホの表示崩れ」を直そうと格闘していた私が、偶然たどり着いた「カテゴリーとメニューは別物である」という事実についてお話ししますね。
初心者の方、特に「作ったカテゴリーは全部メニューに表示されるもんでしょ？」と思っている方。 それ、私と同じ勘違いかもしれませんよ！
当サイトの情報は個人の体験談であり、投資の助言や医学的な治療効果を保証するものではありません
【事件発生】スマホのフッター周りが「カオス」状態
ことの発端は、SWELL の「サイドバー」の仕様でした。 PC で見ると右側にある便利なサイドバーですが、スマホで見ると「記事コンテンツの下」に自動的に移動します。これを「カラム落ち」なんて言ったりします。
私のサイトの構成はこうでした。
- サイドバー：人気記事、カテゴリー、検索窓
- フッター：プロフィール、カテゴリー、タグクラウド
これをスマホで見ると、こうなります。
- 記事本文（終了）
- 人気記事（サイドバーから落下）
- カテゴリー（サイドバーから落下）
- 検索窓（サイドバーから落下）
- プロフィール（フッター）
- カテゴリー（フッター）
- タグクラウド（フッター）
管理人さん「カテゴリー、お前 2回出てくるんかい！！」
しかも、サイドバーのカテゴリーって、記事数が増えると縦に伸びるんです。 読者さんは「フッターのプロフィールを見たい」と思っても、その前に立ちはだかる「カテゴリーの壁」をスクロールし続けなければなりません。
「これは、ユーザビリティ（使いやすさ）的に 0点だ……」
ここから、私の「ウィジェットいじり倒し大会」が始まりました。
【発見】謎の項目「ナビゲーションメニュー」
「とにかく、スマホの時だけサイドバーのカテゴリーを消したい」 「でも、PC ではサイドバーにカテゴリーがあった方が便利そうだし……」
そんな迷いの中、ウィジェットの設定画面で「ナビゲーションメニュー」という項目を見つけました。
管理人さん「ん？ ナビゲーション……？ なにこれ？」
試しに、フッターの「カテゴリーウィジェット」を削除して、代わりにこの「ナビゲーションメニュー」を置いてみました。 設定画面で「タイトル」を付けられるようです。
ここでふと、思ったんです。 「カテゴリー」って、なんとなく「分類」のことだとは分かるのですが、英語が苦手な私にはイマイチピンと来ない響きなんですよね。 試しにタイトルを「サイトメニュー」にして、中身を「ヘッダーメニュー」と同じものに設定してみました。
プレビューを見て、思わず声が出ました。
管理人さん「あ、こっちの方が分かりやすいかも！」
そもそも言葉の意味すら理解していない「カテゴリー」よりも、自身でヘッダー用に整理した「メニュー」表示の方が分かりやすく親切に見えたんです。
【混乱】え？ メニューとカテゴリーって同じじゃないの？
しかしここで、ある「素朴な疑問」が浮かびました。
管理人さん「待てよ……。私のヘッダーメニューって、カテゴリーを全部並べてるから一緒じゃない？」
そうなんです。 ブログを立ち上げた時、私は作ったカテゴリー（FX に沼る、AI に沼るなど）を、そのまま全部ヘッダーメニューに登録していました。
私の認識は現時点ではこうです。
「ヘッダーメニュー」 ＝ 「カテゴリー」
「中身が一緒なら、なんでメニューとカテゴリーは別々なの？」
頭の中が「？」マークでいっぱいになり、頼れる「Gemini（AI パートナー）」に相談してみました。 すると、ジェミニさんはこう言ったんです。
ジェミニさん「コマコさん、今は同じに見えるかもしれませんが、『カテゴリー』と『メニュー』は全くの別物です。ここを理解すると、中級者への扉が開きますよ！」
「 別物！？ 扉が開く！？」
ジェミニさんの説明を聞いて、私は自分の「初心者あるある」な勘違いに気づかされました。
私の勘違い：カテゴリーは後から追加するものではないという思い込み
カテゴリーは初期段階の骨組みで制作したら、すべての記事は投稿ページで追加していくものと思っていました。 でも実際は違います。
- カテゴリー（ウィジェット）：新しく「ラーメン」カテゴリーを作れば、自動的にリストに追加される。
- メニュー（ナビゲーション）：新しく「ラーメン」カテゴリーを作っても、自分が手動で追加しない限り、メニューには表示されない。
これを聞いた時、「あぁ～、確かにヘッダーメニューに自分で追加しない限り表示されないかも？」でも「わざわざ新しくカテゴリーを作る必要ってなくない？」と思いました。
しかし、ジェミニさんはニヤリと笑って（想像です）こう言いました。
ジェミニさん「コマコさん、自動で『表示されない』ということは、『意図的に隠せる』ということですよ」
【覚醒】衝撃の「裏メニュー」という考え方
「意図的に……隠す……！？」
その言葉を聞いた瞬間、私の中で何かが繋がりました。 今まで「書いた記事は全部見て！ 全部ヘッダーメニューに並べて！」と必死になっていましたが、サイト運営ってそれだけじゃないんだ、と。
例えば、将来こんな記事を書きたくなったらどうでしょう？
- 「失敗だらけの恥ずかしい話（でもファンには読んでほしい）」
- 「期間限定！ 夏休み特別企画」
- 「個人的な独り言（日記）」
これを、サイトの顔である「ヘッダーメニュー」にデカデカと載せるのは、ちょっと違う気がしますよね。 でも、「カテゴリーウィジェット」を使っていると、勝手に表示されてしまいます。
そこで、「メニュー機能」の出番なんです！
- カテゴリーは作る（記事の置き場所は作る）。
- でも、ヘッダーメニューには追加しない。
- フッターや記事下のリンクからだけ辿れるようにする。
これぞまさに、「常連さんだけが知っている裏メニュー」！ この発想は、私には全くありませんでした。
- カテゴリー ＝ 倉庫（あるものは全部見せる）
- メニュー ＝ ショーケース（見せたいものだけ選んで飾る）
この違いに気づいた時、「うわぁ、WordPress って奥が深い……！」と感動すら覚えました。 初心者のうちは「全部見せ」で OK ですが、将来サイトが育ってきた時に、この「見せないテクニック」が強力な武器になる予感がします。
【解決】スマホ画面が劇的にスッキリ！
「裏メニュー」の概念を理解した私は、迷いなくサイトの構造を改革しました。
- サイドバーの「カテゴリー」を削除
- PC で見る時も、フッターにメニューがあれば十分。
- これでタブレットやスマホでの「カテゴリー 2回登場問題」が完全解決！
- フッターに「ナビゲーションメニュー」を設置
- タイトルは「カテゴリー」ではなく、親しみやすい「サイトメニュー」や「コンテンツ案内」などに。
- 中身はヘッダーと同じ「選抜メンバー」を表示。
その結果……
スマホのスクロール、めっちゃ快適になりました！！
記事を読み終わると、そこにはスッキリと整理されたサイドバーの情報、そしてその下には、これまたキレイに整理されたフッターの情報。
これで重複がなくなり、「次にどこに行けばいいか」が直感的にわかるようになりました。
「間延びしてカッコ悪いな……」と悩んでいたあの長い空白が、嘘のように引き締まったサイトに生まれ変わったのです。
【まとめ】初心者は、まず「メニュー」を使ってみよう
今回のトラブルと発見を通じて、私はひとつ大きな教訓を得ました。
「何となく『自動（カテゴリー）』に頼るより、自分で手間をかけて設定した『手動（メニュー）』で案内した方が、自分も分かりやすいし読者にも優しい」
もし、私と同じように「参考ブログのマネをしてサイドバーにカテゴリーをとりあえず置いてる」という方がいたら、一度スマホで自分のサイトを見てみてください。
もし「うわ、長っ！」と思ったら、それはサイトからの「整理整頓してくれ〜」という悲鳴かもしれません。
カテゴリーウィジェットを外して、「ナビゲーションメニュー」を使ってみてください。 そして、将来「裏メニュー」を作る自分を妄想して、ニヤニヤしてみませんか？（笑）
ウェブ制作初心者の私ですが、こうやって失敗して、悩んで、ジェミニさんに相談して、一つずつ「仕組み」を理解していく過程が本当に楽しいです。 今日の「気づき」が、同じように悩む誰かのヒントになれば嬉しいです！