スマホ向けLP制作で注意すべき10のポイント

LPを制作・運用においては、よくある失敗を防ぎ、確実に成果を出すために押さえておきたいポイントがあります。特に、スマホ向けLPを制作する場合、スマホ向けならではの注意すべきポイントがあります。

本記事では、スマホ向けLPを制作・運用してリード獲得をしたいと考えているWebマーケティングの担当者に向けて、スマホ向けLP制作における注意点を解説します。

• スマホ向けのLPを制作するメリット
• スマホ向けLP制作で注意すべき10のポイント
• 担当ディレクターからのアドバイス
• ポイントを押さえて着手しよう

スマホ向けのLPを制作するメリット

日常生活において、インターネットを利用する際に使う端末はスマートフォンが主流です。スマホでのインターネット利用率が高いということは、スマホでLPが閲覧される可能性が高いということです。

つまり、スマホ向けのLPを制作することで、より多くのユーザーにより快適にLPを閲覧してもらえます。そして、快適な閲覧環境はページ離脱を防ぎ、CVR向上につながるというメリットがあります。

スマホでのインターネット利用率の高さは、日々の生活を振り返っても分かることですが、データでも示されています。

総務省が毎年発表している情報通信白書の令和3年版によると、2020年のインターネット利用率は83.4%となっていますが、そのうちスマホによるインターネット利用率は68.3%となっており、パソコンやタブレット型端末などと比較してももっとも利用率が高くなっています。

スマホ向けLP制作で注意すべき10のポイント

スマホ向けLP制作において特に注意すべき点をまとめました。なお、LP全般におけるポイントは、以下の記事も参考にしてください。

LP改善のチェックポイント１５選！改善に役立つツールも紹介

1. 自社の商材と顧客層を分析する
2. スマホに適したデータ設定を行う
3. スマホで分かりやすいファーストビューを作成する
4. スマホでタップしやすいCTAを設置する
5. 電話でのコンバージョンも意識する
6. スマホで入力しやすいフォームを設置する
7. スクロールや拡大の必要性を最小にする
8. スマホで読みやすくなる機能を活用する
9. 表示速度をできるだけ速くする
10. スマホとPCの違いを分析する

前述の通り、インターネット利用はスマホが主流となっていますが、LPの閲覧が主にスマホで行なわれるかどうかは、商材や顧客層によって変わります。

特にBtoB商材は、仕事中にLPを閲覧するユーザーが多い商材です。そのため、BtoC商材に比べると、パソコンの利用率が高いといえます。

とはいえ、通勤中や休憩時間などにスマホで仕事に関する情報を調べることも多いでしょうし、仕事用のスマホが支給されている場合、出先でスマホを使ってさまざまな情報を検索することも多いと考えられます。

自社の商材と顧客層を分析した上で、スマホでのLP閲覧も多いと判断できれば、スマホ向けLP制作に着手しましょう。

なお、パソコンでのLP閲覧がメインだがスマホ利用もあるという場合は、端末によってデザインのサイズが調整されるレスポンシブデザインのLPが向いています。

2.スマホに適したデータ設定を行う

スマホ向けLPは、スマホに最適化したページサイズ・画像サイズ・フォントサイズで制作しましょう。

ページサイズは、横幅が重要です。スマホ画面の大きさは機種によって異なり、年々大きくなる傾向にあります。

さまざまな機種のサイズを参考にすると、スマホ向けLPの横幅は最低でも320px以上で、375pxt程度が目安と考えられます。また、ファーストビューをスマホでスクロールせずに見れるようにするには、縦幅を600px以内に収めたほうが良いといえます。

ただし、今後主流になる機種のサイズによって、最適なページサイズも変わってきますので適宜見直しをしてください。

なお、画像サイズはページサイズの2倍にすることで、高解像度ディスプレイでもぼやけることなく掲載されます。

フォントサイズは、本文が14～16px、タイトルが18～24pxが使われることが多く、実際にスマホで見やすいサイズとなっています。

3.スマホで分かりやすいファーストビューを作成する

ファーストビューとは、Webページを訪問したユーザーの目に最初に入る部分です。広告などからLPを訪れたユーザーがそのままLPの閲覧を続けるかどうかは、ファーストビューで決まります。

上画像は、ディレクターバンクの「HubSpotで作るLP制作プラン」のLPのファーストビューです。LPのファーストビューは、「画像＋キャッチコピー＋CTA」で構成されるのが基本です。

CTAとは、「○○に申し込む」「資料をダウンロードする」など、ユーザーがCVに至るアクションを起こす際にクリックする箇所を指します。

スマホ向けLPでは、スマホの画面でも見やすく分かりやすいように、ファーストビューを作成することが重要です。あれもこれもと詰め込みすぎてしまうと、特にスマホの画面では見にくくなってしまいます。

商品やサービスの利用イメージがわく画像と、ユーザーの課題・悩みの解決につながるキャッチコピーを、シンプルに作成しましょう。その上で、スマホで閲覧したときに見にくさがないか確認します。

4.スマホでタップしやすいCTAを設置する

CTAは、その色やフォント、文言ひとつでCVRが変動するため、LP制作において重要なポイントとなります。

CTAの文言は、「お申し込みはこちら」「資料請求はこちら」よりも「○○に申し込む」「資料をダウンロードする」のように、CTAをクリックすることでユーザーが何を行うことになるのかが分かりやすい、動詞表現のほうが良いといわれます。

さらにスマホ向けLPにおいては、CTAのデザインや配置箇所などが、スマホ画面でタップできると認識してもらいやすいこと、そしてタップしやすいことも重要です。

PCの画面で制作していると見落としやすい箇所なので、実際にスマホ画面でCTAがどのように見えるのか、タップのしやすさはどうなのか確認しましょう。

5.電話でのコンバージョンも意識する

LPのCVポイントには、フォームを設置することが多いのですが、自社の体制において電話対応が可能であれば、スマホ向けLPでは電話でのCVも検討しましょう。

スマホでLPを閲覧する場合、スマホの小さな画面でフォームに入力するよりも、そのまま電話をかけられたほうが早くて便利と感じるユーザーもいます。

電話でのCV獲得を行う場合、電話番号を掲載するとともに、「電話で問い合わせをする」というふうな、タップするとそのままスマホで発信できるCTAを設置します。また、電話対応において必要な情報を聞き出し、フォームで獲得したCVも含むデータの一元管理ができる体制を整えたいところです。

6.スマホで入力しやすいフォームを設置する

LPのフォームは、ユーザーにとって入力しやすいことが非常に重要です。フォーム入力をしているユーザーはCVに至る可能性が非常に高いユーザーであり、ここで離脱されることは大きな機会損失になります。

入力のしやすいフォームにするには、以下のポイントを押さえます。

• 入力項目を必要最低限に絞る
• 入力項目に必須・任意を記載する
• 入力エラーがあると分かりやすく表示される
• 漢字→カナ、郵便番号→住所、半角→全角などが自動入力・変換される

スマホ向けLPでは、スマホの小さな画面で入力を行うため、さらなる注意が必要です。入力項目はできるだけ必須項目のみにしぼり、入力欄のサイズや項目の説明など、スマホでも操作しやすく分かりやすくなっているか、実際に試してみましょう。

7.スクロールや拡大の必要性を最小にする

LPは縦長1枚のWebページで、下へスクロールしながら閲覧されるのが基本です。ターゲットとするユーザーの思考・感情の変化に沿いながら、ユーザーの課題・悩みをLPで紹介している商材によって解決できると納得してもらえるようコンテンツを構成していきます。

ただ、スマホ向けLPでは、LPを見るのにあまりにスクロールが必要になると、ユーザーが面倒だと感じ、離脱の可能性が高まります。そのため、各コンテンツにおいて、伝えたいことを簡潔に表現して、スクロールをなるべくせずにLPを閲覧できるようにしましょう。

また、LPでは表やグラフが活用されることもありますが、スマホ向けLPでは、それがスマホ画面で見やすいかどうか注意しましょう。画面を拡大しないと詳細が分からないような表やグラフは、やはりユーザーに面倒だと感じられるおそれがあります。

LPの構成については以下の記事も参考になります。
BtoBのランディングページの基本構成と制作依頼の進め方

8.スマホで読みやすくなる機能を活用する

スマホ向けLPでページが長くなる場合におすすめなのが、「アコーディオン機能」です。アコーディオン機能では、見出しだけ残してコンテンツを折りたたみ、シンプルに見せることができます。

これにより、スマホでLPを閲覧するときに必要なスクロールを減らせます。折りたたまれたコンテンツを読みたいときは、見出しをタップすれば折りたたまれたコンテンツが表示されます。

また、ページ内リンクを活用してユーザーが知りたい情報をすぐに提供することもできます。たとえば、料金を知りたいなどのユーザーニーズが強いときは、ファーストビューの下に料金説明へのページ内リンクを貼るなどします。

9.表示速度をできるだけ速くする

LPの表示に時間がかかると、ユーザーがファーストビューさえ見ずに離脱してしまう可能性があります。移動中や隙間時間などスマホがよく利用される状況を考えると、スマホ向けLPではより表示速度の速さが求められると考えられます。

Googleが発表した「Top 12 marketing insights from 2017 to carry you into 2018」によると、モバイル サイトの読み込みに3秒以上かかると、53%のユーザーが離脱するというデータもあります。

表示速度に大きく影響する要因のひとつが、画像のファイルサイズです。サイズの大きい画像を多用すると、LPの表示速度は遅くなります。目安として、画像ひとつあたり上限200KB程度として、できるだけLPのデータ容量を小さくしましょう。

Webページの表示速度はツールで測定でき、Googleの無料のツール「PageSpeed Insight（ページスピード インサイト）」などがよく利用されています。

10.スマホとPCの違いを分析する

スマホ向けLPとPC向けLPの両方を運用する場合、セッション数やCV数、訪問ユーザーの属性や行動などをそれぞれに分けて分析します。そして、スマホ向けとPC向けで違いがあれば、それを明確にしましょう。

スマホ向けとPC向けで明らかな違いが出れば、どちらか片方のLPしか運用していなかったらアプローチできなかったユーザーとのつながりを作れたということになります。そして、スマホとPCのユーザー層ごとに、効果的なコンテンツやアプローチの仕方の違いも明らかにできるかもしれません。

こういったデータは、LP運用以外にも活用できます。せっかくスマホ向けLPを制作するなら、さまざまなデータを分析して有効活用しましょう。

担当ディレクターからのアドバイス

西原 小晴さん（セールスライター／マーケティングディレクター）

スマホ専用は今やマストと言えます。少し前までは、LPはパソコンメインで作られていましたが、今はスマホメインで作る会社も多く見受けられます。むしろ、「スマホ向け」でないと、時代遅れの企業とユーザーから判断される恐れもあります。

ライティングには３つのnotが存在します。「読まない」「信じない」「行動しない」です。

パソコンが横長なのに対し、スマホは縦長になるため、見える文字数や印象が変わります。人はパッと見2秒で「続きを読むか読まないか」を判断するため、可読性・判読性の高いフォントの使用も心がけましょう。読むことがストレスになると、人は続きを読みません。「読まない」のnotを避けるためには、文字数だけでなく、デザインの工夫も必須です。

また、人がパッと見で読める文字は13文字と言われており、Yahoo!のトップニュースの文字数が13文字が多いのはここに起因しています。どうしても届けたいメッセージ（キャッチコピー）は13文字にすることも効果的かもしれませんね。

スマホによって見え方が異なるため、iOS、Andoroidなど、機種によって見え方をチェックすることも大事です。些細なことかもしれませんが、企業という「プロ」で見られる以上、スマホ・PCではキレイに見えるけど、タブレットでは崩れて見える、となると、信用度が落ちることもあり得るからです。

【ディレクタープロフィール】
セールスライター／マーケティングディレクター
西原 小晴
京都府立大学農学部出身。前職は業界3位の印刷会社にて営業、設備管理、ISO、化学物質管理のシステム開発&管理を行う。退職後、化学・建設・環境法規制などの知識を活かして大手企業のコンテンツマーケティング記事の企画、編集、執筆を行う。
現在はコンテンツ制作、リードナーチャリング、セールスライティングをメインとするWEB施策全般を行うコンテンツマーケティングディレクターとして活動中。

【事例紹介】BtoBの営業支援会社のコンテンツマーケティング支援

ポイントを押さえて着手しよう

本記事では、LPの制作・運用におけるポイントのなかでも、特にスマホ向けLP制作で注意すべきポイントを解説しました。これらを押さえることで、スマホ向けLP制作を行いやすくなるはずです。

ポイントは分かったものの、スマホ向けLPが自社に合っているのか分からない、運用面が不安といった場合、お気軽にご相談ください。

ディレクターバンクの「LP制作＆広告運用代行サービス」では、200名を超える多様なWebマーケティング人材の中から御社に最適な人材をアサインして、成果を出すためのLP制作と広告運用をサポートします。