メガメニューはサイトナビゲーションに効果あり
大きな二次元のドロップダウンパネルは、ナビゲーションの選択肢をグループ化することでスクロールの必要性を無くし、タイポグラフィやアイコン、ツールチップを使うことで、ユーザの選択できる内容をわかりやすく提示してくれる。 Mega Menus Work Well for Site Navigation by Jakob Nielsen on March 23, 2009 もうすぐ開催予定のナビゲーションデザインセミナーに向け、我々は様々なナビゲーション機能についてのユーザスタディを実施している。いつものことだが、中にはひどい結果が出てしまった機能もあるし、これまた、いつものことだが、今、流行のようになっている機能（今回の場合はタグクラウド）にはユーザビリティ上の大きな課題が見つかった。 幸いにも、他のウェブトレンドは本質的にユーザビリティに優れており、ユーザの行動やゴールによく合っているというこ
ワイヤーフレームはFireworksがベストか。意外とInDesignが次点か。 | 戦意
ワイヤーフレームはFireworksがベストか。意外とInDesignが次点か。 123 (2010/6/10, 10:50 PM) ワイヤーフレームって何で作ってますか？ これまで私はワイヤーフレームはイラレで作ってました。 大枠となるページだけ作る分にはこれでもさほど問題ないんです。 ただ、全ページ作る必要に迫られた場合、ナビゲーション部分などの共通部分に後から変更が生じたとき、イラレにはページ概念がないので、すべてのファイルもしくはアートボートのナビゲーション部分を変更し直さなければならず、とても厄介です。 前回の案件でそうなって、大変な目にあったので、次こそなんとかしたいと思って、最近InDesignのマスターページ機能に着目し、実際やってみたら結構よかったんです。もう今後これでいいじゃんと。 ところがそんな矢先、CSS Nite in Omotesando, Vol.1にて、Fi
ファセットナビゲーション とは 意味/解説/説明 （ファセットナビゲーション） 【Faceted Navigation】 | Web担当者Forum
ファセットナビゲーション（Faceted Navigation）とは、サイトナビゲーションの種類の1つである。 さまざまな切り口（要素）でサイト内検索をしたりコンテンツを選んだりできる場合に、ユーザーに検索条件を入力させるのではなく、あらかじめユーザーに使いやすいだろう検索条件をサイト側が用意しておき、ユーザーはそれを選ぶだけでコンテンツを絞り込んでいける。こういった仕組みのことを「ファセットナビゲーション」「ファセット検索」と呼ぶ。 「ファセット（facet）」は、物事の側面や切り口の意味。ファセットナビゲーションは、サイト側で「こういった切り口で情報を探すのはいかがですか」と提示するナビゲーションとなる。 たとえばAmazonでは、本であれば大きく「和書ジャンル」「洋書ジャンル」に分けて、さらに「文学・評論」＞「文芸作品」＞「日本文学」などように細かなジャンルに絞り込んで検索できるナビ
2段階に連動するプルダウンメニューの作り方 [ホームページ作成] All About
プルダウンメニューを使って閲覧者に何かを選択してもらいたいとき、選択肢の数が多いならプルダウンメニューを2段階に分割して連動させる方法を検討してみてはいかがでしょうか。 1つのプルダウンメニューに含まれる項目数が多すぎると、選択肢の全体が把握しにくくなる上に、望みの項目を探すのも大変になります。2段階にすれば、選択肢を絞り込んで表示させられるために余計な項目を見せずに済み、分かりやすくなるでしょう。 今回は、HTMLで作成した2つのプルダウンメニューをJavaScriptで連動させて、1つの大きな選択機能を作る方法をご紹介いたします。 2段階に連動するプルダウンメニューの使用例 下記は、本記事で作成する2段階プルダウンメニューのサンプルです。最初に表示されているプルダウンメニューから何か項目を選ぶと、その選択内容に該当する2段階目のプルダウンメニューが表示されます。お使いのブラウザで直接操
![2段階に連動するプルダウンメニューの作り方 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/9a164eb985cfa3c677102951ec59bb37d6a81116/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F3%2F9%2F5%2F5%2F201701051234%2Ftopimg_original.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.csstea.com/css-gallery-news-and-resources/264-120-excellent-examples-of-css-horizantal-menu.html
