グローバルナビゲーションにプルダウン

UI ＞ メニュー

PC画面 × グローバルメニュー × プルダウン

　状態:検討中 　閲覧数:2,154 　投稿日:2015-12-26 　更新日:2015-12-26
あり
・Yahoo

なし
・ユニクロ

プルダウンメニューって流行っていないの？

　閲覧数:555　投稿日:2015-12-26　更新日:2015-12-26

メリット


1.小さなスペースで多くのリンクを紹介することが可能

デメリット


1.画面を一目見ただけではリンクを見つけることが出来ない
・リンクのリストが表示されないため

2.ユーザが目的に沿ったリンク先を選択しづらくなる
・リンク内容は、カテゴリーごとにしか表示しない
・そのため、ユーザはリンク先を一覧で見ることが出来ない
・その結果、どのリンクが目的に一番近いか判別しづらくなる
※リンク先のテキスト文言を一覧にして表示することが出来ないことが問題

3.可読性の低下
・マウスのちょっとした動きにより、例えユーザがリストを読んでいる途中であってもリストが消滅してしまう可能性がある
・リストの表示スピード、消滅スピードなど

4.可読性の低下
・tab キー 未対応の問題(サブメニューが表示されない)
・マウスが利用せず、キーボードを使用してページやリンク移動をするユーザのことを考慮していない


うまくカテゴリー分けされていれば非常にわかりやすく、スペースも取らないので制作側からも愛されていますね。しかしアクセシビリティの観点から考えると、ちょっとやっかいな存在ではあります
プルダウンメニューは問題点が多いため、使用前に慎重に検討する必要があります


メニュー他サイト調査



類似度ページランキング
順位 ページタイトル抜粋 ％
1 グローバルナビゲーションにプルダウン 83
2 グローバルナビゲーションにキーワード検索フォーム 57
3 ホーム・トップ・サイト名・ロゴ ／ グローバルナビゲーション 50
4 グラデーション練習 37
5 WebサイトをHTML5で作成したら、IE8で、グローバルナビゲーション表示がおかしくなった 34
6 モバイルデザイン5 ／ スクロールアニメーション 33
7 CSS3で背景色にグラデーションをつける 32
8 UIコードダウンロードLink 30
9 テーブルレスポンシブ 29
10 GIFアニメーション 29
11 SVGアニメーション 29
12 Bootstrap3 で、固定ナビゲーションの下だけ背景色を指定 28
13 アイコンアニメーション化 27
14 ブラウザ × レンダリング 26
15 CSSで画像をロールオーバー 25
16 ツールチップ 25
17 モバイルデザイン9 ／ トップページリスト表示 24
18 デスクトップにChromeのショートカットを作成 24
19 モバイルデザイン6 ／ フォーム 24
20 (私の)CSSコーディングルール 24
2025/10/07 21:50 更新
週間人気ページランキング ／ 9-30 → 10-6
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 11
2 「東京都」のカラーコード取得は難しい | カラーコード(色) 10
3 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 7
4 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 6
4 鉄道会社毎のカラーコード | カラーコード(色) 6
4 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 6
4 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 6
5 16進数カラーコード ／ 2進数 4
6 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 3
6 Design 0 3
6 色モデルイメージ図 | 色変換(色) 3
6 ログイン 3
6 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 3
6 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 3
6 カラーコード ／ 色コード | カラーコード(色) 3
6 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 3
7 「bgcolor」「background-color」「background」の違い | CSS 2
7 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 2
7 HTML5でiframeスクロールバーを表示しない方法が不明 | HTML5(HTML) 2
7 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 2
2025/10/7 1:01 更新