
LPデザインをスマホに最適化するポイントとは?ファーストビュー・CTA・表示速度の改善方法を解説
2026年09月28日

LPを公開した後、コンバージョンが思うように増えないと、デザインを大きく作り直したくなることがあります。しかし、ファーストビュー、CTA、文章、フォームなどを一度に変更すると、成果が変化しても何が影響したのか判断できません。
そこで活用できるのがA/Bテストです。現状のLPと、特定の要素だけを変更したパターンを比較すれば、ユーザーの実際の行動データをもとに改善の方向性を検証できます。LPは公開して完成する制作物ではなく、広告の訴求や流入するユーザーに合わせて改善を続けることで成果を伸ばしていく媒体でもあります。
ただし、ボタンの色を何となく変えるだけでは、有効なA/Bテストとはいえません。離脱率やCTAのクリック率などから課題を分析し、仮説を立てたうえで、何を検証するのか決める必要があります。
この記事では、LPデザインにおけるA/Bテストの基本から、テストする要素の選び方、実施手順、運用時の注意点、実際の改善事例まで詳しく解説します。

A/Bテストとは、異なる2つ以上のパターンをユーザーに表示し、どちらがより高い成果を得られるか比較する方法です。
LPの場合、ページ全体を作り直す方法だけではありません。ファーストビューのキャッチコピー、メイン画像、CTAボタン、フォームなど、コンバージョンに影響すると考えられる要素を変更して検証できます。
基本となるのは、現在使用しているAパターンと、改善案となるBパターンを用意して比較する方法です。
たとえば資料請求を目的とするLPでCTAの文言に課題があると考えた場合、Aでは「資料請求はこちら」、Bでは「無料で資料をダウンロード」のように変更し、クリック率や最終的なコンバージョン率を比較します。
ポイントは、同じ条件のユーザーに対してパターンを分けることです。Aを今月、Bを来月に配信すると、広告内容や季節、競合のキャンペーンなど別の要因が結果へ影響する可能性があります。
同時期にパターンを出し分けることで、変更した要素と成果の関係を比較しやすくするのがA/Bテストの基本的な考え方です。
A/Bテストを「CVRが高いデザインを決める方法」と捉えると、結果だけを見て終わってしまいます。
運用で価値を持つのは、なぜその結果になったのかを次の仮説へつなげられることです。
たとえば「無料相談はこちら」より「30分の無料相談を予約する」の反応が高かったのであれば、ユーザーにとってボタンを押した後の行動が具体的に分かることが影響した可能性があります。次はCTA周辺の説明でも、所要時間や相談内容を明確にするテストを考えられます。
一度のテスト結果をLPだけの正解とせず、ユーザーが何に反応したのかを蓄積することで、その後の広告クリエイティブやWebサイトの改善にも生かせます。

LPのデザインは、担当者やデザイナーの好みだけで正解を判断できません。
ブランドイメージとして優れたデザインと、コンバージョンにつながりやすいデザインが必ず一致するとも限らないため、実際のユーザーデータを確認する意味があります。
社内でLPを確認すると、「こちらの写真の方が目立つ」「CTAは赤色の方が押されそう」といった意見が出ることがあります。
どちらも仮説としては利用できますが、それだけで変更を決定すると、実際のユーザーがどう感じるかは分かりません。
A/Bテストなら、クリック率、フォーム到達率、コンバージョン率などを比較して判断できます。デザイナーの案と営業担当者の案で意見が分かれた場合にも、最終的にはユーザーの行動を確認するという共通の判断軸を持てます。
デザインを感覚から切り離すのではなく、アイデアを仮説としてデータで確かめるための仕組みと考えるとよいでしょう。
成果が悪いからといって、毎回LPを全面リニューアルする必要はありません。
ページ全体を作り直す場合、構成、原稿、デザイン、コーディング、計測設定など多くの工程が発生します。それでも成果が上がる保証はなく、変更箇所が多すぎれば改善理由も特定しにくくなります。
A/Bテストでは、課題の大きい部分から優先して変更できます。
ファーストビューで離脱しているなら最初の訴求、CTAはクリックされているのにコンバージョンが少ないならフォームというように、データに合わせて検証箇所を絞れます。
ただし、LPそのもののターゲットや提供価値がずれている場合は、小さな変更を繰り返すより構成から見直した方がよいケースもあります。部分改善と全面改修のどちらが適しているかは、現状分析をしてから判断します。
A/Bテストできる要素は数多くありますが、変更しやすいところから試せばよいわけではありません。
コンバージョンまでの導線を確認し、成果を妨げている可能性の高い要素から検証します。
LPを訪れたユーザーが最初に見るファーストビューは、優先的に分析したい場所です。
広告をクリックした人がLPを開いても、広告で見た内容と異なる印象を受けたり、自分向けのサービスなのか判断できなかったりすれば、ページ下部へ進む前に離脱する可能性があります。
ファーストビューでは、キャッチコピーだけでなく、メイン画像、サービスの説明、実績や価格の見せ方、CTAの配置などを検証できます。
ここで注意したいのが、広告とのつながりです。
広告では価格を強く訴求しているのに、LPでは機能性を中心に見せている場合、デザインだけ変更しても問題が解消されないことがあります。流入元ごとにユーザーが何を期待してLPへ来たのかまで確認すると、テストの仮説を立てやすくなります。
CTAは、資料請求、購入、問い合わせ、予約など、LPでユーザーに取ってほしい行動へ誘導する要素です。
CTAのA/Bテストでは色だけが注目されがちですが、検証対象はそれだけではありません。文言、サイズ、配置、周囲の説明、ページ内の設置数なども候補になります。CTAの検証要素として、ボタン内のテキスト、色・形状などのデザイン、配置場所や数、周辺要素などが挙げられています。
特に確認したいのが文言です。
「送信」「申し込む」だけでは、ボタンを押した後に何が起きるのか分かりにくいことがあります。「無料資料を受け取る」「相談日時を選択する」など、次の行動を具体化した方がユーザーに判断してもらいやすい場合があります。
ボタン色についても、特定の色なら必ず成果が上がるわけではありません。LP全体の配色に対して十分な視認性があるかという観点で考え、実際の反応をテストします。
CTAやコピーだけでは改善しない場合、ユーザーへ情報を伝える順番そのものが課題になっている可能性があります。
商品説明、メリット、料金、実績、利用方法、FAQなど、同じ情報を掲載していても、順番によって受け取り方は変わります。
初めてサービスを知るユーザーへ、いきなり詳しい機能を並べても価値を理解できないことがあります。先に抱えている課題を示し、その解決方法としてサービスを紹介した方が読みやすいケースもあります。
一方、すでに商品を比較しているユーザーが広告から訪れるLPでは、料金や他サービスとの違いを早い段階で見せた方が判断しやすい場合があります。
構成のテストでは、ターゲットがどの検討段階にいるのかまで考える必要があります。
CTAが十分クリックされているにもかかわらずコンバージョンが増えない場合は、フォームも確認します。
会社名、部署、役職、住所、電話番号、問い合わせ内容など、営業側が欲しい情報をすべて必須項目にすると、ユーザーの入力負担は増えます。
資料ダウンロードが目的なら最初に取得すべき情報は何か、商談申し込みなら営業対応に必要な情報はどこまでかを整理します。
ただし、項目を減らせば必ず事業成果が高まるわけではありません。問い合わせ数が増えても、自社の対象外となる問い合わせが大量に増えれば営業担当者の負担が大きくなります。
フォームではCVRだけを見るのではなく、その後の商談化や成約まで確認した方が実務的です。

A/Bテストで避けたいのは、思いついた変更を次々に試す運用です。
分析、仮説、実施、検証という順序を守ることで、結果が良くても悪くても次の改善に使えるデータを残せます。
最初に現在のLPの状態を把握します。
確認する指標はLPの目的によって変わりますが、コンバージョン率だけでなく、CTAのクリック、フォーム到達、フォーム完了、ページ内の離脱なども判断材料になります。
仮にCVRが低くても、ファーストビューで大量に離脱しているLPと、CTAまでは到達しているのにフォームで離脱しているLPでは、優先すべき改善箇所が異なります。
アクセス解析ツールやヒートマップなどを利用し、「どこでユーザーの行動が止まっているのか」を絞り込みます。
次に「なぜその場所で離脱しているのか」を考えます。
ここでは「CTAを赤くすればCVRが上がる」といった変更内容だけを仮説にしないことがポイントです。
「CTAが背景と同化してユーザーに認識されていないため、コントラストを高めればクリック率が改善する」と考えれば、何を確かめるテストなのか明確になります。
ファーストビューなら、「広告で訴求したメリットがLPですぐ確認できないため離脱している」、フォームなら「資料請求に対して入力項目が多く、途中離脱している」といった形です。
結果が想定と異なった場合にも、仮説が明確なら次の検証へ進めます。
原因を特定したいテストでは、一度に変更する要素を増やしすぎない方が結果を解釈しやすくなります。
Aでは女性の写真と「無料相談」のCTA、Bではイラストへ変更し、CTAの色・文言・配置まで変えたとします。Bの成果が高くても、画像、色、コピー、配置のどれが影響したのか分かりません。
実際のLP改善事例でも、複数条件を変更したため「条件を揃えた方がビジュアルの効果を正確に測定できた」と振り返られているケースがあります。
大きく方向性を比較したいテストと、一つの要素の影響を確かめるテストは分けて設計すると、結果を次の改善へ利用しやすくなります。
テスト終了後は、勝ったパターンを採用して終わりにしません。
仮説、変更内容、対象ユーザー、流入経路、実施期間、結果などを記録します。
広告別に結果を確認すると、全体ではAが優位でも、特定の広告経由ではBの反応が高いと分かることがあります。実際に流入経路によって効果的なLP案が異なった事例も報告されています。
こうした差を確認できれば、広告ごとにLPを分けるという次の施策も考えられます。
A/Bテストは一回の勝敗を決めるイベントではなく、LP運用で仮説を蓄積する仕組みとして扱う方が価値を引き出せます。
事例を見るときは「CTAを変更したら○%改善した」という数字だけを真似しないことが大切です。
ターゲット、商品、広告、元のLPが違えば、同じデザイン変更をしても同じ成果になるとは限りません。参考にしたいのは、どのデータから課題を見つけ、何を仮説として検証したのかという過程です。
香りのサブスクリプションサービス「カラリア 香りの定期便」のLP改善では、ファーストビューの離脱率やFAQのクリック状況、広告クリエイティブの反応などを分析し、広告とLPのイメージに乖離があるという仮説からA/Bテストが行われています。
広告との関連性を意識したビジュアルやコピー、CTA文言などを検証し、取り組みの結果としてファーストビューの離脱率が50%から30%台へ低減したと報告されています。
この事例で参考になるのは、単にファーストビューをおしゃれに変更したわけではない点です。
広告では反応しているのにLPでは離脱しているというデータから、流入前後の体験に着目しています。広告運用をしているLPでは、LP単体を見るのではなく、広告でユーザーに何を期待させたかまで含めて分析する必要があります。
TSUTAYAの事例では、既存LPと新しいLPを比較した後、新LPを5つのセクションに分け、複数のクリエイティブを組み合わせた多変量テストが行われています。
DLPOが公開している事例では、合計960通りの組み合わせを検証し、最終的に新LPで約20%のCVR向上を達成したとされています。
ただし、通常のLP運用で最初から大量のパターンを作ればよいという意味ではありません。多くのパターンを検証するには、それだけのユーザーデータと運用体制が必要です。
アクセス数が限られているLPでは、重要度の高い仮説へテストを集中させた方が判断しやすい場合があります。
事例の数字をそのまま目標にするのではなく、自社の流入量や改善体制に合わせてテスト範囲を決めることが現実的です。

A/Bテストはツールを導入するだけでは成果につながりません。
テスト数を増やすことが目的になると、LPは頻繁に変更されているのに、なぜ成果が変わったのか社内に知識が残らない状態になりがちです。
「競合LPがこの色だから」「最近このデザインが流行っているから」といった理由だけでテストすると、結果から得られる学びが限定されます。
競合で成果が出ているように見えるデザインでも、ターゲットや広告、商品単価が違えば自社で同じ結果になるとは限りません。
先にデータから課題を探し、ユーザーが行動しない理由を考え、それを解消する案としてデザインを作ります。
デザイン変更そのものを目的にしないことが、LPのA/Bテストでは欠かせません。
数日間だけBパターンのCVRが高かったからといって、すぐに採用すると偶然の変動を拾っている可能性があります。
特にアクセス数やコンバージョン数が少ないLPでは、一件の成約によってCVRが大きく動きます。
一方で、必要以上に長期間テストを続けると改善スピードが落ちます。
必要なデータ量は現在のCVR、アクセス数、検出したい差などによって変わるため、「必ず○日間実施すればよい」という固定基準では判断できません。利用するA/Bテストツールの判定機能なども確認しながら、十分なデータが集まっているかを見ます。
なお、かつてA/Bテストで広く使われたGoogle Optimizeは、2023年9月30日に提供を終了しています。現在ツールを選ぶ際は、古い解説記事をそのまま参考にせず、サービスが現在も提供されているか確認が必要です。
資料請求LPのCVRが2%から3%になれば、数字上は改善です。
しかし、増えた問い合わせの多くがターゲット外で商談につながらないなら、営業成果まで改善したとは判断できません。
特にBtoBのLPでは、コンバージョン後に商談、見積もり、受注という工程があります。
テストする場所によって、CTAクリック率、CVR、商談化率、最終的な獲得単価など、見るべき指標を変えます。
LPだけを最適化した結果、後工程の負担が増えていないかまで確認できると、Webマーケティング全体として判断しやすくなります。
LP運用では、テストを何回実施したかより、何を学べたかの方が重要です。
担当者が変わるたびに同じテストを繰り返さないためにも、検証結果を運用データとして残していきます。
最低限、テストした要素、仮説、A・Bそれぞれの内容、実施期間、対象となった流入、結果は記録しておきます。
結果が悪かったテストも削除する必要はありません。
「料金をファーストビューへ出したらCVRが下がった」という結果があれば、次回の担当者が同じ施策を何となく繰り返すことを防げます。
また、数か月後に広告のターゲットや商品内容が変われば、以前負けたパターンが再び検証対象になることもあります。テスト結果は永久的な正解ではなく、その時点のユーザーと条件で得られたデータとして管理します。
広告からLPへ集客している場合、広告とLPを別々に改善すると成果を判断しにくくなることがあります。
広告では「初期費用の安さ」を訴求し、LPでは「高機能」を中心に説明していれば、ユーザーが期待した情報と到着後の内容に差が生まれます。
広告のクリック率が高いのにLPのCVRが低い場合は、広告が悪い、LPが悪いと単純に分けず、両者のメッセージがつながっているか確認してください。
ハンジョウではLPを含むWeb制作に加えてWeb広告にも対応しています。既存のハンジョウの記事でも、LPは購入や問い合わせなど一つの行動へ誘導し、CVRを高めることを目的とするページとして説明されています。
制作時のデザインだけでなく、公開後の流入やコンバージョンデータを確認しながら改善できる体制を考えることが、LPを継続的に活用するうえでの判断ポイントになります。
LPデザインのA/Bテストで最初に考えたいのは、「AとBのどちらがおしゃれか」ではありません。
どこでユーザーが離脱しているのか、なぜ行動しないと考えられるのか、その仮説を確かめるには何を変えるべきかを整理してからテストします。
ファーストビューに課題があればコピーや画像、CTAに課題があれば文言・配置・デザイン、フォームで離脱していれば入力項目や導線というように、改善箇所は現在のデータによって変わります。
また、一度のA/BテストでLPの最適なデザインが決まるわけではありません。広告やユーザー層、商品、競合状況が変われば、過去に成果が高かったパターンが現在も最適とは限らないためです。
まず既存LPのコンバージョン率やユーザー行動を確認し、改善余地が大きい箇所を一つ選んでみてください。そのうえで仮説、テスト内容、結果を記録すれば、次回の改善でゼロから考え直す必要がなくなります。
LPのA/Bテストは、デザイン案の勝ち負けを決めるためだけの施策ではありません。ユーザーが何に反応し、どこで迷い、何があれば行動できるのかを検証し続ける運用方法として取り入れることで、LP改善の判断を積み重ねられます。