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

UI ＞ メニュー

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

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

なし
・ユニクロ

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

　閲覧数:549　投稿日: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/9/16 2:38 更新
週間人気ページランキング ／ 9-9 → 9-15
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 18
2 鉄道会社毎のカラーコード | カラーコード(色) 12
3 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 9
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 6
4 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 6
5 「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 | 画像 4
5 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 4
5 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 4
6 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 3
6 「bgcolor」「background-color」「background」の違い | CSS 3
6 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 3
6 Design 0 3
6 イラスト素材 | デザイン 3
6 色モデルイメージ図 | 色変換(色) 3
6 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 3
7 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 2
7 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 2
7 カラーマネージメント | 色 2
7 Illustrator で文字を見た目通りSVG出力するためには、「アウトライン作成」処理が必要 | Illustrator CS3(Illustrator) 2
7 Illustrator CS3(Illustrator) カテゴリー 2
2025/9/16 1:01 更新