人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

階層が深い場合のナビゲーションにおいて、4階層辺りまで来るとパンくずナビゲーションのみに頼るサイトも多いようです。自分としては現在地の確認や階層の確認が、どうも視覚的にイマイチな気がします。なにか良い表示方法をしているサイトをご存じないでしょうか?宜しくお願いいたします。

●質問者: skid
●カテゴリ:ウェブ制作
✍キーワード:イマイチ サイト 現在地 視覚 階層
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● kikuta
●30ポイント

http://www.ufjbank.co.jp/

三菱東京UFJ銀行

UFJのサイトは三和銀行時代のものを踏襲していますが、ナビゲーションに関しては評価が高いようです。

◎質問者からの返答

4階層目にいきそうになると別窓の表示になるわけですね。なるほど、この手も面白いです。

ありがとうございます!


2 ● sphynxx
●30ポイント

FLASH制御なら

http://www.relevare.com/site/

<-Relevare | Bringing the right information, to the right people->

あたりはいかがでしょう?3Dで奥に向かって進むようなナビゲーションです。それから中村勇吾氏によるサイトでは色々試験的な試みがあって、

http://surface.yugop.com/

yugop.com

の2002年左から二つ目のナビゲーションはいくらでも深く掘り込めます。

ただし、いまどきのテキストベースサイトにはいずれも合致していませんね。参考にならなければノーポイントで結構です。

◎質問者からの返答

いえいえ、確かにFLASHではないのですが、十分参考になります。surface...の方は存じ上げておりましたが、relevare...は面白いですね!ステキ。


3 ● sphynxx
●30ポイント

http://elbulli.hattori.ac.jp

度々ですが、エレベータのように深く掘り下げるイメージの、こちらも3Dライクなナビゲーションを持っているサイトです。あばら骨のように背骨コンテンツを軸に2階層・3階層・4階層と垂直に深く掘り下げて、階層内コンテンツは左右水平に移動する方式のナビゲーションです。

画面左下のモーフィングボタンがサイトマップとなったりしています。

こちらもご参考まで。

マッチしていなければノーポイントOKです。

◎質問者からの返答

FLASHって、ちゃんと使えば気持ち良くナビゲーションができるものだとあらためて実感させて頂きました。必要なときにちゃんとメニューを表示する●が出てくれるし、ページを移動するという感覚が薄くなります。

テキスト表示の考えがグラグラしちゃいます。

ありがとうございます!


4 ● Kuruma
●60ポイント

FLASHは一般的なUAに対して非常に有効な手段ではありますが、来訪者全員がFLASHを使えるとは限らない(*1)以上テキスト(+CSS)が最適と個人的には考えております。

最も端的にナビゲーションを表すのはHTMLに於けるLINK要素です。

これはサイト内の構造を明示する事が出来ます。

残念な事にIEは未対応(正確にはstylesheetの読み込みにのみ対応)ですが、Mozilla1.1以降(だったと思う)やOpera7以降、iCabやSafari、Lynxなど最近では多くのUAがLINK要素の存在するサイトに対してナビゲーションを表示する事が可能になっています。

尚、参考までに申し上げますとIEでも拡張する事によってナビバーを表示させる事は可能です。

例えば「ス切リボ(

http://www.xinada.ne.jp/~handa/tech/CSS/SuKiBo/

)」などがあります。

LINK要素によってトップページや索引、目次、章の区切り

、著作権情報のページ等々へのリンクを論理的に記述する事が可能です。

これは是非とも記述しておくべきです。

LINK要素に関しては以下のサイトを参考にしてみてください。

http://www.kanzaki.com/docs/html/link.html

HTML - link要素の使い方

http://www5d.biglobe.ne.jp/~quia/tech/html/link.html

また以下のサイトでどの様に表示されるものなのかが画像を用いて紹介されています。

http://www.kanzaki.com/docs/html/link-navibar.html

link要素がナビゲーションバーに使われている例

とはいえ大多数を占めるIEに対して無力ですし、全ての構造を表示する事は不可能ですのでCSSに頼る事にしたいと思います。

構造を表す以上ol要素(順序付きリスト)、若しくはul要素(順序無しリスト)で書いてゆくことになります。

階層が深くなるごとにolやulをネストさせてゆけばよいわけです。

そしてそれらのolやulをdisplay:noneを指定して非表示とし、

その親要素であるli要素(リスト項目)に対して:hoverな時(マウスが上に乗っている)はdisplay:blockとなるようにすればマウスの乗っているときだけ下の階層のナビが表示されるという処理が実現します。

…といってもあまり具体的に想像がつかないことと思いますので以下のサイトへ行って具体例をご覧下さい。

日本語でまとめられたサイトもあるはずなのですがどこにあったかさっぱり忘れてしまいました。

英語ページですがご勘弁下さい。

一応デザイン的なものは感じ取ってもらえると思います。

http://www.howtocreate.co.uk/tutorials/testMenu.html

Pure CSS menus

なお、ナビゲーションのデザインに関してはCSSによって全てを制御する事が可能である事を一応付け加えておきます。

CSSに関しては次のサイトが詳しいです。

http://hp.vector.co.jp/authors/VA022006/css/

正しい知識を得たい人の爲のCSS2リファレンス

この方法はいかなる環境においても階層的にナビゲーションを伝える事が出来るという点において優れています。

が、古いUAはCSSの実装が甘く、正常に表示されない場合もあるようです。

また音声系ブラウザに対してはそれ相応のCSSを準備しておく必要があるかもしれません。

また、XHTML2.0という新しい仕様ではnl要素という「ナビゲーションリストを明示する要素」が誕生しそうです。

将来的にはこれでナビゲーションを明示することとなってゆくでしょう。

大分横道に逸れた部分もありましたが、参考になりましたら幸いです。

(*1)例えば次のような場合が考えられます。

・FLASHプラグインを入れていなかったり、JS機能を無効にして閲覧している人々

・テキスト系ブラウザ(w3mやLynxとか)を利用している人々

・点字表示をするブラウザ、音声系のブラウザ等に対してFLASHは無力です。

◎質問者からの返答

丁寧にお書きくださいまして、誠にありがとうございます!!

紹介していただいたサイト、どれも非常に参考になりますし、また、考えさせられるご意見でした。CSSで実現するナビゲーションは存じ上げておりましたが、この場合どの辺の環境まで対応するか?が大きな問題となります。例えばOperaを意識するクライアントはまだまだ少なく、そのくせ同じぐらいのシェアであるNN4系をカバーしろと言う。CSSはNN4系でうまくいかなことは周知のこと。

ご紹介頂きましたCSSでDHTMLのように動作させると一部の障害をもつ方にとってはクリックが非常に難しくなるという問題もあり・・・。また、FLASHプラグインを入れていない人も同じぐらいの割合です。

どちらにしてもその1割位の環境に対してどう対処するか・・・が別れ道になりそうですね。

個人的なサイトでは、CSSによるナビゲーションに移行中です。

大変素晴らしい回答、ありがとうございました!!

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ