スマホで壊れるLPの典型パターン6つと、実機での確認手順

「PCではきれいなのに、スマホだと崩れていると言われまして」——公開したあとにいただくご相談で、よくあるものの一つです。やっかいなのは、作った側の画面では再現しないことが多い点にあります。PCのブラウザの幅を狭めて確認しても、実機でしか出ない不具合があるからです。この記事では、スマホで壊れやすい6つのパターンと、実機で確かめる手順をまとめます。

パターン1：ページが横にずれる

上下にスクロールしたつもりが、指の動きで左右にも動いてしまう。これは、どこかの要素が画面の幅を超えているときに起きます。原因になりやすいのは、幅をピクセルで固定した画像や表、折り返しのきかない長い英数字です。1か所あるだけで、ページ全体が横に広がります。

崩れ方としては地味ですが、読み手には「作りが雑だ」と伝わります。余白がずれて、見出しの位置が節ごとに変わって見えるのも、この不具合が原因であることが多いです。

パターン2：ボタンが押しにくい、押し間違える

指で押す領域が小さすぎると、狙ったところに当たりません。文字の大きさを基準に作ると、PCでは十分でもスマホでは小さくなりがちです。目安として、押せる部分は指の腹くらいの大きさを確保し、隣のリンクとの間隔も空けておきます。

もう一つ多いのが、並んだリンクの間隔が狭く、隣を押してしまうパターンです。フッターのメニューや、利用規約とプライバシーポリシーのように短いリンクが続く場所で起きやすくなります。電話ボタンと問い合わせボタンを横に並べている場合も、押し間違えると行き先がまったく変わってしまうので、間隔は広めに取っておきます。

パターン3：固定した帯が内容を隠す

画面の上に固定したヘッダーや、下に固定した問い合わせボタンは、スマホでは面積を取ります。特に、ページ内のリンクで見出しに飛んだとき、その見出しが固定ヘッダーの下に潜り込んで読めなくなることがあります。

画面が小さいほど、固定する帯の影響は大きくなります。上下の両方に固定していると、本文の読める範囲がかなり狭くなります。スマホでは片方だけにする、高さを抑えるといった判断が必要です。

パターン4：フォームが入力しづらい

入力欄をタップすると画面が勝手に拡大し、そのまま戻らない。これはiPhoneでよく起きる挙動で、入力欄の文字が小さいことが原因です。拡大されたまま入力を続けることになり、途中で諦められてしまいます。

もう一つはキーボードの種類です。電話番号やメールアドレスの欄で日本語のキーボードが出てくると、入力の手間が一気に増えます。欄ごとに入力の種類を指定しておけば、数字用やメール用のキーボードが最初から出ます。端末に保存された住所や電話番号を呼び出せるようにしておくのも、同じ理由で効果があります。

パターン5：画像が重く、読む前に戻られる

スマホは、通信が不安定な場所でも開かれます。PC向けの大きな画像をそのまま載せていると、読み込みが終わる前に戻られてしまいます。内容の良し悪し以前の問題で、これは文章を直しても改善しません。

見落としやすいのが、画面に映っていない下のほうの画像です。最初から全部を読み込む作りだと、上のほうを読んでいる間ずっと通信が続きます。表示される直前に読み込む設定にしておくと、体感がはっきり変わります。

パターン6：電話・地図・SNSのリンクが効かない

電話番号を画像で載せていて、タップしても発信できない。地図を埋め込んだつもりが、スマホでは真っ白になる。こうした「押しても何も起きない」状態は、PCでの確認では気づけません。PCには電話をかける機能がないので、そもそも試しようがないからです。

店舗や医院のLPでは、電話がそのまま問い合わせ手段になります。タップして発信できるか、地図がアプリで開くかは、公開前に必ず実機で確かめておきたいところです。営業時間外に電話をかけさせてしまわないよう、受付時間を電話番号のすぐそばに書いておくと、すれ違いも減ります。

実機での確認は、この順番で

まず、ご自身のスマホでWi-Fiを切り、モバイル回線のまま開いてください。Wi-Fiのままだと、表示速度の問題が見えなくなります。次に、ページを上から下まで指でなぞり、横に動く場所がないかを見ます。ここまでで、パターン1と5は見つかります。

続いて、ボタンとリンクを一つずつ実際に押します。フォームは最後まで入力して送信し、完了画面と受信メールまで確認します。電話番号と地図も押してみます。可能であれば、iPhoneとAndroidの両方、ご家族の端末も借りて試すと、機種による差が見つかります。

気になった箇所は、その場でスクリーンショットを撮っておきます。あとから言葉で説明しようとすると、どの画面のどこだったかが曖昧になりがちです。画像が1枚あれば、制作者に伝えるときも、直ったかどうかを確かめるときも話が早くなります。

まとめ

スマホで壊れるLPには型があります。横にずれる、押しにくい、固定の帯が隠す、フォームが入力しづらい、画像が重い、リンクが効かない。この6つを押さえておけば、多くの不具合は公開前に見つかります。

共通しているのは、どれもPCの画面を細くしただけでは分からないということです。確認は必ず、実機で、モバイル回線で、指で触って行います。スマホでの見え方が気になる、公開前に一度見てほしい、ということでしたら、ぜひご相談ください。気になる箇所を洗い出し、直す優先順位をつけてお答えします。