スマホで買い物をする人にとって購入をしやすくする変更を一つだけ選べと言われたら、私はモバイルタブバーを加えます。これは画面下部に固定されたナビゲーションの帯で、ラベル付きのアイコンをいくつか並べたものです。買い物客は検索したりメニューを開いたりする必要はありません。視線を下に向ければ、行きたい場所がすぐ目に入ります。だからこそ、ほぼすべての主要なeコマースアプリがこれを採用しているのです。
下部に置くことが重要な理由
ほとんどの人は片手でスマホを持ちます。1,300人以上を観察したSteven Hooberの調査によると、約49%の人が片手でスマホを持ち、親指でタップしています。この持ち方では、親指が無理なく届くのは画面下部だけ — 一般に親指ゾーンと呼ばれる領域です。
画面上部はその正反対です。そこに触れるには、親指を伸ばすか持ち替えるしかありません。従来のハンバーガーメニューはまさに画面の上隅、もっとも遠い場所に置かれています。下部のタブバーは、届きやすい領域にぴたりと収まります。買い物客はより速く操作でき、ミスタップも減ります。理由は単純で、もともと親指がある場所にそれがあるからです。
大画面のスマホが一般的になるにつれ、この距離はさらに重要になります。下部のボタンは常に手の届く範囲にありますが、上部のボタンはそうとは限りません。
すぐに見える、操作いらず
タブバーと隠れたメニューの最大の違いは、見えているかどうかです。常にそこにあり、ラベル付きのアイコンが4〜5個並んでいて、買い物客は何も開く必要がありません。
これは多くの人が思う以上に重要です。Nielsen Norman Groupは6つのウェブサイトで179人を調査し、こう結論づけました。主要なナビゲーションを隠すと、買い物客がそれを見つける頻度が目に見えて下がり、作業完了までの時間が長くなり、体験そのものが難しく感じられる、と。メニューが見えていると、三本線のアイコンをまずタップしなければならない場合に比べて、人々はそれをはるかに多く使います。
ストアにとって「買い物客がナビゲーションをより多く使う」ことは、たいてい「買い物客がより多くの商品を見る」ことを意味します。化粧品を扱うストアなら、タブバーに検索アイコンを置いておけます。特定の口紅を一つ探している買い物客は、メニューを掘り下げる代わりに一度タップするだけで済みます。取り除いた一手間のぶんだけ、その買い物客を引き留める機会が増えるのです。
買い物客が迷わず目的地にたどり着けると、間接的にチェックアウトにも効いてきます。Baymard Instituteが多数の調査をまとめたところによると、平均のカゴ落ち率は約70%で、ここ何年もほとんど動いていません。その原因の大半はチェックアウトの段階にありますが、買い物客の気を散らしたり迷わせたりする分かりにくいナビゲーションも一因です。下部に常に表示されるカートアイコンに数量バッジが付いていれば、買い物客にカートがまだ待っていることを思い出させてくれます。
4〜5個ルール:主要な行き先だけに絞る
タブバーのいちばん難しいところは技術ではなく、項目を選ぶ規律です。スペースが非常に狭いので、そこは買い物客がもっとも頻繁に必要とする場所、つまり主要な行き先だけに割り当てるべきです。
ほとんどのストアでうまくいく定番の構成はこうです。
- ホーム — トップページへ戻る
- コレクション / ショップ — 商品カテゴリーへ
- 検索 — クイック検索
- カート — 数量表示付きのカート
- アカウント — アカウント、注文履歴、あるいは自店で優先したい項目を一つ
5番目の項目は、自分のビジネスモデルと照らし合わせて決めるところです。大々的なプロモーションを実施しているなら、フラッシュセールに差し替えてもいいでしょう。買い物客を呼び戻すのがコンテンツなら、ブログでもかまいません。季節物のファッションストアなら、一時的に新着商品を置くのもありです。要点はこうです — 優先項目は一つだけ、詰め込まない。
5個を超えてはいけない理由
この制限は見た目だけの話ではありません。スマホの画面に6〜7個のアイコンを詰め込むと、一つひとつが小さくなり、ラベルは読みにくくなり、タップ領域が近づきすぎてミスタップが起きます。すべてが「重要」になると、何も目立たなくなるのです。
私自身、まさにこの失敗をしたことがあります。商品、プロモーション、お問い合わせ、ブログ、アカウント、カートを全部同じ帯に並べたかったのです。結果はアイコンがぎゅうぎゅうに詰まった列で、買い物客はそれでも何をタップすればいいか分かりませんでした。明確な5項目まで削ったところで、ようやく全体に余裕が戻りました。タブバーは一つのことを上手にこなします — 買い物客をもっとも重要な数か所へ素早く連れていくことです。それ以外 — 各種ポリシー、ガイド、二次的なカテゴリー — は、スライドメニューやフッターに置いておけます。
買い物客がすでに知っているパターン
あまり意識されない利点があります。買い物客は、あなたのストアにたどり着く前から、すでにタブバーの使い方を知っているのです。ショッピングアプリ、SNSアプリ、銀行アプリで毎日のように目にしています。下部にホーム、検索、カート、アカウントのアイコンが並ぶ帯は、ほとんど誰もが理解している慣習です。
ストアがまさにそのパターンを使えば、買い物客は新しいことを何も学ぶ必要がありません。下を見れば、すぐに何をすべきか分かります。この馴染みやすさそのものが、コンバージョン最適化の一形態です — 何も説明せずに摩擦を減らせるのです。
Shopifyで販売している人にとって、つまずくのはたいてい技術面です。ほとんどのテーマにはアプリ風のタブバーが含まれておらず、自分でコードを書くのはコストがかかるうえ、テーマを変えると壊れやすいのです。ここで専用ツールが役に立ちます。Navi+ なら、ドラッグ＆ドロップでコード不要でタブバーを構築でき、モバイルとデスクトップで別々の設定ができ、テーマを切り替えてもメニューはそのまま残ります。
ページ速度と引き換えにしない
最後に一つ。タブバーはすべてのページに表示されるので、重ければストア全体を遅くします。そしてGoogleはCore Web Vitalsを通じて速度を直接評価します — LCPは2.5秒未満、INPは200ミリ秒未満、CLSは0.1未満であるべきです。とくにCLS — レイアウトのずれ — は、下部のバーが遅れて表示されて他のコンテンツを押しのけると、簡単に悪化します。
タブバーを構築するツールを選ぶときは、軽くて安定していて、速度スコアを引き下げないものを優先しましょう。Navi+はShopify App Storeで高い評価を得ており、「Built for Shopify」バッジも取得しています。良いタブバーは、タップしやすいことと、いっさい待たされないことの両方を満たさなければなりません。
要するに、タブバーはスマホでのハンバーガーメニューに代わる主役の手段です — 親指ゾーンに収まり、開かなくても常に見えていて、もっとも重要な数か所の行き先に絞られ、買い物客がすでに知っているパターンの上に成り立っています。こうした数少ない基本を正しく押さえるだけで、たいていはモバイルの買い物客にとって購入を目に見えてしやすくできるのです。
この記事は、より大きなガイドモバイルナビゲーション — なぜハンバーガーメニューは廃れつつあり、代わりに何を使うべきかの一部です。