モバイルメニューデザインの7つの黄金律

モバイルメニューはデスクトップの縮小版ではありません。小さな画面、しばしば遅い回線、片手操作という制約は独自の設計判断を要します。以下の7法則は客単価と満足度に直結します。

1. 本文は16px以上

16px(1rem)が下限。それ未満はユーザーがピンチズームし、ナビが崩れる。推奨: 本文16-18px、商品名18-22px、カテゴリ見出し22-28px。

2. タップ領域は最低44 × 44px

Apple HIGとGoogle Materialが44 × 44を要求。小さいと誤タップ15-23%増。タブ間は8px以上の余白を。

3. 階層はF型で構築

モバイル読みは縦。おすすめ商品は最上部、カテゴリバーをsticky。5秒で論理が掴めなければ戻るボタンが勝ちます。

4. WebP/AVIFとlazy loading

WebPはPNGより30%軽い。AVIFはさらに15-20%減。画像はカテゴリを開いた時だけ読み込み——<img loading="lazy">。

5. 3秒ルール

LCPは3秒未満。Throttled 3Gでテスト——店内Wi-Fiは大抵もっと遅い。JSバンドル150KB以下。

6. 配色は最大4-5色

ブランド色+セカンダリ+アクセント+黒+白。アレルゲンアイコンは形と色の両方で——男性12人に1人は赤緑色覚異常。

7. 片手テスト

重要アクションは画面下半分へ——親指ゾーン法則。thMenuのようなモバイルファーストはこれを既定値とします。

うまく調整されたモバイルメニューは注文を12-18%押し上げます。調整不足だと客はスタッフに戻り、デジタル化のメリットが消えます。

お役に立ちましたか?シェアしてください。