スマホLPのコンバージョン率を上げるUI改善

LPのアクセスの70〜80%はスマートフォンから来ています。しかし多くのLPは、いまだにPC画面で設計してからスマホ対応する「PC優先」の考え方で作られています。

スマホで読まれるLPを、PCで設計するのは根本的に間違っています

。

この記事では、スマホLPのCVRを改善するための具体的なUI改善テクニックを解説します。

スマホLPとPC LPの根本的な違い

スマホユーザーの行動特性

特性	PC	スマホ
操作方法	マウス（精密操作）	指（粗い操作）
画面サイズ	1200px以上	375px前後
閲覧姿勢	デスクに座って集中	移動中・ながら見
集中持続時間	数分	数十秒
スクロール速度	遅い（マウスホイール）	速い（スワイプ）
離脱のしやすさ	タブ切替	通知・アプリ切替

この違いを無視したLPは、

「PCで見るときれいだけど、スマホだとCVRが半分以下」

という結果になります。

改善ポイント1: タップ領域の最適化

問題: ボタンが小さすぎて押せない

スマホで最も多いUI問題は「ボタンが小さすぎる」ことです。

要素	最小サイズ	推奨サイズ
CTAボタン	44px × 44px	48px × 56px以上
テキストリンク	タップ領域 44px	行間を広めに設定
アイコンボタン	40px × 40px	48px × 48px
ボタン間の余白	8px以上	16px以上

Apple/Googleのガイドライン: タップ可能な要素の最小サイズは44px×44px（Apple HIG）/ 48dp×48dp（Material Design）。これを下回るボタンは「押し間違い」を誘発し、ユーザーのストレスになります。

改善: CTAボタンは画面幅いっぱいに

/* スマホCTAの推奨スタイル */
.cta-button {
  width: 100%;
  padding: 18px 24px;
  font-size: 17px;
  font-weight: 700;
  border-radius: 12px;
  /* 親指が届きやすい画面下部に固定 */
  position: sticky;
  bottom: 16px;
}

改善ポイント2: フォントサイズと行間

問題: 文字が小さくて読めない

PCでは14pxで十分読めるテキストも、スマホでは読みにくくなります。

テキスト要素	PC推奨	スマホ推奨
本文	14-16px	16-18px
見出し（H2）	24-28px	22-26px
CTAボタン文言	14-16px	16-18px
補足テキスト	12px	14px
行間（line-height）	1.5	1.7-1.8

スマホの本文は16px未満にしないこと

。Googleも16px未満のフォントサイズはモバイルフレンドリーでないと判定します。

改善ポイント3: ファーストビューの設計

スマホのファーストビュー＝画面上半分の320px

PCではファーストビューに多くの情報を入れられますが、スマホでは最も伝えたい1メッセージに絞る必要があります。

ファーストビューに入れるべき要素（優先順）

キャッチコピー（1行、最大15文字） — 「何が得られるか」を端的に
サブコピー（1〜2行） — キャッチコピーの補足
CTAボタン（1つ） — 「無料で〇〇する」形式
信頼シグナル（1行） — 「導入企業300社突破」等

ファーストビューに入れすぎ注意。 画像・ロゴ・ナビゲーション・長文コピーを全部詰め込むと、スマホでは「何のページかわからない」状態になります。

スマホのFVで伝えるのは「1つのメッセージ + 1つのアクション」

です。

改善ポイント4: スクロール設計

「読まない」前提で設計する

スマホユーザーは記事を「読む」のではなく「スキャンする」。目に入った見出しや太字だけを拾い読みします。

スキャン対応のUI設計:

テクニック	内容
見出しだけで内容がわかる	「メリット」→「売上が3倍になる理由」
重要な数字を大きく表示	CVR +230% を特大フォントで
3行以上の段落を避ける	長い段落は箇条書きに分割
画像で区切る	テキストが続きすぎない工夫
色で強調	重要ポイントに背景色・マーカー

改善ポイント5: フォーム設計

フォームがCVRの最大のボトルネック

LP全体の設計が良くても、フォームで離脱されたら意味がありません。スマホフォームの最適化はCVR改善の最後の砦です。

スマホフォーム改善の7つのルール

入力項目は最少に — 名前・メール・電話番号の3項目まで
1画面1入力 — ステッパー形式で1項目ずつ表示
入力タイプを正しく設定 — type="email", type="tel" でキーボードを最適化
プレースホルダーではなくラベル — 入力中にラベルが消えないフローティングラベル
バリデーションはリアルタイム — 送信後のエラーではなく入力中にチェック
送信ボタンは画面下部固定 — スクロール不要で常にタップ可能
進捗バーを表示 — 「あと2項目」で離脱を防止

NG: 一括表示型フォーム

6項目以上が一度に見える
スクロールしないと送信ボタンに届かない
入力ミスは送信後に一括表示
離脱率: 60〜80%

OK: ステッパー型フォーム

1画面1項目で入力
進捗バー表示（Step 2/3）
入力中にリアルタイムバリデーション
離脱率: 20〜40%

改善ポイント6: 読み込み速度

スマホLPの表示速度が3秒を超えると、53%のユーザーが離脱する

（Google調査）。

速度改善の即効策

施策	効果	実装難度
画像をWebP形式に変換	表示速度20-30%改善	低
画像の遅延読み込み（lazy load）	初回表示速度改善	低
不要なJavaScriptの削除	TBT改善	中
フォントの最適化（subset化）	Webフォント読み込み改善	中
CDN活用	サーバーレスポンス改善	中

改善の優先順位

すべてを一度に修正するのは現実的ではありません。CVRへの影響が大きい順に対応しましょう。

優先度	施策	CVR影響度
1	CTAボタンのサイズ・配置改善	大（即効性あり）
2	フォームのステッパー化・項目削減	大（離脱率直結）
3	ファーストビューの情報整理	大（第一印象）
4	フォントサイズ・行間の調整	中
5	読み込み速度の改善	中
6	スクロール設計の見直し	中

まとめ

LPアクセスの70-80%はスマホ。PC優先の設計は間違い
CTAボタンは48px以上、画面幅いっぱい、スティッキー配置
フォントサイズは本文16px以上。行間1.7以上
ファーストビューは1メッセージ+1アクション
フォームはステッパー型で1画面1項目
表示速度3秒以内。画像WebP化+lazy loadが即効策