スマホLP vs PC LP、どう違う?最適化のポイントを5分で解説

スマホLPとPC LP、何が違うの?

LP(ランディングページ)を制作するとき、たまにこんなご質問をいただきます。

• 「スマホLPとPC LP、何が違うの?」
• 「両方作る必要があるの?」

実は、スマホとPCでは、LPの見え方も使い方も全く違います。

そのため、それぞれに最適化したLPを作ることが、成約率向上の鍵です。

今回は、「スマホLP vs PC LP、どう違う?」を、最適化のポイントまで例え話でわかりやすく解説します。

今はスマホが主流

LPを作る前に、まず知っておきたい事実があります。

現在、WEBサイトへのアクセスはスマホが約70〜80%を占めています。

つまり、ほとんどの人がスマホでLPを見ているということです。

そのため、「スマホ優先(モバイルファースト)」でLPを作ることが重要です。

スマホLPとPC LPの3つの違い

それでは、具体的にどう違うのか見ていきましょう。

1️⃣ 画面サイズの違い

これが最も大きな違いです。
スマホの画面サイズは、約5〜6インチ(縦長)で、横幅が狭いため、縦に長くスクロールします。
一方でパソコンの画面サイズは、約13〜27インチ(横長)で、横幅が広いため、情報を横レイアウトできます。

2️⃣ 操作方法の違い

スマホのボタンは、指でタップしたりスワイプするので、ボタンサイズは大きめが良いです。
一方でパソコンのボタンは、マウスでクリックするので、小さくてもOKです。
とはいえ反応率を高めるためには、それなりに大きくすることを推奨します。

3️⃣ 閲覧環境の違い

スマホで見る場所は、電車、カフェ、寝る前のベッドなど、どこでも見れますよね。また、時間もすき間時間で見たりするので、集中度が低いのも特徴的です。外出先ではWi-Fiがない場合もあるので、読み込み速度が遅くなることもあります。
一方でパソコンは、オフィスや自宅など固定された場所で見ます。そのため、まとまった時間で見ることが多いので集中度は高いといえます。また、有線やWi-Fi環境が良いので、基本的に通信速度が速いです。

📌 スマホLPとPC LPの違い

スマホ・パソコン最適化のポイント

それでは、スマホLPを最適化するポイントを見ていきましょう。

1️⃣ 文字サイズを大きくする

スマホの小さい画面では、文字が小さいと読みにくいです。
本文は16px以上にして拡大しなくても読める大きさにする。

2️⃣ ボタンを大きく、間隔を広くする

指でタップするため、ボタンの縦幅は大きめにします。

3️⃣ 縦スクロールを意識する

スマホは縦にスクロールして読むため、基本的には縦レイアウトにします。
全て縦レイアウトにするとスクロールが長くなるため、部分的には横レイアウトも取り入れます。

4️⃣ ページ読み込み速度を速くする

サイトの読み込みが遅いと離脱されます。
パソコンでもサイトの読み込み速度は大切ですが、スマホはWi-Fi環境のない外出先で見ることもあるため注意が必要です。

次はパソコンLPを最適するポイントです。

1️⃣ 横幅を活用する

PCは画面が広いため、横にも情報を配置できます。
2カラム・3カラムレイアウトで情報を整理すると良いですね。

2️⃣ マウスオーバー効果を活用する

PCはマウスを使うため、マウスオーバー効果が使えます。
ボタンにマウスを乗せると色が変えたりすると操作感が向上します。

レスポンシブデザインとは?

1つのLPが、スマホでもPCでも自動的に最適表示されるデザイン手法です。

スマホで見たときは縦1列に自動調整したり、PCで見たときは横幅を活用した2〜3カラムに自動調整します。

BtoBのLPは、パソコンユーザーが多いので、レイアウトを自動調整するレスポンシブデザインで作ることが多くなります。

ですが、制作時間が長くなったり、制作費用が高くなるデメリットもあります。

そのため、最近は、BtoBのLPであっても自動調整しないスマホデザインのみのLP制作が多くなっています。

BtoCのLPであれば、もうスマホデザインだけで十分かと思います。

低コストで作って、早くリリースしたほうが、早く結果を得ることができるのでオススメです。

この記事が、あなたのLP制作の参考になれば嬉しいです。