Category : Design
メニューを分かりやすく
ナビゲーションメニューにもちょっと気をつかって制作したいですね。
「閲覧者が即座に見たいページ・箇所に移動できるように」という意味合いで,各ページへのリンクの一覧,つまりメニューを載せると思います。メニューがあると,このサイトには他にどんなページがあるのか,サイト全体を俯瞰できるというメリットもありますね。
メニューの役割
「資料請求」とか「お問い合わせ」といった目標とするページへの導線をつくれ。と言われたこともあります。しかし,
- 閲覧者は検索してやってくる。
- 閲覧者は自分の意志で必要なところを拾い読みしている。
ということを考えると,トップページから入り,こちらが意図するリンクをたどって読み進めることは,あまり期待できません。むしろ,どのページに来ても,即座にサイトの概要が理解でき,見たいページに移動できるようにしておくことが大事だと思います。
メニューをしっかりつくっておくと,
- サイト全体を俯瞰できる。
- 即座に読みたいページに移動できる。
- 現在のページがサイトのどこに位置するかが分かる。
といったことが可能になります。
デザインの統一
メニューの配置・色がサイト全体で統一されていると使いやすく,分かりやすいものになります。ページごとにメニューの場所が変わったり,配色が変わったりするのは混乱を招きます。リンクの並び順も統一しておくのが無難でしょう。
一般的に,メニューはヘッダーの下あたり,あるいは左か右のサイドに置かれているサイトが多いようです。閲覧者は「このあたりにメニューがあるはず」という予測で閲覧しているので,あまり特殊でない配置をしたほうが分かりやすいでしょう。
サイドに置いたメニューが縦に長くなると,下のほうはスクロールしないと見れないということもおきます。これは少々不便を感じます。サイトのボリュームが大きい場合,いくつかのカテゴリに分けて,それぞれのカテゴリのトップページへのリンクをヘッダー下に配置し,カテゴリ内のメニューをサイドに置く,という方法もよく見かけます。また,マウスをのせたりクリックするとメニューが現れるような,プルダウンメニュー,折りたたみメニューを使っているサイトも多いですね。
ただし,プルダウンメニューや折りたたみメニューは,マウスをのせないと(クリックしないと)なかみが分からないというデメリットがあります。
サイトの中のどのページを見ているのか,「現在位置を知らせる」ということも重要です。トピックパス(パンくずリスト)などをページ上部に置くという方法とあわせて,メニューの現在のページのところを反転させるとか,色を変えるといった方法で示すのも有効です。
ページ内のナビゲーション
ホイール付きマウスが普及してきたので,スクロールを避けるためにページを分割するより,少々長くなっても1ページに収められているほうが好まれる傾向にあるようです。印刷するにしても,ブックマークするにしても,1ページにまとめられていたほうが都合がよいとも言えます。
ページが長くなったときは,ページの内容が把握しやすいように,主な見出しとそこへのリンクを入れたページ内目次のようなものを上部に置くとよいでしょう。
スクロールしていくと,メニューの部分も流れていきます。他のページに移りたいときに,またスクロールして上まで戻るというのもちょっと面倒です。「このページのトップへ」など,メニュー部に戻るためのリンクも数ヶ所に置くと親切です。ページは下まで読まれるわけでははありません。途中で上に戻ることも十分にありうることです。
メニュー部を固定して,スクロールしても流れないようにすることもできます。ただし,ディスプレイの大きさやブラウザの表示文字サイズによっては,メニュー下部までがウインドウに入り切らなくなることもありますので,制作時には注意が必要です。
「こう読んでもらいたい」というこちらの都合を押しつけるのではなく,せっかちで移り気な閲覧者のわがままに対応できるナビゲーションを用意しておくほうが,結果的に読まれるサイトになると思います。
メニューはサイト内の各ページへのリンクのリストととらえられます。(X)HTMLでマークアップするときは,ul,li要素を使うのがよいでしょう。
Trackback (0)
Trackback URL :
http://blog.d-spica.com/MT/mt-tb.cgi/29

Web標準を目指せ
2007-01-19
0
0
Design
Comments (0)