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