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

UI ＞ メニュー

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

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

なし
・ユニクロ

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

　閲覧数:524　投稿日: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/8/12 21:19 更新
週間人気ページランキング ／ 8-5 → 8-11
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 20
2 鉄道会社毎のカラーコード | カラーコード(色) 16
3 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 13
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 8
4 RGBの種類 ／ ビットカラー | RGB(色) 8
5 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 7
5 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 7
6 「bgcolor」「background-color」「background」の違い | CSS 6
6 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 6
7 「Google Chrome」のリリースノート（更新履歴）は公開されている | Google Chrome(ブラウザ) 5
8 カラーコード ／ 色コード | カラーコード(色) 4
8 「Google Chrome」ブックマークをフォルダー単位で、「ドメイン毎」「追加日昇降順」に並べ替える拡張機能「Sortmark」 | Chrome 拡張機能 4
8 RGB ⇔ XYZ ／ CIE RGB ／ sRGB(D65) ／ sRGB(C) ／ Adobe RGB ／ NTSC RGB 4
8 エラー：Google chrome で問題が発生しました。今すぐ再起動しますか？ | Google Chrome(ブラウザ) 4
9 utf-8ではなく、UTF-8 | HTML 3
9 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 3
9 効果を打ち消すスタイルシート | CSS 3
9 Design 0 3
9 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 3
9 「属性」「プロパティ」「アトリビュート」の違い | CSS 3
2025/8/12 1:01 更新