ナビゲーションにメガメニューを使用する（使用しない）

巨大なメニューとユーザーエクスペリエンス

巨大なメニューを使用する主な原則は、簡単な質問に答えることができるはずです：

巨大なメニューにより、ユーザーが私のウェブサイトを閲覧しやすくすることができますか？

最新のトレンディなものであるという理由だけで、追加すべきではありません。ウェブサイトに巨大なメニューを追加すると、ユーザーエクスペリエンス（UX）を考慮に入れる必要があります。メガメニューがナビゲーションプロセスをよりスムーズで直感的にする場合は、追加します。そうでない場合、またはメニューにアイテムが少ない場合は、通常のドロップダウンメニューに固執します。

メガメニューを使用するかどうかを決定するときは、別の質問を自問することもできます。

巨大なメニューは、私のウェブサイトの目標を達成するのに役立ちますか？

これは答えるのが難しい漠然とした質問だと思うかもしれませんが、ウェブサイトのデザインとコンテンツのすべての側面は、あなたのウェブサイトが達成しようとしているものに関連付けられるべきです。これは、次の状況の1つかもしれません：

オンラインで製品を販売しています
サービスを購入するためにあなたに連絡するように人々を奨励してください
フォロワーを開発
慈善を宣伝します
コミュニティを作成します
get subscribers
• を取得します セールスイベントのチケット

ウェブサイトにはもっと多くの目標があると思いますが、これらは最も一般的な目標の一部です。目標を理解することは、ユーザーがどのページにアクセスしてもらい、目標を達成するために訪問するページを正確に知るのに役立ちます。

したがって、人々にオンラインで製品を購入したい場合、大きくて複雑な店がある場合は、巨大なメニューが最良の選択肢になる可能性があります。ただし、非常に具体的な製品またはサービスのみをお持ちで、その製品やサービスの販売ページに人々を誘導したい場合は、巨大なメニューが気を散らすことができます。

巨大なメニューを追加するかどうかを決定する前に、ウェブサイトに何を達成したいか、訪問者にサイトにアクセスしたい場所、どのようなナビゲーションがそうするかを考えてください。

以下は、ウェブサイトを強化する可能性のある巨大なメニューの具体的な例です。

いつメガメニューを使用するか

メガメニューのいくつかをウェブサイトへの便利な追加として見てみましょう。

1ユーザーがそれを使用することを期待しています

あなたのウェブサイトが小売ウェブサイトである場合、ユーザーは巨大なメニューを見て、それらを使用して店舗のさまざまな部門を閲覧することに慣れています。

たとえば、

以下に示すJohn LewisのWebサイトでは、ストアの主要セクションごとに別のメガメニューを使用しています。以下は、女性の服のセクションです

人々は、大規模なデパートのウェブサイトで巨大なメニューを使用することに慣れており、混乱していません。たとえば、ドレスのためにサイトにアクセスすると、ワンクリックでサイトの対応する部分に簡単に入力できます。

2ドロップダウンメニューが大きすぎる

場合によっては、ドロップダウンメニューまたは一連のドロップダウンメニューには、ユーザーエクスペリエンスを減らす非常に多くのオプションが含まれます。

Jakob NielsenとAngie Liが実施した調査では、大規模なナビゲーションメニューでは、巨大なメニューがドロップダウンメニューと比較してユーザーエクスペリエンスを向上させることを示しています。これは、多くのコンテンツを備えたドロップダウンメニューがユーザーに下にスクロールするように要求するため、下にスクロールしてから再びスクロールする必要があるためです。これには時間がかかり、短期記憶により多くのストレスがかかり、混乱する可能性があります。

したがって、ウェブサイトがナビゲーションメニューに多くの要素を含める必要がある場合、Megaメニューはユーザーエクスペリエンスを向上させる可能性があります。ただし、巨大なメニューを使用している場合は、ユーザーにとって直感的な方法でそれを構築し、色、テキストエフェクト、フォントなどのデザインのヒントを使用して閲覧できるようにします。

以下のゲームWebサイトは、それぞれがWebサイトの一部に関連する巨大なメニューシリーズの素晴らしい例です。これらのメニューは、大胆なテキストや背景などの間隔とテキスト効果を使用して、メニューを直感的で簡単にナビゲートできるようにします。

### 3。メニューのデザインがウェブサイトを強化するとき

時々、テキストリンク以上のものであるコンテンツをWebサイトに追加する機会があります。

以下に示すモレスキンのウェブサイトには、ユニークなメガメニューがあります。テキストリンクに加えて、テキストをカバーするテキストとのリンクとして機能する重要な製品の写真もあります。

これは、訪問者がこれらのページにアクセスすることを奨励し、MegaメニューをWebサイトの機能的な側面以上にすることを奨励します。これにより、デザインを強化し、販売目標を達成するのに役立ちます。

メガメニューを使用しない場合

メガメニューを使用しないでください。ここにいくつかの例があります。

1リンクがない場合

ウェブサイトに数百ページがない場合、巨大なメニューが冗長になります。通常の中小企業のウェブサイトやブログの場合、巨大なメニューは訪問者のみを混乱させます。また、空っぽに見えます。

Envato TutsのWebサイトでは、巨大なメニューと通常のドロップダウンメニューの組み合わせを使用しています。リンクがほとんどないWebサイトの一部の場合、通常のドロップダウンメニューはタスクを完了し、より少ないページをカバーできます。

### 2。ホームページが単なるリンクである場合

ホームページがサブページにリンクするページにすぎない場合、巨大なメニューも必要ありません。

英国政府のウェブサイトは、リンクでいっぱいのページです

さらにウェブサイトに移動すると、展開できる左ナビゲーションメニューがあります。

これは、ユーザーがMegaメニューを使用することを期待しない環境でメガメニューを使用しないことの良い例でもあります。たとえば、公共部門のウェブサイトでは、メガメニューは小売サイトよりも一般的ではありません。

3訪問者を特定のページに向けたい場合あなたのウェブサイトは、1つまたは2つの製品またはサービスを販売したり、郵送リストにサインアップすることを奨励するように設計されている場合があります。

この場合、訪問者をログインページに指示するホームページにバナーがある場合があります。

この場合、ナビゲーションを最小限に抑える必要があります。巨大なメニューには、訪問者が非常に多くのオプションを提供するため、アクセスしたいページにアクセスする可能性が大幅に低くなります。したがって、ナビゲーションを最小限に抑えて、訪問者をログインページに向けることに集中してください。

ソーシャルメディア試験官のウェブサイトは良い例です。今、彼らは訪問者に、メーリングリストにサインアップするか、会議のチケットを購入することです。バナーは2番目のポイントを反映していますが、ホームページの上部を占める行動を呼びかけることは最初のポイントを反映しています。

訪問者に大きくて巨大なメニューを与えると、これら2つのことのいずれかを行う可能性が低くなるため、代わりにナビゲーションをシンプルに保ちます。

###4。モバイルデバイスで

小さな画面で読みやすいメガメニューを作成するのは難しいでしょう。それを機能させるには、リンクを小さくする必要があります。つまり、人々はそれらをクリックしたり、スクロールを導入したりすることはできません。巨大なメニューとスクロールを組み合わせると、巨大なメニューがどこで終了し、ページコンテンツがどこから始まるかを知るのが難しいため、混乱する可能性があります。

モバイルデバイスでは、ハンバーガーメニューを使用するのが最善です。そのシンボルをクリックするまで表示されないメニューです。シンボル：3つの垂直線がハンバーガーのように見えるため、ハンバーガーメニューと呼ばれることがよくあります。

上記のジョン・ルイスのウェブサイトには、そのようなメニューがあります。シンボルをクリックすると、メニューオプションがその下に展開されます。

あなたのウェブサイトに巨大なメニューを追加するときに注意すべきこと

あなたのウェブサイトに巨大なメニューを追加すべきではない場合に議論しました。巨大なメニューがあなたのウェブサイトの使いやすさを改善すると思うなら、あなたのウェブサイトに巨大なメニューを追加する前に、覚えておくべきいくつかの重要なことについて学ぶ時が来ました。

リンクは秩序ある

にする必要があります

巨大なメニューには通常、多くのリンクが含まれています。したがって、整理して適切な部分に分割することが重要です。これは、John LewisのWebサイトの巨大なメニュースクリーンショットで明らかです。女性セクションの下のリンクは、ナビゲートしやすいさまざまなカテゴリにさらに配置されます。

リンクは読みやすく、

をクリックしやすい必要があります また、Megaメニューのすべてのリンクが読みやすくてクリックしやすいことを確認する必要があります。ユーザーがアクセスしたくないコンテンツを誤ってクリックしないように、リンク間に十分な間隔があるはずです。限られたテキストを含める必要がありますが、クリックしたらユーザーがユーザーをどこに連れて行くかをユーザーが理解するのに役立ちます。

視覚的なヒントを追加して、ユーザーを支援します

ナビゲーションメニューに視覚的なヒントを追加して、ユーザーがリンクの編成方法を理解できるようにすることもできます。たとえば、矢印アイコンは、特定のサブメニューアイテムをクリックすると、多数の新しいリンクが表示されることをユーザーに示します。クリック可能でクリックしないアイテムは、簡単に区別する必要があります。

最適化パフォーマンス

巨大なメニューは複雑でリソース集約型です。どこでも期待どおりに機能するには、多くのタグ、CSS、およびJavaScriptが必要です。いくつかの巨大なメニューも画像を頻繁に使用しています。これは、メニューとウェブサイトの読み込み時間に悪影響を与える可能性があります。あなたはあなたの見込み客が待って退屈して、競合他社に目を向けることを望んでいません。したがって、Megaメニューを最適化することを優先する必要があります。

モバイルデバイスの代替品を提供

前述のように、巨大なメニューは、画面サイズが小さいため、モバイルデバイスではうまく機能していません。あなたのウェブサイトを応答し続けるために、小さな画面で別のナビゲーションの方法を提供することを検討する必要があります。たとえば、モバイルデバイスのハンバーガーメニューを使用して、基本的なリンクのみを使用して、小さな画面のナビゲーションメニューの画像を削除できます。

アクションボタンを呼び出す

を追加します

ユーザーは、多くの場合、巨大なメニューを使用して、Webサイトの別の部分にジャンプします。この知識を使用して、適切な場所にいくつかのアクションやプロモーションを巧みに追加することで、ユーザーのエンゲージメントを高めることができます。

ユーザーテストによるユーザビリティの向上

メガメニューで明白で正しいと思われるものは、ユーザーには当てはまらないかもしれません。したがって、メガメニューのA/Bテストを維持して、どのレイアウトが状況に最適かを確認する必要があることが重要です。

複数のデバイスでMegaメニューをテストします

また、できるだけ多くのブラウザとデバイスでMegaメニューをテストすることも重要です。巨大なメニューは複雑なUI要素であり、それらを正しく見えるようにするのは少し難しい場合があります。同時に、Megaメニューのすべてのリンクが適切に機能することを確認してください。

巨大なメニューをウェブサイトに追加します

メガメニューがウェブサイトの正しい選択であると判断した場合、メガメニューを追加する最も簡単な方法はプラグインを使用することです。

Codecanyonは、選択するために多くの巨大なメニュープラグインを提供しています。最も人気のあるものには、

が含まれます

• Ubermenuは、ベストセラーの巨大なメニュープラグインです。これにより、Webサイト用に完全にカスタムメガメニューを作成できます。これには、フォントとテキストエフェクトを備えた美しく見えるメガメニューを設計するのに役立つCSSセレクターが含まれており、複数のレイアウトがあります。
• Megaメインメニューを使用すると、さまざまなオブジェクトタイプをメニューに配置できます。したがって、上記のモレスキンのウェブサイトのような画像が必要な場合は、これが役立つかもしれません。
• ヒーローメニューは、使いやすいように設計されており、数分でメガメニューを起動して実行するのに役立ち、ドラッグアンドドロップメニュービルダーが付属しています。

巨大なメニューを作成するためのより多くのインスピレーションについては、Envato Tutsに関するこれらの他の投稿をチェックしてみてください：>

巨大なメニューを賢く使用すると、彼らはあなたのウェブサイトを強化します

巨大なメニューは、ウェブサイトのユーザーエクスペリエンスを向上させるための優れた方法です。たくさんのリンクがある大きなウェブサイトがある場合、巨大なメニューを追加すると、ユーザーがナビゲートするのに役立ちます。あなたのウェブサイトが要件を満たしている場合は、今日巨大なメニューを追加してみてください。

以上がナビゲーションにメガメニューを使用する（使用しない）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。