LPのレスポンシブ対応は慎重に！ メリット・デメリットを解説｜Webサイト制作 / CMS・MAツール｜LeadGrid（リードグリッド）

スマホユーザーがPCユーザーを上回る昨今において、LP（ランディングページ）のスマホへの最適化は必須と言えます。

スマホへの最適化と言えば真っ先にレスポンシブ対応が挙げられますが、レスポンシブ対応のLPには問題点もあるため、事前の検討が必要です。

そこで今回はLPとレスポンシブ対応の特徴や相性を説明し、スマホ向けLPに求められるポイントを解説します。

そもそもの LPの制作方法をあらためて確認したい方はランディングページ制作・最適化マニュアルも合わせてお役立てください。

ランディングページ制作・最適化マニュアル|Webサイト制作・CMS開発｜LeadGrid

goleadgrid.com

レスポンシブ対応とは

レスポンシブ対応とはPCやスマホ、タブレットなどデバイスに応じて画面のレイアウトを最適化させるデザインを指します。

PCのデザインをスマホで見たとき、同じデザインなら文字が小さすぎて読みにくくなります。

拡大やスクロールをすれば問題ありませんが、ユーザーはその手間を面倒と感じサイトから離脱してしまう可能性が高いでしょう。そのような事態を避けるためにレスポンシブ対応を行い、デバイスごとにサイズを最適化されたデザインを表示させます。

Googleもユーザーやクローラーの利便性が上がることから、レスポンシブ対応を推奨しています。

関連記事：レスポンシブ対応とは？5つの対応方法や注意点をWeb制作会社が解説

ただしLPのいくつかの特徴はレスポンシブ対応にすることで生かせなくなるため、導入は慎重に検討する必要があるでしょう。

LP（ランディングページ）の特徴

LPには最初に訪れたページを指す広義のLPと、申し込みや問い合わせを目的とする狭義のLPがあります。当記事では広義のLPではなく後者の狭義のLPについて解説します。

LPの主な特徴は以下の通りです。

1. 縦長の1ページで構成されている
2. インパクトのあるデザインでユーザーの目を引く
3. 1ぺージで完結するためSEOは不利なケースが多い
4. 離脱を防ぐためCV（購入や申込みなどの成約）と関係のないリンクは設置しない

LPの特徴に鑑みるとレスポンシブ対応との相性はあまり良くないことがわかります。

たとえばレスポンシブ対応でインパクトのある演出は難しく、デザインは単調になりやすい特性があります。

またレスポンシブ対応はSEOに有利と言われていますが、LPはSEOとの関連性が低いため恩恵は受けられません。

LPとレスポンシブ対応の相性について詳しくは、後述のメリット・デメリットで詳しく解説します。

LPの種類でレスポンシブ対応の価値は変わる

LPにはよく使われている縦長1ページ型以外に複数のページで構成されるサイト型LPがあります。

サイト型LPは別名「サービスサイト」ともいい、複数のページによりCVへ誘導するタイプのLPです。サイト型LPは1ページ型LPに比べるとデザインは控えめなケースが多く、通常のホームページに近いイメージです。

したがってサイト型LPはレスポンシブ対応との相性はそれほど悪くないと言えるでしょう。

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

これまで1ページ型LPとレスポンシブ対応は相性が良くないと述べてきましたが、メリットもあるため一概に否定はできません。とくに作業面でのメリットは大きいと言えます。

メリットは以下の3点です。

• デザインの作業工数が少ない
• 修正や追記がしやすい
• URLが1つで済む

1. デザインの作業工数が少ない

さまざまなデバイスに対応するためには多くの作業が必要と思われがちですが、実際はパソコン用に作ったLPをベースにレイアウトの編集する作業となります。

個別にデバイスごとのコードを書く必要がないため、少ない工数で済みます。

2. 修正や追記がしやすい

レスポンシブ対応はひとつのHTMLファイルで作成することが多く修正や追記が簡単です。

一度の作業ですべてのデバイスに反映されるため、作業時間が短縮できます。

また、修正や追記の漏れを減らせるといったメリットも享受できるでしょう。反対に個別でLPを作ると修正や追記もそれぞれ手を加える必要があり、作業量は2倍3倍と増えていきます。

3. URLがひとつで済む

レスポンシブ対応をすればサイトを増やす必要がないため、URLはひとつで済みます。

デバイスごとにLPを作った場合、その分のURLが必要です。

URLが増えれば管理が大変になり、リンクの設置にミスが生じてしまう、SNSでPC用のページが拡散されスマホから見づらくなる、といった可能性もあります。

そういったケースでは機会損失につながるおそれがあるため、URLはひとつのほうが良いでしょう。

LPをレスポンシブ対応することで生じるデメリット

LPとレスポンシブ対応の相性が悪いと言われる主な理由は以下の3つです。

• デザインの自由度が低い
• 設計が複雑で工数もかかる
• スマホ表示ではページの読み込みが遅くなる

 1. デザインの自由度が低い

レスポンシブ対応でもっとも問題視されるのがデザインの制約についてです。

レスポンシブ対応ではひとつのHTMLで制作することからレイアウトや文字フォントなどに制限が生じるため、LPの特徴であるインパクトのある目立つデザインを作成しづらくなります。

スマホで見たときの訴求力のあるデザインとPCでみたときに訴求力のあるデザインを個別に考えられないため、思ったCV数とならない可能性があるのです。

2. 設計が複雑で工数もかかる

レスポンシブ対応はデザイン面で工数は少なくなるのですが、システムの設計・構築にかかる工数は増加します。

レスポンシブ対応を行うにはそれぞれのデバイスに対応したコーディングが必要になるためです。

個別のLPよりもシステムの設計・構築に工数がかかることから全体を通して作業が減るわけではなく、プラスマイナスゼロといったところです。

またレスポンシブ対応の設計・構築はスマホとPCを別に制作する場合に比べ複雑な作業を要するため、高い技術が求められます。

人的コストや外注コストが高額になるケースもあるでしょう。

3. スマホ表示ではページの読み込みが遅くなる

LPをレスポンシブ対応にすると、スマホ表示でページの読み込み速度の遅くなることが懸念されます。

原因はスマホ表示をするとき、PC向けに書かれたHTMLやCSS、JavaScriptなどを同時に読み込んでしまうためです。

高速の光回線であれば影響を受けにくいのですが、4Gなどのスマホ回線ではページ表示までのタイムラグが発生しやすくなります。

表示速度の低下はユーザーの離脱率に大きく関わってくるため、機会損失を招く恐れがあります。

スマホ向けLPにおいて効果を上げる10つのポイント

これまで解説してきた要因から、1ページ型のLPではPCとスマホでは別のLPを制作することがおすすめです。

ここからはスマホに最適なLPのポイントを10つ紹介します。

1. 目を引くファーストビュー

PCのLPと同様、スマホのLPでもファーストビューは非常に重要です。

心理学では最初に示された特性は印象に残りやすく、のちの評価に大きな影響を与えると言われています。

一度形成された印象はあとから払拭することが難しくなるため、ファーストビューで良し悪しが判断されるケースも多いでしょう。

したがってキャッチコピーやアイキャッチ画像などは、ユーザーの興味を引く魅力的なものにする必要があります。

2. 競合と差別化されたキャッチコピー

ありふれたキャッチコピーを使用すると、ユーザーは既視感から「どこかで見たかな」と興味を失い離脱する可能性があります。競合と違うことがはっきりとわかるキャッチコピーを付けて、差別化をはかることが大切です。

キャッチコピーはわかりやすく簡潔にし、メリットやベネフィットを組み込みましょう。

とくにベネフィットは重要で、ユーザーの求める未来をうまく表現できるかどうかで反応は大きく変わってきます。ファーストビューのキャッチコピーでユーザーの興味を刺激すれば、そのあとも読み進めてもらえる可能性が高くなるでしょう。

3. シングルカラムのスッキリしたレイアウト

スマホはPCに比べ画面が小さいため、すっきり表示できるシングルカラムが向いています。

2カラムや3カラムにしてしまうと文字や画像が小さくなりすぎて、流し読み行動をするスマホユーザーには不向きです。

詳しい情報や補足情報などはアコーディオンやタブを活用し、スマホでの読みやすさを重視しましょう。

4. 文字は少なく簡潔に

スマホユーザーは隙間時間に限られた時間の中で調べものをしている可能性が高いでしょう。

文字が多いと内容を理解するまでに時間を要するため、ユーザーに敬遠されがちです。

できるだけ文字を減らして簡潔な文章にまとめ、短時間で内容が理解できるようにしましょう。

5. 表示スピードを重視

ページの表示速度はユーザーの離脱率と密接に関わっています。

ユーザーは仕事や用事の合間の忙しい中でスマホを使っているケースも多いため、ページの表示速度が遅いとストレスを感じ別のサイトへ移る可能性もあります。

テストを繰り返し行い、表示スピードの低下につながる要因は排除するようにしましょう。

6. 結論ファースト

スマホユーザーは短時間で情報を得たいと考えるため、すぐに結論を求める傾向があります。

冒頭で商品のベネフィットを具体的に示すことでユーザーの期待値が上がり、結果的にCVへつながりやすくなるでしょう。

また単価の高くない商材やe-mailの登録など、深い検討を必要としない場合のLPであれば、冒頭部分に申し込みや問い合わせフォームを設置することは有効といえます。

7. ナビゲーションは最低限

スマホユーザーは片手でスワイプしながら読むことが多いため、画面をタップする動作はなるべく減らしましょう。ユーザーの関心がそれてしまうのを防ぐためにも、「問い合わせ」や「購入」以外のページへ遷移させる導線は避けたほうが無難です。

8. 画像や動画の多用は不向き

画像や動画はPCと同様、ユーザーの視覚や聴覚に訴えかける要素として有効ですが多用は禁物です。

なぜなら短い時間で情報を収集したいと考えるユーザーにとっては、情報を引き伸ばすための余計なものとして認識、高速でスクロールされてしまい訴求したい情報が伝わらない可能性があるためです。

また画像や動画が増えるに連れて、ページの読み込みに時間がかかるようになります。ユーザーの利便性を上げるためにも画像や動画は使いすぎないように注意しましょう。

9. CTAを1つに絞る

CTAとはCall To Action（コール トゥ アクション）の略で、「行動喚起」を指します。

今回のケースでは、LPに訪れたユーザーを設定したCVに向けて行動を促す行為のことです。

「お問合せ」や「お申しこみ」がCTAにあたります。

CTAが「お問合せ」「お申し込み」「ご購入」など複数になるとユーザーに迷わせてしまい、CVR（コンバージョン数／ページ訪問者数）が下がる可能性があります。「問い合わせ」を目的とするならCTAのボタンは「問い合わせ」のみにするなど、CTAを1つに絞りましょう。

なお同じ種類であれば、ボタンの数はテストをしながら増やすこともあります。

CVRが伸び悩んだ時はCVR改善チェックシートもあわせて活用することでスマホに最適化したLPにブラッシュアップできます。

CVR改善チェックシート|Webサイト制作・CMS開発｜LeadGrid

goleadgrid.com

10. 入力フォームの最適化

ユーザーが申し込みや問い合わせフォームまで進んでも、入力フォームが使いにくいと離脱する可能性があります。入力項目が多すぎてもユーザーは面倒と感じ、途中でやめてしまうケースも。

ユーザーが短時間で個人情報を入力しやすいように、項目数や自動入力などのサポート、入力必須項目などフォームを最適化することが重要です。

LPのCVを最大化できる方法を優先する

スマホページの最適化はレスポンシブ対応が主流になってきましたが、LPに関してはその限りではありません。CVRで考えるとPCとスマホで別のLPを用意したほうが良い結果につながるケースも多くあります。

どちらの方法が向いているのか、CVを最大化する観点で決めることが重要です。制作の費用を比較しながら、個別での制作の検討をしてみてはいかがでしょうか。

もしくは1ページ型のLPをやめ、レスポンシブと相性のいいサイト型LPとするのも一案です。サイト型LP（=サービスサイト）の制作であれば、CMSとしてLeadGridをぜひご検討ください。弊社のリード獲得に特化したSaaS型CMS「LeadGrid」ではレスポンシブデザインに対応しています。

またLPの最適化にあたり、LPのコピーや画像の差し替え、フォームの編集などを外部の制作会社や専門部署に都度依頼しなくても行える「見たまま編集」機能もあり、貴社のCVの最大化をサポートします。

詳しくはLeadGridサービスサイトのサービスサイト向け機能紹介ページや制作事例ページをご確認ください。