Category : Design

previous entry Web標準を目指せ | ブラウザあれこれ next entry

メニューを分かりやすく

Date2007-01-19 Trackback0 Comment0 CategoryDesign Tags

ナビゲーションメニューにもちょっと気をつかって制作したいですね。

「閲覧者が即座に見たいページ・箇所に移動できるように」という意味合いで,各ページへのリンクの一覧,つまりメニューを載せると思います。メニューがあると,このサイトには他にどんなページがあるのか,サイト全体を俯瞰できるというメリットもありますね。

メニューの役割

「資料請求」とか「お問い合わせ」といった目標とするページへの導線をつくれ。と言われたこともあります。しかし,

  • 閲覧者は検索してやってくる。
  • 閲覧者は自分の意志で必要なところを拾い読みしている。

ということを考えると,トップページから入り,こちらが意図するリンクをたどって読み進めることは,あまり期待できません。むしろ,どのページに来ても,即座にサイトの概要が理解でき,見たいページに移動できるようにしておくことが大事だと思います。

メニューをしっかりつくっておくと,

  • サイト全体を俯瞰できる。
  • 即座に読みたいページに移動できる。
  • 現在のページがサイトのどこに位置するかが分かる。

といったことが可能になります。

デザインの統一

メニューの配置・色がサイト全体で統一されていると使いやすく,分かりやすいものになります。ページごとにメニューの場所が変わったり,配色が変わったりするのは混乱を招きます。リンクの並び順も統一しておくのが無難でしょう。

一般的に,メニューはヘッダーの下あたり,あるいは左か右のサイドに置かれているサイトが多いようです。閲覧者は「このあたりにメニューがあるはず」という予測で閲覧しているので,あまり特殊でない配置をしたほうが分かりやすいでしょう。

サイドに置いたメニューが縦に長くなると,下のほうはスクロールしないと見れないということもおきます。これは少々不便を感じます。サイトのボリュームが大きい場合,いくつかのカテゴリに分けて,それぞれのカテゴリのトップページへのリンクをヘッダー下に配置し,カテゴリ内のメニューをサイドに置く,という方法もよく見かけます。また,マウスをのせたりクリックするとメニューが現れるような,プルダウンメニュー,折りたたみメニューを使っているサイトも多いですね。

ただし,プルダウンメニューや折りたたみメニューは,マウスをのせないと(クリックしないと)なかみが分からないというデメリットがあります。

サイトの中のどのページを見ているのか,「現在位置を知らせる」ということも重要です。トピックパス(パンくずリスト)などをページ上部に置くという方法とあわせて,メニューの現在のページのところを反転させるとか,色を変えるといった方法で示すのも有効です。

ページ内のナビゲーション

ホイール付きマウスが普及してきたので,スクロールを避けるためにページを分割するより,少々長くなっても1ページに収められているほうが好まれる傾向にあるようです。印刷するにしても,ブックマークするにしても,1ページにまとめられていたほうが都合がよいとも言えます。

ページが長くなったときは,ページの内容が把握しやすいように,主な見出しとそこへのリンクを入れたページ内目次のようなものを上部に置くとよいでしょう。

スクロールしていくと,メニューの部分も流れていきます。他のページに移りたいときに,またスクロールして上まで戻るというのもちょっと面倒です。「このページのトップへ」など,メニュー部に戻るためのリンクも数ヶ所に置くと親切です。ページは下まで読まれるわけでははありません。途中で上に戻ることも十分にありうることです。

メニュー部を固定して,スクロールしても流れないようにすることもできます。ただし,ディスプレイの大きさやブラウザの表示文字サイズによっては,メニュー下部までがウインドウに入り切らなくなることもありますので,制作時には注意が必要です。

「こう読んでもらいたい」というこちらの都合を押しつけるのではなく,せっかちで移り気な閲覧者のわがままに対応できるナビゲーションを用意しておくほうが,結果的に読まれるサイトになると思います。

メニューはサイト内の各ページへのリンクのリストととらえられます。(X)HTMLでマークアップするときは,ul,li要素を使うのがよいでしょう。

Trackback (0)

Trackback URL :
http://blog.d-spica.com/MT/mt-tb.cgi/29

Comments (0)

Add Comment

Top