コマースサイトナビゲーション:10のコンバージョンのヒントと成功例

2024年5月10日

コマースサイトのナビゲーションは、訪問者（将来の顧客とロイヤルカスタマーへの醸成顧客）のエクスペリエンスを左右する可能性があることがよく知られています。
論理的で明確に定義された構造なしでコマースサイトをナビゲートしようとすると、地図も参照フレームもない複雑な迷路の真ん中に落とされるようなものです。それは、イライラし、全体的に不快であり、あなたのブランドが望んでいるユーザーエクスペリエンスとはほど遠いものです。

これは、ストアのナビゲーションがサイトの重要な要素の1つであることを意味しています。

検索エンジンのランキング、
リードジェネレーション、
ブランド認知度、
アクセシビリティ、
ユーザビリティ

に影響を与えいると思いませんか。
最も重要なのは、ウェブサイトのナビゲーションがコンバージョンに影響を与えることです。

ナビゲーションは、eコマースストアのあるページから別のページに移動するための単なる内部リンクのコレクションではありません。また、ユーザーが異なるページ間の関係を理解するのにも役立ちます。

ナビゲーションはサイトの情報アーキテクチャ (IA) の氷山の一角にすぎません。水面下には、誰も見ることのできない氷山の大きな部分、つまり研究、戦略、管理、分類スキームなどがあります。

ユーザーには表示されているもの、つまりナビゲーション(通常はテキストリンクのリスト、いくつかのアイコン、検索ボックスとして表される)しか表示されません。これは、サイトの残りの部分に注ぐすべての計画とケアと相互作用する方法です。また、そのコンテンツとつながり、ニーズを満たすためにそれを使用するのにも役立ちます。

Webサイトのナビゲーション構造の種類

ベストプラクティスに飛び込む前に、さまざまなタイプのWebサイトナビゲーションを分解します。
オプションに縛られることはありませんが、これらはウェブ上でよく見られる一般的なタイプです。一般的には、ユーザーが何を期待すべきかを理解できるように、これらの形式に固執するのが最善です。

水平ナビゲーションバー

ヘッダーナビゲーションバーは、最も一般的なタイプのWebサイトナビゲーションです。これらのトップレベルリンクは、ヘッダーに水平に並べて表示されます。
通常、サイトの最も重要なページが含まれています。ユーザーが早期にアクセスする必要があることがわかっているページです。

ドロップダウンナビゲーションメニュー

ドロップダウンメニューは、コンテンツと商品を整理するためのナビゲーションの階層です。
最も重要なリンクは、トップレベルのナビゲーションとして使用されます。ユーザーがリンクをクリックするか、リンクにカーソルを合わせると、メニューが展開され、さらにリンクが表示されます。ドロップダウンメニューにはいくつかの層があるかもしれません。

ユーザーが必要なコンテンツや商品を見つけるための十分なパスを提供する必要がある、コンテンツが豊富なサイトに最適です。
スマートな整理整頓は、サイトが乱雑になるのを防ぎ、ユーザーに前進の感覚を与えます。

ハンバーガーナビゲーションメニュー

このメニューは、モバイルサイトやアプリでよく見かけます。ページ上のトップレベルのリンクを一覧表示する代わりに、すべてがボタンの背後に隠されています。アイコンをタップすると、メニューが表示されます。メニュー項目をタップすると、メニューがさらに展開され、追加のオプションが表示されます。

垂直サイドバーナビゲーションメニュー

垂直サイドバーメニューは、ページの両側に配置された、互いに積み重ねられたリンクのリストです。通常、この形式は、水平メニューに対してトップレベルのナビゲーションが多すぎるサイトに適しています。欠点は、ページ領域を大量に消費することです。

サイドバーナビゲーションは、ユーザーがショッピング体験を容易にするために、より具体的なオプションや内部リンクを必要とする内部ページでも役立ちます。
H&Mの縦型サイドバーナビゲーションで経験していませんか。

フッターナビゲーションメニュー

フッターのナビゲーションは「キャッチオール」スポットです。通常、サイト上のほとんどのページへのリンクが含まれています(ただし、個々のブログ投稿や製品ページは通常含まれません)。フッターメニューにすべてへのリンクを詰め込むべきではありませんが、多くのオプションを提供するのは賢明です。

フッターのウェブサイトナビゲーションはH&Mでも使用されており、shpping、企業情報、ヘルプ、メンバーシップなど、サイト上のすべての重要なリンクをリストアップしています

ウェブサイトのナビゲーションのヒント

ウェブサイトのナビゲーションをデザインするための「万能」の方法はありません。特定の顧客にアピールする方法でナビゲーションを設計するだけで済みます。顧客調査、実験の設計、および結果のテストが必要です。

いつものように、設計プロセスの中心にユーザーを中心に置くことをお勧めします。
あなたが何を望んでいるか、あなたのチームが何を望んでいるかは、あまり重要ではありません。また、ウェブサイトのナビゲーションが他の小売業者や競合他社と同じように見えることを期待するべきではありません。

1. トップレベルのナビゲーションリンクを 7 つに減らす

eコマースストアには多くのページがありますが、それらすべてがWebサイトのナビゲーションに属しているわけではありません。最初のステップは、メインのナビゲーションとして機能するページを選択することです。

ナビゲーションにはいくつの項目を含める必要がありますか?結果はさまざまですが、次の 2 つの理由から 3 から 5 が適切な数値であると考えています。

まず、ウェブサイトのナビゲーションの項目が少ないほど、検索エンジン最適化に適しています。あなたのホームページは、Googleに関する限り、最も「権威」を持っています。権限はリンクを介して内部ページに流れますが、部分的にしか流れません。

ホームページに 50 個のナビゲーションリンクと 25 個の他のリンクがある場合、そのホームページのオーソリティは 75 で分割されます。しかし、その数を減らすと、各ページはオーソリティパイのより大きなスライスを獲得し、それによってそれらのページが上位にランクされる可能性が高くなります。

ナビゲーション内のリンクが少ないことは、訪問者にとって良いことです。処理する情報が多いほど、ユーザーの認知的負荷が大きくなります。
7つの項目を過ぎると、人々は読むのをやめてスキャンを開始するため、自分にとって重要な情報を見逃す可能性があります。

最も理にかなった選択肢に絞り込むにはどうすればよいでしょうか。ユーザーがウェブサイトのナビゲーションに何を求めているかを知るために、次の 2 つの手法をお勧めします。

カードソート

数人の顧客 (または顧客を代表する人) を演習に招待します。サイト上のページや商品カテゴリのラベルが付いたカードの束を渡します。適切と思われる方法でカードを注文するように依頼します。次に、各カテゴリにどのような名前を付けるか、または各カテゴリを最もよく表す画像は何かを尋ねます。

ユーザーフローレビュー

Google アナリティクスでユーザーフローレポートを確認します。Googleによると、「ユーザーフローレポートは、ユーザーがサイト内、ソースからさまざまなページをたどったパス、およびパスのどこでサイトを離れたかをグラフィカルに表現したものです」。基本的に、このレポートはユーザーがサイト内をどのように移動するかを記録します。

Google アナリティクスで、嗜好を示すパターンを探します。人々はあなたの「新しいスタイル」ページに引き寄せられますか?おそらく、それは目立つ場所に置くに値するでしょう。次に、人々があなたのサイトを放棄した場所と、彼らがそこにたどり着いた方法を調べます。「今後のスタイル」セクションから開始したすべての人がサイトを離れることになった場合、おそらくこのセクションはナビゲーションの配置に値しないでしょう。

2.メニュー項目の順序を戦略的に選択する

食料品店で12個のものを買うように頼んだら、最初の2つのアイテム、最後の2つのアイテム、そしておそらく真ん中のアイテムの1つを持って戻ってくる可能性があります。これは、リストの最初と最後の項目の想起率が最も大きいことを示すシリアルポジション効果のおかげです。

この効果は、ナビゲーションデザインで活用できます。訪問者を最も重要なリンクに誘導するには、メニューの最初と最後にリンクを配置します。たとえば、顧客がバーゲンハンターであることがわかっている場合は、最初のナビゲーションリンクとして「クリアランス」カテゴリへのリンクを配置するのが理にかなっています。

メニューの最初と最後のリンクが最も重要で、中央のリンクは重要度の低いリンクや顧客が特に探す項目であることに注意してください。

多くのカテゴリを持つ大規模な製品ラインがある場合、困難になります。
家具店は「ダイニングルーム」の前に「寝室」を置くべきですか。
フィットネスストアは「サプリメント」の前に「プロテインパウダー」を置くべきですか。
上記で説明したカードの並べ替えとユーザーフローのレビュー手法を使用して、顧客が最も関心を持っているものを決定します。

3.モバイルサイトのナビゲーションを最適化する

モバイルレスポンシブナビゲーションメニューを持つことは、eコマースWebサイトにとって不可欠です。消費者は、Webサイトのモバイルユーザーエクスペリエンスが、デスクトップエクスペリエンスと同等かそれ以上に優れていることを期待しています。ウェブサイトの訪問者にレスポンシブで最適化されたナビゲーションバーを提供することで、モバイルコンバージョン率の向上が保証されます。

ほとんどのモバイルメニューには、ユーザーが次にどこに行くかを特定するのに役立つビジュアルデザインの重要な部分である視覚的な階層がありません。ユーザーは、方向性のあるよく整理されたメニューのガイダンスなしで優柔不断に苦しむ可能性があります。

ナビゲーションでは、ショッピングに重点を置いたリンクを他の種類のコンテンツから分離します。これにより、方向ガイダンスが増加し、気が散るものが減り、ユーザーに摩擦のないエクスペリエンスを提供できます。

モバイルメニューに視覚的な階層を設けることで、コンバージョンを15%向上させることができます。移動マップの助けを借りて、クライアントのユーザーがトップレベルのナビゲーションに多くの注意を払っていることに気付きました。残念ながら、これらのトップレベルのリンクは、ホーム、会社概要、記事などのショッピング以外のページを指していました。

リンクを再編成することで、主要なページへのトラフィックが増加し、サインアップと商品購入が増加しましす。

メニューを視覚的な階層で再編成し、コンバージョン率を15%向上させた成功例
モバイルサイトのナビゲーションバーを簡素化することも検討してください。訪問者に不要なオプションを提供すればするほど、ユーザーエクスペリエンスはより複雑になります。

非常にシンプルでありながら、
1)販売しているもの、
2)ユーザーとの連絡方法を伝える、
非常に効果的なモバイルメニューにします。ユーザーに提供したい不要な情報は、Webサイトのフッターに移動できます(また、移動する必要があります)。

4.Webサイトナビゲーションのドロップダウンメニューを置き換える

ドロップダウンメニューのオプションがかなり複雑、馴染みのない、または広範囲にわたる場合は、詳細ページに置き換えることを検討してください。ユーザビリティ調査によると、ドロップダウンメニューは煩わしいものです。さらに、すべてを適合させるために貴重な情報を犠牲にする必要があります。

Appleは、この戦略を使用して、顧客がサポートメニューをナビゲートできるようにしています。
すべてのサポートオプションをドロップダウンメニューに詰め込むのではなく、提供する各商品カテゴリを含むページ全体を作成することを選択しました。付随するビジュアルにより、適切なオプションを見つけるのが簡単な作業になります。

5. サイト内検索をスムーズにする

サイト内検索を実施している人は、そうでない人に比べて約2倍の頻度でコンバージョンを獲得しています。検索ボックスを使用する訪問者は、通常、購入または行動する意図を持っています。さらに、探しているものが見つかる可能性がはるかに高くなります。

IKEAは、サイト検索機能に大きく依存している企業の好例です。さまざまな商品カテゴリーで何千ものSKUを扱っているストアでは、顧客が探しているものを正確に見つけられるように、検索バーを目立つように表示する必要があります。モバイル版のWebサイトでは、ハンバーガーメニューボタン、ショッピングカートボタン、検索バーなど、非常にミニマルなデザインにこだわっていることがわかります。

ナビゲーションメニューで検索機能を強調表示する方法のもう一つの良い例です。ウェブサイトでは、検索バーはホームページに読み込まれる最初の要素であり、訪問者がそれを操作するように促すために画面の上部に目立つように表示されます。
サイト内検索がサイトのユーザーエクスペリエンスに不可欠な要素である場合は、検索バーが訪問者に見えるように目立つように表示してみてください。

6. ユーザーにコンテキストを提供する

訪問者が 1 回のクリックで適切なページを見つけられるように、ドロップダウンメニュー内に手がかりを含めます。手がかりは、便利なアイコン、ビジュアル、またはその他の役立つ情報です。

たとえば、「カテゴリ」タブには、さまざまなカテゴリが表示されるだけでなく、各カテゴリのエントリ数なども表示されると判断しやすくなります。色相でウェブサイトを閲覧したい場合は「色」メニューの各選択肢で、便利に色分けします。

ネストされたナビゲーションメニューをデザインするための興味深いアプローチをも採用できます。
最上位の商品カテゴリには、各サブカテゴリの小さな画像を含めて、そのサブカテゴリに表示される内容に関するコンテキストが提供します。たとえば、「Collection」サブカテゴリでは、その商品ラインがどのように見えるかのサンプルを顧客に提供するための小さな画像を提供します。

この戦術は、業界に特化した製品カテゴリが多数ある場合に特に効果的です。
ナビゲーションメニューで紛らわしい専門用語を使用することは最悪の行為ですが、それがWebサイトの不可欠なコンポーネントである場合は、少なくともユーザーが理解できるように視覚的なインジケーターを提供する必要があります。

7.オーディエンスごとに個別のWebサイトナビゲーションメニューを作成する

2 つの異なるグループに等しく対応するインターフェイスを設計することは、常に難しいことです。無関係なコンテンツを掘り下げることなく、それぞれが必要なものを見つけられるようにするには、リンクを2つに分けます。

従来のネストされたナビゲーションメニューレイアウトの代わりに、ユーザーのカテゴリごとに個別のメニューとホームページを作成します。Web サイトのどのセクションを表示しているかによって、表示されるメインメニュー項目が異なります。

8. 包括的なフッターを作成する

ナビゲーション疲れは現実のものであり、サイトの階層が複雑な場合、ユーザーはサブメニューを次々と展開することにすぐに飽きてしまいます。

メガフッターは最適なソリューションです。サイト上のすべての重要なページへのナビゲーションリンクが提供されるため、ユーザーは探しているものにすばやくジャンプできます。サイトにメガフッターを含めると、サイトの直帰率と全体的なコンバージョン率にプラスの影響を与える可能性があります。バクスターのフッターを見て、アイデアを得てください。

メガフッターは、Google検索エンジンの結果ページ(SERP)のランキングを向上させるために重要なキーワードを組み込むのに最適な場所でもあります。のメガフッターからインスピレーションを得てください。特定の場所をいくつも表示させようとしている場合、フッターにそれらを含めると、メインメニューにリストアップしなくても、ローカルSEOに役立ちます。

9. 子カテゴリを他のトップレベルカテゴリに再掲載する

UXの常識では、コンテンツを繰り返すべきではありません。ただし、ナビゲーションは、このルールの数少ない例外の 1 つです。1 つ以上のページが自然に 2 つのカテゴリに当てはまる場合は、両方にリストする必要があります。

REIのメニューは、バックパックの購入に関心のある人は、「旅行」や「キャンプ」など、どちらをクリックしてもバックパックのページを見つけてもらいます。

この例では、どちらのナビゲーションの選択肢も明白に思えるでしょう。しかし、ユーザーがあなたの期待を混乱させることが多いことに気付いたでしょう。
ここでは、ユーザビリティ・テストが必ず役に立ちます。訪問者が特定のページへの誘導方法をどのように見つけようとしているかを観察し、一般的な傾向に注意を払います。

もちろん、逆方向に進みすぎて、すべてのリンクを複数の見出しの下にリストし始めることは望ましくありません。適切なカテゴリの識別に常に問題を抱えている場合は、ラベルが誤解を招くか、正しくない可能性があります。

10.ヘッダーからソーシャルメディアアイコンを削除する

ソーシャルメディアに多くの時間とお金を投資している場合、それらのリンクをナビゲーションで目立たせたくなるでしょう。実際、多くのWebサイトがまさにそれを行っています。

しかし、ここで問題があります:これらのリンクのそれぞれは、実際にはカラフルな出口標識であり、何千もの気を散らす場所へのトラフィックを送信します。ソーシャルメディアへの訪問者を失っても、彼らを取り戻すことはできません。

これらのリンクはどこに配置すればよいですか?フッターは最も妥当な場所です。注意を引くカラフルなアイコンではなく、単純なテキストリンクを使用することを検討してください。誰かがあなたのFacebookページにアクセスしたい場合は、リンクが表示されます。

これをうまくやっているブランドは、ソーシャルアイコンは存在しますが、フッターに残っています。また、目立たない中間色を使用しています。

おまけ:ヘッダーに召喚状を追加する

ユーザーにどうしてもアクセスしてもらいたいページが 1 ページある場合は、そのメニュー項目を行動を促すフレーズに変えることを検討してください。
対照的な背景色を付けることで、視覚的に目立たせることができます。「はじめに」、「製品を閲覧」、「クイズに答える」など、説明的で行動指向の言葉を必ず使用してください。

さらに、主要なカテゴリを大きなアイテムとして表示することで、Webサイトのナビゲーションにソフトコールトゥアクションを備えたメガメニューを作成できます。これにより、最も重要な製品カテゴリへの直接性が高まり、サイトで提供されているものがすばやく伝わり、ユーザーがブランドが提供する他のものを見つけやすくなります。

ウェブサイトナビゲーションに関するFAQ

ウェブサイトのナビゲーション項目について多くの情報を提供してきましたが、もっと知りたいと思うかもしれません。ここでは、Web サイトのナビゲーションメニューについてよく寄せられる質問をいくつか紹介します。

ウェブサイトのナビゲーションとは

Webサイトのナビゲーションとは、リンクやメニューを使用してWebサイトを閲覧および移動するプロセスを指します。これは、ユーザーがWebサイトを操作して必要な情報を見つける方法です。

ナビゲーションは、Web サイトのサイズと複雑さに応じて単純または複雑にすることができ、さまざまな種類のメニュー、ボタン、およびリンクを含めることができます。優れたWebサイトナビゲーションは、ユーザーエクスペリエンスを向上させ、ユーザーがWebサイトで探しているものを簡単に見つけられるようにするために不可欠です。

ナビゲーションメニューとは

Web サイトのナビゲーションメニューは、ユーザーが Web サイト内を移動するのに役立つリンクまたはボタンのコレクションです。通常、Webページの上部または側面に配置され、Webサイトの階層構造を提供します。

ナビゲーションメニューを使用すると、ユーザーは重要なページやセクションを簡単に見つけることができ、追加オプションのドロップダウンやサブメニューを含めることができます。優れたナビゲーションメニューは、Webサイトでのポジティブなユーザーエクスペリエンスに不可欠です。

ウェブサイトのナビゲーションの目的は何ですか

Webサイトのナビゲーションの目的は、ユーザーがWebサイトで必要な情報を簡単かつ効率的に見つけられるようにすることです。ナビゲーションメニューは、Webサイトに明確で整理された構造を提供し、ユーザーがページ間を簡単に移動できるようにします。

優れたWebサイトナビゲーションは、ユーザーエクスペリエンスを向上させ、エンゲージメントを高め、最終的には、製品の販売、情報の提供、訪問者の行動の促進など、Webサイトの目標の達成に役立ちます。

優れたWebサイトナビゲーションの利点は何ですか

優れたWebサイトナビゲーションには、ユーザーエクスペリエンスの向上、エンゲージメントの向上、Webサイトのパフォーマンスの向上など、いくつかの利点があります。これにより、ユーザーは必要なものをすばやく簡単に見つけることができ、フラストレーションを軽減し、Webサイトに対する全体的な認識を向上させることができます。

効果的なナビゲーションは、ユーザーがWebサイトで費やす時間を増やし、直帰率を減らし、コンバージョン率を向上させることもできます。優れたナビゲーションは、Webサイトのアクセシビリティとユーザビリティを向上させ、すべてのユーザーにとってより包括的なものにすることもできます。

Webサイトのサブナビゲーションとは何ですか

サブナビゲーションとは、ユーザーがより具体的なページやセクションに移動するのに役立つ、Webサイト内のリンクまたはメニューのセカンダリセットを指します。通常、ドロップダウンメニュー形式で、またはサイドバーのリンクのリストとして表示されます。サブナビゲーションは、Webサイトのコンテンツを整理するのに役立ち、ユーザーが探しているものを見つけやすくします。

ウェブサイトのナビゲーションをシームレスにする

ナビゲーションエクスペリエンスがユーザーフレンドリーであればあるほど、ユーザーがサイトで費やす時間が長くなります。迷路に置き去りにしないで、地図を渡してください。

コンバージョン率最適化プログラムでは、ナビゲーションメニューはWebサイトのユーザーエクスペリエンスにおいて非常に重要な役割を果たすため、最初に改善を検討する場所の1つです。

サイトのナビゲーションメニューのテストと改善に関心がある場合は、認定されたサイトが無料のランディングページ評価をリクエストできます。評価では、ウェブサイトのデザインを綿密に調査し、改善の恩恵を受ける可能性のある主要な領域を特定してください。