eコマースウェブサイトのナビゲーションタイプと情報アーキテクチャを理解する

※これはMouseflowからの翻訳転載です。配信元または著者の許可を得て配信しています。

Understanding eCommerce Website Navigation Types and Information Architecture

巨大な実店舗で迷子になることを想像してみてください。たとえば、シンクの配管用のパッドを探して延々と並んだ棚を歩き回っても、すでに 「バスルーム」 のコーナーに入ってしまっているのに、そこにはありません。オンラインストアでも、ナビゲーションが不明瞭であれば同じような感覚に陥ります。そこで、eコマースのナビゲーションと、ユーザーをそのようなエクスペリエンスにさらさないようにする方法について説明します。

そして、基本的なことから始めましょう。

eコマースウェブサイト情報アーキテクチャ

店舗がきちんと整理されていれば、顧客は販売されている商品について必要な情報がすべて揃っていると感じ、ナビゲーションがより簡単に行われます。

これは、eコマースウェブサイトの情報アーキテクチャに関連しており、ウェブサイトのバックボーンとして機能し、ナビゲーションに反映される明確な構造を提供します。「アーキテクチャ」という名前は偶然ではありません。実店舗にレーン、棚、インターホンがあるように、オンラインショップにもカテゴリ、商品ページ、タグがあります。

アーキテクチャが明確かつ簡潔であれば、ユーザーを目的のアイテムにすばやく導くナビゲーションの構成が容易になります。オンラインストアが販売する商品の種類が多ければ多いほど、その情報アーキテクチャにはより多くの配慮が必要です。

そして、これらはすべて、複数の商品グループを扱うオンラインショップにとって特に重要です。百貨店とは対照的に、手作りのジュエリーショップを考えてみてください。前者は選択肢が少ないため、顧客を案内するのが簡単です。 しかし、それはデパートがどのように組織化されているかをもっと考えるべきだということを意味します。

eコマース情報アーキテクチャ要素

eコマースウェブサイトのナビゲーションでよく見られる情報アーキテクチャのさまざまな要素を詳しく見てみましょう。

1.親カテゴリ

親カテゴリは、eコマースサイトで提供される製品またはサービスの主要な高レベル区分として機能します。ここでの「親」とは、一般的に「サブカテゴリ」と呼ばれる「子」カテゴリを持つことを意味します（詳細については後ほど説明します）。

これらのトップレベルのカテゴリは、ユーザーが関心のある主な分野をすばやく特定するのに役立つ広範なグループを表します。 たとえば、衣料品サイトでは、親カテゴリに「紳士服」、「婦人服」、「子供服」、「アクセサリー」が含まれる場合があります。

例：Wayfairは、上部の水平メニューに製品の親カテゴリを表示しています。項目数は15と多いですが、十分な間隔があるため読みやすいです。そして、1つだけ赤色で強調表示されています。

2.サブカテゴリ

サブカテゴリは、各親カテゴリ内でより具体的な区分を提供します。

同じ衣料品店の例を使用すると、「紳士服」の下のサブカテゴリには「Tシャツ」、「シャツ」、「パンツ」、「ジャケット」などが含まれます。サブカテゴリは、ユーザーが検索をさらに絞り込み、関連製品を探索するのに役立つものです。これらは通常、メインナビゲーション内のドロップダウンメニューまたは展開可能なサブメニューに表示されます。

そして、階層システムでは、サブカテゴリは独自のサブカテゴリを持つことができます。このウサギの穴の深さは、製品の範囲と、それらをどの程度正確に整理したいかによって異なります。経験則として、同じ種類のアイテムが少数しかない場合は、カテゴリまたはサブカテゴリにまとめる価値があるかもしれません。

多層カテゴリの例：「メンズ ファッション」>「衣類」>「シャツ」>「T シャツ」

例：Etsyは、メガメニューの親カテゴリごとに多彩なサブカテゴリを提供しています。ユーザーを圧倒しないよう、レイアウトはすっきりしており、リストに整理されています。

3.タグとラベル

タグとラベルを使用すると、eコマースサイト内で製品を整理してナビゲートする方法が追加されます。これらは、特定の特性に基づいて製品を分類するために製品に割り当てられたキーワードまたは記述子です。

たとえば、衣料品店であれば、「カジュアル」、「フォーマル」、「サマーコレクション」、「エコフレンドリー」などのタグを使用し、ユーザーが好みや特定のテーマに基づいて商品を見つけられるようにします。しかし、色、サイズ、特定の機能にタグを使用することも合理的です。したがって、「グリーン」、「サイズ：42」、「ポケット」などもタグになります。

タグは製品の横に表示されることが多く、ユーザーはタグをクリックして、同じような属性を持つ他の商品を探索できます。

例：このPoshmarkの検索には、「Green 」のラベルが付いたバッグのみが含まれています。これは、ラベルが非常に特定の条件で検索を絞り込むのに役立つことを示しています。

4.製品ページ

製品ページには、eコマースサイトの在庫内にある個々のアイテムが表示されます。画像、説明、仕様、価格、カスタマーレビューなど、各製品ページには特定の製品に関する詳細情報が含まれています。

製品ページは、製品の包括的なビューを提供し、購入の意志決定を容易にするために重要です。ユーザーは多くの場合、適切な親カテゴリとサブカテゴリを選択するか、何かを検索して検索結果ページを参照することによって製品ページにアクセスします。

実店舗で製品を詳しく調べるのと同じように、顧客は製品ページで複数の画像を見たり、詳細な説明を読んだりして、情報に基づいて購入を決定することができます。また、オンラインストアでは実際の商品を試すことができないため、この情報は特に重要です。また、製品ページは通常、ユーザーが製品をカートに入れる場所でもあります。

このようなページにどのようなビジュアルアセットを追加すべきか、説明文に何を含めるべきか、コンバージョンを増やすために他にどのような最適化ができるのかについては、eコマース製品ページの最適化に関するブログ記事をお読みください。

5.フィルタリングと並べ替えオプション

ユーザーエクスペリエンスを向上させ、特定の商品の検索や比較を容易にするために、eコマースサイトにはフィルタリングと並べ替えのオプションが含まれることがよくあります。

フィルタリングを使用すると、価格帯、サイズ、色、ブランドなどのさまざまな属性に基づいて検索を絞り込むことが可能です。視覚的に、フィルターは通常漏斗アイコンで示されます。タグとラベルは、主にフィルタリングの目的で導入されます。

並べ替えオプションは、関連性、価格、人気、顧客評価などの要素に基づいて表示される製品を並べ替えることができます。

どちらの機能も通常、検索結果ページやカテゴリページのナビゲーション、またはサイドバー内のインタラクティブな要素として使用できます。

注意しなければならないのは、それらが同時に機能する場合としない場合があるということです。買い物客はリストのフィルタリングと並べ替えを同時に行うことができます。いずれにしても、どちらかの機能が有効になっている場合は、明確に伝えることが重要です。

例：LGのオンラインストアでは、複数のパラメーター（ここでは価格帯と機能）と並べ替え（ここでは「ベストマッチ」による）を備えたフィルターの非常にクリーンな例を紹介しています。

6.パンくずリスト

パンくずリストは、ウェブサイトの階層内でユーザーの現在位置を示すナビゲーション補助機能です。ユーザーが現在のページに到達するまでにたどった経路を表示し、通常はクリック可能な一連のリンクとして表示されます。

イメージしやすいのは、コンピューターでファイルを閲覧する際、エクスプローラにパンくずリストが表示されることです。Windowsの例： C:\Users\John\Downloads\

パンくずリストは、深い階層を持つeコマースウェブサイトで特に有用で、ユーザーが自分の足跡をたどり、上位レベルのカテゴリや検索結果に簡単に戻ることができる明確な方法を提供します。

パンくずリストを正しく使用すると、方向性を示すことができ、顧客がさまざまな製品ラインを探索するのに役立ち、フラストレーションが軽減され、継続率を高めることができます。

例：多くのカテゴリ、サブカテゴリ、販売アイテムがあるBest Buyのウェブサイトは、パンくずリストがなければ非常にわかりにくくなります。この写真では、パン粉を赤く囲んでいます。

7.検索バー

目立つ検索バーは、eコマースナビゲーションにおいて不可欠な要素です。これにより、ユーザーは製品や特定のキーワードを直接検索でき、アイテムをすばやく見つけるための代替方法が提供されます。

検索結果は、訪問者が目的の製品を簡単に見つけられるように、関連性があり、使いやすい形式で表示されなければなりません。

書店で人に特定の商品やカテゴリについてたずねるのと同じように、顧客は検索バーにキーワードや語句を入力して、探しているものをすばやく見つけることができます。

例：Krogerは、ディスプレイバーをロゴ横の重要な位置に配置しています。彼らは一般的な手法として、この特定の要素の使用方法をユーザーに指示するプレースホルダテキスト（ここでは「製品の検索」）を使用します。

8.特集セクションとプロモーションセクション

eコマースサイトの特集セクションやプロモーションセクションは、実店舗の人目を引くディスプレイまたは特別なセクションに相当します。

実店舗が目立つ場所に目玉商品や季節のキャンペーンを設置するのと同じように、eコマースサイトもホームページや専用セクションでこれらの商品を強調表示して、顧客の注目を集め、売上を促進します。

これらのセクションの重要性は過小評価されるべきではありません。それは主要な不動産です。最も重要な製品や季節ごとのキャンペーンに特化させるべきです。

eコマースウェブサイトのナビゲーションの種類

上記のリストでは、eコマース情報アーキテクチャ要素について説明しました。すでにお気づきかもしれませんが、興味深い点は、さまざまな方法で表示できることです。そのため、同じラベルの下に整理された同じアイテムを販売する2つのオンラインストアが、根本的に異なって見えることがあります。

異なるタイプのeコマースウェブサイトナビゲーションを選択することにより、類似した要素に対して異なるユーザーエクスペリエンスを作成する方法を説明します。

ナビゲーションメニュー

1.水平メニュー

水平メニューは、ウェブサイトの上部（通常はヘッダーセクション）にある最も一般的なナビゲーション要素です。

水平メニューは、一連の項目（通常はカテゴリ）が水平レイアウトで表示され、多くの場合、サブカテゴリまたは特定のページにアクセスするためのドロップダウンメニューを備えています。さまざまなセクションや製品カテゴリに簡単にアクセスできるため、ユーザーはウェブサイトをすばやく移動できます。

水平メニューは固定的なものにすることができます。つまり、ユーザーがページを下にスクロールするとメニューがページの上部に固定され、メニューに常にアクセスできるようになります。あるいは、スクロールバーが最上部にある場合にのみ表示することも可能です。eコマースでは、メニューを固定し、ユーザーのナビゲーションを簡素化することがベストプラクティスと考えられています。

長所：

• 直感的で使いやすい。
• 少数のオプションを表示する場合に有効。

短所：

• 容量が限られている。

例：Dellのウェブサイトでは、水平メニュー内にエレガントなアイコンで親カテゴリが表示されます。この場合の水平メニューには、カートとユーザーアカウントにアクセスするための巨大な検索フィールドとアイコンも組み込まれていることに注目してください。

2.縦型メニュー

縦型メニューは、サイドバーや縦型ナビゲーションとも呼ばれ、ウェブページの左側または右側に配置されます。

メニュー項目のリストが上から下にレイアウトされ、通常は展開可能なサブメニューが表示されます。

縦型メニューは、ウェブサイト内をコンパクトに整理して移動できるため、表示するカテゴリやサブカテゴリが多数ある場合に特に便利です。

長所：

• ナビゲーションアイテムのために多くのスペースを提供。
• 非常に目立つ。

短所：

• 貴重な画面スペースを占有する（特に小さい画面の場合）。
• 水平メニューよりも読みにくい場合がある。

例：Walgreensは縦に長いメニューを使用しています。特定のカテゴリ（>アイコンが付いている）を展開すると、その中のサブカテゴリを表示されます。

3.メガメニュー

メガメニューは、追加情報とビジュアルを含む複数列レイアウトを表示するドロップダウンメニューの拡張バージョンです。

これにより、カテゴリ、サブカテゴリ、および注目製品をより広範囲に表示できます。メガメニューは、eコマースウェブサイトに多数の製品カテゴリがある場合や、ナビゲーションメニュー内で特定のアイテムやプロモーションを直接紹介したい場合に便利です。

長所：

• 非常に柔軟。
• コンテキストを提供する。イメージと説明を組み込んで、ユーザーにより良い認識を与えることが可能。

短所：

• 圧倒されることがある。
• ウェブサイトの速度が遅くなる可能性がある。

例：メガメニュー：Ebay.comのカテゴリにカーソルを合わせると、複数のアイテム、列、画像を含む巨大なメガメニューが表示されます。圧倒されるかもしれませんが、購入できるアイテムの多様性を反映しているのは確かです。

4.ハンバーガーメニュー

ハンバーガーメニューは、3本の横線が重なったコンパクトでミニマルなアイコンです。

通常、ウェブサイトの上隅に配置され、クリックすると本格的なメニューに展開します。

ハンバーガーメニューは、モバイル対応デザインやスペースが限られている場合に便利で、すっきりとしたナビゲーションエクスペリエンスを提供します。

他のすべてのメニューと比較して、ハンバーガーメニューは、ユーザーを目的の場所に移動させるために追加のクリックが必要です。ただし、サイズが小さいため画面のスペースをあまり占有しません。これは、小さな画面では重要です。

💡レスポンシブデザインのベストプラクティスの1つは、特定の画面幅に縮小した際、水平または垂直メニューをハンバーガーメニューに変更することです。

長所：

• 省スペース。
• モバイルでの動作が良好。

短所：

• 追加のクリックが必要。
• ユーザーがそれに注意を払わない可能性がある。

例：ZARAのウェブサイトのハンバーガーメニューは繊細で、デフォルトではどの要素もブロックしないため、ユーザーにシームレスなモバイルナビゲーションを提供するのに役立ちます。

5.クイックリンクまたはナビゲーションショートカット

クイックリンクやナビゲーションショートカットは、多くの場合、ヘッダーやフッターなど、ウェブサイトの目立つ場所に設置されます。

ショッピングカート、ユーザーアカウント、カスタマーサポート、頻繁にアクセスするセクションなどの重要なページに直接アクセスできます。クイックリンクを使用すると、ユーザーは複数のページをナビゲートすることなく、重要な機能にすばやくアクセスしたり、一般的な操作を実行できるようにしたりすることで、使いやすさが向上します。

長所：

• 主要ページへのユーザージャーニーを簡素化。
• カスタマイズ性に優れている。

短所：

• ヘッダーまたはフッターに貴重な画面スペースが占有される。

例：Amazonのヘッダーには非常に多くのクイックリンク（配送先住所、言語、カート）があり、その間のスペースはほとんどありません。エレガントではありませんが、コアページへの迅速なナビゲーションを提供していることは確かです。

6.動的またはコンテキストに応じたナビゲーション

動的ナビゲーションまたはコンテキストナビゲーションは、ユーザーの行動やコンテキストに合わせて適切なナビゲーションオプションを提供します。この動的な性質により、ユーザーエクスペリエンスのパーソナライズにおける重要な要素となります。

たとえば、ユーザーの閲覧履歴や購入行動に基づいて、最近見た製品、関連アイテム、またはターゲットを絞った推奨事項を表示できます。

動的ナビゲーションは、関連する製品を見つけるために必要な労力を軽減することで、ユーザーエクスペリエンスを向上させます。関連する製品をカートに追加する可能性は、ランダムな製品よりも高いため、コンテキストナビゲーションを提供することでカートの価値も高まります。

長所：

• パーソナライズされたユーザーエクスペリエンス。
• 売上を増加させる可能性がある。

短所：

• セットアップが困難。
• 不正確な可能性がある。

例：Targetのウェブサイトの製品ページには、ユーザーが探しているものを見つけるのに役立つ 「類似品」 セクションがあります。

異なるeコマースナビゲーションタイプの組み合わせ

リストから1つのオプションを選択する必要はありません。または2つを選択する必要もありません。必要に応じて複数のオプションを組み合わせ、ユーザーがウェブサイト全体を移動する中で目標を達成できるようにするシンプルでわかりやすいナビゲーションを作成し、最終的に売上と収益を向上させることができます。

小さな画面では水平メニューがハンバーガーメニューに変わるなど、すでにいくつかの例をご紹介ました。Neweggのような小売業者の中には、一度に3つものナビゲーションメニューを使用しているところもあります。それは、クイックリンクと検索バーを備えた水平メニュー、カテゴリを備えた縦型メニュ、その両方を複製したハンバーガーメニューを組み合わせた垂直メニューです。

顧客が目的地にたどり着くのに役立つのであれば、すべてのナビゲーションオプションは素晴らしいものです。ただし、あまりにも多くのナビゲーションオプションをウェブサイトに詰め込み過ぎると、ユーザーにとって負担になることがあります。

例：Neweggは水平メニュー、垂直メニュー、ハンバーガーメニューの両方を使用します。

まとめ

eコマースの顧客は、ニッチな市場であっても、選択肢が増えすぎています。このペースの速い世界では、ウェブサイトのナビゲーションを最適化することが、ユーザーに滞在、購入、再来店を促す道筋となります。

ユーザーがオンラインストア内をどのように移動するかを理解し、ユーザーを引きつけるために利用できるすべてのツールを調べることが重要です。つまり、アイテムをカテゴリやラベルなどで効率的に整理し、適切な要素を使って製品を表示することになります。

このブログ記事で取り上げたeコマースウェブサイトナビゲーションのベストプラクティスと例を取り入れることで、企業はエンゲージメントを向上させ、コンバージョン率を高め、顧客満足度を高めることができます。

eコマースウェブサイト最適化のヒントについては、決定版eコマース最適化ガイドをご覧ください。

Carlos Oliveiraは、カルロス・オリヴェイラは、あらゆるマーケティング、プロジェクト管理、eコマースで10年以上の経験を持つマーケティングの達人です。