スマホLPの最適化｜モバイルで成果を出すチェックポイント

• スマホLP最適化が欠かせない理由
• スマホで成果を出すためのチェックポイント
• PCとの違いを踏まえた作り方
• 参考デザインの見方と、スマホ表示の確認方法

今やLPへのアクセスの多くはスマートフォンからです。PCで完璧に見えても、スマホで見づらければ大半の訪問者を逃していることになります。スマホ最適化は、もはや必須の対応です。

この記事では、スマホLPで成果を出すためのポイントを、設計のチェックポイントから参考デザインの探し方、表示の確認方法まで解説します。LP全体の基本はLP（ランディングページ）とは？をご覧ください。

▶ 関連記事：伴走支援とは？コンサル・代行との違いと選び方／Web集客とは？中小企業のための方法8選と予算別の始め方

なぜスマホ最適化が重要なのか

BtoCはもちろん、BtoBでも情報収集の入口はスマホというケースが増えています。広告からの流入は特にスマホ比率が高く、スマホでの見やすさがそのまま成果に直結します。

スマホは画面が小さく、片手で操作し、移動中など集中しにくい環境で見られます。この条件を前提に設計することが、スマホLP成功の鍵です。

スマホLPのチェックポイント

スマホLPの改善は、「読める・押せる・待たされない」の3点に集約されます。まず全体像を押さえてから、項目ごとの具体的な設計を見ていきましょう。

• ファーストビューで要点を伝える：小さい画面でも一目で分かるように
• 文字は大きく、余白は広く：読みやすさを最優先
• ボタンは指で押しやすいサイズ：小さすぎる誤タップを防ぐ
• 1文・1段落を短く：縦スクロールで読みやすくする
• 表示速度を上げる：重い画像は離脱の原因
• 追従CTAを活用する：画面下に固定ボタンでいつでも押せる

スマホのファーストビュー設計

スマホの最初の1画面はPCよりはるかに狭い領域です。実務上の目安として、1画面に無理なく収まるのは「キャッチコピー・メインビジュアル・CTAボタン」の3点までと考えると設計しやすくなります。実績の数字は小さく添えるか、次のスクロールに回します。

高さは「何ピクセル」と決め打ちせず、流入の多い機種の実機で「キャッチコピーとボタンが同時に見えているか」を確認するのが確実です。入れるべき要素と型は専用記事で解説しています。

▶ 関連記事：LPのファーストビューに入れるべき5つの必須要素

タップしやすいボタン設計

スマホで最も成果を落としやすいのがボタンです。指はマウスカーソルより太いため、PCで「ちょうどいい」サイズはスマホでは小さすぎます。

タップ領域は44px四方以上が目安と言われます。見た目のボタンが小さくても、周囲の余白を含めた「押せる範囲」を確保すれば誤タップは減らせます。ボタン同士を近づけすぎないことも大切です。

配置は、片手で持ったときに親指が自然に届く画面下部のゾーンが有利です。画面上部の隅は指が届きにくく、押すために持ち替えが必要になります。長いLPでは、画面下に固定される追従CTA（スクロールしても常に表示されるボタン）を置くと、読み終えたその場で行動できます。追従CTAの注意点は、後述の「ヘッダー・メニュー・追従ボタンの扱い」で整理します。

▶ 関連記事：CTAボタンとは？クリック率を高める文言・色・配置の作り方

読みやすい文字と画像

文字が小さいLPは、内容以前に「読む気が起きない」で離脱されます。本文は16px前後が目安と言われ、行間もPCよりゆったり取ると読みやすくなります。

設計の出発点としてよく使われる数値は次のとおりです。いずれも目安で、書体や読者層によって調整してください。

• 本文の文字サイズ：16px前後
• 行間：文字サイズの1.6〜1.8倍程度
• 1行の文字数：全角で20字前後
• 左右の余白：画面端から16〜20px程度

最終的な基準は、実機で「目を細めずに読めるか」です。

画像で特に注意したいのがファーストビューです。PC用に作った横長の画像をそのまま縮小すると、スマホでは文字が潰れて読めません。縦長の画面に合わせた、スマホ専用のファーストビューを用意しましょう。キャッチコピーは画像に焼き込まず、テキストで表示するほうが確実です。

入力しやすいフォーム

スマホでの文字入力はPCよりずっと大変です。項目が1つ増えるごとに離脱が増えると考えて、必須項目は最小限に絞ります。

入力補助も効果的です。郵便番号からの住所自動入力、メールアドレス欄では英字キーボード、電話番号欄では数字キーボードが出るよう指定するなど、指の動きを減らす工夫が積み重なります。

あわせて検討したいのが電話CVボタンです。スマホはそもそも電話機なので、タップで発信できるボタンを置くだけで問い合わせが増えることがあります。修理・工事・来店予約など、話したほうが早い業種では電話導線が成果に直結します。

フォームをLPの中に組み込む「フォーム一体型」も選択肢です。向き不向きは『フォーム一体型LPとは？CVRが上がる理由と作り方・向く商材』を参照してください。

▶ 関連記事：EFOとは？入力フォーム最適化でフォーム離脱を防ぐ方法

表示速度

スマホは電波状況が不安定な場所でも見られます。遅いLPは、内容を読まれる前に閉じられてしまいます。

対策の中心は画像です。撮影したままの大きな画像を貼らず、表示サイズに合わせて縮小・圧縮してから使います。次に効くのが不要な外部スクリプトの削減です。広告タグや解析タグを入れ続けた結果、重くなっているLPは少なくありません。

速度の物差しには、GoogleのCore Web Vitals（LCP・INP・CLSの3指標）があり、LCPは2.5秒以内が「良好」の目安です。スマホLPではファーストビューの画像がLCPの対象になりやすく、まずこの1枚を軽くするのが近道です。

縦長ストレスの軽減

スマホLPは横幅が狭い分、PCと同じ情報量でも縦に長くなります。「まだ終わらない」と感じさせると、途中で離脱されます。

全員が読む必要のない情報は、アコーディオン（タップで開閉する折りたたみ）にまとめると、読みたい人だけが開けます。よくある質問や詳細な仕様は特に向いています。冒頭に見出しの一覧を置いて全体像を示すのも有効です。どこで読むのをやめられているかは、実際のスクロール状況を見て確認しましょう。

▶ 関連記事：LPの離脱率を下げる方法｜原因の特定と改善策／ヒートマップ分析の使い方｜LP改善に活かす見方

ヘッダー・メニュー・追従ボタンの扱い

ヘッダーにメニューを並べると、スマホでは貴重な1画面目を削ってしまいます。LPのゴールは基本的に1つなので、ナビゲーションはできるだけ減らすのが原則です。リンクが多いほど、行動の前に離れる出口も増えます。

必要なメニューはハンバーガーメニュー（三本線のアイコンで開く形式）に格納し、ヘッダーは細く保ちます。上部に固定するヘッダーは、ロゴと電話・申込ボタン程度に絞ります。

画面下に固定する追従CTAや電話ボタンは、電話予約・来店予約など「今すぐ行動」型の商材で使いどころがあります。注意点は次のとおりです。

• 本文を隠す：高さは画面の1割程度までに抑える
• フォームと重なる：入力欄や送信ボタンに被りやすい。フォーム表示中は隠す設定が無難
• 他の固定要素とぶつかる：チャットのアイコンなどと重なると押しにくい
• 電話ボタンの時間外：受付時間を併記するか、時間外はフォームへ誘導する

導入前後で、ボタンのタップ数と離脱率の両方を見て効果を判断してください。

流入元で変えるスマホLPの設計

同じスマホでも、どこから来た人かによって最適な構成は変わります。ここを分けられるかどうかが、成果の差になります。

検索広告から来る人

検索広告をクリックする人は、すでに自分で言葉にできる悩みを持っています。目的がはっきりしているので、遠回りは不要です。ファーストビューで「何が得られるのか」を言い切り、その根拠となる実績・料金・対応範囲を早い段階で示します。

また、比較検討している最中であることが多いため、情報量はむしろ厚めでかまいません。判断材料が足りないと、他社を調べに戻ってしまいます。

SNS広告から来る人

SNS広告から来る人は、そもそも探していたわけではありません。移動中や休憩中の「ながら見」の延長でLPを開いています。

ここで検索広告と同じ構成を出すと、説明が始まった時点で戻られます。まずは共感できる問題提起やビジュアルでつかみ、「自分に関係がある」と思ってもらうのが先です。詳しい説明や価格は、興味を持ったあとに出す順番にします。

すべての流入を1枚の同じLPで受けているのが、スマホLPの典型的な失敗です。広告の文言とLPの入口が噛み合っていないと、クリック単価を下げても成果は伸びません。ご支援した新潟のエネルギー小売企業では、Meta広告とGoogle広告それぞれの受け皿と訴求を整理したことで、広告の効率が3倍に改善しました。

▶ 関連記事：LPと広告の連携｜リスティング・Meta広告で成果を高める

スマホLPの参考デザインの探し方

LPのデザインを集めたギャラリーサイトには、スマホ表示のLPを絞り込んで見られるものがあります。代表例は「LP ARCHIVE（LPアーカイブ）」や「SANKOU!」などです。

眺めるだけでなく、次の観点で書き出してみるのがおすすめです。

• ファーストビュー：1画面目に何が、どう配置されているか
• CTAの位置：最初のボタンが何スクロール目か。追従ボタンはあるか
• 情報の順番：悩み・解決策・根拠・料金をどの順で見せているか
• フォーム：LP内か別ページか、項目数はいくつか

ギャラリーのLPはデザインで選ばれたもので、成果が証明されているわけではありません。真似るのは色やテイストではなく、情報の順番やボタンの置き方といった構造です。

▶ 関連記事：LPデザインとは？成果が出るレイアウトのコツと参考例の探し方

スマホLPでやりがちな3つの失敗

スマホで成果が出ないLPには、共通するつまずき方があります。多くは技術の問題ではなく、確認の仕方の問題です。

①PC版の縮小表示で済ませる

レスポンシブ対応（画面幅に応じて自動調整される仕組み）にしてあるから大丈夫、と考えるパターンです。自動調整はレイアウトを崩さないための仕組みであって、スマホで伝わる構成にしてくれるわけではありません。

改善の方向はシンプルで、少なくともファーストビューとCTA周りだけは、スマホ用に別途作り込むことです。全体を作り直さなくても、この2か所だけで印象は大きく変わります。

②PCでの見え方を優先して確認する

制作も確認もPCで行うため、判断基準がPCになってしまうパターンです。アクセスの大半がスマホなら、優先すべきはスマホでの見え方です。社内の確認会でも、まずスマホ画面を映して合意を取る運用に変えるだけで、判断のズレは減ります。

③公開後にスマホ実機で確認しない

PCブラウザの検証機能で表示を縮小しただけでは、指での押しやすさ、フォームの入力しづらさ、通信環境込みの表示速度は分かりません。

公開後に必ず、自分のスマホで最初から最後まで通してみて、実際に問い合わせフォームまで入力してみることです。あわせて、スマホとPCで成果を分けて計測しておくと、どちらに問題があるかを数字で切り分けられます。

スマホLPを最適化する3ステップ

スマホ表示の確認方法

確認は、目的の違う3つの手段を組み合わせます。

• ブラウザの開発者ツール（デバイス表示）：Google Chromeなどの開発者ツールで、画面幅を機種相当に切り替えて表示できます。制作中に複数の画面幅での崩れを手早く見るのに向きます
• スマホ実機：指での押しやすさ、入力時のキーボード、追従ボタンとの重なり、モバイル回線での体感速度を確認します
• PageSpeed Insights：GoogleのPageSpeed InsightsにURLを入力すると、モバイルとPCに分けて表示速度の評価と改善候補が表示されます

公開後は、ヒートマップツールでスマホ利用者のスクロールやタップを見ると、つまずく箇所が分かります。無料ツールの導入は『Microsoft Clarityとは？無料で使えるヒートマップ・録画分析の導入と使い方』で解説しています。

大切なのは、この3ステップを1回で終わらせず、回し続けることです。ご支援した東京の研修会社では、LP改善のPDCAを2ヶ月から1ヶ月に短縮したことで、セミナーの着席率が10ポイント向上しました。改善の速さそのものが成果を左右します。

自社のLPをどこから直すべきか判断がつかない場合は、Web集客ドック（無料診断）で現状を整理するところから始めてみてください。合同会社マーケティングサポートは沖縄拠点・全国リモート対応で、LPの改善から広告運用までを伴走してご支援しています。

スマホLPについてのよくある質問

PC版とスマホ版は別々に作るべきですか？

多くはレスポンシブ対応（1つのLPが画面幅で自動調整）で十分です。ただし広告用など成果を追う重要なLPは、スマホ専用の見せ方を作り込むと成果が上がる場合があります。

スマホLPの横幅は何pxで作ればいいですか？

スマホの画面幅はCSS上で360〜430px程度の機種が多く、デザインは375px前後を基準にすることが多いです。幅は固定せず伸縮する作りにし、狭い機種での崩れを確認してください。

スマホの縦長LPは、長すぎると離脱されますか？

一律の正解はなく、流入元と商材で変わります。検索広告から来る比較検討中の人には情報量が必要ですし、SNS広告からの「ながら見」には長すぎる構成は不向きです。長さを先に決めるより、どこまで読まれているかを計測して調整するのが確実です。

スマホでフォームを短くするにはどうすればいいですか？

最初の問い合わせに本当に必要な項目だけを必須にし、それ以外は後の連絡で聞きます。そのうえで住所の自動入力や、入力欄に合ったキーボードの指定で手間を減らします。

表示速度はどうやって確認・改善すればいいですか？

GoogleのPageSpeed Insightsなどの無料ツールにURLを入力すれば、モバイルの状態と改善候補が分かります。改善は画像の圧縮・サイズ最適化が最も効果的で、不要なアニメーションや外部スクリプトを減らすことも有効です。重い要素から対処しましょう。

まとめ

スマホ最適化は、LP成果の前提条件です。ポイントを整理します。

• アクセスの多くはスマホ。最適化は必須
• ファーストビューはキャッチコピー・ビジュアル・CTAの3点に絞る
• 大きな文字・押しやすいボタン・速い表示・追従CTA
• タップ領域は44px四方以上、本文は16px前後が目安
• ヘッダーとメニューは最小限に。追従ボタンは本文やフォームとの重なりに注意
• 検索広告とSNS広告では、必要な構成が違う
• 参考LPは装飾ではなく、ファーストビュー・CTAの位置・情報の順番を見る
• スマホファーストで設計し、開発者ツール・実機・PageSpeed Insightsで確認・改善する

「スマホでの成果が伸びない」「PCとスマホで数字に差がある」という場合は、スマホ目線での見直しが効果的です。マーケティングサポートでは、スマホ最適化を含むLP改善を伴走してご支援します。お気軽にご相談ください。