【Cocoon】読者が迷わないグローバルメニュー＆サイドバー設計

Cocoonのグローバルメニュー設定とサイドバー設計

WordPressテーマ「Cocoon」は、無料とは思えないほど高機能で、初心者でも扱いやすいテーマです。
その中でも グローバルメニュー（ヘッダーメニュー） と サイドバー は、読者の回遊率・SEO・UX（ユーザーの利便性）に大きく影響する重要な要素です。

特に IT初心者向けのサイト では、グローバルメニューの構造が読者の迷いを減らし、サイト全体の専門性を高める役割を果たします。

この記事では、Cocoonでグローバルメニューを最適化する方法と、SEO・UX（ユーザーの利便性）の観点からの正しい作り方を、初心者向けにわかりやすく解説します。

初心者の方でも、この記事を参考にサイト作成進める手助けになれば幸いです。

また、私自身WordPress を使い始めた頃は、「メニュー（ナビゲーション）の設定」「サイドバーの見易さ」で何度もつまずきました。
この記事では、私が実際に経験したトラブルと、そのときにどう解決したかを交えて解説します。

グローバルメニュー設定の基本（Cocoonの仕様）

私も初めての場合、グローバルメニューが何なのか解らず、とにかく下図のようなイメージのサイトにするにはどうすれば良いか悩んでいました。

下記の順で進めて行くとグローバルメニューが作成できました。

グローバルメニューとは、サイト上部に表示される「案内板」のことです。
読者がサイト内を迷わず移動できるようにするための重要なナビゲーションです。

WordPressのメニューは、次の場所に表示できます。

• ヘッダーメニュー（上部）
• フッターメニュー（下部）
• モバイルメニュー（ただしスマホでは1階層のみの表示です。）
• サイドメニュー（ウィジェット）

操作手順：
管理画面⇒外観⇒メニュー

Cocoonでは、メニューの表示位置を複数選択できます。

注意｜グローバルメニューの最適な構成

結論：グローバルメニューは、1階層で4~5項目とする。多くても階層は2階層までとします。（スマホでは1階層だけの表示となります。）

Cocoonでは、1階層4〜5項目、2階層まで がユーザビリティの観点から最適です。

なぜ4〜5項目が最適なのか？

理由・私の意見を下記に記載します。

• 3階層以上も技術的には可能（細かく分けすぎると、逆に読者にとっては、マイナスです。）
• スマホではサブメニューが非表示
• 項目が多いとユーザーが迷いやすい（人間が一目で理解できる項目は7項目数以下と言われます。）

メニューが反映されないときの対処

解決方法：私の経験上、一度「メニュー項目を削除」→「再追加」→「保存」で解決することがあります。

カテゴリ構造とメニュー構造を一致させる

私もWordPressをはじめた時、グローバルメニュー（カテゴリ）の意識が薄く後で修正する時に手間がかかりました。
これからサイト運用をはじめられる方等、メニュー（カテゴリ）は最初の設計が重要です。

●カテゴリ内容を単語（短い文）で構造化する。
１階層：大分類
２階層：中分類
３階層：小分類

カテゴリとメニューが一致していると、Googleがサイト構造を正しく理解します。

カテゴリ数は、増やしすぎない。増やしすぎると後で修正等に手間がかかります。
スラッグにも影響する為、注意してください。

一致させるメリット

私も記事数が多くなり、メニューとカテゴリ内容が違う場面に遭遇すると対象の記事を探し回り効率が落ちました。
そこで記事変更に伴い、内容も変わった時はカテゴリ名・メニュー名を併せ変更するようにしました。

●メリット

• ユーザーの迷いをなくし、目的の情報へ最短で到達させること（ユーザビリティの向上）。
• サイト構造を検索エンジンに正しく伝えてSEO効果を高めること。
• 回遊率の向上： 興味のあるカテゴリがメニューとして常に視界に入るため、他の関連ページへの移動（クリック）を促しやすくなります。
• メニューで『副業』と書かれているのに、クリックした先のページ（カテゴリ名）が『お金の稼ぎ方』だと、ユーザーは一瞬『あれ？違うページに来たかな？』と迷ってしまいます。これを統一することでストレスを無くします。

●デメリット

• カテゴリ名を変更する際、WordPressなどで「URL（スラッグ）」まで一緒に変えてしまうと、別のページとして認識されます。
• スラッグを変更すると、これまで獲得していた検索順位（SEO評価）が一時的にガタ落ちするリスクがあります。
• カテゴリ名やURLが変わることで、過去の記事内に貼っていたリンクが切れる（404エラーになる）可能性があります。
• 全記事をチェックしてリンクを貼り直す必要があり、記事数が多いほど膨大な作業時間が奪われます。

●対策

• 名前（日本語）だけを変えて、スラッグ（URL）は変えない。（URLを変えなければSEOへの悪影響は最小限で済みます。）
• どうしてもURLが変わってしまう場合、古いURLから新しいURLへ自動転送するプラグイン（Redirectionなど）導入をする。

メニュー項目に「説明文」を表示する方法

ここでは、私がメニューの補足説明を記述する方法はないかと迷っていました。メニュー、操作で簡単にできました。（下図参照ください。）

Cocoonはメニューに「説明文」を追加できる珍しいテーマです。
この説明文を入れることで、以下の効果が得られます。

操作：
外観 → メニュー → 表示オプション → カテゴリした（▼）をクリック → メニュー項目に説明を入力→「メニューを保存」（下図参照）

説明文を入れるメリット

メリットを下記に記載します。

• 初心者でもメニューの意味が理解しやすい。
• Googleがサイト構造を正しく理解しやすくなる。
• 読者の回遊率が上がり、滞在時間が伸びる。
• メニューが“専門的な案内板”として機能する。
• 初心者が迷わず目的のページに移動できます。

デメリットを下記に記載します。

• スマホの限られた画面内でグローバルメニューを開いた際、説明文があることでメニュー1項目あたりの縦幅（高さ）が広くなってしまいます。結果として、メニュー全体が画面に収まりきらず、ユーザーが下までスクロールしないと重要なリンクに気づけないというユーザビリティの低下を招きます。
• 文字量が増えることで視覚的な情報過多（ノイズ）になり、ユーザーがどのボタンを押せばいいのか迷う原因になります。
• パソコン表示の際、説明文の長さが項目ごとにバラバラだと、メニューボタンの高さや幅が不揃いになり、サイト全体の美観（デザイン性）が損なわれます。また、文字数が多いと自動的に改行されてしまい、非常に見栄えが悪くなるテクニカルなデメリットもあります。
• 将来的にカテゴリ名やブログの方向性を少し変更した際、メニュー名だけでなく「説明文」までセットで書き直す必要が出てきます。記事数やカテゴリが増えたときに、管理コストが倍増するデメリットがあります。

画面レイアウト（サイドバー設定）

サイドバーは、記事の横に表示される「補助ナビゲーション」です。

ここでは、私自身サイトを編集していて、レイアウト等ちょくちょく変更した際の設定など記載します。参考にしていただけると幸いです。（〇〇な事をやりたいが、どんな方法があるかなど意見や質問は「問い合わせ」より気楽にお問い合わせください。記述内容が間違っている等も歓迎してます。）

初心者が特につまずきやすいポイントに注意し記載します。
・項目名を設定した内容が反映されない（反映されない場合、原因は複数あります。今回私の場合は、キャッシュが原因でした。主にキャッシュが原因で表示が反映されないケースがあります。一度キャッシュの削除等お試しください。）
・メニューやウィジェットの階層が理解しにくい
・設定場所が複数に分かれている。
・似た名前の項目が多く混乱する。

サイドバーの設置位置を変更した場合

●メリット
・読者が迷わない。
・サイドバーの位置は、読者の視線誘導に大きく影響します。
・特にスマホでは左側に配置するとメニューが見つけやすくなり、回遊率が向上します。
・Cocoonではこの設定を簡単に変更できます。
以下の手順でサイドバー位置を調整できます。

サイドバー全体を左側にする場合（Cocoon）

ここでは、読者の目線の位置を考慮し私の場合、サイドバー全体の位置を左右入れ替えました。
Cocoonのテーマでは、メニュー操作で簡単にできます。（詳しくは下記参照ください。）

解決方法：「Cocoon設定」⇒「全体」⇒「サイドバーの位置」を左に✓をする。

サイドバー表示項目数の見直し（Cocoon）

私の場合、あまり使われていないリンクがあり、誤リンクになり読者も使いづらいと思いました。
そこで、サイドバーをスッキリさせ、表示項目を最小限にする為余分な項目を削減しました。

解決方法：下記手順に沿って実施し解決できました。（サイドバーより削除したいメニューなどの表示位置を見直すことができます。）

●なぜウィジェットを触るのか？
・サイドバーに表示される項目は「ウィジェット」で管理されています。
・ウィジェットは“サイドバーに何を表示するか”を決める場所なので、ここで順番の変更や非表示設定を行います。

●なぜ非表示にするのか？
ウィジェットを削除してしまうと、再設定が必要になり手間がかかります。
そこで便利なのが「使用停止中のウィジェット」エリアです。
ここにドラッグすると、設定を残したまま非表示にできるため、後で元に戻したいときにも安心です。

手順：「管理画面」⇒「外観」⇒「ウイジェット」

操作：現在、サイドバーに表示されているものを設定を残したまま非表示にしたい場合は、下図赤枠（使用停止中のウィジェット）にドラック＆ドロップで移動します。

注意

・ウィジェットを削除すると、設定内容が完全に消えてしまいます。
・後で元に戻す場合に再設定が必要になるため、非表示にしたい場合は「使用停止中のウィジェット」に移動するのが安全です。

上図のようにプロフィールのブロックを移動し及びアーカイブ・コメントを非表示にし、自分の好きな位置に設置することが可能です。

サイドバー内表示を親カデゴリー表示のみにしたい場合

ここでは、サイドバーのカテゴリーを1階層目のみの表示にした場合の操作方法を、初心者にわかるように下記に解説しました。

●デメリット
・カテゴリが多いと、サイドバーが縦に長くなり読者が目的の情報にたどり着きにくくなります。

●メリット
・親カテゴリだけを表示するメニューを作成すると、サイドバーがスッキリし、サイト全体の見やすさが向上します。

最終（イメージ）画面：下図（右側の図）のように1階層目のみ表示する場合。

解決、下記の2工程（「●グローバルナビゲーションメニューでの操作」「●ウィジェットでの操作」）で解決できました。

●グローバルナビゲーションメニューでの操作
管理画面⇒外観⇒メニュー⇒「新しいメニューを作成しましょう。」⇒作成したメニューに親カテゴリのみ入力⇒「メニューを保存」（詳しくは下図：画面①②を参照ください。）
⇒左画面の親カテゴリ（例では：カテゴリ）の「すべて表示」より親カテゴリのみにチェック⇒「メニューに追加」⇒親カテゴリが追加されたのを確認し「メニューを保存」をクリックする。（詳しくは下図：画面③を参照ください。）

●ウィジェットでの操作
管理画面⇒外観⇒ウィジェット⇒ウィジェットのナビゲーションメニューをサイドバーに✓を確認し⇒「ウィジェットを追加」（詳しくは画面④を参照ください。）
ウィジェットのサイドバーに追加された「ナビゲーションメニュー」⇒タイトルにグローバルナビゲーションで新規作成メニューを選択する。⇒「保存」（詳しくは画面⑤を参照ください。）すると完成できました。

新規メニューの作成

下図画面①から③で完成です。

ウィジェットでの操作

下図画面④⑤で完成です。

サイドバー内表示をプルダウン＋階層表示にした場合

●背景
サイドバーのカテゴリ表示が親階層のみの表示で、エリアを占有していたのでプルダウン表示及び階層表示で小スペースの設置ができないか困っていました。

●効果
特にカテゴリ数が多いサイトでは、一覧を折りたたむことで視認性が向上します。

解決方法：下図の設定を行うことにより解決できましたので、下記に記載します。参考になれば幸いです。

下図(完成図)のように、ウィジェット（下図＝ウィジェットの画面）で完成しました。

設定：下図の赤枠（ドロップダウンで表示／階層を表示にチェック）

まとめ：グローバルメニューとサイドバーは導線改善の最重要要素

最後まで記事を見ていただきありがとうございました。

この記事では、Cocoonテーマのメニュー設定（グローバルメニュー／サイドバーメニュー）について初心者がつまずきやすいポイントを解説しました。
グローバルメニューは「上部の案内板」、サイドバーは「横の補助案内板」です。

●この記事でわかったこと
・読者が迷わない
・メニューはカテゴリと一致させる。
・メニューは1階層4〜5項目で2階層が最適
・反映されないときは「削除→再追加→保存」（経験済み）
・説明文は「表示オプション」から設定
・カテゴリが消えたらウィジェットの表示設定を確認
・回遊率が上がる
・滞在時間が伸びる
・SEOが強化される

初心者向けサイトでは、導線改善が最も効果的な施策です。

「Cocoonで必ず設定すべき基本機能まとめ｜初心者向けWordPress設定ガイド」の関連記事を下記リンクしてますのでご覧ください。

全体の流れを詳しく知りたい方は、まず「【Cocoon】初心者が最初に設定すべき基本機能と重要項目まとめ」からご覧ください。