「スマホでも崩れずに表示されているから、直すのはキャッチコピーとボタンの色だ」。制作の段階でスマホの表示を確かめてから公開しているため、見た目が崩れていなければスマホ対応は済んだと考えられがちです。ところが、スマホで申込みが少ないLPでは、最初の画面が出る前に離れる人や、入力の途中でやめてしまう人が多く、コピーを直しても申込みの数が変わらないことがあります。スマホのLPは、表示速度、ファーストビュー、入力フォームの順に見直します。
本記事では、スマホとパソコンの数字の比べ方から、3か所それぞれの見直し方と実機での確かめ方まで、記事制作会社の視点で順を追ってお伝えします。
- スマホのLPを先に直すかは、GA4で同じLPのスマホとパソコンの数字を段階ごとに比べて決める
- 表示速度は、PageSpeed Insightsのモバイルの結果でLCP・INP・CLSが基準内かを見る
- 最初の画面には、何のページかと押すボタンまでを収める
- 入力フォームは項目を減らし、入力欄に合うキーボードと自動入力の候補が出るようにする
- 直した後は、広告と同じ経路からスマホの実機で開いて確かめる
スマホのLPで見直す3か所と順番
スマホのLPで見直す3か所は、訪問者がLPを開いてから申し込むまでに通る順に並べると、次のとおりです。
- 表示速度：最初の画面の文字や画像が出るまでの時間と、押したときの反応の速さ
- ファーストビュー：開いてすぐの画面に出る、ページの説明と押すボタン
- 入力フォーム：項目の数と、スマホで1文字ずつ入れる手間
順番が大事なのは、前の段階で離れた人が後ろの段階に届かないからです。読み込みの途中で離れた人は最初の画面を見ず、最初の画面で離れた人はフォームまで来ません。
3か所とも基準を満たしていれば、次はコピーや載せる情報の見直しに進みます。LPOそのものの意味と進め方は、LPOとは？SEO・EFOとの違いと改善の手順にまとめています。
スマホとパソコンの数字の比べ方
スマホのLPを先に直すべきかは、GA4で同じLPのスマホとパソコンの数字を、段階ごとに並べると判断できます。GA4の探索の自由形式で、ランディング ページを条件に絞り込み、デバイス カテゴリごとに分けると、同じLPのmobileとdesktopの数字が並びます。scrollとフォームのイベントは、ページ パスとスクリーン クラスでもLPに絞ります。
比べる数字 | スマホだけ低いときに疑う箇所 |
|---|---|
エンゲージメント率 | 表示速度、ファーストビュー |
LPでscrollが記録されたセッションの数を、LPのセッションの数で割った値 | ファーストビュー |
form_submitが記録されたセッションの数を、form_startが記録されたセッションの数で割った値 | 入力フォーム |
エンゲージメント率は、10秒を超えて続いた訪問などの割合で、開いてすぐ離れる人が多いと下がります。scrollはページの90％の深さまで表示されたとき、form_startとform_submitはフォームの操作を始めたときと送信の操作をしたときに記録されるイベントです。form_submitでは正常に受け付けたかまでは分からないので、完了画面の表示を計測していれば、その数を使います。
フォームのイベントは、拡張計測機能の「フォームの操作」を有効にしているときだけ記録されます。外部のサービスのフォームを埋め込んでいるLPでは記録されないことがあるので、テスト送信で数が増えるかを確かめます。
高額の商品や法人向けのサービスのように、スマホで調べてからパソコンで申し込む人がいる商材では、スマホの申込みの率だけが低く出ます。申込みの率の差だけでは決めず、表の3つの数字でスマホだけが下がっている段階があるときに直します。
表示速度の測り方と直し方
スマホの表示速度は、PageSpeed Insightsのモバイルの結果で3つの指標が基準内かを見て、外れた指標の原因から直します。
スマホで見る3つの指標
PageSpeed Insightsにページのアドレスを入れたら、モバイルの結果で次の3つの指標を見ます。
指標 | 測るもの | 良好の目安 |
|---|---|---|
LCP | 画面の中で最も大きい画像や文字のまとまりが表示されるまでの時間 | 2.5秒以内 |
INP | ボタンを押すなどの操作から、画面が反応するまでの時間 | 200ミリ秒以下 |
CLS | ページを開いている間に起きる、予期しない配置のずれの量 | 0.1以下 |
（参考：PageSpeed Insights について（Google for Developers））
結果の上の「実際のユーザーの環境で評価する」の欄は、Chrome UX Reportの対象条件を満たすChromeの利用者について集計した、直近28日間のデータです。訪問が少ないLPでは、実際のユーザーのデータが出ないか、サイト全体のデータが代わりに出ます。LPのデータが出ないときは、下の「パフォーマンスの問題を診断する」の欄でLCPとCLSを見ます。「パフォーマンスの問題を診断する」は決まった端末と回線の条件で1回読み込んだ結果なので、INPは出ません。
遅くなる主な原因と直し方
スマホのLPで3つの指標が基準を外れる主な原因と、直し方は次の表のとおりです。
外れた指標 | 主な原因 | 直し方 |
|---|---|---|
LCP | 最初の画面の画像のファイルが大きい | スマホ用に小さく書き出した画像を出す |
INP | 広告の計測やヒートマップ、チャットなどの外部のタグが多い | 使っていないタグを外す |
CLS | 画像の幅と高さが指定されていない、読み込み後にバナーが差し込まれる | 画像の幅と高さを指定し、バナーの場所を先に空けておく |
外部のタグは、広告の配信や分析のたびに足され、使い終わった後も残っていることがあります。タグを外す作業はデザインやコピーを変えずに済むので、社内の確認が少ないまま進められます。
遅延読み込みを付けた画像は、ブラウザが表示する位置を確かめるまで読み込みが始まりません。最初の画面の画像に付けるとLCPが遅くなることがあるので、遅延読み込みはスクロールしてから見える画像だけに付けます。
ファーストビューとボタンの位置
スマホのファーストビューは、開いてすぐの1画面に、何のページかと押すボタンが入っているかで見直します。
最初の画面に収める内容
スマホで開いた最初の画面には、次の3つをすべて収めます。
- 商品やサービスの名前：何を売るページかが1行で分かる言葉
- 広告と同じ言葉：広告で見た約束がLPでも続いていると分かる見出し
- 押すボタン：申込みや問い合わせへ進むボタン、またはその手前の案内
パソコン向けに作った画像をそのまま縮めると、画像の中に入れた見出しの文字も小さくなり、スマホでは読めないことがあります。見出しを画像の中ではなく本文の文字で載せると、画面の幅で折り返され、読める大きさのまま表示されます。最初の画面を覆うポップアップや、画面の半分を占めるメニューも、スマホでは見出しとボタンを隠します。
確かめるときは、スマホで開いた最初の画面に、名前とボタンが写っているかをスクリーンショットで見ます。画面の幅ごとの高さの目安は、LPのファーストビューのサイズ｜PC・スマホで見切れない幅と高さにまとめています。
ボタンの大きさと位置
スマホのボタンは、指で押せる大きさにし、スクロールの途中でも押せる場所に置きます。スマホ向けの表示の設定をしたページでは、ボタンを縦横とも約48ピクセル以上にし、隣のボタンやリンクとは8ピクセルほど間を空けます。
（参考：タップ ターゲットのユーザー補助機能（web.dev））
長いLPでボタンが最初の画面と最後にしか無いと、途中で申し込もうと決めた人はボタンを探して上下にスクロールすることになります。画面の下に固定して出すボタンを置くなら、入力フォームが見えている間は隠す設定にすると、入力欄や送信ボタンを覆わずに済みます。電話での問い合わせが多い商材なら、押すと電話がかかるボタンも同じ大きさで置きます。
経営者ボタンは目立つ色にしているのに、スマホだとあまり押されません。色を変えたほうがいいですか？
Writers-hub編集部
色を変える前に、ボタンの大きさと置き場所を見てください。指で押しにくい大きさのボタンや、片手で持ったときに親指が届きにくい画面の上の端にあるボタンは、色に関係なく押す手間がかかります。
ボタンの置き場所を変える前に、ボタンのクリックをGA4のイベントとして計測しておき、スマホでボタンが押されたセッションの割合を、変える前と後の同じ日数で比べます。
スマホの最初の画面とボタンの置き場所、どこから直すか迷っていませんか
LPのアドレスと、GA4でスマホとパソコンを比べたエンゲージメント率とフォームの送信率を、相談フォームに書いてください。ご相談は無料で、オンラインで30分程度です。
入力フォームの見直し方
スマホの入力フォームは、項目を減らし、入力欄ごとに合うキーボードと自動入力の候補が出るようにして見直します。
入力項目の数
入力項目は、最初の連絡に要らないものを外します。会社の住所やFAX番号のように返信の後に聞けば済む項目は、スマホでは指で1文字ずつ入れる手間になります。確認のためにメールアドレスを2回入れさせる欄も外せます。送信後にメールで送る確認コードに応答してもらう作りなら、アドレスが正しいかを応答で確かめられるからです。
キーボードと自動入力
入力欄に合うキーボードと自動入力の候補は、フォームのHTMLの属性で出せます。制作会社や開発の担当者には、次の表の指定を頼みます。
入力欄 | 指定する属性 | スマホでの表示 |
|---|---|---|
メールアドレス | type="email"、autocomplete="email" | ＠を打ちやすいキーボードと、保存したアドレスの候補 |
電話番号 | type="tel"、autocomplete="tel" | 数字のキーボードと、保存した番号の候補 |
郵便番号 | inputmode="numeric"、autocomplete="postal-code" | 数字のキーボードと、保存した郵便番号の候補 |
氏名 | autocomplete="name" | 保存した氏名の候補 |
（参考：登録フォームのベスト プラクティス（web.dev））
自動入力の候補が出るのは、ブラウザやスマホに名前やアドレスを保存している人だけです。
エラーの出し方
入力の誤りは、入れ終えた直後に、その欄のすぐ下へ表示します。送信した後にページの上にまとめて出す作りでは、スマホだと誤りのある欄が画面の外にあり、どこを直すかを探すことになります。数字の全角と半角のどちらで入れても受け付ける作りにすると、誤りの表示そのものが減ります。フォームで離れる場所の調べ方は、EFOの改善は何から始めるかにまとめています。
直した後の実機での確かめ方
直した後の確認は、スマホの実機で、広告と同じ経路から開いて行います。パソコンのブラウザの開発者ツールでスマホの画面幅にすると、配置は確かめられますが、入力欄を押したときにキーボードが画面を覆う動きや、SNSのアプリの中のブラウザでの表示は確かめられません。
iPhoneとAndroidの端末を1台ずつ用意し、次の4つを順に確かめます。
広告やSNSの投稿のリンクを、スマホで実際に押してLPを開きます。SNSのアプリから開くと、アプリの中のブラウザで表示され、SafariやChromeで開いたときと表示が変わることがあります。
Wi-Fiを切ってLPを開き、最初の画面の文字とボタンが出るまでに、白い画面や読み込み中の表示が続かないかを見ます。
開いてすぐの画面のスクリーンショットを撮り、名前とボタンが写っているかを見ます。直す前と後の画像を並べると、変えた点を社内で説明しやすくなります。
入力欄ごとに出るキーボード、自動入力の候補、エラーの表示を見ます。送信ボタンがキーボードや固定のボタンに隠れないかも確かめ、テスト送信の日時を控えておきます。
テスト送信でform_submitが記録されたときは、控えた日時の分を除いて数えます。直した後の数字は、広告の配信の内容を変えていない期間で、直す前と同じ日数のスマホの数字と比べます。2つの案のどちらが良いかを決めたいときの進め方は、LPのABテストのやり方にまとめています。
スマホのLPOのよくある質問
スマホのLPOのよくある質問は、次の3つです。
スマホ専用のLPを別に作るべき？
スマホ専用のLPを別に作らなくても、1つのLPで、スマホのときだけ並び順や画像を変えられます。1つのLPなら、見出しや料金の文を直すときに1か所で済みます。別に作るのは、スマホとパソコンで載せる内容や申込みの方法を大きく変えたいときです。
表示速度の点数は何点を目指せばいい？
目標にするのは点数より、「実際のユーザーの環境で評価する」の欄で3つの指標が良好の範囲に入ることです。点数は決まった端末と回線の条件で読み込んだ結果から出すため、同じページでも測るたびに変わることがあります。
パソコンの表示は後回しでいい？
パソコンの表示も、スマホを直すたびに確かめます。1つのLPで両方を表示している作りでは、スマホに合わせて見出しの文を変えると、パソコンの見出しも変わるからです。GA4の比較で、直した後にパソコンの数字が下がっていないかも見ます。
PageSpeed InsightsとGA4の数字から、直す順番を決めきれずにいませんか
PageSpeed Insightsのモバイルの結果にあるLCP・INP・CLSの値と、GA4でスマホとパソコンを比べたフォームの送信率を、相談フォームに書いてください。ご相談は無料で、オンラインで30分程度です。
まとめ｜スマホのLPは訪問者が通る順に直す
スマホのLPは、表示速度から入力フォームまで、訪問者が通る順に確かめ、基準を外れた所から直します。前の段階で離れた人は後ろの段階に届かないので、フォームだけを直しても、フォームまで来る人が少なければ申込みは増えにくいままです。まずGA4でスマホとパソコンの数字を並べ、スマホだけ低い段階を見つけます。
私たち合同会社Writers-hubは、累計8,000記事以上を制作してきた記事制作会社です。
