ブログやホームページを作るときに考えるグローバルメニュー。
いわゆるサイトの目次の役割を果たすもので、ユーザーが目的のページに迷わず辿り着けるよう誘導するパーツです。
Webサイトの中でも重要な部分なんですが、結構適当に作ってしまっている人が多いんですよね。
分かりにくいメニューはユーザーの離脱率をあげてしまったり、お申し込みや登録に辿り着けない＝機会損失を生んでしまうことになるので、慎重に考えないといけません。
グローバルメニューを最適化するとページの遷移がしやすくなるので、アクセスアップにも影響します。
ということで、今日はユーザーを迷わせないグローバルメニューの条件を3つ、お伝えしたいと思います。
[ad#co-1]グローバルメニューとは？
記事の冒頭から、「グローバルメニュー」を連呼していますが 笑、耳慣れない人もいると思うので簡単に説明しますね。
Webサイトを見ると、上↑のような、主要コンテンツへのリンクを置いたメニューバーがだいたい置いてありますよね。
これを「グローバルメニュー」と呼びます。
メニューリンクはサイドバーにあったりもするんですが、ページのヘッダーに置いているメニューバーは「グローバル」＝「世界的な」という意味で、サイトの中で1番主要なメニューと捉えてください。
特に名前が決まっているわけではなくて、
グローバルナビとか
ヘッダーナビゲーションとか
ヘッダーメニューとか
メインメニューとか
色々な名前で呼ばれます 笑。
初心者さんがまず気を付けるべきポイント
さて、このグローバルメニューですが、サイト内のページ遷移をスムーズにするため、また主要コンテンツに訪れてもらうために、考えて設置する必要があります。
そのために一番重要なポイントは、メニューを多くし過ぎないこと。
色んなページを見てもらいたいという気持ちから、とにかくたくさんメニューを置いてしまっている人が多いですが、これは一番やっちゃダメなやつです 笑。
ダメな理由は、選択肢が多くて逆に選べなくなってしまうから。
「A～Cのうちどれにしますか？」と、「A～Gのうちどれにしますか？」と聞かれた場合、選択するストレスがかからないのはA～Cの3つから選ぶ場合ですよね。
心理学用語で「マジックナンバー」という言葉があるんですが、認知心理学において、人が短期的に記憶できる情報は7個±2と言われています。
ひとによって、5～9個まで。
また、いやいや「7」は多いよ、マジックナンバーは「4±1」だよ。
という説もあります。
いずれにしても、数が多いと認知しずらくなってしまうんです。
このマジックナンバーは普段の生活にも浸透していて、例えば電話番号は「090-2134-5879」のように、3つまたは4つのかたまりで表記されますが、これを「09021345879」にすると、途端に記憶しずらくなります。
他にも、郵便番号やクレジットカードの番号、テレビのリモコンなど見てみると、3つか4つのかたまりになっていることに気付きます。
話がちょっと脱線したので戻すと、メニューをたくさん載せる＝たくさんの情報を見てもらえるわけではない、ということです。
個人的には、メニューの数の上限はトップページへのリンクも含めて6がギリかなと思っています。
5だとスッキリ、7だと多いなと感じますね。
リンクをたくさん載せすぎて2行になっているのは論外です。
マジックナンバーのくだりでお伝えしたように、多い少ないの感覚には個人差があります。
「誰が見ても分かりやすい」を目指すなら、極力選択肢はしぼってあげた方が親切。
サイトのページ構成をしっかりと考えれて動線を整えれば、ちゃんと下層ページまでユーザーは訪問してくれます。
くれぐれも、欲張り心を出さないように。
視線の流れに合わせてメニューを置く
ユーザーが迷わないグローバルメニュー作りに必要なふたつめのポイントは、視線の流れを考慮すること。
パソコンの画面を開いたときに、まず目が行くのは左上です。
そして左から右へと視線は動きます。
この流れを意識した配置にすると、メニューがわかりやすくなるんですね。
例えば、
初めての方に
プロフィール
サロンについて
など、サイトにはじめて訪れた人に読んでもらいたいコンテンツへのリンクは左の方に配置。
そして、最後にクリックして欲しい「お申込み」や「お問い合わせ」のリンクは一番右にという感じです。
メニューの真ん中に「お問い合わせ」を置くとかはやめて下さいね。
ごくたまに見かけますが、唐突感がハンパないです。
今のサイトは、レスポンシブデザインになっているものが多いので、スマホにするとメニューが縦並びで表示されることがあります。
そういう場合も、視線は上から下へ流れていくので、最後にお問い合わせや登録があるとスムーズです。
メニューの名前は簡潔かつ分かりやすく
これも基本の「キ」ですが、メニュー名は簡潔で分かりやすい名前にしましょう。
長い名前や、カッコいいからと英語表記にしたメニューはユーザビリティーを下げます。
英語表記にするなら日本語表記も合わせて載せる、なくても伝わるワードは思い切って削るようにして、「一瞬で正しく伝わる」を意識してください。
まとめ
今日は、意外と適当にしている人が多いグローバルメニューの作り方を取りあげてみました。
気を付けたいポイントは以下の3つです。
- メニューを多くし過ぎない
- 視線の流れに合わせてメニューを置く
- メニュー名は一瞬で正しく伝わるを意識する
グローバルメニューはユーザビリティに大きく影響する部分でもあるので、適当に作っていた人はぜひ一度見直してくださいね。
ユーザー目線のサイト設計について知りたい人には、こちらの記事もおすすめです。
noteたった2ヶ月でPV（ページビュー）を2倍にした、Webサイト改善の3つのポイント
[sp]
[ad#co-2]
[/sp]
