ストアを長く運営してきて気づいたのは、多くの買い物客が離れていくのは商品が悪いからではなく、欲しいものを十分に速く見つけられないからだということです。その引っかかりの大半はナビゲーションに潜んでいます。この記事では、もっともよくあるShopifyのナビゲーションの間違いを5つ取り上げ、それぞれの見つけ方と、いちばんきれいな直し方をまとめます。
細かい話に入る前に、覚えておきたい数字が一つあります。Baymard Instituteによると、ECにおけるカート放棄率の平均はおよそ70%です。そのすべてがナビゲーションに起因するわけではありませんが、一部の買い物客はごく早い段階で、カートに入れる前に、ただ迷子になったという理由で離れていきます。
間違い1：トップレベルのメニュー項目が多すぎる
これはいちばん起こしやすい間違いです。というのも、良かれと思って生まれるからです。店主は買い物客にすべてを見てほしいので、メインのメニューバーにすべてを詰め込みます。トップレベルの項目が十数個、ときには20個近くにもなります。
問題は、すべてが重要なら、何も重要ではなくなるということです。買い物客は長い一列を眺め、どこから始めればいいかわからず、結局たいていは始めません。
見つけるのはとても簡単です。デスクトップでホームページを開き、トップレベルの項目数を数えてみてください。メニューが2行目に折り返してしまうなら、詰め込みすぎです。モバイルでは、トップレベルのリストが1画面より長く続き、それでも終わらないなら、それも一つのサインです。
直し方は、関連する項目をグループにまとめることです。アパレルショップに「Tシャツ」「ワイシャツ」「ジャケット」を別々のトップレベル項目として並べる必要はありません。「トップス」にまとめて、種類はその中に入れましょう。トップレベルのメニューは5〜7項目ほどに抑え、買い物客が1〜2秒でざっと見渡せるようにします。
間違い2：カテゴリの多いストアにメガメニューがない
きれいにグループ分けできると、今度は逆の問題が現れます。サブカテゴリが奥に埋もれすぎてしまうのです。買い物客は「トップス」をクリックし、どんな種類があるかを見るためにページの読み込みを待ち、それからもう一度クリックしなければなりません。クリックが一つ増えるたびに、あきらめる機会も一つ増えます。
ここでメガメニューが本領を発揮します。メガメニューとは、複数列からなる大きなドロップダウンパネルで、買い物客がカーソルを合わせた瞬間にカテゴリ構造全体を表示します。トップレベルのカテゴリからサブカテゴリへ、一度の動きで飛び込めるのです。品揃えの幅広いカタログでは、これは大手の小売サイトではほぼ標準といえる仕組みです。
ストアにメガメニューが必要かどうかの見分け方は次のとおりです。買い物客が商品一覧ページにたどり着くまでに3回以上クリックしなければならない、あるいはサブカテゴリが多いのに一度にすべてを見渡す手段がない場合は、そのサインです。
メガメニューを作るときの注意点が一つあります。パネルにホバーの遅延がないと、マウスがうっかり通り過ぎるたびにちらついてしまいます。メニュービルダーを使うなら、これを自動で処理してくれるものを選びましょう。Navi+（https://naviplus.io）は、コード不要のドラッグ&ドロップでデスクトップ用のメガメニューを作成でき、そうした技術的な細部を自分で気にする必要がありません。
間違い3：モバイルでハンバーガーメニューだけに頼る
スマートフォンで買い物をする人が多いため、これはもっとも代償の大きい間違いです。多くのストアは、すべてのナビゲーションを隅の三本線アイコン、つまりハンバーガー型のShopifyメニューに押し込んで、それで完了としてしまいます。しかしすべてを隠すということは、買い物客が何かを見るために自分から開かなければならないということで、ほとんどの人はわざわざ開きません。
Nielsen Norman Groupは、これをスマートフォンとデスクトップの両方で検証したことがあります。その結果、ナビゲーションが隠されていると、買い物客は必要な項目を見つけにくくなり、動きが遅くなり、メニューがはっきり表示されているときよりも探すのが難しいと評価しました。言い換えれば、買い物客に見えないものは、彼らにとって事実上存在しないのです。
見つけ方は、自分のスマートフォンでストアを開いてみることです。いちばん売れているカテゴリにたどり着くのに、ハンバーガーをタップし、スクロールし、もう一度タップする必要があるなら、配車を待ちながら立っている、急いでいる買い物客を思い浮かべてみてください。
直し方はハンバーガーをなくすことではなく、重要な動線を表に出して、何も開かずに親指で届く場所に置くことです。画面下部に固定したTab Barは、買い物客が日常的に使うアプリのように、ホーム、カテゴリ、検索、カートを親指の届く範囲に置いてくれます。これはNavi+がモバイル専用に作るタイプのメニューで、デスクトップとは別に設定できます。ハンバーガーは補助的なものに残しつつ、必須のものはTab Barに任せられます。
間違い4：パンくずリストや現在地表示がない
買い物客はカタログの奥深くまで見て回るうちに、自分がどこにいるのかわからなくなります。広告や検索から商品ページにたどり着き、その商品を気に入って、もっと似た商品を見たいと思っても、親カテゴリに戻る自然な手段がないのです。
パンくずリストとは、商品名の上に置かれる「ホーム ＞ トップス ＞ Tシャツ ＞ メンズTシャツ」のような小さな道しるべです。これは二つの問いに同時に答えます。自分は今どこにいるのか、そして一つ上の階層にどう戻るのか。単純に聞こえますが、多くのShopifyテーマはこれをデフォルトで有効にしていなかったり、「ごちゃごちゃして見える」という理由で店主が外してしまったりします。
見つけ方は、任意の商品ページを開いて「同じ種類の商品を見るにはどこをクリックすればいい？」と自問してみることです。その答えがブラウザの戻るボタンなら、現在地表示が欠けています。
直し方は、カテゴリページと商品ページでパンくずリストを有効にすることです。あわせて、メインメニュー上で現在の項目をはっきりさせましょう。たとえば現在のカテゴリを太字にしたり下線を引いたりすれば、買い物客は常にどの枝にいるのかがわかります。
間違い5：買い手の考え方ではなく、店主の理屈でカテゴリ分けする
これはもっとも見抜きにくい間違いです。というのも、メニュー自体は依然として整って見えるからです。問題はグループの作り方にあります。店主は倉庫や仕入先の整理の仕方でカテゴリを分けがちですが、買い手は自分のニーズで考えます。
よくある例があります。化粧品ショップが、仕入れの仕方に合わせてメニューをブランド別に分けているとします。しかし買い物客はたいていブランド名を覚えておらず、「日焼け止め」や「マットな口紅」を探しに来ます。目的別の動線がメニューにないと、買い物客はどのブランドが欲しいものを扱っているか推測しなければならず、ほとんどの人はあきらめてしまいます。
Baymardは、誤ったカテゴリ分けを影響の大きいナビゲーションの問題の一つに分類しています。ストアが使いにくいという印象を残してしまうからです。
見つけるのは前の4つの間違いよりも難しく、買い物客の声に耳を傾ける必要があります。買い物客がよく送ってくるメッセージや質問を読み返してみてください。サイトに明らかにあるXについて「Xは売っていますか」と多くの人が問い合わせてくるなら、ほぼ間違いなく、その人たちはメニューからそれを見つけられなかったのです。それは、彼らの言葉ではなく、あなたの言葉で話しているメニューです。
直し方は、社内の専門用語ではなく、買い物客が使う言葉で項目を名づけることです。買い物客の考え方がさまざまなら、商品種類で探す軸と、目的やシーンで探す軸の両方を残しても構いません。いちばん早い確認方法は、これまでストアに来たことのない外部の人を数人呼び、特定の商品を探してもらって、最初にどこをクリックするかを観察することです。
全体的な注意点：速度を犠牲にしない
ナビゲーションを直すときには、一つの落とし穴があります。アプリを追加し、効果を加えるうちに、ページが遅くなってしまうのです。アプリはそれぞれ、ページを重くするスクリプトを読み込むことがあります。
Googleはページの読み込み体験の「良好」のしきい値を、LCPは2.5秒未満、INPは200ms未満、CLSは0.1未満と定めています。ページがカクついたり、レイアウトがずれたり、反応が遅くなったりするきれいなメニューは、良いことよりも害のほうが大きいのです。メニュービルダーを選ぶときは、Core Web Vitalsに配慮したものを優先しましょう。これはNavi+が最適化している点でもあり、テーマを変えてもメニューはそのまま保たれるので、デザインを切り替えるたびにゼロから作り直す必要がありません。
上記の5つの間違いは、いずれもコードを知らなくても直せます。まずはストアでもっとも多くの買い物客に影響しているもの、たいていはモバイル側から始めて、順に下げていきましょう。
この記事は、なぜ買い物客はストアを訪れても買わないのか — ナビゲーションが果たす役割という、より大きなガイドの一部です。