アメブロカスタマイズ：ナビゲーションメニューを作るときに気を付けておきたいポイント。

ナビゲーションをドロップダウンメニューや画像、アニメーションのみで作ることは控える

ブログご訪問ありがとうございます。
仙台で起業して11年目。営業・集客・200億商社元営業部長の経験。実績豊富な個人ビジネス専門コンサルタント Sophia’s Color 代表漆沢英一です。

ナビゲーションメニューとは

ナビゲーションメニューとは、ブログやホームページサイトの上部やサイドにあるリンクです。

このブログでは、パソコン表示では下記の赤枠で囲った部分。

スマホ表示の場合は下記の青枠で囲んだ部分です。

ナビゲーションメニューの中で、ブログやWebサイトの全ページに常設されているメニューをグローバルメニュー、メインメニューとも言います。

ナビゲーションメニューは、ブログやWebサイトを訪問した人が、それらの主要なページに簡単にたどりつくことができる便利なものです。

ナビゲーションメニューを作るときに気を付けておきたいポイント

非常に重要なナビゲーションメニューですが、作成するにあたってSEO的に気を付けたい事があります。

それは・・・・

ナビゲーションをドロップダウンメニューや画像、アニメーションのみで作ることは控えるということです。

～ここから引用～

ナビゲーションにテキストを使用する。

サイト上のページ間のナビゲーションの大部分をテキストリンクで制御すると、検索エンジンが容易にサイトをクロールして把握できるようになります。JavaScript を使ってページを作成する場合は、a 要素とともに href 属性の値として URL を使用し、ユーザーの操作を待つのではなく、ページ読み込み時にすべてのメニュー項目が生成されるようにします。

以下のことは避けましょう。

全体的に画像やアニメーションに基づいてナビゲーションを作成する。
スクリプトやプラグインに基づくイベント処理を必要とするナビゲーションを作成する。

～ここまで引用～
引用元：Google検索エンジン最適化スターターガイド

SEO（検索エンジン対策）的にはナビゲーションはできるだけテキストにして、よく見かける画像だけのメニューやドロップダウンメニューは控えた方が好ましいようです。

特に画像のみのメニューでは、検索エンジンがナビゲーションメニューとして認識できないので、避けた方が無難です。

また、アクセシビリティ的にも避けましょう。

ちなみに、ここでいうアクセシビリティとは、ウェブアクセシビリティです。

～ここから引用～

「ホームページを利用している全ての人が、心身の条件や利用する環境に関係なく、ホームページで提供されている情報や機能に支障なくアクセスし、利用できること」を意味します。

～ここまで引用～
引用元：外務省について > このサイトについて > ウェブアクセシビリティ

ナビゲーションが画像だと、視覚に障害がある方は、その部分を認識できない＝アクセシビリティが悪いという事になります。

また、ブログ内の画像にタイトルをつけれるようになっていますが、これもウェブアクセシビリティの観点から行っていることであり、SEO（検索エンジン対策）的にも行った方が望ましいことです。

せつかく検索で上位表示をねらって、ホームページを作成したり、ブログカスタマイズを行っても、こういった基本的な事（検索エンジン対策やアクセシビリティの確保）を知らないで行うと効果が見込めません。

きちんとポイントを押さえたナビゲーションメニューを作りましょう。

ちなみに、Sophia's Colorは、会社退職後、個人事業主として起業する時に独学で、国家検定制度である、3級ウェブデザイン技能士を取得しており、基本的な知識・技能、実務能力等を公証されています。