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

UI ＞ メニュー

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

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

なし
・ユニクロ

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

　閲覧数:643　投稿日: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
2026/3/19 3:16 更新
週間人気ページランキング ／ 3-11 → 3-17
順位 ページタイトル抜粋 アクセス数
1 Design 0 23
1 ログイン 23
2 「Google Chrome」ブックマークをフォルダー単位で、「ドメイン毎」「追加日昇降順」に並べ替える拡張機能「Sortmark」 | Chrome 拡張機能 5
2 Adobe Camera Raw 4.0 | Photoshop 5
3 テーブル枠線がどうしても消えない時は「border-collapse: collapse;」 | Backgrounds and Borders Module(CSS) 4
3 色モデルイメージ図 | 色変換(色) 4
4 実際に使用してみた後の感想 ／ 個人的には ／ これから使用する？ 3
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 3
4 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 3
4 画像縦横比の問題 | 画像 3
4 「display:flex;」を設定している「
  • タグ」内の「タグ」クリック範囲を拡大する | Flexible Box Layout Module(CSS)
    		• 3
    4 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 3
    4 RGBの種類 ／ ビットカラー | RGB(色) 3
    4 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 3
    5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2
    5 自由変形ツール | Illustrator CS3(Illustrator) 2
    5 ドロップダウン出来ない(以前は出来ていたのに…) 2
    5 Bootstrap3 で、固定ナビゲーションの下だけ背景色を指定 | 3系(Bootstrap) 2
    5 Chromeブックマーク ショートカット | Chromeブックマーク(ブラウザ) 2
    5 HLS ／ HSL 2
    2026/3/18 5:05 更新