WordPress Tips | 基本設定:メニューの表示順序管理

web Web
スポンサーリンク

なぜ「メニューの表示順序」をちゃんと決めるべきなのか

ナビゲーションメニューは、ユーザーがサイトの中を移動するときの「地図」です。
どのページを一番左(=一番目立つ位置)に置くか、どれを右側に追いやるかで、
ユーザーが「何から見るか」「何を重要だと感じるか」が大きく変わります。

プログラミングで言えば、
API のエンドポイントをただ並べるのではなく、
「よく使うもの」「重要なもの」を分かりやすく整理しておくのと同じです。

メニューの表示順序を「なんとなく追加した順」に任せていると、
気づかないうちに“迷いやすいサイト”になっていきます。


WordPress のメニューは「ドラッグ&ドロップで順番を決める」

メニュー編集画面の基本イメージ

WordPress のメニューは、管理画面の
外観 → メニュー
から編集できます。

ここでは、メニュー項目(固定ページ・投稿・カスタムリンクなど)が
縦に並んだリストとして表示されます。

この並び順が、そのままフロント側の
ヘッダーメニューやフッターメニューの表示順になります。

順番の変更はとてもシンプルで、
メニュー項目をマウスで掴んで上下にドラッグするだけです。

コードを書かなくても、
「上にあるものほど左側(または先頭)に表示される」というルールで動きます。

階層構造(サブメニュー)も同じ画面で管理する

メニュー項目は、
少し右にずらして配置すると「子メニュー(ドロップダウン)」になります。

例えば、

会社概要
 └ 代表挨拶
 └ 会社情報

のような構造も、
ドラッグ&ドロップで「親子関係」と「順番」を同時に管理できます。

ここで大事なのは、
「順番」と「階層」を意識して設計することです。
ただ並べるのではなく、「ユーザーがどう辿るか」をイメージしながら並べます。


表示順序を決めるときの“考え方の軸”

1. 一番左(先頭)には「サイトの目的」を置く

多くのテーマでは、
メニューの一番左(または先頭)が最も目立つ位置になります。

ここには、
そのサイトでユーザーに一番見てほしいページを置くのが基本です。

例としては、

サービスサイトなら:「サービス紹介」「料金」
企業サイトなら:「事業内容」「製品情報」
個人ブログなら:「ブログ」「記事一覧」

など。

「ホーム」を一番左に置くパターンもありますが、
ロゴクリックでトップに戻れる設計なら、
あえてホームを外して“本当に見てほしいページ”を先頭にするのもアリです。

2. 右側(末尾)には「補助的な情報」を置く

メニューの右側(末尾)は、
ユーザーが「必要になったときに探す」情報を置くのに向いています。

例としては、

お問い合わせ
アクセス
プライバシーポリシー
利用規約

など。

これらは重要ではあるものの、
「最初に必ず見てほしい」情報ではないことが多いので、
末尾にまとめておくとバランスが良くなります。

3. 関連する項目は“かたまり”で並べる

メニューの順番を決めるときは、
「意味の近いものを隣り合わせにする」ことも大事です。

例えば、

サービス
料金
導入事例
よくある質問

のように、「サービスに関する情報」を一塊にして並べると、
ユーザーは「この辺を見ればサービスの全体像が分かる」と理解しやすくなります。

逆に、
サービス → 会社概要 → ブログ → 料金 → 採用
のようにバラバラに並べると、
ユーザーは「どこに何があるのか」を毎回探すことになります。


例題:シンプルな企業サイトのメニュー順序

想定サイト

小さな Web 制作会社のサイトを想定してみます。
用意しているページは、次のようなものだとします。

ホーム
サービス
料金
制作実績
会社概要
採用情報
ブログ
お問い合わせ

これを「とりあえず追加した順」に並べると、
だいたいこんなカオスになりがちです。

ホーム
会社概要
ブログ
サービス
制作実績
料金
採用情報
お問い合わせ

これを、ユーザー目線とサイトの目的から整理し直してみます。

並べ替えの考え方

このサイトの目的は、
「サービス内容を知ってもらい、問い合わせにつなげる」ことだとします。

そうすると、
ユーザーに辿ってほしい理想の流れは、

サービス → 実績 → 料金 → よく分かった → お問い合わせ

のようなイメージになります。

これをメニューに反映すると、例えばこうなります。

サービス
制作実績
料金
会社概要
ブログ
採用情報
お問い合わせ

ホームはロゴクリックで戻れる前提なら、
あえてメニューから外しても構いません。

もし入れるなら、
「サービスの前」か「一番左」に置く形になります。

ここでのポイントは、
「会社の都合で並べる」のではなく、
「ユーザーが知りたい順に並べる」ことです。


例題:個人ブログのメニュー順序

想定サイト

個人の技術ブログで、ページ構成がこうだとします。

ホーム
ブログ
プロフィール
ポートフォリオ
お問い合わせ

これを、よくある「なんとなく」の順番で並べると、

ホーム
プロフィール
ポートフォリオ
ブログ
お問い合わせ

となりがちですが、
ユーザーが一番見たいのは「記事(ブログ)」です。

なので、例えばこう並べる方が自然です。

ブログ
プロフィール
ポートフォリオ
お問い合わせ

ホームはロゴに任せるか、
どうしても入れたいなら先頭に置くかのどちらかです。

技術ブログなら、
「まず記事を読んでもらう」
「その後に“誰が書いているか”を知ってもらう」
という流れを意識すると、順番が決めやすくなります。


プログラミングの感覚で捉える「メニュー順序管理」

これは「ルーティングの優先度設計」に近い

Web アプリケーションのルーティング設計では、

どの URL を用意するか
どの順番でルートを評価するか
どのエンドポイントを目立つ場所に置くか

を考えます。

メニューの表示順序管理は、
それを「人間の UI」に落とし込んだものです。

どのページを“入口”にするか
どのページを“補助的な導線”にするか
どのグループを“かたまり”として見せるか

を決めることで、
ユーザーの動線を設計していることになります。

「追加した順」ではなく「意図した順」にする

メニューの順番を決めるときに一番やってはいけないのは、
「作った順に並べる」ことです。

プログラミングで言えば、
「書いた順に関数を並べる」のではなく、
「役割ごとにグルーピングして並べる」方が読みやすいのと同じです。

メニューも、

サイトの目的
ユーザーの行動パターン
ページ同士の関係性

を一度頭の中で整理してから、
ドラッグ&ドロップで「意図した順」に並べる。

このひと手間だけで、
サイトの“使いやすさ”はかなり変わります。


まとめ:メニュー順序は「情報設計そのもの」

「メニューの表示順序管理」というのは、

どのページを一番見てほしいか
ユーザーにどんな順番で情報を届けたいか
どのページ同士を“セット”として見せたいか

を決める、情報設計そのものです。

WordPress 的には、
外観 → メニュー でドラッグ&ドロップするだけの作業ですが、
その裏には「サイトの目的」と「ユーザーの動き方」を考える思考が乗っています。

もし今、メニューが「追加した順」のままなら、
一度だけでいいので、

このサイトで一番見てほしいページはどれか
その次に知ってほしいことは何か

を紙に書き出してみて、
その順番にメニューを並べ替えてみてください。

それだけで、
あなたのサイトは「なんとなく作ったサイト」から
「ちゃんと設計されたサイト」に一歩近づきます。

タイトルとURLをコピーしました