LP（ランディングページ）はレスポンシブデザインにすべき？ スマホ対応の注意も紹介

LP（ランディングページ）をレスポンシブデザインにすると、さまざまなデバイスで閲覧するユーザーに対応できるようになります。ここでは、LPをレスポンシブデザインにするメリットとデメリット、また、レスポンシブ対応したLPを作るときの注意点について紹介するので、ぜひ参考にしてください。

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

レスポンシブデザインとは、ユーザーが使用するデバイスの画面サイズに応じて、適切な大きさに表示が変わるデザインのWebページです。

レスポンシブデザインに対応していれば、スマホやタブレット・パソコンなど、異なるデバイスで同一のWebページにアクセスしても、そのデバイスに応じたサイズで表示されます。

一方、レスポンシブデザインに対応していないWebページに、推奨しているデバイス以外でアクセスすると、不自然なほど大きな空白が表示されたり、画面を拡大しないとテキストが読めなかったりすることがあります。レスポンシブ以外の方法で、異なるデバイスでも快適に閲覧してもらうためには、パソコン用URL・スマホ用URLなどのように、デバイスごとにURLを作成するなどの対策が必要になるでしょう。

なおGoogleも、レスポンシブデザインによるWebページの制作を推奨しています。レスポンシブデザインでは、どのデバイスでも共有のURLやHTMLを使用するため、デバイスによっては表示エラーが起こるなどの不具合を避けることが可能です。

表示エラーが起こりにくくなると、Google検索エンジンのクローラーも巡回しやすくなるため、Googleにとってもメリットのある状態だといえます。

LP（ランディングページ）をレスポンシブにするメリット

LP（ランディングページ）とは、検索結果やWeb広告などを経由してユーザーが最初にアクセスする、縦長1枚構造のWebページのことです。おもなLPは、商品やサービスに特化したWebページで、ユーザーのアクションを誘導することに重点を置いています。

商品やサービスの紹介から、実際に利用している方の声、注文ボタンなど、商品・サービスに関するさまざまな情報をユーザーの気持ちの流れに添ってまとめているため、スムーズに購入まで導ける効果を期待できます。

LPもレスポンシブデザインで制作することが可能です。LPをレスポンシブデザインにすると、次のメリットが得られます。

• さまざまなデバイスで閲覧するユーザーに対応できる
• 少ない工数でLPを制作できる
• 追記や修正が簡単にできる

それぞれのメリットについて説明します。

さまざまなデバイスで閲覧するユーザーに対応できる

LPをレスポンシブデザインにすると、ユーザーがどのデバイスで閲覧しても、最適な画面を提示できます。ユーザーがどのデバイスでLPを閲覧するかは分からないため、レスポンシブデザインにしておけば、すべてのデバイスに対応可能です。

レスポンシブデザインにしていない場合、次のような不具合が想定されます。

• A. パソコン用のLPしか制作せず、スマホで閲覧するユーザーに対応できないのLPにアクセスした
• B. パソコン用・スマホ用の両方のLPを制作したが、スマホユーザーがパソコン用のLPにアクセスした

Aのケースは、レスポンシブデザインに対応しないLPを、1つだけ制作したときに起こります。パソコンで閲覧するユーザーが多いだろうと見込み、パソコン用のLPしか制作しないでいたところ、実際はスマホでもアクセスするケースが多かったということもあるかもしれません。

このような場合、スマホユーザーは読みにくさを感じて、すぐに離脱してしまうでしょう。せっかくのアクセスを無駄にしてしまうことになり、商品販売を目的としたLPなら利益獲得の機会を取りこぼすことになります。

Bのケースは、レスポンシブデザインに対応しないLPを、2つ以上制作したときに起こります。パソコン用のLPを制作したとしても、そのLPが常にパソコンで閲覧されるとは限りません。パソコン用のLPのほうがスマホ用のLPよりも検索順位で上位に表示されるなら、スマホでパソコン用のLPにアクセスしてしまうことも十分に想定されます。

このような場合でも、スマホユーザーは読みにくさを感じるため、すぐに離脱すると考えられます。せっかくのアクセスを無駄にすることになり、利益獲得の機会を逸失することにもなりかねません。

しかし、レスポンシブデザインに対応したLPを1つのみ制作している場合は、このような不具合は起こりません。アクセスしたユーザーが各自のデバイスで心地良く閲覧できるため、早期離脱も回避できます。

少ない工数でLPを制作できる

パソコン用・スマホ用の2つのLPを制作する場合、単純に考えてもLP1つを制作する場合の2倍の工数がかかります。タブレット用のLPも制作するなら、工数は3倍になるでしょう。

しかし、レスポンシブデザインに対応したLPを制作する場合、対応していないLPを1つ制作するよりは工数が増えますが、LPを2つ、3つ制作するよりは工数は減ります。少ない工数で複数のデバイスに対応したいときも、レスポンシブデザインがおすすめです。

追記や修正が簡単にできる

デバイスごとにLPを制作した場合、追記事項や修正があるときは、LPごとに対応しなくてはいけません。例えば、商品価格を値上げしたときに、スマホ用のLPだけ修正対応したとしましょう。パソコン用のLPで表示されている価格とは異なることから、ユーザーに不信感を与えてしまうかもしれません。

しかし、レスポンシブデザインのLPなら、追記や修正の作業も1回のみで完了します。間違いが見つかったときや新しい情報を紹介したいときも簡単に対応できるため、管理しやすくなるでしょう。

LP（ランディングページ）をレスポンシブにするデメリット

LPをレスポンシブデザインにすることにはデメリットもあります。特に次の2点は注意が必要です。

• 手間がかかる
• スマホで読み込むときに時間がかかることがある

それぞれのデメリットを説明し、回避するための工夫についても紹介します。

手間がかかる

レスポンシブデザインに対応したLPは、対応していないLPを制作するよりは工数が多く手間がかかります。デバイスごとのLPを制作する場合に比べれば工数は減らせますが、元々LPを1つしか制作する予定がない場合であれば、レスポンシブデザインにすることによって、手間が増えることになるでしょう。

レスポンシブデザインに対応したいけれども、手間はあまりかけたくないという場合は、LP制作会社に依頼することをおすすめします。LP専門の制作会社ならレスポンシブデザインも依頼できるので、手間をかけずにマルチデバイスに対応したLPが完成します。

スマホで読み込むときに時間がかかることがある

レスポンシブ対応のLPには、スマホ用・パソコン用など複数のデバイスに向けたHTMLコードやCSSがデータとして含まれています。そのため、レスポンシブ対応していないLPよりもデータ量が多く、特にパソコンよりも処理能力が劣る傾向にあるスマホでは、読み込みに時間がかかってしまうことがあります。

また、画像もパソコン用の大きな容量の画像が含まれることになるため、スマホでは表示までに時間がかかってしまうこともあるかもしれません。とりわけ電波状況が良くないときや、ユーザーが3G・4Gなどの遅めの通信回線を利用してアクセスしているときは、表示までの時間が長引き、閲覧を諦めてしまう可能性があります。

ユーザーがどのような通信環境やデバイスでアクセスするか、事前に予測することはできません。常に快適にLPが表示されるためにも、画像のデータを軽量化し、掲載する情報をシンプルに整理しておきましょう。

レスポンシブ対応にする前に考慮したいこと

次の2つの要素を考慮しておくと、より効果のあるレスポンシブ対応型のLPを制作できます。

• ターゲット
• ホームページの有無

それぞれの要素と、LP制作への活かし方について見ていきましょう。

ターゲット

まずは、制作するLPのターゲットを明らかにしておくことが不可欠です。例えば、洗顔フォームを販売するLPであれば、ターゲットは個人となります。個人ユーザーはスマホからのアクセスが多いと考えられるため、スマホで閲覧しやすいように画像を軽量化したり、画像の数を減らしたりできるかもしれません。

一方、勤怠管理システムや請求書制作サービスなどは、ターゲットが法人などの事業者です。事業者が自社に必要なサービスなどを探す場合、スマホよりもパソコンを使うことが多いことが想定されます。画像のデータ量が多く、枚数も多くても、特に表示には影響を与えないでしょう。

ホームページの有無

Web上で紹介されている商品・サービスを購入する場合、その商品・サービス自体が信頼できるものかという点だけでなく「誰が提供しているのか」という点も気になる方は多いことが想定されます。安心して購入してもらうためには、提供者側の情報も掲載しておきましょう。

すでにホームページを開設している場合であれば「会社情報」としてリンクを貼っておきます。ホームページを制作していない場合は、会社を簡単に紹介するコーナーを作っておきましょう。

レスポンシブ対応したLPを作るときの注意点

レスポンシブデザインにすることで、マルチデバイスに対応するLPを制作できます。しかし、LPとしての機能性が向上しても、LP本来の目的、例えば商品・サービスの売上増を実現できないのであれば良いLPとは呼べません。

レスポンシブ対応し、なおかつLP本来の目的を実現するためには、次のポイントに注意しましょう。

• 適切な場所にCTAを配置する
• ボタンやリンクの配置を工夫する
• テキストの量を調整する
• 画像の量を調整する
• ファーストビューにこだわる
• 入力フォームを最適化する
• 効果検証と改善を定期的に実施する

それぞれのポイントについて説明します。

適切な場所にCTAを配置する

LPは、購入意思決定までの流れに沿って制作します。

ファーストビューでユーザーの共感を集め、具体的に悩みを紹介し、悩みを解決するにはどのような商品・サービスが必要かを説明し、自社商品・自社サービスの紹介につなげます。続けて、実際に利用している方の声やよくある質問なども紹介して、ユーザーの購入意欲を高めるのが基本的なスタイルです。

そのため、通常は最後の部分にCTA（Call to Action、購入ボタンや問い合わせボタンなどのアクションにつながるボタン）を配置します。しかし、ユーザーによっては早い段階から購入を決意していることもあるため、最後だけにCTAを配置するとユーザーは不便に感じるでしょう。

また、ユーザーの中には、後で購入を決意してLPに戻ってくる方もいると考えられます。LPの最後にしかCTAがないと、最後までスクロールするのが面倒で購入をやめることもあるため、せっかく高まったユーザーの購入意欲を取りこぼすことにもなりかねません。

ユーザーの購入意欲を見逃さないためにも、適切な場所にCTAを配置することが大切です。少なくとも複数の場所にCTAを配置し、ユーザーが購入しやすい環境を作っておきましょう。

ボタンやリンクの配置を工夫する

スマホで閲覧する場合、ボタンやリンクの距離が近いと、誤クリックにつながることがあります。

例えば、ボタンを押したいのに何度もリンクのほうをクリックしてしまうと、ユーザーがストレスを感じて離脱してしまうかもしれません。ユーザーがストレスを感じずにLPを閲覧できるように、ボタンやリンクの配置は工夫しておきましょう。

テキストの量を調整する

テキスト量が多いと、ユーザーは読みづらく感じることがあります。特にスマホではスクロールする量が増えるため、ユーザーに負担を与えてしまいます。

とはいえ、情報量が少ないLPでは、ユーザーに必要十分な情報を提供できません。また、ユーザー側も購入意思を固めにくいでしょう。情報量を多く、なおかつテキスト量を減らすためにも、図や写真などを利用してユーザーが直感的に理解できるように工夫しましょう。

画像の量を調整する

テキスト量を抑えて情報量を増やすには、図や写真などの画像を使うことが不可欠です。しかし、あまりにも画像の量が多いと、スマホで表示されるまでの時間が長引いてしまうことがあり、ユーザーの離脱を招きかねません。

短時間で最後まで読めることを最優先し、画像の数とデータ量を適正に調整するようにしましょう。

ファーストビューにこだわる

レスポンシブデザインに限ったことではありませんが、LPのファーストビューは、成果に直結する非常に重要な要素です。ほとんどのユーザーがアクセスした瞬間に「このページを見るかどうか」を判断するため、ファーストビューが魅力的でなかった場合、せっかくのアクセスを取り逃すことになります。

LPを制作した後に、スマホやパソコンなどの対応デバイスの画面で実際に見て、最適かつインパクトのあるファーストビューになっているか確認することが必要です。あまり魅力的でないと思われるときは、ファーストビューの構成要素（画像、キャッチコピー、デザインの配色など）を分析し、最適なものに調整していきましょう。

入力フォームを最適化する

これもレスポンシブデザインに限ったことではありませんが、入力フォームに記入する情報が多いと、最後の最後で顧客を取り逃すことにもなってしまいます。

特にスマホでは、大量の情報を記入するのは骨が折れる作業になるため、ユーザーに多大な負担を強いることにもなりかねません。最低限の情報で問い合わせや注文ができるように、入力フォームを最適化しておきましょう。

関連記事：EFO対策とは？実施すべき15の施策と期待できる効果

効果検証と改善を定期的に実施する

すべてのWebページは、効果検証と改善を定期的に実施することが必要です。特にLPのように数字による目的（売上増、問い合わせ増）が明確なWebページでは、効果検証と改善は目的達成のために不可欠な要素です。定期的に売上や問い合わせの変化を調べ、問題点を洗い出し、改善策を実施するという過程を繰り返し、目的を到達できるページへと育てていきましょう。

Webページの効果を検証するときには、ユーザーの流入経路やページ内の滞在時間・離脱ポイントなども分析することが必要です。デバイスによって流入経路なども異なると予想されるので、丁寧に調査し、結果を改善に反映しましょう。

レスポンシブデザイン以外のスマホ対応

インターネットで商品やサービスを購入するとき、スマホを利用する方が増えています。パソコンのように立ち上げる必要がなく、また、スマホに電子マネーを入れている方ならワンクリックで決済できるため、今後もスマホでの購入が増えると考えられます。

このような事情から、LPを制作するときは、スマホユーザーを意識することが必要です。レスポンシブデザインでもスマホ対応ができますが、それ以外にどのような方法があるのか見ていきましょう。

セパレートURL

セパレートURLとは、デバイスごとにURLを作成することです。デバイスに合わせて最適化したデザインにできるため、スマホはテキストの分量を少なめにして、パソコンは多めといった調整も可能です。

しかし、同一内容で異なるURLを作成すると、検索エンジンに重複コンテンツと判断され、評価が下がることもあります。各LPに「アノテーション・カノニカル」を設定し、重複コンテンツと判断されないようにしておきましょう。

なお、アノテーション・カノニカルとは、デバイス別に対応したURLが存在していることを検索エンジンに伝えることです。headのセクション内に、特定のコードを記入して実行します。

ダイナミックサービング

ダイナミックサービングとは、1つのURLにHTMLを2つ用意する方法です。ユーザーが使用するデバイスによって別々のLPが表示されるため、URL自体は1つのみです。検索エンジンに重複コンテンツと判断されるリスクが少なく、アノテーション・カノニカルの設定も不要になります。

ただし、ダイナミックサービングの制作作業は複雑で、修正や追加の際にもパソコン用とスマホ用のHTMLファイルを、別々に更新しなくてはいけない点に注意が必要です。管理の手間を簡便化するなら、レスポンシブデザインのほうがよいでしょう。

ターゲットに合うLP（ランディングページ）を作ろう

パソコンにもスマホにも対応し、なおかつ管理作業が簡単なLPをめざすのであれば、レスポンシブデザインが最適です。通常のLPを制作するよりは工数は増えますが、パソコン・スマホ別々のLPを制作するよりは工数が減るため、手間をかけずにマルチデバイスに対応できるようになります。

レスポンシブデザインに対応したLPの制作をお考えの方は、ぜひお気軽にクロスバズへご相談ください。

クロスバズのLPはすべてレスポンシブ対応で制作していますので、パソコン・スマホを問わず、常にユーザーに最適化された状態で表示されます。また、表示速度にもこだわっているため、快適に閲覧していただけるLPの制作が可能です。

また、クロスバズでは丁寧なヒアリングから競合分析を行い、成果の出るランディングページを制作することにこだわっています。相談や見積もりは無料ですので、ぜひお気軽にお問い合わせください。

バズLPの詳細はこちら