ブログのナビゲーション設計・メニューバーの作り方

ブログのナビゲーションやメニュー項目の設定はどのようにすればいいのか迷いませんか?

メニューの項目を最適化するとサイトの内容が把握しやすくなり、情報がどこにあるのかわかるようになるので回遊し滞在時間が増加することが期待できます。

最適な回遊導線を作ることで、ブログの滞在時間・閲覧ページ数を増やし、収益を増やす機会を最大化しましょう。

このページの内容(目次)

そもそもウェブサイトのナビゲーションの種類にはどのようなものがある?

ウェブサイトのナビゲーション(ページ移動を行うもの)には、主に下記のようなものがあります。

名称は使用しているテーマによっても多少違いがありますが、本ページでは下記図の名称を使用します。

ナビゲーションメニュー(PC)
ナビゲーションメニュー(PC)
ナビゲーションメニュー(SP)
ナビゲーションメニュー(スマホ)
ナビゲーション概要
グローバルナビゲーションサイトの主導線。メニューバー のことです。
ローカルナビゲーションサイドバー のことです。
ブレッドクラムナビゲーションパンくずリストのことです。
コンテンツ内ナビゲーションページ内リンクのことです。
関連ナビゲーション記事下の関連ページです。
ページネーション2ページ目以降に移動するリンクです。
検索ナビゲーション検索です。
補助ナビゲーションフッタと、ヘッダ内のサブメニューなどです。
ほとんどのサイトで使われているナビゲーション
ナビゲーション概要
リニアナビゲーション順番に見ていくナビゲーションです。マニュアルなどに多くみられます。
ナビゲーションページサイトマップや、コンテンツの一覧・カテゴリの一覧を紹介するページです。
選択的に使うことがあるナビゲーション

次に、各メニュー毎の設定パターンを紹介していきます。

グローバルナビゲーション(メニューバー)

項目数1行につき5~8項目
サブメニュー設置されることも多い
メニューの追従追従できるテーマも多い

特化ブログに多い形状

特化ブログのグローバルナビゲーション(メニューバー)

特化ブログは、大きく分けると特定の商標(商品)についてだけ掘り下げる商標特化型のブログと、カテゴリに含まれる複数の商標(商品)を紹介するカテゴリ特化ブログに分類できます。

共通しているのは収益記事をグローバルメニューに配置すること。

ランディングした集客記事から収益記事にスムーズに移動させ、成約の最大化を狙うようにするパターンです。

中~大規模ブログに多い形状

コンテンツの多いブログに多いグローバルナビゲーション(メニューバー)

複数の特化コンテンツ(一つ一つが独立した特化ブログにできる)を持つテーマブログや、中規模~大規模(ページ数で300ページ以上)のサイトに多い形状です。

メニューの項目はカテゴリーページやタグページにすることはもちろん、固定ページでコンテンツトップを作ることもあります。

≫ 参考:固定ページと投稿の使い分け

各コンテンツの設計がピラミッド構造になるよう、コンテンツ名部分にはシングルワードの検索語を設定する場合がほとんど。

ブログの取り扱いテーマによっては、ユーザーの分かりやすさを重視して、用途軸や目的軸、探し方軸でメニューを構成することもあります。

ポートフォリオ型に多い形状

ポートフォリオ型のブログに多いグローバルナビゲーション(メニューバー)

個人の紹介に焦点をおいたポートフォリオサイトに多いメニュー構成。

個人ブログではハイブリッド型のようなメニュー構成も少なくありません。

運営者自体がコンテンツとなりうる場合に良く採用されるパターンです。

グローバルメニューは1つの「軸」で統一するのがおすすめ

個人ブログの場合はハイブリッド型のメニューバーになっていることが非常に多いです。

情報設計の観点からすると、メニューの並びには何らかの単一の軸(切り口)を持たせるほうが初見で理解しやすくなります

複数の軸を混ぜたハイブリッド型のメニュー項目は散らかった印象になり、何が並んでいるのか理解しづらくなります

ただ、最近では特にSEOでも発信者が誰か(コンテンツが信用に足るか)は重要項目の一つなので、SEO観点からすればあながち悪いともいえないかもしれません。

メニューバーは漏れなく重複なく(MECE)

  • サイトの主要な情報にメニューバーからアクセスできる
  • メニューの項目間で記事を共有していない

料理の例で例えるなら、メニューバーには「煮物」「揚げ物」「焼き物」のようにわけるのではなく、「和食」「洋食」「中華」「アジアン」といった形で分かれている方が良いということになります。

というのも、境界線があいまいなものがどのメニューの中に含まれているのか判断できるようにするためです(料理の例では、煮物だと、和食もあるし、洋食の料理もある、ということになるので)。

加えて「その他」のような、「濁し表現」はできるだけ避けるべきです。

飛んだ先に何があるのかわからないリンクは基本的に押されません。サイトの使い勝手は常に「予測可能」であることが重要です。

メニューバーの形状(ぶち抜きか、ロゴの横か)

メニューバーはサイト幅いっぱいにぶち抜きで設置される場合と、ロゴマークの横に設置する場合の2パターンがあります。

ぶち抜きにすると、メニューの項目数は7~9個程度、ロゴの横なら6個以内くらいが妥当な数です。

ぶち抜きメニューは導線としての意味合いが強くなります。一定の高さが必要になるので、目に入りやすくなり、単一の機能になるためです。回遊を重視する場合はぶち抜きにすると良いでしょう。

ロゴの横に設置するメニューは、導線の意味合いが少し薄れます。その分高さを押さえて本文への集中度が高まります。回遊より本文の内容への集中を促したい場合はロゴ横のメニューが最適です。

サイドバーメニュー(ローカルナビゲーション)

項目数10個以内くらいに収めるべき
サブメニューアコーディオン化して設置する場合もあり
メニューの追従追従できるテーマも増えてきている

メニューバー(グローバルナビゲーション)との役割分担

サイドバーメニュー(ローカルナビゲーション)はメニューバーの有無で役割が変わるため、項目が変わります。

パターンメニューバーサイドバーメニュー
連動型主導線連動型導線
補助型主導線補助導線
主導線型未設置主導線+補助導線

連動型

ブログのメニューの構造:連携する場合

主導線で選んだ内容に応じてサイドバーの内容が変化する、というものです。

身近な例では、ファッション通販のサイトのような感じのものです。

分類が少なく、小分類の数がかなり多い時によく使われます

補助型

ブログのメニューの構造:連携しない場合

メニューバーとは連携しておらず、独立した導線設計です。

情報を探す時に、最も大多数の人が認識できる切り口をメニューバーにし、別の切り口でも探せるように補助的な内容にして設置します。

一つの情報軸で項目が多くなる場合や、情報軸(切り口)が複数考えられるサイトに多くみられます。

主導線型

そもそもメニューバーを設置しない場合のパターンです。

  • メニューの項目数が10個以上あって、メニューバーには入り切らない場合
  • 反対にメニューバーに設置できる項目数が3つ以下など少なすぎる場合
  • これからまだ項目数が増えていく可能性がある場合
  • ナビゲーション機能をサイドバーに集約させて、本文への集中度を最大化したい場合

上記のような場合に、あえてメニューバーは設置せずに、サイドバーに主導線の機能ももたせてしまう方法です。

フッターメニュー(補助ナビゲーション)

フッターナビゲーションの例

フッターに配置するナビゲーションはどのサイトでも概ね項目が似通ったものになります。

  • HOME
  • サイトマップ
  • お問い合わせ
  • プライバシーポリシー
  • 免責事項
  • 運営者情報
  • お仕事のご依頼

といったものが入る傾向があります。

形状も非常にシンプルで、テキストを等間隔に配置するだけか、パイプ文字で区切っただけにすることが多いです。

スマホのフッタには、上記の他に、

  • トップに戻る
  • メニュー(ドロワーの開閉)
  • 目次までのアンカー

が画面下に固定ボタンとして並ぶこともあります。

ヘッダサブメニュー(補助ナビゲーション)

ヘッダーサブメニューの例

ヘッダーサブメニューは主にヘッダ内に設置する小さいメニューです。

メインになるメニューバーを邪魔しないよう、装飾的な要素もあります。

  • 各種SNSのリンク
  • 検索
  • RSS
  • お問い合わせ

などを設置することが多いです。テーマによっては対応していない場合もあります。

メニューの追従のメリットとデメリット

ヘッダやサイドバーは「追従」という機能を持たせてあるテーマが少なくありません。

追従機能とは、スクロールしても画面に残り続ける(ついてくる)機能のことです。

追従機能を利用するメリットは「画面に固定されるため、回遊される確率(メニューを利用される確率)が高まる」ということです。

逆にデメリットは、画面の領域を一定量消費するので、本文表示領域が狭くなってしまうということです。

画面内に固定する場合は邪魔にならないことが前提です。

スマホでのメニューの統合

スマホ版は、PC版とメニューの位置や項目内容を大きく替えることが少なくありません。

強制的に単一カラムになるスマホでは、サイドバーは存在できず、本文の下に回り込むか、非表示になってスマホメニュー(ドロワーともいわれるハンバーガーメニューのこと)の中に統合される場合があります。

良し悪しはありませんが、形状が大きく変わる場合にPC側と導線の設計が異なるようになるため、画面の広いPC版と遜色ないようにしておく必要があります。

まとめ

ブログのナビゲーションの種類や、メニューの項目の設定方法について解説してきました。

各メニューでの項目は、訪問者から見てパッと意味が理解できるようなものにしておくのがポイントです。

このページの内容(目次)
閉じる