初めに知っておきたい、ナビゲーションメニューの基本

ナビゲーションメニューはホームページに訪れたユーザーが高確率で使用する重要なパーツです。これから理解を深めていくためにも、まずはナビゲーションメニューの基礎やポイントなどを学んでおきましょう。

ホームページのナビゲーションメニューとは

そもそもナビゲーションメニューとはホームページに取り付けられている、他のページへと移動するリンクが並んでいる箇所の名称です。基本的にどのホームページを見ても、必ずと言っていいほど存在しています。

ナビゲーションメニューを設置するポイント

ホームページの上部やサイドにナビゲーションメニューを設置するときのポイントとして、メニューの個数は5～9個くらいがおすすめです。というのも人間が瞬間的にぱっと見て記憶できる数の限界が、5～9個だと言われているからです。少なすぎても多すぎてもユーザーが混乱してしまい、どこに自分の欲しい情報があるのかわからず、結局たどりつけずにホームページを去ってしまう、なんてことも起こるので気を付けましょう。

ナビゲーションメニューが無いホームページもある？

先ほど、基本的にどのホームページを見てもナビゲーションメニューは必ずといっていいほど存在していると言いましたが、実はナビゲーションメニューが存在しないホームページもあります。

健康食品などの1つの商品に特化したホームページに多く見られるのですが、トップページのみで構成されていて、ただスクロールするだけという非常にシンプルな「ランディングページ」というものです。こういったホームページは1ページで完結しているため、本来他のページを見てもらう事を目的に設置するナビゲーションメニューは、無くても問題ありません。そういった意味で、ナビゲーションメニューが無いホームページがたまに存在するのです。

もっと詳しく知りたい方はランディングページについてまとめたコラムをご覧ください。

ナビゲーションメニューの種類とメリットデメリットをご紹介

ナビゲーションメニューには色々な種類・デザインがあり、それぞれに名称がついています。
当コラムでは、3つのナビゲーションメニューを画像付きでご紹介します。全てこのクレフのホームページにて実際に使用されているナビゲーションメニューなので、どんな風に動作するのかぜひ体験してみてください。

ハンバーガーメニュー

ハンバーガーメニューは3本線のアイコンが特徴的で、ここをクリックすることで隠れていた情報が出てくるメニューです。この3本の線がハンバーガーに見えるというのが名前の由来です。ドロワーメニューと呼ばれることもあります。
スマホなどの小さな画面でホームページを訪れた際に見られることが多く、スマホやタブレット、小さめのパソコンなどでこのページを見ている人は右上にこのハンバーガーメニューが出ているのではないでしょうか。

たくさんの情報を小さなスペースに収められることがメリットですが、根本的にこの3本線の部分をクリックすると、メニューが出てくることを事前に知っている必要があるという点がデメリットです。

アコーディオンメニュー

アコーディオンメニューとはメニューの一部だけが表示されており、そこをクリックすると隠されていた部分が開閉するメニューです。項目を開閉する動作が、楽器のアコーディオンの蛇腹のように見えるのが名前の由来です。こういったメニューの一部をクリックして情報が出てくるメニューをまとめて「ドロップダウンメニュー」と呼ぶこともあります。このホームページでは先ほど紹介したハンバーガーメニューの中に、このアコーディオンメニューを取り入れています。

自分が好きな項目を自由に開閉ができることがメリットですが、全ての情報に目を通したい場合は全項目を開閉する必要があり、手間がかかるというデメリットがあります。

メガメニュー

メガメニューは一部が表示されているメニューの上にカーソルを重ねたり、クリックすることで情報が現れるメニューです。先ほどのアコーディオンメニューで紹介した「ドロップダウンメニュー」の一種でもあります。アコーディオンメニューより広く、画面幅いっぱいのスペースを取ることができるため、中に画像を入れることもできます。
このページを大きなパソコンの画面などで見ている方は、画面上部にあるナビゲーションメニューにカーソルを重ねると、メガメニューを実際に見ることができます。

広いスペースで1度に情報可視化することができ、メニューが多階層にわたる場合などに使いやすいのがメリットですが、スマホなどの画面サイズの小さい媒体で見るのには向いていないことがデメリットです。

ホームページでナビゲーションメニューがユーザーにとって重要な理由とは

ナビゲーションメニューにも色々な種類があることを学びましたが、実際に使用するのはユーザーです。訪れたホームページを見続けるか、それとも去るかを判断する基準にもなるくらいナビゲーションメニューは重要です。ユーザーにとってナビゲーションメニューの存在はなぜそこまで重要なのでしょうか。

他のページの存在を知ることができる

ナビゲーションメニューが設置されていれば、今自分が見ているページ以外にも他のページが存在していることが分かります。トップページには載せきれなかった内容を詳細ページでは得ることができるため、ナビゲーションメニューの中にユーザーが欲しいと思っている情報の項目があれば、その場所にたどりつきやすくなります。

どのページを読んでいても移動できる

ユーザーが間違えて、自分が開きたいページとは違うページを開いてしまった場合や、以前見たページを再度見たいといった場合などでも、目に入る位置にナビゲーションメニューがあれば、自分が開きたいページへスムーズに移動することができます。どれだけスクロールしてもナビゲーションメニューが画面内に収まるようにすることもでき、どこを見ていても必ずナビゲーションメニューが目に入る構造にすることも可能です。

ホームページの使いやすさに繋がる

ユーザーをホームページに留めておくためには、ホームページ自体の利便性が大きく関わってきます。
どこに何があるのか分かりにくい、といったホームページだと、訪れたユーザーがすぐに去ってしまうなんて事もあります。ですがナビゲーションメニューを目に見える場所に設置するだけでも、使いやすさはかなり変わるため、それだけでもユーザー離れの対策にもなります。さらに、使いやすければ検索エンジンで上位表示を目指すこともできる、というメリットもあります。詳しくは検索エンジンで上位表示を目指すためのコラムでご紹介していますので、ご覧ください。

訪れたユーザーが自分の求めている情報が見つからなかったと去ってしまう可能性を減らすためにも、ナビゲーションメニューを設置してホームページを使いやすくしましょう。

まとめ

ここまでナビゲーションメニューについて解説してきました。ナビゲーションメニューは、訪れたユーザーが見やすいと思えるようなデザインにすることが大切です。

最近だとスマホでホームページを見ると右上にハンバーガーメニューが設置されているということが多くあります。これは利き手でスマホを操作することが多いこと・人類の90％は右利きということが関係しており、多くの人の利き手である右手だけでも押しやすいように、とそういったユーザーの使いやすさをしっかりと考え、設置されています。

名称や役割を知っておくことで、頭に思い浮かべているものを制作側の人に伝えた際に、イメージのギャップが起きづらくなります。他のホームページではどのようなメニューが使われているのか、制作を依頼する前に調べてみるのも良いでしょう。