この指標は、これまでの3つとは少し性格が違います。ひとつの数字を見るのではなく、同じ数字をデバイスごとに分けて見るのです。ここで比較するのがモバイルとデスクトップのナビゲーション、つまりスマホで見るときとパソコンで見るときの、人の動き方の違いです。
私がこれに気づいたのは、本来よりずいぶん遅くなってからでした。最初はまとめて見たレポートでメニューの数字が悪くないのを確認し、それで安心していたのです。モバイルだけを切り出して見て初めて、訪問者の半分が、私の思い描いていたのとはまったく別の体験をしていたことに気づきました。
同じメニュー、まったく違う2つの物語
デバイスごとにナビゲーションを比較するとき、特に見る価値があるのは次の3つです。
- CTR（メニューのクリック率）: 各デバイスで、実際にメニューをタップした訪問者の割合。
- 深さ（どこまで見たか）: タップした後、何ページ閲覧したか。
- 離脱率: ほとんど何もせずに離れていった訪問者の割合。
ポイントは、この3つの数字がモバイルとデスクトップではっきり違ってくることが多い、という点です。デスクトップではメニューは横並びで常に表示されていることが多く、訪問者はひと目見ればすべてが分かります。モバイルでは、メニューは三本線のハンバーガーボタンの後ろに隠れていることが多く、タップして開かないといけません。
この違いは小さくありません。Nielsen Norman Groupによれば、メインのナビゲーションをハンバーガーの後ろに隠すと、訪問者がメニューを見つけられる確率がほぼ半分になり、同時にかかる時間が増えてタスクをより難しく感じさせます。同じサイトなのに、デスクトップの利用者とモバイルの利用者は、事実上まったく別の店を歩いているようなものなのです。
測定方法：GA4でデバイスカテゴリ別に分ける
特別なツールは必要ありません。GA4ですべてできます。
いちばん簡単なのは、探索（Explore）を開いて自由形式のレポートを作り、ディメンションにデバイスカテゴリを追加することです。すると各指標がデスクトップ・モバイル・タブレットの3行に分かれて表示されます。直帰率、エンゲージメント、セッションあたりのページ数を、行を横並びにして直接比較できます。
もっと踏み込みたいなら、別々のセグメント —「モバイル」セグメントと「デスクトップ」セグメント — を作り、同じレポートをそれぞれに適用します。これは追加の条件を重ねたいときに便利です。たとえばFacebook広告から来た訪問者だけを見たり、特定のカテゴリページにいる訪問者だけを見たりするときです。
GA4の定義についてひとつ注意を。GA4では、セッションが「エンゲージメントなし」のときに「直帰」とカウントされます。つまり、訪問者の滞在が10秒未満で、ページを1ページしか見ず、キーイベントを発火させなかった場合です。直帰率は、エンゲージメント率のちょうど裏返しです。数字に混乱しないよう、これは覚えておいてください。
測定するときは、絶対的な数値にとらわれないこと。モバイルとデスクトップの差を見てください。
デスクトップで通用する設計が、モバイルでは失敗する
ここはぜひ強調しておきたい部分です。いちばん見落とされやすいからです。
メニューを作るとき、あなたはほぼ間違いなくパソコンの前に座っています。広い画面でプレビューし、整然と並んだ複数列のメガメニューを眺め、どれもクリックしやすいと感じて、公開する。問題は、訪問者の大半はあなたと同じ姿勢で見ていない、ということです。
モバイルでは、すべてが変わります。画面は狭く、指はマウスカーソルより太く、訪問者はたいてい片手でスマホを持ち、片方の親指でタップします。Steven Hooberのサムゾーン（親指の届く範囲）の研究によれば、スマホ上の操作の大半は親指で行われ、いちばん届きやすいのは画面の下半分です。上の隅に押し込まれた、小さな文字で項目がぎっしり詰まったメニューは — デスクトップでは問題なくても、モバイルでは押しづらいのです。
よくある例があります。あるファッションショップが、全カタログを非常に細かいデスクトップのメガメニューに詰め込みます — トップス、ボトムス、ワンピース、アクセサリー、シーズン別、サイズ別。美しい。ところがモバイルでは、それがハンバーガーの中で延々と続く1本の長いリストに押し込められます。訪問者はタップして開き、下へスクロールし、探し、ようやくタップにたどり着く。手数がひとつ増えるたびに、訪問者が離れる機会もひとつ増えるのです。
だからこそ、デバイスごとにナビゲーションを別々に設定すべきなのです。モバイルでは、多くのショップがTab Barに切り替えます — 画面の下、まさにサムゾーンに固定されたナビゲーションバーで、ホーム・カテゴリ・検索・カートといった最重要の3〜5項目を置きます。デスクトップでは、フルのメガメニューをそのまま残します。2つの文脈には、2つのレイアウトを。
危険信号：モバイルの離脱がデスクトップより明らかに高い
いちばんはっきりした兆候は見つけやすいものです。モバイルの直帰率が、デスクトップより目立って高いことです。
公平に言えば、モバイルの離脱がデスクトップより少し高いのは、あなただけでなくどこでも普通のことです。業界のベンチマークによれば、モバイルのセッションは直帰率が50%前後になりがちで、デスクトップはそれより低く — 平均の差はおよそ10ポイント、これは何年もかなり安定しています。ですから、モバイルのほうが高いというだけで慌てる必要はありません。
気にすべきなのは、その差が異常に大きいときです。同じページで、モバイルの離脱がデスクトップより20ポイント以上高いなら、それはモバイル体験に問題があるという信号です — そしてナビゲーションは、まず疑うべき容疑者のひとつです。
同時に見ておく価値のある、いくつかの他の兆候も挙げておきます。
- モバイルのメニューCTRがデスクトップよりずっと低い：見つけられないか、タップをためらっている。
- モバイルで深さが浅い：1ページに着地して閉じ、それ以上奥へ進まない。
- モバイルでページの読み込みが遅い：重いメニューやアプリが動作を遅くし、訪問者は我慢できなくなる。GoogleはLCPを2.5秒未満、INPを200ミリ秒未満、CLSを0.1未満にすることを推奨していますが、こうした指標がいちばん悪くなるのはたいていモバイルです。
平均のカゴ落ち率は、Baymard Instituteによれば、すでに約70%にのぼることを忘れないでください。使いにくいモバイルのナビゲーションは、この数字をさらに悪くするだけです。
アクション：モバイルとデスクトップを2つの別設定に分ける
やるべきことは一文に収まります。1つのメニューに両方の世界を背負わせないこと。
具体的には、GA4で数字を見たうえで、次のようにします。
- レポートをデバイスカテゴリ別に分け、モバイルの離脱がデスクトップより異常に高いページを見つける。
- そのページを、あなた自身の実機のスマホで開き、お客さんと同じように片方の親指でメニューをタップしてみる。摩擦が自分の目で分かります。
- モバイル専用のレイアウトを設計する — 主要項目には下部のTab Barを優先し、ハンバーガー内のリストを削ぎ落とし、ボタンはタップできるくらい大きくする。
- デスクトップはフルのメガメニューのまま残す。設定は1つではなく、2つです。
これこそ、Navi+が作られた目的そのものです。モバイルとデスクトップを別々に設定できます — モバイルには下部のTab Bar、デスクトップにはMega Menu、それぞれに独自のレイアウトを、コードに一切触れずに。メニューはCore Web Vitalsを引きずり下ろさないよう最適化され、テーマを変えても位置がずれません。すべてドラッグ＆ドロップです。
最後に私が得た学びは、いたってシンプルです。完璧なメニューは必要ありません。ただ、モバイルの体験を、デスクトップの前に座った人の目で判断するのをやめればいいのです。一度デバイスごとに数字を分けてみれば、これまでずっと見落としていたものが見えてくる可能性は十分にあります。
この記事は、より大きなガイド「メニューが機能しているかを知る方法 — 追うべき5つの指標」の一部です。