トップページ > ロジックオブデザイン【目次】 > サイトの構造そしてナビゲーション【目次】 > ナビゲーションのパターン
ナビゲーションのパターン
よく見られるナビゲーションのパターンを紹介します。 もちろんこれだけではありません。あなたのWebサイトに当てはまるものはありましたか？ それぞれの特徴を頭に入れて、 もう一度ナビゲーションを見直してみるのもよいのではないでしょうか。
分類項目式ナビゲーション
情報の分類項目へのリンクを配置するナビゲーションです。 分類項目ごとにナビゲーションがあるので、すぐにどんな情報があるのかが分かります。 これはよくタブ式のナビゲーションなどで表現されます。
メリットとして、良くある形なので初級ユーザにとってもわかりやすい、 サイトの構造を反映しやすいという点が挙げられます。 デメリットとしては、拡張性に乏しい、 リンクボタンが分かりやすくないと機能しにくいという点が挙げられるでしょう。 分類項目が増えることを頭に入れた設計と、クリックを促す分かりやすい表現が必要です。
＜Webサイト例＞格納式ナビゲーション
リンク項目がたくさんある場合、 プルダウンやマウスオーバーなどの形でリンクを1つのところに たたんでしまうナビゲーションです。DHTMLによってリンク先の階層構造が表示され、 それを選択していくことで各ページへジャンプします。
メリットとして、ナビゲーションの省スペース化ができるので、 情報量の多いWebサイトでもスッキリとしたデザインができるという点が あげられるでしょう。デメリットもあります。 やはりDHTMLやJavaScriptを使うのでユーザの環境に依存する点、 ナビゲーションを操作しないと情報が表れない、という点が挙げられます。 充分ターゲット・ユーザを考えて設計する必要があります。
＜Webサイト例＞テキストリンク式ナビゲーション
リンク内容をテキストによるリンクで表示するナビゲーションです。 大量の情報を扱うポータルサイトなどでよくみられます。
メリットとして、更新性に優れている、訪問済みのリンクが視覚的にわかる、 表現によってはサイトの構造を把握しやすいという点が挙げられます。 デメリットとしては、ブラウザによってテキストの表現がまちまちなので 思わぬところで改行が入ってしまったり、 レイアウトがくずれるなどして分かりにくくなるという点が挙げられるでしょう。 対象ブラウザでしっかりと表示されるようにブラウザチェックは欠かせません。
＜Webサイト例＞パンくず式ナビゲーション
ユーザのたどってきたページの経路をテキストによって表示するナビゲーションです。 童話｢ヘンゼルとグレーテル｣で帰り道の印にパンくずを落としたという 話が名前の由来になっているそうです。
ユーザがいるページの階層が一目瞭然なので Webサイトのどの位置に自分がいるのか大変わかりやすいナビゲーションです。 しかし、サイトの階層構造をダイレクトに反映しているので、 複数のしっかりとした階層構造を持つサイトでなければ表現できません。 階層を区切る記号は｢>｣｢/｣｢|｣等が一般的に使われます。 文字と記号の間にスペースを入れるといっそうわかりやすくなるでしょう。
＜Webサイト例＞