SHARE 0

SNS

SHARE 0

ランディングページ（LP）の最適なサイズとは？レスポンシブ対応についても解説

こんにちは。「AIアナリスト」ライターチームです。

ランディングページ（LP）のサイズをデバイス画面に合わせて最適化すると、見栄えのするLPに仕上がります。ユーザーにとっても見栄えのするLPは、商品購入やサービス成約などのコンバージョンアップには欠かせません。この記事では、LPのサイズを最適に設定するための方法やポイント、検証法について解説します。良質なLPを作成してコンバージョンアップを図るため、ぜひ参考にしてください。

最適なランディングページ（LP）のサイズに設定する方法
- パソコンとスマートフォンで別々にLPを作る
- LPをレスポンシブ対応にする
パソコンとスマートフォンで別々にLPを作る際のポイント
- ファーストビューの見栄えを考慮したサイズ調整が重要
- パソコンとスマートフォンの各デバイスに最適なサイズを確認する
LPをレスポンシブ対応にする際の注意点
Googleアナリティクスでデバイス別に検証を行う
- デバイスごとにLPを検証するメリット
- デバイスごとの適正サイズを検証する方法
まとめ

最適なランディングページ（LP）のサイズに設定する方法

LPサイズの最適化には、以下の2つの方法が挙げられます。

デバイスごとにLPを作成する方法
レスポンシブ対応にしてLPを作成する方法

ここでは、2つの方法についてメリットとデメリットを解説します。

パソコンとスマートフォンで別々にLPを作る

パソコンとスマートフォンで別々にLPを作った場合のメリットとデメリットについて解説します。

デバイスごとにLPを分けるメリット

デバイスごとにLPを分けるメリットは、画面サイズに合わせた最適なデザインが可能な点です。
デバイスごとに最適なデザインを細かく設定できると、パソコンとスマートフォンのどちらでも見栄えのするLP作成が可能です。また、レスポンシブ対応LPの作成で求められるような深い専門知識が不要です。

デバイスごとにLPを分けるデメリット

デバイスごとにLPを分けた場合は、次のようなデメリットが考えられます。

デバイス数に応じて必要なURLが増加して管理が煩雑になる
メンテナンス時にURLごとに編集する必要がある
SEOに不利になる可能性がある

管理の煩雑さや編集の手間を考慮してンテナンス性を重視する場合は、レスポンシブ対応にすることをおすすめします。

LPをレスポンシブ対応にする

LPをレスポンシブ対応にするメリットとデメリットについて解説します。

レスポンシブ対応にするメリット

レスポンシブ対応にするメリットとして、メンテナンスの簡素化や、各デバイスのURL統一によるSEOの優位性が挙げられます。LPの場合、効果測定により改善をする機会も多いため、メンテナンスの簡素化は大きなメリットといえます。また、特定の検索キーワードでLPを上位表示させたい場合は、SEO上で有利なレスポンシブ対応をおすすめします。

レスポンシブ対応にするデメリット

レスポンシブ対応にするデメリットは、以下のとおりです。

構築に専門知識が必要になる
複数のデバイスに適合する汎用的なLPレイアウトが必要になる
スマートフォンの画面表示スピードが遅くなる傾向にある

レスポンシブ対応にするには、社内のエンジニアへの依頼や外注など、専門家の助力が必要になる可能性があります。また、画面サイズに対するレイアウトの不適合や表示遅延などを回避するためには、LP構築に工夫も必要です。

パソコンとスマートフォンで別々にLPを作る際のポイント

パソコンとスマートフォンで別々にLPを作る場合は、ファーストビューの見栄えを考慮したサイズ選定をおすすめします。ここでは、ファーストビューを考慮したLPサイトの画像サイズの決め方について解説します。

LPのファーストビューについて詳しく知りたい場合は、次の記事を参考にしてください。

ファーストビューの見栄えを考慮したサイズ調整が重要

各デバイスで見栄えのするLPに整えるためには、ファーストビューを考慮したサイズ調整が重要です。ファーストビューとは、ユーザーがLPに訪問した際に、はじめに目にする部分です。

ファーストビューの見え方が、ユーザーに対する第一印象になるといえるでしょう。LPから申し込みや問い合わせにつなげるためにも、ユーザーが見やすい画質や文字の大きさ、画像サイズなどのバランスを考慮してサイズ調整をしましょう。

パソコンとスマートフォンの各デバイスに最適なサイズを確認する

ここでは、スマートフォンとパソコンの各デバイスに最適な画像サイズについて解説します。

スマートフォンのモニターサイズ

スマートフォンのモニターサイズは、幅350px〜365px、高さ600px〜650pxです。ただし、最近のスマートフォンは従来のものと比べ、高解像度出力であるため、画像サイズを本来のスマートフォンサイズの倍にして調整するのをおすすめします。

横幅に合わせて調節する場合は700～730px、高さで調節する場合は1,200～1,300pxを目安に作成してください。

パソコンのモニターサイズ

パソコンで最も大きなサイズは、フルHDの1920×1080pxで、小さいサイズは1280×720pxです。画面を最大にしてLPを見る機会は少ない点を考慮して、幅1,000～1,200px、高さ550～650pxのサイズで画像を作成するとよいでしょう。

LPをレスポンシブ対応にする際の注意点

ここでは、LPをレスポンシブ対応にする際の注意点について解説します。

フォントサイズは大きめにする

レスポンシブ対応のLPは、スマートフォンによるユーザー訪問を想定して、大きめのフォントサイズで文字を読みやすくしましょう。スマートフォン用のフォントサイズは14～16pxを目安にすると読みやすくなります。本文中のフォントサイズだけではなく、画像内の文字のサイズにも注意してください。

文字量を調節してスマートフォンで見やすくする

本文中の文字量を調整すると、スマートフォンでも読みやすくなるでしょう。文字量を調整する場合は、一文あたりの文字数を30～60文字程度に調整し、開業は80～130文字を目安にするのをおすすめします。さらに、改行の際には空白を1行設けると読みやすくなります。

画像サイズを調整してデータ量を軽くする

画像サイズを調整してデータ量を軽くすることで、画面表示のスピードアップが可能です。レスポンシブの場合、画像を大きくしても表示されますが、枚数が増えると表示に時間がかかる場合があります。

そこで画像の横幅を700～730px、高さを1,200～1,300pxを目安に作成すると、最小限のデータ容量で、鮮明な画像が表示されるでしょう。

Googleアナリティクスでデバイス別に検証を行う

ここでは、Googleアナリティクスでデバイス別の検証を行うメリットと方法をについて解説します。

デバイスごとにLPを検証するメリット

デバイスごとにLPを検証すると、各デバイスの表示画面に対するユーザーの満足度を推測できます。特にレスポンシブの場合は、全デバイスにおいて同じLPが表示されるため、画面サイズによっては見づらくなる可能性があります。デバイスごとに検証画面サイズの検証を行うことで、LPの見え方を効率的に改善できます。

デバイスごとの適正サイズを検証する方法

デバイスごとの適性サイズを検証するには、Googleアナリティクスで各デバイスにおけるLPの「直帰率」や「離脱率」を確認するとよいでしょう。

たとえば、パソコンの直帰率や離脱率に比べて、スマートフォンの数値が極端に低い場合は、スマートフォンで表示されたLPが見づらい可能性があります。パソコンで見やすいものの、スマートフォンでは見づらいといった事例は、レスポンシブ対応LPで起こりやすいといわれています。LP構築の失敗を避けるためにも、ぜひ確認してください。

「直帰率」や「離脱率」の詳しい解説は、次の記事を参考にしてください。

関連記事：直帰率とは｜離脱率との違いや目安を徹底解説！

Googleアナリティクスで各デバイスの検証を実施する方法について確認したい場合は、次の記事を参考にしてください。

関連記事：Googleアナリティクスでデバイス別のデータを分析しよう！

まとめ

LPサイズを最適化するには、デバイスごとの設定やレシポンシブ対応などの手段があります。LPの作成後は、画像やフォントサイズの各デバイス画面に対する適合性を検証しましょう。Googleアナリティクスを利用すると、各デバイスに対応した重要指標を確認できます。重要指標の数値が低い場合は、そのデバイスに合うLPサイズへの改善をおすすめします。

レスポンシブ対応LPは、各デバイスのバランスを意識して、LPサイズの適正化に努めましょう。Googleアナリティクスの指標チェックだけではなく、AIアナリティクスの利用もおすすめです。

AIアナリストはGoogleアナリティクスと連携して使える便利なツール。2分で設定を完了でき、すぐに使えます。AIが自動でアクセス解析を行い、改善ポイントを示してくれるため、Googleアナリティクスを使った分析が苦手な方に最適なツールです。

無料版から試せるので興味がある場合は、下記より詳細をご覧ください。

AIアナリストの資料請求（無料）はこちら