グローバルナビゲーションでユーザビリティUP

グローバルナビゲーションとは、主要なコンテンツへのリンクをひとまとめにしたナビゲーションバーのことで、全ページ共通の主にページ上部に設置されているものです。

グローバルナビゲーションは、ユーザをサブコンテンツへ誘導する役目だけではなく、サイトへの入り口がトップページではなく末端ページだった時にも、効果を発揮します。　

グローバルナビゲーションと共に、ヘッダー内のロゴマークをトップページへのリンクにしたり、トップページへ戻るためのアンカーテキストや、パンくずリストを設置することで、なお一層ユーザビリティに配慮したサイトとなります。

SEOではなくユーザビリティとしてのグローバルナビゲーション

アクセス解析を行えば分かりますが、ユーザの入り口となるページは常にトップページとは限りません。相対的に見た場合、トップページからの訪問者よりもサブページからの訪問者のほうが多いことでしょう。

商品やサービス紹介ページなどの末端ページを入り口としたユーザを路頭に迷わせないためにも、グローバルナビゲーションが役に立ちます。

グローバルナビゲーションはサブページへのリンクですので、SEO効果ももちろんありますが、全ページに張られる共通部分のリンクとなるため、アンカーテキストとしての評価はあまり高くなく、ユーザビリティを考え設置するものと捉えた方が良いでしょう。

しかし、グローバルナビゲーションは通常htmlの上部に記述されますので、多すぎず少なすぎずで主要コンテンツのみを表示した方が良いでしょう。

グローバルナビゲーションのロールオーバーはJavaかCSSか

グローバルナビゲーションにロールオーバー（画像置換）を使用する場合、以前はJava scriptで作成されることが一般的でしたが、CSSレイアウトが好まれるようになり、ロールオーバーもCSSで記述するサイトが増えています。

SEOを意識した場合、ボタン画像をCSSで背景設定し、文字部分をテキスト表示すると良いでしょう。装飾にこだわりたい場合は、文字を含めたボタン画像を背景設定し、アンカーテキストをCSSで非表示にすると良いと思います。

当サイトは、一枚の画像を使用しロールオーバーを行っており、CSSでロールオーバーさせる位置を調整し、リンクとなるアンカーテキストはdisplay:none（不可視）にしています。

一枚の画像を先に読み込ませておく事で、ボタンにマウスが乗るたびに画像を読み込む作業が無くなり、ページ読み込みが早くなります。画像ファイルの管理も一枚で済むのでメンテナンス的にも良いと思います。

display:noneはSEOスパム？

「CSSのdisplay:noneを使用し、テキストを非表示にすることはSEOスパムになるのでは？」との意見を時折見かけますが、　正しい使い方であれば今のところ問題ありません。

詳しくは以前に書いた「CSSのdisplay:noneはスパムになるのか」をご覧ください。

タグ

ユーザビリティ