320px-414px:モバイルメニューのスイートスポット幅

QRメニューが読み込まれる際、重要なのはスマートフォンの実際のピクセル幅だけです。イズミル・コナクの24テーブルのレストランはモバイルファースト再設計後、モバイルコンバージョンが38%上昇しました — 唯一の変更は320-414pxへのミリ単位の適合でした。

なぜ320-414pxなのか

StatCounter 2024によると、QRメニュー訪問者の72%がこの範囲のデバイスを使用しています:iPhone SE (320px)、iPhone 12/13/14 (390px)、iPhone 14 Plus (414px)、Samsung Galaxy S (360-412px)。タブレットはわずか12%、デスクトップは16%です。

thMenuのテーマは「mobile-only-priority」アプローチを採用しています。タブレットとデスクトップにはブレークポイントがありますが、重要なUX決定はすべて375pxで行われます。

デザインルール

3つの絶対的なルール:

• タップターゲット ≥ 44×44px — Apple HIGおよびWCAG 2.5.5要件。
• Padding ≥ 16px — 内側余白は必須。
• ボディフォント ≥ 14px、input ≥ 16px — iOS Safariは16px未満で自動ズーム。

よくある間違い

最も多い失敗:1200pxで完璧に見えるメニューが360pxで水平スクロールを引き起こす。thMenuのテーマエディタには「320pxでテスト」プレビューがあり、デプロイ前に検出できます。

解決策:単一列のカードレイアウト、aspect-ratio: 4/3画像、sticky フィルターバー。ページ滞在時間が1:42から3:18に伸び、add-to-cart は38%上昇しました。

FAQ

320pxはまだ重要? はい — iPhone SEや古いAndroidが今も使用しており、無視すると売上の5-8%を失います。

タブレット専用デザインは必要? 不要 — Flexbox/Gridは768px以上で自動的にスケールします。

横向きモードはレイアウトを壊す? 可能性あり — thMenuは横向きでヘッダー高さを40%自動縮小します。

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