どのストアも、同じ場所からスタートします。数十点の商品、ひとつのアイデア、そしてたくさんの不安です。この段階では、新規ストアのナビゲーションは複雑である必要はありません。必要なのは、正しく、そして十分であることです。難しいのはメニューを「充実して」見せることではなく、ストアが実際に必要とする以上に大きなナビゲーションを作らないように、自分を抑えることなのです。
この記事のテーマは最初の段階、つまり商品50点未満の小規模カタログを持つ新規ストアです。それがどのような姿なのか、ナビゲーションに本当に必要なものは何か、よくある間違い、そして始めるためのおすすめの構成について説明していきます。
この段階のストアの姿
カタログは小さく、商品グループが数個あるだけということもよくあります。場合によっては、まだカテゴリーを設けるまでもなく、ストア全体が「すべての商品」の中に収まってしまうこともあります。
トラフィックはまだ少なく、ムラがあります。訪問者は数件の投稿、いくつかのシェア、あるいは友人の輪からやってきます。1日に数十件から数百件のビューがあれば普通です。
そして最も大切なこと。あなたはまだ実験の最中です。どの商品が売れるか、価格はどうするか、どう撮影するか、どう挨拶するか——すべてを試している段階です。すべてがまだ動いています。最初からきっちり作り込んだ硬直したナビゲーションは、方向転換のたびに直さなければならない重荷になってしまいます。
言い換えれば、この時期に求められるのは完全さよりも柔軟さなのです。
新規ストアのナビゲーションに必要なもの
短く言えば、シンプルで分かりやすいこと。お客様は数秒のうちに購入への道を見つけられればよいのであって、美しいメニューの図を必要としているわけではありません。
デスクトップでは、3〜5項目の整然としたヘッダーで十分です。たとえば「商品」「私たちについて」「お問い合わせ」など。人は通常、ページを左から右へ、上から下へと目で追うため、最も重要な項目は左側に置き、隠さずに見える状態にしておくべきです。
この段階でメガメニューは必要ありません。メガメニューは、一度に展開する必要のあるサブカテゴリーが多いストアに向いています。カタログがまだ小さいうちは、メガメニューは空っぽで大げさに見えてしまいます。開いても、大きな枠の中に一行か二行が浮いているだけ。ストアを実際よりも大きく見せはしますが、お客様にとって得るものは何もありません。
モバイルを忘れない
ここが最もおろそかにされやすく、それでいて最も重要な部分です。今日のeコマースでは、ストアへの訪問のほとんどがスマートフォンからのものです——業界の多くの数字が、その割合をおよそ70〜80%としています。つまり、ほとんどのお客様は手に持った小さな画面を通してあなたのストアを見ているのです。
スマートフォンの持ち方が、何をタップしやすいかを決めます。Steven Hoober による調査（Smashing Magazine に掲載）では、モバイルでの操作のほとんどは親指で行われ、最も届きやすいのは画面の下半分——いわゆる「サムゾーン（thumb zone）」だと分かっています。上の隅は最も届きにくい場所です。
だからこそ、画面の下部に置かれたナビゲーションバー（Tab Bar）は理にかなっています。ちょうど親指の届く範囲に収まるのです。お客様はメニューを探すために、上の隅まで手を伸ばす必要がありません。
ハンバーガーメニュー——すべてのナビゲーションをその裏に隠す、三本線のアイコン——については、Nielsen Norman Group が、項目を見えたままにしておく場合と比べて、項目を気づきにくくし、見つけるのに時間がかかるようにすると検証しています。主要な項目がいくつかしかない小さなストアにとって、それらを隠してしまう理由はありません。重要なボタンをいくつか見える状態に保つ基本のタブバーの方が、お客様にとってはるかに役立ちます。
よくある2つの間違い
この2つの間違いをあまりに何度も見てきたので、私はもはや初心者の通過儀礼のようなものだと思っているほどです。
間違いその1：メニューを早すぎる段階で複雑にすること。 売り手は大きなストアを見て、多階層のメニューを目にし、自分のストアもすぐに「プロらしく」見せたくなります。そこで、まだ商品のないもの用のカテゴリーを作ったり、6点の商品グループを4つのサブカテゴリーに分けて、メニューを充実して見せようとしたりします。
その結果、お客様が「アクセサリー」をクリックすると商品が2点しかなく、「新着商品」をクリックすると空っぽ、ということになります。その体験は、きちんとした「すべての商品」というカテゴリーよりもずっと悪いものです。小さなカタログは隠すべき弱点ではありません——まとめてグループ化する方が、むしろ買いやすくなるのです。
間違いその2：デスクトップのことばかり気にしてモバイルを忘れること。 人はたいていパソコンでストアを作り、大きな画面で眺め、そしてスマートフォンで確認するのを忘れてしまいます。デスクトップのメニューは問題なく見えても、モバイルでは項目が詰まったり、ボタンが密集したり、ナビゲーションが隅の小さなアイコンの裏に消えてしまったりします。
直し方は簡単です。メニューを調整するたびに、自分のスマートフォンでストアを開き、本物のお客様のように何かを買ってみることです。もし手を伸ばさなければならなかったり、何度かタップを誤ったりするなら、お客様も同じことをします——しかも、お客様はあなたより辛抱強くありません。
Navi+ を使ったおすすめの構成
Navi+ を使えば、デスクトップとモバイルを別々に設定できるので、ひとつのデザインを両方に無理やり当てはめる必要はありません。この段階では、本当に最小限に保つことをおすすめします。
デスクトップでは、3〜5項目のシンプルなヘッダーを作ります。お客様が必要とするページだけを正確に選びましょう。主要な商品カテゴリー、私たちについてのページ、お問い合わせのページ。メガメニューは、カタログが実際に成長したときのためにとっておきましょう。
モバイルでは、基本の4項目の Tab Bar を使います。買い物客がすでに知っている、安心できるレイアウトです。
- ホーム — トップページに戻る
- ショップ — 商品一覧へ
- カート — カート、いつでも手の届くところに
- アカウント — アカウントまたはサインイン
この4つのボタンで、お客様がしたいことのほぼすべてをカバーできます。カートを下部のバーにそのまま置くことには、実用的な意味もあります。Baymard Institute によれば、eコマースにおける平均カート放棄率はおよそ70%です。ですから、お客様がカートに戻って買い物を続ける手助けになるものは、何であれやる価値があります。常に見えていて、常にタップしやすいカートボタンは、その方向への小さな一歩なのです。
最初から気にかけておく価値のあるもうひとつのことは、速度です。Google は Core Web Vitals の「良好（good）」のしきい値を、LCP は2.5秒未満、INP は200ミリ秒未満、CLS は0.1未満と定めています。メニューは早い段階で読み込まれ、すべてのページに表示されるものなので、重いメニューはストア全体を道連れにして遅くしてしまいます。Navi+ はこれらの指標の邪魔にならないように作られています——これは早いうちから身につけておきたい良い習慣です。後から直すのは、いつだってもっと大変ですから。
新規ストアの段階では、お客様がすぐに使えるシンプルなメニューは、直し続けなければならない凝ったメニューに常に勝ります。
Navi+ はドラッグ＆ドロップ操作でコードも不要なので、上記のレイアウトは数分で作れますし、カタログが成長するにつれていつでも調整できます。メニューはテーマを切り替えてもそのまま残るので、初期段階のデザインの実験で、せっかく作ったナビゲーションが壊れることもありません。
小さく始めましょう。ストアが成長したら、それに合わせてナビゲーションも育てていけば、決して遅くはありません。
この記事は、より大きなガイドストアの成長段階ごとのナビゲーション — 商品10点から10,000点までの一部です。