ストアでのユーザー行動について語るとき、どんなショップオーナーも気落ちしかねない事実があります。商品説明やバナー、慎重に選んだ言い回しに注いだ努力のほとんどを、お客様はほとんど読んでいない、ということです。お客様は見渡すだけです。ページにさっと目を走らせて必要なものを探し、最初の数秒で見つけられなければ、立ち去ってしまいます。
この記事は、私自身がストアを運営しながら観察してきたことを、単なる勘にならないようにいくつかの調査と照らし合わせてまとめたものです。狙いはシンプルで、お客様がページ上で実際に何をしているのかを理解し、ナビゲーションを正しい形で配置できるようにすることです。
お客様は読まない、見渡す
ユーザー体験の研究を専門とするチーム、Nielsen Norman Group には、ほとんど古典となった一言があります。「人はオンラインでは読まない、見渡すだけだ」。彼らは長年にわたって視線の動きを追跡し、このパターンが繰り返し現れるのを見てきました。
つまり、ストアに来たお客様は、上から下へ順番に読んでいるわけではありません。ページ全体に視線を走らせ、いくつかのキーワードと数枚の画像を拾い、そして自分なりにこう推測するのです。「ここに自分の欲しいものはあるだろうか？」
判断にかけられる時間も短いものです。Nielsen Norman によれば、訪問の最初の10秒は、お客様が最も立ち去りやすい時間帯です。この区切りを越えれば、その後は長くとどまる傾向がありますが、その最初の10秒は容赦がありません。
売り手にとっての教訓はこうです。最も重要なものは、お客様にスクロールも思考も強いることなく、すぐに目に入らなければなりません。ストアにとって最も重要なものとは、たいていの場合ナビゲーションです。カテゴリ、メニューバー、検索ボックス。それらこそ、お客様が「ここでは何が売られていて、次にどこへ行けばいいのか」を知るために必要なものなのです。
Fパターン、Zパターン：お客様の視線が最初に向かう先
ページを見渡すとき、お客様の視線はランダムに動くわけではありません。かなり一定したいくつかの経路をたどります。
最も多いのがFパターンです。Nielsen Norman Group のアイトラッキング調査は、これをアルファベットのFになぞらえて説明しています。お客様はまず上部の横一行をさっと見渡し、少し下がってもう一本の横一行（こちらは短め）を見渡し、それから左端を縦に下へとたどります。上部のセクションと左端こそ、視線が最も長くとどまる場所なのです。
ブログ記事や長い商品説明のような、テキストの多いページではFパターンが頻繁に現れます。ここから学べるのは、重要な情報は行の先頭、段落の先頭に置くこと、そして長い文の末尾に埋もれさせないことです。
Zパターンは、ランディングページやシンプルなホームページのような、テキストの少ない簡素なページで現れやすいものです。視線は左上の角から右へ横に移動し、それから対角線上に左下へ下がり、また右へ横に移動します。Zの字の形です。
両者に共通するのは、上部と左端が優先されるということです。メインメニューやロゴ、主要なカテゴリが昔から上部に置かれてきたのは、このためです。慣習が見た目によいからではなく、そこが本当にお客様の視線が最初に向かう場所だからです。重要なカテゴリを右側の目立たない隅やページのずっと下のほうに押し込んでしまえば、お客様はそれに気づかない可能性が高いのです。
モバイルとデスクトップ：まったく異なる二つのサイトの使い方
多くのストアはパソコンの画面で設計され、その上で「モバイルもたぶん同じだろう」と思い込まれています。実際には、この二つの状況はまったく異なります。
デスクトップでは、お客様はマウスと広い画面を持ち、全体像を見渡せます。自由にホバーし、多列のメガメニューを開き、複数の商品を一度に比較し、たいていは少し辛抱強い状態です。
モバイルでは正反対です。小さな画面、多くの場合は片手で持ち、主に親指で操作します。Steven Hoober が1,300人以上のスマートフォン利用者を観察したところ、およそ半数が片手で端末を持っていました。ここから「サムゾーン（親指の届く範囲）」という考え方が生まれました。画面の中央と下部は最も届きやすく、一方で上部の両隅は非常に届きにくいのです。
ナビゲーションバーを画面の下部に置くこと（Tab Bar のように）が、上部に詰め込んだメニューよりたいてい押しやすいのは、このためです。ちょうどそこに親指があるからです。お客様はモバイルではより辛抱が利きません。小さな画面が扱いにくいことに加えて、移動中だったり誰かを待っていたりすることが多く、途中で簡単に投げ出してしまうからです。
モバイルとデスクトップの違いから、実践的な結論が導かれます。ナビゲーションは画面の種類ごとに別々に設定すべきであり、単一のデザインを共有させるべきではない、ということです。デスクトップでは数列にわたって広がるメガメニューでもよいかもしれませんが、モバイルでは下部に Tab Bar を置き、すっきりとしたスライドアウトメニューを併用するほうが良いでしょう。これこそ Navi+（naviplus.io）が作られた目的でもあります。モバイルとデスクトップのメニューを別々に設定でき、ノーコードのドラッグ＆ドロップで、それぞれの画面にお客様の手の動きに本当に合ったナビゲーションを用意できるのです。
| デスクトップ | モバイル | |
|---|---|---|
| 操作 | マウス、全体像が見える | 親指、サムゾーン |
| 画面 | 広い、複数列 | 狭い、縦スクロール |
| 辛抱強さ | 高い | 低い、すぐ投げ出す |
| 適したメニュー | メガメニュー | Tab Bar + Slide Menu |
お客様が最も離脱する場所
ストアを観察していると、お客様がつまずいて立ち去りやすい場所がいくつかあります。その多くは商品の問題ではなく、ナビゲーションの問題です。
-
カテゴリが見つからない。 お客様は何が欲しいか分かっているのに、その入り口が見えません。カテゴリが隠れていたり、紛らわしい名前だったり、視線の見渡す経路の外にあったりするのです。何度か推測しても見つからず、立ち去ってしまいます。
-
メニューの階層が多すぎる。 項目をクリックするとサブメニューが現れ、さらにもう一つサブメニューが現れる。階層が一つ増えるたびに、お客様が下さなければならない判断が一つ増え、その一つ一つが諦める機会になります。モバイルでは画面が小さいぶん、さらに深刻です。
-
自分がどこにいるか分からない。 お客様がストアの中で迷い、自分がどのセクションにいるのか、前のページにどう戻ればいいのか分からなくなる。この方向感覚を失った感覚が、いっそタブを閉じて終わりにしようという気にさせるのです。
特に完全に隠れたメニュー、つまりすべてのナビゲーションを一つのアイコンの裏に押し込むハンバーガー式のメニューも、よく考える価値があります。Nielsen Norman Group がテストを行ったところ、隠れたナビゲーションは、はっきり見えるナビゲーションよりも発見される頻度がはるかに低く、そのためお客様の利用も少なく、作業を終えるまでに時間もかかることが分かりました。ハンバーガーは確かにスペースを節約しますが、隠したものは何であれ、お客様の利用は減ります。重要な項目をいくつかは表示したままにしておくべきで、たとえば下部に常に見える Tab Bar を使うのがよいでしょう。
これらの離脱ポイントは、どの売り手も知っているある数字に静かに流れ込んでいます。Baymard Institute によれば、カート放棄率は10年以上にわたって平均でおよそ70%前後を推移してきました。放棄されたカートがすべてナビゲーションのせいというわけではありませんが、カテゴリページでまさに迷ってしまい、カートにたどり着く前に立ち去ってしまうお客様は、明らかにナビゲーションが一因です。
そして、ページ速度の問題
つい忘れがちなことが一つあります。お客様がどれほど速く見渡そうとも、まずはページが表示されるのを待たなければならない、ということです。メニューがカクついたり、飛び跳ねたり、ページを重くしたりすれば、最初の一秒目から体験は台無しになります。
Google にはこれを測るための Core Web Vitals という一連の指標があり、「良好」とされる基準値があります。LCP は2.5秒未満（主要なコンテンツが表示される）、INP は200ミリ秒未満（ページがタップに反応する）、CLS は0.1未満（レイアウトがずれ動かない）。ページを飛び跳ねさせたり遅くしたりするメニューバーは、益よりも害のほうが大きいのです。ですから、メニューを作るツールを選ぶときは、これらの指標を引き下げない軽量なものを選びましょう。
要するに、ストアのお客様は読むのではなく見渡し、その視線はかなり予測のつくいくつかの経路をたどり、モバイルとデスクトップではまったく異なる使い方をします。これらを理解すれば、メニューやカテゴリ、ナビゲーションの配置はずっと明確になります。当て推量が減り、お客様の手と目が実際にどう動くかに、より沿ったものになるのです。
この記事は、より大きなガイド「お客様はストアに来るのに買わない理由 — そしてナビゲーションが果たす役割」の一部です。