ピックアップコラム
-
Pickup!
プラグインなし!オリジナルSNSシェアボタンの作り方ガイド
-
Pickup!
カラー別にみてみる!WEBサイトにおける配色パターン
-
Pickup!
サイドバーとは?サイドバーを設置するメリットと書き方
-
Pickup!
ワードプレスのプラグインで画像の圧縮・最適化をしてみた
グローバルナビゲーションという言葉をご存知でしょうか。グローバルナビゲーションは、ユーザーにサイト内のコンテンツを紹介するために設置されているメニューのことです。今回は、グローバルナビゲーションの具体的な役割や、作成する上での注意点、デザイン例をご紹介していきます。
目次
グローバルナビゲーションとは、サイト内の各コンテンツを紹介するために設置されるメニューです。グローバルナビゲーションは、主要なコンテンツへのリンクとなるので、基本的にはヘッダーなど全ページに共通する部分に設置するのが望ましいです。
スマホ版のナビゲーションはハンバーガーメニューと呼ばれる3本線が入っているアイコンをクリックすることで各メニューが紹介されるサイトが多くなっています。
ハンバーガーメニューについては下記の記事でも解説しています。
グローバルナビゲーションの役割は以下の2つがあります。
検索してくるユーザーはどのページから訪れるかわかりません。例えば下層のページからアクセスした場合、
グローバルナビゲーションがないと、どんなサイトかわからない、必要な情報に遷移したい場合、どこをクリックすれば良いかわからない可能性があります。
なおグローバルナビゲーションと合わせて、ユーザーの現在の階層の深さを表す「パンくずリスト」があるとより効果的です。
パンくずリストについては下記の記事で解説しています。
グローバルナビゲーションには多くの内部リンクが集まります。検索エンジンは、内部リンクが多く張られたページを重要なコンテンツと認識する傾向にありますので、グローバルナビゲーションを設置して重要なコンテンツであると伝えましょう。またクローラーは、各内部リンクをたどって各ページをクロールしていきます。
そのため、グローバルナビゲーションを設置して、クローラーがサイト内のページを辿りやすくなり、例えば新規に追加したページがいつまでも認識せず、インデックスされないということを防ぐことが出来ます。
クローラーについては下記の記事で解説しています。
ここでは、グローバルナビゲーションを作成するにあたってのポイント(注意点)を見ていきます。
先ほども紹介しましたが、グローバルナビゲーションは、ユーザーに対して現在いる場所を示し、サイトがどんな内容で、どのように遷移すれば良いかという役割があります。そのため、グローバルナビゲーションのデザインを統一することで、ユーザーは、同じサイトにいることを理解することが出来ます。
ただし、お問い合わせなどフォームは、グローバルナビゲーションを設置すると他のページに遷移してしまう可能性もあるので、極力設置しない方が良いです。
こちらも先ほど紹介しましたが、パンくずリストがあるとよりユーザーが、今どこの階層にいるのか把握できます。なおパンくずリストのデザインの注意点ですが、メインとなるコンテンツのすぐ上あたりなど、ファーストビューでどこの階層にいるのか認識できるところに設置しましょう。
またパンくずの内部リンクのテキストは、ユーザーが現在いるページのタイトルと同じにすると、どこにいるかすぐに把握することが出来ます。
大規模サイトだと、表示するメニューの数も増えてくると思います。しかし、グローバルナビゲーションのメニューが多すぎると、ユーザーはかえって混乱していしまいます。
認識心理学上、人間は一度に認識できる要素は7つ程度といわれていますので、グローバルナビゲーションも最も伝えたいメニューを7つ程度に絞ると良いです。
ただ、企業の商品名などユーザーが一見すると何がわからない場合は、もう少しメニューの数を減らすと良いです。
先ほどはメニューの数についてご紹介しましたが、どういう順番で並べるかも併せて意識すると良いです。これも認知心理学を使って、最も見て貰いたいメニューから左から順番に並べると良いです。
例えば、トヨタのサイトで言うと、グローバルナビゲーションの順番は以下のようになっています。
上記で言うと、車のラインナップがTOYOTAが一番見せたい項目ということが推測できます。逆にユーザーが良く見る項目を一番左にもってきても良いと思います。
グローバルナビゲーションは、divタグとpタグの組み合わせでも作成することが出来ますが、リストタグでマークアップすることで、検索エンジンに認識されやすくなるというSEO上の効果が期待できます。
グローバルナビゲーションは、クローラーにとっても重要になってきます。クローラーは、トップページに配置されたグローバルナビメニューを起点に各コンテンツをクロールしてインデックス登録していきます。
クローラーは、画像の認識がテキスト比べまだ精度がよくないため、画像でグローバルナビを作ると正常に認識できない可能性があります。これについては、以下の検索エンジン最適化(SEO)スターター ガイドの避けるべき項目で「全体的に画像やアニメーションに基づいてナビゲーションを作成する」とあります。
そのため、グローバルナビゲーションは画像ではなくテキストやhtmlで作成するようにすると良いです。なおJavascriptを使ってグローバルナビを作る場合は、ページ読み込み時にメニューが表示されるようにすると、クローラーも正常に認識できます。
参考URL:検索エンジンにとって重要なナビゲーション
グローバルナビゲーションも様々なデザインがあります。
最も一般的なものは、グローバルナビゲーションをヘッダーの上部に配置し、各メニューにカーソルを合わせるとドロップダウンメニューが表示されるものです。サンプルのhtmlやcssは以下となります。
htmlの例
<navi id="navi"> <ul id="menu"> <li><a href="#">メニュー1</a> <ul class="sub-menu"> <li><a href="#"<i class="fa fa-caret-right" aria-hidden="true">サブメニュー</a></li> </ul> </li> <li><a href="#">メニュー2</a> <ul class="sub-menu"> <li><a href="#"<i class="fa fa-caret-right" aria-hidden="true">サブメニュー</a></li> </ul> </li> <li><a href="#">メニュー3</a> <ul class="sub-menu"> <li><a href="#"<i class="fa fa-caret-right" aria-hidden="true">サブメニュー</a></li> </ul> </li> </ul>
CSSの例
#navi { position: relative; margin: 30px 35px; width: 100%; } #menu { display: block; height: auto; margin: 0; padding: 0; } #menu li { float: left; width: 33%; text-align: center; list-style: none; /*リストの黒い点を削除*/ position: relative; /*z-indexの指定や子要素の基準とするために指定*/ z-index: 1; /*ドロップダウンしたメニューが隠れないように*/ } #menu li a { padding: 0 20px 10px; border-top: none; border-right: none; background: none; color: #d9004e; display: inline-block; margin: auto; line-height: 1.3; text-align: left; } #menu li a:hover { background: none; color: #d9004e; text-decoration: underline; } #menu li a:active { color: #d9004e; } #menu li ul.sub-menu { display: none; /*サブメニューは最初は非表示*/ position: absolute; top: 0px; padding: 20px 10px; background: rgb(255, 94, 152); margin-top: 20px; } #menu li ul.sub-menu a{ color: #fff; line-height: 1.2; margin-bottom: 1em; } #menu li a i{ margin-left: -9px; } #menu li:hover ul.sub-menu { display: block; /*マウスオーバー時にサブメニューを表示*/ } #menu li ul.sub-menu li { float: none; width: 100%; text-align: left; }
ヘッダーの上部ではなく、右端や左端に配置するやり方もあります。左端に配置している例としてはフォルクスワーゲンのトップページが該当します。サンプルのhtmlやcssは以下となります。
htmlの例
<navi id="navi"> <ul id="menu"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> </ul> </body>
CSSの例
#nav ul { position: relative; } #menu, #menu a{ color: #fff; } #menu li a{ background: #242424; padding: 30px 25px; list-style: none; border-bottom: 1px solid #222; position: relative; } #menu { list-style-position: inside; margin: 0 0 2em; padding: 0; } #menu li { margin: 0; list-style: none; padding: 5px 0 4px; border-bottom: 1px solid #000000; } #menu li a { text-decoration: none; } #menu li a:hover { text-decoration: underline;}
いかがでしたか?今回はグローバルナビゲーションについて解説しました。グローバルナビゲーションのデザインは様々ですが、グローバルナビゲーションの目的は、ユーザーに対して、何のサイトなのか、今開いているページはどのようなページなのか、サイトでどのようなことが出来るのか(わかるのか)が提供できれば良いデザインといえます。
もちろん、seo上はメインコンテンツが重要で、せっかく良いグローバルナビゲーションを作っても、メインコンテンツ疎かにならないよう、メインコンテンツの充実も併せて行ってもらえればと思います。
受付時間:平日10:00~19:00(土・日・祝日を除く)