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

UI ＞ メニュー

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

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

なし
・ユニクロ

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

　閲覧数:662　投稿日: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/4/26 13:17 更新
週間人気ページランキング ／ 4-19 → 4-25
順位 ページタイトル抜粋 アクセス数
1 Design 0 20
2 「Default User」を削除したら、既存ブックマークが削除されてしまった！ 16
2 Illustratorでaiファイルを保存する際、下位バージョンでも開けるよう保存する | Illustrator CS3(Illustrator) 16
3 Adobe Camera Raw 4.0 | Photoshop 15
4 「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 | 画像 10
5 Photoshop無料アクションファイル(atn)導入見送り | Photoshop 9
6 CSSだけで、任意の要素に配置した画像を画面一杯に表示することは、基本的には出来ない。「img src」「背景画像」「div要素」何れの場合でも。可能なのは、特殊な要件が重なった場合だけ | CSS 7
7 「.aiファイル」を下位バージョンで保存するための操作手順 ／ OS 上で「.aiファイル」から「作成したIllustratorバージョン」を確認する方法 ／ 下位バージョンのIllustratorで開く方法 6
8 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 5
8 RGBの種類 ／ ビットカラー | RGB(色) 5
8 Material Design 2014 年 | Material Design(色) 5
9 「東京都」のカラーコード取得は難しい | カラーコード(色) 4
10 一つの要素に対して「id 属性値」を複数指定することは出来ない | HTML 3
10 RGB → 色相H … 最小値基準 × 図形 の考え方 | 色変換(色) 3
10 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 3
10 「属性」「プロパティ」「アトリビュート」の違い | CSS 3
11 アカウント作成 2
11 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 2
11 Awesome Screenshot | Chrome 拡張機能 2
11 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 2
2026/4/26 5:05 更新