![ヘッダー画像](https://image.jimcdn.com/app/cms/image/transf/dimension=640x10000:format=jpg/path/se0a52b91522daf8d/image/i1a43c36ee84ac5df/version/1477300846/%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%E7%94%BB%E5%83%8F.jpg)
ナビゲーションはWebサイトの目次のような役割をしています。見出しにはたくさん情報が載っている方が、ユーザーにとって便利にちがいない! そうお考えの方も多いのでは?
ところが、ナビゲーションメニューの数が多すぎて、知りたい情報の在り処がわからない! ということが実はよくあります。
この記事では、ナビゲーションを整理しユーザーが使いやすいサイトにするためのポイントを紹介していきます。
INDEX
ナビゲーションの基本について
基本的にはすべてのWebサイトに存在するナビゲーション、主にWebサイトのヘッダー部分かサイド部分にあります。
ナビゲーションは目次の役割をしており、見出しの大きさを階層で分けて表示させることができます。以下はナビゲーションと階層を説明した図です。
![ナビゲーションの位置 説明図 Florence](https://image.jimcdn.com/app/cms/image/transf/dimension=700x10000:format=png/path/se0a52b91522daf8d/image/i67164db0faafe837/version/1470795667/%E3%83%8A%E3%83%93%E3%82%B2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BD%8D%E7%BD%AE-%E8%AA%AC%E6%98%8E%E5%9B%B3-florence.png)
(1)第一階層 ナビゲーションのトップメニュー
(2)第二階層 サブメニュー
(3)第三階層 第二階層から派生する小ページ
(4)パンくずリスト 今自分がどのページを見ているかを表すナビ
レイアウトによってナビゲーションの位置や、第二階層以降が表示される場所はさまざま。またこのようなパンくずリストが付いているものもあります。
![ナビゲーション 編集バー](https://image.jimcdn.com/app/cms/image/transf/dimension=700x10000:format=png/path/se0a52b91522daf8d/image/ibc06eb5a81c577ea/version/1470715248/%E3%83%8A%E3%83%93%E3%82%B2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3-%E7%B7%A8%E9%9B%86%E3%83%90%E3%83%BC.png)
![ナビゲーション 編集画面](https://image.jimcdn.com/app/cms/image/transf/dimension=254x10000:format=png/path/se0a52b91522daf8d/image/ic540a7e8efad6882/version/1470715287/%E3%83%8A%E3%83%93%E3%82%B2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3-%E7%B7%A8%E9%9B%86%E7%94%BB%E9%9D%A2.png)
サイトの編集画面では、このようにナビゲーションの近くに編集バーが表示されます。クリックするとWebサイトのページ一覧が確認でき、ここで階層を変えたりページを非表示にしたりできます。
最適なメニューの数は? 整理整頓のビフォーアフター
基本をおさらい出来たら、ナビゲーションの適切な数についてよくわかる、ビフォーアフターを見てみましょう。以下はとあるWebサイトのトップページです。
![ナビゲーションメニュー 改善前の様子](https://image.jimcdn.com/app/cms/image/transf/dimension=550x10000:format=png/path/se0a52b91522daf8d/image/i22eeeb3080c07e9a/version/1470624426/%E3%83%8A%E3%83%93%E3%82%B2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC-%E6%94%B9%E5%96%84%E5%89%8D%E3%81%AE%E6%A7%98%E5%AD%90.png)
このWebサイトでは、第一階層にメニューが13個載っています。パッと見たときにどこに何の情報があるかがわかりにくいと感じませんか?Jimdoでは、見やすさと使いやすさの観点から、トップメニューの数は7個以下にすることをおすすめしています。
メニュー数を少なくし、簡潔なナビゲーションに改善したものが以下です。
![ナビゲーションメニュー 改善後の様子](https://image.jimcdn.com/app/cms/image/transf/dimension=548x10000:format=png/path/se0a52b91522daf8d/image/i425ff159c2ff88f0/version/1470627380/%E3%83%8A%E3%83%93%E3%82%B2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC-%E6%94%B9%E5%96%84%E5%BE%8C%E3%81%AE%E6%A7%98%E5%AD%90.png)
ユーザーが自分にとって必要な情報を探しやすいように、サイト内のページの大分類を第一階層にまとめています。見栄えもスッキリし、一目でどこに何があるか分かるようになりました。
一方、確かにトップページはスッキリしたけれど、これだとユーザーが求めている情報にたどり着くまでに何回もページを移動しないといけないのでは? と思う方もいるかもしれません。
ナビゲーションが少ない方が良い理由を、掘り下げてみましょう。
なぜ、トップメニューは少ない方が良いのか
例えば、Webサイトに100通りの料理のレシピを載せるとします。
全てのレシピをナビゲーションのトップメニュー(第一階層)に載せると、それだけでトップメニューが100個できますよね。サイトを開くといきなり100個のメニューが並んでいたら、探す気もなくなってしまいませんか?
まずは「揚げ物」「メイン」「前菜」のように、大分類のジャンルを第一階層に載せることによって、第一階層のメニュー数が少なくなります。このほうが、第二階層にある「エビフライ」のレシピまで早くたどり着きそうです。
大量の情報から一つを探さなくてはいけないよりは、見やすいサイトの中で自然に次のクリックを誘導される方が、ストレスなくサイトを使うことができます。
トップメニューは少なく簡潔な方が良い理由まとめ
1. どのユーザーも使いやすいサイトにするため
初めてサイトを訪問したユーザーは特に、見にくさや使いにくさを感じるとすぐに閲覧をやめてしまうことも多いです。特定の情報を探して辿りついた人にとっても、シンプルなメニューは情報が探しやすく便利です。
2. SEOで優位に、検索エンジンに引っかかりやすくなるため
簡単で分かりやすいメニュー名にすることで、検索エンジンもサイトの内容を読み取りやすくなります。
3. スタイリッシュなサイトに、元のデザインを生かすため
多くのレイアウトでは、ナビゲーションを一行と仮定して作られています。ナビゲーションが何行にも渡っていると本来のデザインが損なわれたり、ホームページ全体が雑多な印象になります。
作りたいサイトの目的に合わせて整理することが一番ですし、選ぶレイアウトによっては第一階層が多くてもキレイにまとまるものもあります。ひとつの見方として参考にしてみてください。
いざ編集! 整理整頓をする4つのコツ
では、自分のサイトのナビゲーションもスッキリさせたい! と思ったらまず何をすればいいのでしょうか。
1. 1行に納まるように、メニュー名を短くする
メニュー名はWebサイトの内容に関連していて、かつ短ければ短いほど、ユーザーにとっても検索エンジンにとっても親切です。
例)「うちのお店で働きませんか?」→「求人」「求人情報」
例)「メールはこちらから」→「お問い合わせ」
2. メニューのトップからサブへ、階層を移す
すべてをトップ(第一階層)に入れておく必要はありません。関連するページが多い場合や踏み込んだ内容のページは、第二階層以降に移しましょう。
![ナビゲーションメニューの編集 階層の下げ方](https://image.jimcdn.com/app/cms/image/transf/none/path/se0a52b91522daf8d/image/i36d68327aeeb4402/version/1470276545/%E3%83%8A%E3%83%93%E3%82%B2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%AE%E7%B7%A8%E9%9B%86-%E9%9A%8E%E5%B1%A4%E3%81%AE%E4%B8%8B%E3%81%92%E6%96%B9.png)
![階層を下げたときの見え方 ドロップダウン](https://image.jimcdn.com/app/cms/image/transf/dimension=548x10000:format=png/path/se0a52b91522daf8d/image/i3c6c3e4922d826b9/version/1470276681/%E9%9A%8E%E5%B1%A4%E3%82%92%E4%B8%8B%E3%81%92%E3%81%9F%E3%81%A8%E3%81%8D%E3%81%AE%E8%A6%8B%E3%81%88%E6%96%B9-%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%83%80%E3%82%A6%E3%83%B3.png)
3. 不要な情報は削除する
たとえば「開店時間と閉店時間」と「お店の場所」はページ内の情報量が少ないので、1ページにまとめましょう。
必要だと思っていたページも、第一階層には必要ないかもしれません。ナビゲーションの編集エリアにある丸い目のアイコンをクリックし、ページを非表示にすることもできます。
非表示にしてサイト上では見えなくしても、リンクを貼ればユーザーはそのページ見ることができるので、リンクの飛ばし先として使用したり、過去使っていたページとして残しておくことができます。
![ナビゲーションメニューの編集 非表示の仕方](https://image.jimcdn.com/app/cms/image/transf/dimension=332x10000:format=png/path/se0a52b91522daf8d/image/ib7bed059d4644309/version/1470276717/%E3%83%8A%E3%83%93%E3%82%B2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%AE%E7%B7%A8%E9%9B%86-%E9%9D%9E%E8%A1%A8%E7%A4%BA%E3%81%AE%E4%BB%95%E6%96%B9.png)
![ナビゲーションメニュー 非表示にしたときの編集画面](https://image.jimcdn.com/app/cms/image/transf/dimension=519x10000:format=png/path/se0a52b91522daf8d/image/iceb36986c175c59d/version/1470276767/%E3%83%8A%E3%83%93%E3%82%B2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC-%E9%9D%9E%E8%A1%A8%E7%A4%BA%E3%81%AB%E3%81%97%E3%81%9F%E3%81%A8%E3%81%8D%E3%81%AE%E7%B7%A8%E9%9B%86%E7%94%BB%E9%9D%A2.png)
他のレイアウトやプリセットを試してみよう
メニューの数を減らしたり階層の整理をしてみても見た目が気に入らないと感じたら、レイアウトを変更してみると良いかもしれません。
以下はナビゲーションの特徴別で、レイアウトをまとめたものです。
メインコンテンツを邪魔しないシンプルなナビゲーション
![Cape Town サンプル画像](https://image.jimcdn.com/app/cms/image/transf/dimension=277x10000:format=jpg/path/se0a52b91522daf8d/image/iab3c006bcb459a4b/version/1470715368/cape-town-%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E7%94%BB%E5%83%8F.jpg)
![Paris サンプル画像](https://image.jimcdn.com/app/cms/image/transf/dimension=277x10000:format=jpg/path/se0a52b91522daf8d/image/i832ffe0ee6dc2f66/version/1470715381/paris-%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E7%94%BB%E5%83%8F.jpg)
![Rio de Janeiro サンプル画像](https://image.jimcdn.com/app/cms/image/transf/dimension=277x10000:format=jpg/path/se0a52b91522daf8d/image/id8e9b6ac0e685a15/version/1470715392/rio-de-janeiro-%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E7%94%BB%E5%83%8F.jpg)
![Zurich サンプル画像](https://image.jimcdn.com/app/cms/image/transf/dimension=277x10000:format=jpg/path/se0a52b91522daf8d/image/ie6d263dfdedbbc47/version/1470715404/zurich-%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E7%94%BB%E5%83%8F.jpg)
第二階層が目立つレイアウト
![Hamburg サンプル画像](https://image.jimcdn.com/app/cms/image/transf/dimension=277x10000:format=jpg/path/se0a52b91522daf8d/image/i017cf03dbcfb4d0e/version/1470715494/hamburg-%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E7%94%BB%E5%83%8F.jpg)
![Chicago サンプル画像](https://image.jimcdn.com/app/cms/image/transf/dimension=277x10000:format=jpg/path/se0a52b91522daf8d/image/i79875544dae6f57c/version/1470715508/chicago-%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E7%94%BB%E5%83%8F.jpg)
![Florence サンプル画像](https://image.jimcdn.com/app/cms/image/transf/dimension=277x10000:format=jpg/path/se0a52b91522daf8d/image/i5d7d833f89b03646/version/1470715528/florence-%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E7%94%BB%E5%83%8F.jpg)
![Bordeaux サンプル画像](https://image.jimcdn.com/app/cms/image/transf/dimension=277x10000:format=jpg/path/se0a52b91522daf8d/image/if40df8771812472c/version/1470715543/bordeaux-%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E7%94%BB%E5%83%8F.jpg)
以上の一覧やデザインフィルターを使って、自分にあったレイアウトを検索してみてください。
ユーザーが求めている情報が探しやすいようなWebサイトを作ることが大切です。ナビゲーションを整理するだけで第一印象がガラッと変化し、驚くほど機能的なサイトになります。
まずはナビゲーションを整理し、見やすいサイトに少しずつ近づけていきましょう!