簡単にサイト内を移動できるようにする
メニューは、サイト内にどんなコンテンツがあるのかを伝えられ、ユーザーを適切に誘導する重要な要素です。
主要コーナーへのリンクを用意するメニュー
メニューとは、Webサイト内の主要なコーナーへのリンクを集めた重要なナビゲーションの1つです。ページの上部に横一列に並べた「メニューバー」や、ページ左右の端に縦方向に並べた「サイドメニュー」などが良く使われます。
主要なコー名へのリンクを「メインメニュー」とし、現在閲覧中のコーナーの各ページへのリンクを「サブメニュー」とすることもあります。
これらのメニューは、Webサイト内にどのような情報が公開されているのか簡単に把握できるため、アクセス者にとって非常に便利です。
横向き一列に並べられるメニューバーは、ページの上部(タイトルのすぐ下など)には位置される事が多いメニューです。
上部にあるため必ず閲覧者の目に付きますから、主要なコーナーのリンクに良く使われます。ただし、横方向に長くしすぎると、閲覧者の環境によっては横スクロールバーが表示されたり、メニューが複数行になったりして、醜くなるデメリットもあります。
メニューバーは、項目数が少ないメニューに向いているといえます。
縦向きに並べられるサイドメニューは、ページの左端や右端に配置されます。
一般的にWebページは縦方向に長いのが特徴で、メニューを縦向きにすれば幾らでも項目数を拡張できます。
詳細な項目まで掲載したサブメニューを作りたい場合、割りと全体のコーナー数が多い場合は、縦向きのメニューが良いでしょう。
使いやすいメニューを作るには
使いやすいメニューにするには、以下の3点に気をつけて構成します。
- 全てのページで同じ位置・同じ内容を掲載
- わかりやすいコーナー名をつける
- 階層構造に気をつける
ページの上部や左右端など、常に同じ位置・同じ内容(デザイン)で掲載しておきます。
こうする事で、どこにメニューがあるのかを探す必要が無く、簡単にサイト内を移動できるようになります。
メニューの項目には、できるだけ無い表を推測しやすい項目名をつけます。
日本語のWeb歳との場合は、コーナー名も英語ではなく日本語にしたほうが良いでしょう。
英語のコーナー名だと、(日本語での)検索にもヒットしませんし、意図も伝わりにくい可能性があります。
メニューには、サイト内の同じ階層に属するページだけを並べて掲載するようにしましょう。
なぜなら、複数の階層をごちゃごちゃに記載すると、サイト構造の把握がしにくくなるからです。
どうしても異なる階層の項目を並べたい場合は、「メインメニュー」と「サブメニュー」とに分割しましょう。
横方向のメニューバーなら2行にし、縦方向のサイドメニューなら項目名の戦闘をインデントするなどして視覚的に階層構造を表現するようにします。
SEO効果も期待できるメニュー項目
メニューは、項目をクリックすると当該ページに移動できるナビゲーションですから、各項目は当然リンクになっています。
ですから、項目名(リンク文字)にはキーワードを含めておきましょう。
それによって、リンク先ページの最適化に役立ちます。閲覧者にとってわかりやすく、なおかつキーワードを含められるようなメニュー項目が望ましいでしょう。
多くの場合、キーワードとは、そのコーナーで扱われている話題を端的に表す単語になっているはずですから、単純にキーワードをそのままメニュー項目にしてもかまいません。
横向きの場合は勿論縦向きでも、メニュー1項目当たりにスペースを占有させる事はできません。
したがって、メニュー項目はあまり長い文字列をかけません。
その為、テキストリンクでは旨くキーワードを含められない場合もあります。
そのような時は、メニュー項目を画像で作成し補足的な部分の文字サイズを小さくする事で、比較的長い文字列を含める事ができます。
メニュー項目を画像で作る場合は、代替文字を必ず書いておきます。
それによって画像の読み込み前でもクリックできるようになりますし、また、検索エンジンにも適切に内容が伝わるようになります。
この方法なら、あまりメニュー項目のスペースをとらずに、ある程度のキーワードを含めたメニューにできます。
ただし、画像の代替文字中にたくさんの文字列を含みすぎるとスパムに取られかねません、必ず、画像上に実際に表示されている文字だけを代替文字に含めるようにしましょう。