今すぐ試せる小さな実験があります。列に並んでいるときやバスに乗っているときにスクロールするように、スマホを片手で持ってみてください。そのまま持ち方を変えずに、親指で画面の左上の角に触れてみましょう。難しいですよね。あの手を伸ばしてぎこちなく感じる感覚こそが、サムゾーンを考える出発点です。サムゾーンとは、スマホを片手で持ったときに親指が無理なく届く範囲のことです。
サムゾーンを理解することは、単なる理論ではありません。それは、買い手が「カートに追加」を簡単にタップできるか、メニューを見つけられるか、そして注文を最後まで完了するか、それとも途中で離脱するかを左右します。この記事では、画面上で親指が届く範囲、それがなぜモバイルでの買い物体験にとって重要なのか、そしてなぜナビゲーションを画面下部に置くことが人々の実際の持ち方に合っているのかを取り上げます。
サムゾーンとは何か、そしてなぜそれが実在するのか
サムゾーンという概念は、Steven Hooberが実世界で1,300人以上のスマホ利用者を観察したことをきっかけに広く知られるようになりました。彼は主に3つの持ち方を見つけました。片手で持つ、片手で支えてもう一方の手でタップする、そして両手で持つ、という3つです。なかでも片手操作は全観察のおよそ半分を占め、最も多く見られました。言い換えれば、人はとても頻繁に、たった1本の親指だけでスマホを使っているのです。
スマホを片手で持つとき、親指は手のひらの付け根あたりを中心とした円弧を描いて動きます。そのため、
- 最も届きやすい範囲は、画面の中央から下の部分です。親指はここに自然に落ち着き、無理がありません。
- 手を伸ばす必要がある範囲は、画面中央の左右の端です。届きはしますが、手が少し緊張します。
- 最も届きにくい範囲は、上の2つの角、特に持っている手と対角線上にある角です。ここに届かせるには、たいてい持ち方を変えるか、もう一方の手を使うことになります。
私の言葉を鵜呑みにする必要はありません。Googleで「thumb zone」と検索すれば、おなじみの3色のマップが見つかります。緑は届きやすい範囲、黄色は手を伸ばす範囲、赤は届きにくい範囲を表したもので、これはSamantha IngramがHooberの研究をもとにSmashing Magazineで紹介したものです。これはUXのなかでも最も繰り返し語られる考え方の一つであり、それが廃れない理由は、一過性の流行ではなく手の構造そのものに合致しているからです。
パラドックス ― 最も重要なものが、最も届きにくい場所にある
ここは立ち止まって考える価値があります。多くのショッピングサイトでは、すべての主要ナビゲーションが隠されているハンバーガーアイコン(3本の横線)が、上の角に置かれています。つまり、あらゆる商品カテゴリーへの入り口が、サムゾーンのなかでも最も届きにくい部分に着地しているのです。
問題は手が疲れることだけでは終わりません。ハンバーガーはコンテンツそのものも隠してしまいます。Nielsen Norman Groupはこれをスマホとデスクトップの両方で調査し、ナビゲーションをハンバーガーアイコンの裏に隠すと、ユーザーが必要なものを見つけにくくなり、時間がかかり、より難しく感じられる、と結論づけました。まとめると、手が届きにくい場所にメニューを置いたうえに、それをユーザーの目からも隠してしまっているわけです。
販売者にとって、これは非常に具体的なコストを伴います。Baymard Instituteによれば、平均的なカート放棄率は10年以上にわたって70%前後を推移しており、モバイルではしばしばさらに高くなります。少しでも手間のかかるステップは、一つひとつが顧客が離れる理由になります。買うか買わないか迷っているとき、メニューを開くためだけに持ち方を変えなければならないのは小さな摩擦ですが、それが積み重なっていくのです。
モバイルでうまく設計する ― 重要なアクションを親指の届く範囲に置く
原則はシンプルですが、それを実践するには規律が必要です。重要なやりとりはサムゾーンに置き、端に追いやらないことです。
特にストアの場合は、
- メインのアクションボタン(「カートに追加」「今すぐ購入」「レジに進む」)は、親指が落ち着く画面の下半分に置くべきです。多くの優れたテーマが購入ボタンを商品ページの下部に固定しているのは、この理由からです。
- メインのナビゲーションは、角のアイコンの裏に隠すのではなく、届きやすい範囲に見える形で置くべきです。
- めったに使わず、少しリスクのあるもの(削除、ログアウト、閉じる)は、届きにくい範囲に置いてもかまいません。ここではタップしにくいことが、かえって誤操作を防ぐ一つの保護層になります。
身近な例を挙げましょう。食品やファッションを扱っていて、顧客がたいてい外出先で片手でスマホを持ちながら店を見るのであれば、「カートに追加」ボタンが親指の届く範囲にあるかどうかが、注文の成立と、さっとスクロールされてそのまま忘れられてしまうこととの分かれ目になり得ます。
これは、サムゾーンがFパターンやZパターンといった視線の動きと一緒に語られることが多い理由でもあります。FパターンやZパターンは目がコンテンツをどうたどるかに関するものであり、サムゾーンは手がどこまで届くかに関するものです。優れたモバイルレイアウトは、その両方を尊重する必要があります。重要なものは、目が向かう場所かつ手が触れられる場所に置くのです。
なぜ画面下部のTab Barは人々の持ち方に合っているのか
最も届きやすい範囲が画面の下部であるなら、画面下部に置かれたナビゲーションバーは、その身体的な現実への直接的な答えになります。これがTab Barです。画面下部にいくつかのアイコンを固定して並べた帯状のもので、誰もが知っているShopee、Lazada、Instagramのアプリの下部バーのようなものです。
Tab Barがモバイルで広く使われているのは、いくつものことを同時に実現してくれるからです。
- 常に表示されている ― 開かなくても見える ― ので、NN/gが指摘した「ナビゲーションが隠れている」問題を解決します。
- まさにサムゾーンに位置しているので、親指が無理なく届きます。
- 項目数が限られている(通常3〜5個)ため、最も重要な導線(ホーム、カテゴリー、検索、カート、アカウント)を選ばざるを得なくなります。
Tab Barがすべてを置き換えるわけではありません。深い多階層の商品カタログには、依然としてスライドメニューが必要かもしれません。しかし、モバイルナビゲーションの背骨としては、Tab Barは上の角のハンバーガーよりもはるかに人々の持ち方に合っています。
これはNavi+がコードなしで作れるメニュータイプの一つで、デスクトップ向けのMega MenuやSlide Menuもあわせて用意されています。モバイルとデスクトップを別々に設定でき ― スマホには下部のTab Bar、パソコンにはMega Menu ― すべてドラッグ&ドロップで行えます。販売者が一点気に留めておくべきこととして、ナビゲーションバーを追加するとページが重くなりやすく、GoogleのCore Web Vitalsの「良好」とされる基準はかなり厳しい(LCPは2.5秒未満、INPは200ミリ秒未満、CLSは0.1未満)ことがあります。Navi+はこれらの指標を悪化させないよう最適化されているため、速度を犠牲にすることなく、サムゾーンにぴったり収まるナビゲーションを手に入れられます。
覚えておきたいいくつかのこと
サムゾーンは飾りのトリックではありません。それは、ある単純な真実を尊重するための考え方です。買い手はとても頻繁に、たった1本の親指だけを使っているのです。
スマホで自分のストアを見直すときに、問いかけてみる価値のあるいくつかの質問があります。
- メインの購入ボタンは画面の下半分にあるか?
- メインのメニューはオープンに表示されているか、それとも上の角に隠れているか?
- 顧客に遠い角まで手を伸ばさせてしまう重要なアクションはないか?
すべてを一度にやり直す必要はありません。ただスマホを片手で持ち、自分自身の購入の道のりをたどってみて、どこでまだ引っかかるかを親指に教えてもらいましょう。
この記事は、より大きなガイドモバイルナビゲーション ― なぜハンバーガーメニューは時代遅れになりつつあるのか、代わりに何を使うべきかの一部です。