モバイルのランディングページが崩れる理由

流入の大半はモバイルに着地します

Meta、Instagram、TikTokからの広告流入はスマホに届きますし、たいていはSafariやChromeではなく、アプリ内のブラウザです。このWebViewは思っているより狭く、自分の上下のバーに画面を取られます。それでもデザイナーは27インチのモニターに全幅でモバイルのページを映して確認し、承認し、ホテルのWi-FiにつながったミドルレンジのAndroidでは一度も開きません。今は例外のほうがデスクトップです。スマホのレイアウトから設計して、デスクトップはそこから引き継ぎます。

最初に崩れるのはヒーローです

3カラムが縦に積まれて、中身の薄い細長い帯になります。64ピクセルの見出しが6行に折り返し、ボタンを画面の外へ押し出します。横長のヒーロー画像が縮んで、中の商品がにじみます。デスクトップで120ピクセルだった余白は、スマホでは空白のスクロールになります。そして100vhのセクションはiOSのブラウザのツールバーで切れます。svhとdvhの単位は、これを直すために追加されました。スマホのブレークポイントには、別のタイプスケールと余白を設定してください。

フォームは、1タップずつ人を失います

Appleはタップ領域を最低44×44ポイント、Material Designは48dpとしています。それでも高さ32ピクセルの行動喚起が、6ピクセル隣に別のリンクを置いたまま公開されています。入力欄の文字が16ピクセル未満だと、iOSのSafariはフォーカス時に拡大し、レイアウトが横にずれます。入力タイプを間違えると、電話番号の欄にフルサイズのQWERTYキーボードが出ます。さらに画面上のキーボードが送信ボタンを覆い、訪問者は入力が終わったことに気づけません。正しい入力タイプとautocomplete属性を設定してください。

実機でテストする

よくあるページで、スマホの画面を覆っているものを数えてみます。固定ヘッダー、Cookieバナー、キャンペーンバー、隅のチャットの吹き出し、そして固定フッターの行動喚起。合わせると、本文が出る前に画面の3分の1を持っていきます。常時表示は1つだけ選び、残りは落とします。そのうえで、実際の広告リンクから、モバイル回線で、アプリ内ブラウザで、自分のスマホでページを開きます。ChromeのデバイスエミュレーションはWebViewのツールバーも遅い回線も見せてくれません。