「PCで見たらきれいなLPなのに、なぜかコンバージョンが伸びない」

Web担当を兼務している方なら、一度はこんな経験があるのではないでしょうか。アクセス解析を開いてデバイス別に数字を見ると、全体の70%以上がスマートフォンからの訪問なのに、CV率はPCの半分以下。広告費をかけてせっかく集めたユーザーが、スマホの画面で離脱している。

この問題の根っこにあるのは、「PCで作ったデザインをスマホに縮小しただけ」というアプローチです。レスポンシブ対応はしている。でも、スマホユーザーの指の動き方、画面の見え方、通信環境の違いまでは設計に落とし込めていない。

この記事では、モバイルファーストの視点からLPのUI/UX設計を見直す方法を、実際の改善事例を交えながら解説します。

スマホユーザーの行動特性はPCとまったく違う

まず前提として押さえておきたいのが、スマホユーザーの行動パターンです。PCユーザーとの違いを理解しないまま設計すると、見た目は整っていても使いにくいLPになってしまいます。

片手操作と「親指ゾーン」の制約

スマホを片手で持って操作するユーザーは、全体の約75%と言われています。このとき、親指が自然に届く範囲は画面の下半分から中央にかけてのエリアです。Steven Hoober氏の調査で「親指ゾーン（Thumb Zone）」として知られるこの領域は、タップしやすいゴールデンエリアと、届きにくい画面上部のストレッチゾーンに分かれます。

CTAボタンを画面上部に固定しているLPをよく見かけますが、実はこれはスマホでは押しにくい位置です。特に近年の大画面化（6インチ超が主流）により、画面の左上はほぼ「死角」になっています。

設計のポイントは3つあります。

1つ目は、主要なCTAボタンを画面下部に固定表示する方法です。スティッキーCTAと呼ばれるこの手法は、スクロール位置に関係なくいつでもアクションを起こせる状態を作ります。ただし、コンテンツの閲覧領域を圧迫しないよう、高さは48〜56px程度に抑えるのがコツです。

2つ目は、タップ領域の確保です。W3CのWCAGガイドラインでは、タッチターゲットの最小サイズとして24×24 CSSピクセルを推奨しています。しかし実務的には、誤タップを防ぐために44×44ピクセル以上を確保するのが安全です。ボタン同士の間隔も最低8ピクセル空けてください。

3つ目は、スワイプやスクロールの動線です。スマホユーザーは上下スクロールには慣れていますが、横スワイプは見逃されやすい操作です。カルーセルやスライダーでしか見られない情報があると、多くのユーザーがそこを素通りしてしまいます。

スクロール深度と「3秒ルール」

スマホユーザーがLPに滞在するかどうかは、最初の3秒で決まります。PCのように画面全体を一度に把握できないため、ファーストビューに表示される情報量が極端に少ないのです。

さらに、スマホユーザーのスクロール行動には特徴的なパターンがあります。最初の数画面分は勢いよくスクロールし、興味を引くセクションで速度が落ち、最終的に離脱するか最下部まで到達するか、という二極化した動きです。

これはGoogleが提唱するPage Experienceの考え方にも通じます。ユーザーがストレスなくコンテンツを消費できる体験設計が、結果的にCV率と検索評価の両方を押し上げるのです。

ファーストビューで離脱を止める設計の実際

ファーストビューとは、ページを開いたときにスクロールせずに見える領域のことです。スマホの場合、この領域は端末やブラウザのUIバーの影響で実質550〜650ピクセル程度しかありません。ここに何を置くかが、LP全体のCV率を左右します。

キャッチコピーは「読ませる」のではなく「目に入れる」

PCでは40文字程度のキャッチコピーも一行で表示できますが、スマホでは改行が発生して可読性が落ちます。モバイルファーストで考えるなら、コピーは15〜20文字以内で完結させるのが理想です。

従業員80名ほどの住宅設備メーカーでLPを改善した事例があります。元のキャッチコピーは「住宅設備のプロが教える、失敗しないリフォーム計画の立て方」という32文字のものでした。スマホでは3行に折り返されて、フォントサイズも小さくせざるを得ない状態です。

これを「リフォームで後悔しない方法」の14文字に変更し、フォントサイズを24pxから32pxに拡大しました。サブコピーで補足情報を添える構成に変えたところ、ファーストビューからの離脱率が18%改善しています。

ヒーロー画像は「軽く、意味のある」ものだけ

「とりあえず大きなヒーロー画像を置く」というのは、モバイルLPでは悪手になりがちです。理由は2つあります。

1つは、画像がファーストビューの大半を占めてしまい、コピーやCTAが画面外に押し出されること。もう1つは、画像ファイルの読み込みに時間がかかり、ユーザーが白い画面を見つめる時間が発生することです。

Googleが公開しているCore Web Vitalsの指標では、LCP（Largest Contentful Paint）を2.5秒以内に収めることが推奨されています。ヒーロー画像がLCPの対象になるケースが多いため、画像の最適化は直接的にユーザー体験の数字に反映されます。技術的な実装方法については、テックビルドの解説記事が参考になります。

実践的なガイドラインとしては、以下の基準で判断してください。

ヒーロー画像を使う場合は、WebPフォーマットで100KB以下に圧縮し、高さをビューポートの40%以下に抑えます。それよりも効果的なのは、画像を使わずにコピーとCTAだけで構成するパターンです。SaaS系のLPでは、この「テキストファースト」なファーストビューの方がCV率が高いという検証結果が複数報告されています。

CTAボタンの設計を科学する

CTAはLPの心臓部ですが、モバイルでは特に「どこに」「どんなサイズで」「何と書いて」配置するかが数字を大きく動かします。

位置とサイズの最適解

先述の親指ゾーンを踏まえると、CTAの配置は次のパターンが有効です。

スティッキーCTAは、画面下部に固定表示するタイプです。ページのどこにいても即座にアクションを起こせるため、長いLPほど効果を発揮します。実装する際のポイントは、スクロール開始後に表示し、フッター到達時には非表示にすることです。最初から表示されていると、コンテンツを読む前に「売り込み感」が出てしまいます。

インラインCTAは、コンテンツの区切りに自然に配置するタイプです。「ここまで読んで興味が出た方はこちら」という文脈で置くと、押し売り感なくクリックを促せます。1画面に1つ以上のCTAが見える状態を維持するのが理想ですが、多すぎると逆効果なので、3〜4セクションごとに配置するバランスが現実的です。

ボタンラベルの言葉選び

「お問い合わせはこちら」というラベルは、実はスマホでは長すぎます。ボタンの横幅が制限されるため、文字が小さくなるか改行されるかのどちらかになりがちです。

モバイルCTAのラベルは8文字以内が目安です。「無料で相談する」「資料をもらう」「30秒で登録」のように、短く、具体的で、ユーザーにとってのメリットが伝わる表現にします。

営業拠点を5箇所持つ産業機器メーカーのLPで、CTAラベルを「お問い合わせ・資料請求はこちら」から「無料で資料請求」に変更したところ、CTAのクリック率が2.3倍になりました。ボタン自体のデザインは変えていません。言葉を短くしただけで、これだけの差が出るのです。

モバイルフォームは「入力させない」設計を目指す

LPのゴールがフォーム送信の場合、フォームのUI設計がCV率のボトルネックになります。この点についてはフォーム離脱率を半減させるUI設計の実践知識でも詳しく解説していますが、ここではモバイル特有のポイントに絞ります。

入力フィールドは5つ以下に

スマホでのテキスト入力は、PCの3倍以上の時間がかかると言われています。フィールドが1つ増えるごとに離脱率が約5〜10%上がるというデータもあります。

「後で営業が聞けばいい情報」は全部削ってください。初回のコンタクトで本当に必要なのは、名前・メールアドレス・電話番号の3点、多くても会社名を加えた4点です。住所や部署名は、商談が進んでから聞いても遅くありません。

ネイティブUIを活用する

スマホには、PCにはない入力補助の仕組みがたくさんあります。

電話番号フィールドには type="tel" を指定すると数字キーボードが自動表示されます。メールアドレスには type="email" で@キーがすぐ打てるキーボードに切り替わります。郵便番号からの住所自動入力、オートコンプリートへの対応も忘れないでください。

HTMLの autocomplete 属性を正しく設定するだけで、ユーザーがブラウザに保存している情報を自動入力できます。Googleのautocomplete属性に関するドキュメントでは、フォームの各フィールドに適切な autocomplete 値を設定する方法が詳しく解説されています。

ステップ分割で心理的ハードルを下げる

5つ以上のフィールドがどうしても必要な場合は、一画面にすべて表示するのではなく、2〜3ステップに分割する方法が有効です。

「ステップ1/3」のようなプログレスバーを表示し、最初のステップは名前とメールだけにする。すでに入力を始めたという事実が「ここまで入れたのだから最後まで」という心理（サンクコスト効果）を働かせ、完了率が上がります。

従業員150名の人材紹介会社で、7フィールドの応募フォームを3ステップに分割したところ、フォーム完了率が41%から67%に改善した実例があります。

表示速度はUXの一部として設計する

「速度は開発の仕事」と思われがちですが、モバイルLPにおいてはUI/UX設計の領域です。なぜなら、何を最初に読み込むかの優先順位を決めるのはデザイナーの仕事だからです。

体感速度を上げるUI手法

実際の読み込み時間を短縮するだけでなく、ユーザーが「速い」と感じるUIテクニックがあります。

スケルトンスクリーンは、コンテンツの読み込み中に灰色のプレースホルダーを表示する手法です。真っ白な画面やローディングスピナーよりも、「もうすぐ表示される」という期待感を持たせることができ、体感的な待ち時間を短縮します。

プログレッシブ画像読み込みは、最初にぼやけた低解像度画像を表示し、その後に高解像度画像に差し替える方法です。ファーストビューの画像がいきなり鮮明に表示されるよりも、ぼんやりした画像がクリアになっていく方が、ユーザーのストレスは小さくなります。

LP全体のパフォーマンスを数値で把握するには、GA4でのイベント計測を設定しておくと、どのセクションで離脱しているかを正確に把握できます。

信頼性を「見せる」モバイルUIの工夫

スマホの小さな画面では、信頼性を伝える要素の見せ方にも工夫が必要です。PCなら横に並べられるロゴやバッジも、スマホでは縦積みになって画面を圧迫します。

効果的な信頼要素の配置

数字による実績表示は、スマホでも視認性が高い方法です。「導入社数350社以上」「継続率98.2%」のような具体的な数字は、フォントサイズを大きくしてファーストビュー直下に配置すると効果的です。

お客様の声は、PCのように横3列で並べるのではなく、スワイプ可能なカード形式で1枚ずつ表示するのがモバイルの定石です。ただし先述の通り、横スワイプは見逃されやすいので、「←スワイプで他の声を見る」のような視覚的なヒントを添えてください。

認証バッジやメディア掲載実績は、小さなロゴを横一列にずらりと並べるのが一般的ですが、スマホでは判別できないほど小さくなります。代わりに、もっとも権威のあるもの2〜3個に絞って、適切なサイズで表示する方がはるかに効果的です。

改善は「感覚」ではなく「数字」で判断する

ここまで紹介したテクニックは、すべて同時に導入する必要はありません。重要なのは、1つずつ変更し、その効果を数字で確認することです。

LPのモバイルUX改善で特に効果測定すべき指標は3つあります。

1つ目はスクロール深度です。ファーストビューの改善がうまくいっているかを判断する基本指標です。GA4のスクロールイベントを設定すれば、25%・50%・75%・100%の各地点への到達率が分かります。

2つ目はCTAクリック率です。ボタンの位置やラベルの変更効果を測る直接的な指標です。カスタムイベントとして計測してください。

3つ目はフォーム完了率です。フォームの表示数に対する送信完了数の割合です。入力開始率と完了率を分けて計測すると、どこで離脱しているかがより明確になります。

これらの改善仮説を検証するには、A/Bテストの設計と実施が不可欠です。「なんとなく良さそう」で本番に反映するのではなく、統計的に有意な差を確認してから展開することで、改善の再現性が生まれます。

まとめ

モバイルファーストのLP設計は、単に「スマホでも見られるようにする」ことではありません。スマホユーザーの指の動き、画面サイズ、通信環境、集中力の持続時間。これらすべてを前提にした設計を、最初から行うということです。

今回紹介した改善ポイントの中で、もっとも手軽に始められるのはCTAボタンの位置とラベルの見直しです。スティッキーCTAの導入とラベルの短縮は、デザインツールを触らなくてもHTMLとCSSの修正だけで実現でき、効果も出やすい施策です。

まずは来週、自社のLPをスマホで開いて、片手で操作してみてください。CTAが親指で押しやすい位置にあるか、ファーストビューで何が伝わるか、フォームに自分の情報をスマホで入力してみてストレスを感じないか。その体験の中に、最初に取り組むべき改善のヒントが必ず見つかります。