スマートフォン向けのランディングページを作成するには、何から始めればいいのでしょうか。Webデザイナー以外の方にとっては、ゼロから構成やデザインを決めるのはかなりハードルが高いはずです。他社のLPを参考にするのも良いのですが、ただ表面をなぞっただけでは「良いランディングページ」を作成できる可能性は低いでしょう。

ランディングページで重視するべきは、サイトを訪問したユーザーに、
「この商品なら安心して利用できそうだ」
「自分の悩みを解決してくれそうだ」
と、納得していただき、試してみようと思ってもらえる内容に設計できるか、という点です。

信頼感を醸成できて、かつ「あなたの課題に応えられる」ことがしっかり伝わるページ構成を目指す必要があるのです。

本記事では、初心者の方に向けて、スマホ向けランディングページ作成で失敗しないための10のポイントをご紹介します。

スマホ用ランディングページのデザインや作り方で悩んでいる方は、ぜひ参考にしてください。

スマホ向けランディングページ (LP) はなぜ重要なのか

スマホ用ランディングページの重要性を理解するには、昨今のインターネット利用者の動向と、オンライン集客に成功しているWebサイトの仕組みを知ることが不可欠です。まずは現状のインターネット利用者の動向を見ていきましょう。
 

インターネット利用者のうち約75%がスマホで検索している

総務省の通信利用動向調査によると、80歳以上の年代を除くすべての世代の人が、パソコンよりスマホを使ってインターネットを利用しています。

▼総務省通信利用動向調査(令和2年)

総務省通信利用動向調査

引用元:総務省 令和2年 通信利用動向調査 - 報道発表資料

海外のソフトウェア会社の調査によると、日本全体のインターネット検索のうちスマホ利用率は約75%を占め、デスクトップ利用率は約25%にとどまるという調査結果も出ています。日本は世界各国と比較しても、インドに次いでスマホの利用率が高い国です。

また2020年には、検索エンジンのGoogleが「モバイルファースト」から「モバイルオンリー」に移行する予定であると発表。スマホ向けのランディングページが無いことは、ビジネスを推進する上で悪影響を及ぼす可能性が高いといえます。

このように、モバイル端末での検索が過半数を占める今は、スマホ向けのランディングページを作ることは必須だと言えるでしょう。ただし、業界や商材によっては、依然としてデスクトップ利用者の割合が多い分野も存在します。下記の分布データをご覧ください。

スポーツやフィットネス、医療用品、ファッションの分野では、インターネット利用者の7割以上がスマホで検索しているのに対し、B2B取引ではデスクトップ検索が約半数(デスクトップ54.5%、モバイル45.5%)を占めています。

このように、業界によって割合は異なりますが、それでも約半数はスマホで検索でしていることがわかります。スマホ用のページが無いサイトからは読者が離脱してしまう可能性があることは十分に理解しておきましょう。
 

スマホ用ランディングページの作成で注意すべき10のコツ

ここからは、さっそくスマホ用ランディングページの作成時に注意すべきポイントを紹介していきます。今回は、特に注意したい重要なポイントを10個ピックアップしました。
 

①「ひと目で興味を引く」ファーストビューを設計する

人の第一印象は、会った瞬間の最初の約3秒で決まると言われています(メラビアンの法則)。この法則が、ランディングページのファーストビューにも適用されるのです。

「ファーストビュー」とは、訪問者がページにアクセスしたときに、スクロールしなくても表示される領域のことです。一般的に、ファーストビューを見てページから離脱してしまうユーザーの割合(直帰率)は、ランディングページで7割以上、コーポレートサイトで4~6割程度と言われています

そのため、ファーストビューはLPのデザインにおいて最も重要なポイントであると言えるでしょう。ここには、サイトに訪れたユーザーの興味を惹くような情報を載せる必要があります。そのために役立つのが、「キャッチコピー」と「アイキャッチ画像」です。
 

他社との違いの分かるキャッチコピー

ユーザーがタイトルを見て、そのページを閲覧するかどうか判断するまでの時間は約3秒。その一瞬で、他社との違いに気付いてもらえるようなキャッチコピーにしなければいけません。

そのため、見出しとなるタイトルキャッチコピーは、簡潔で説得力のあるものにしましょう。具体的には、「信頼性(受賞歴や満足度など)」と「読者が得られるベネフィット」が一目で伝わるものにすべきです。
 

ユーザー心理に合ったアイキャッチ画像

アイキャッチ画像がユーザー心理に合っていないと、ユーザーの読むモチベーションを低下させてしまいます。

ファーストビューに使用するアイキャッチ画像には、まずターゲットとなるユーザー層と合致する人物の写真を載せるのが基本です。東京に住む20代前半の女性をターゲットにするなら、若い日本人女性の写真を使うなどです。サイトを訪れた方が自分事と捉えられる画像選定を心がけてください。

また、「そのサービスを利用した後の自分がどうなっているのか」「どのような感情を持つのか」をイメージできる写真やイラストを使用するとより効果的です。
 

②ユーザーが知りたい情報を簡潔にまとめる

スマホのランディングページでは、とにかく無駄な情報を省く必要があります。文章は簡潔にして、必要な情報をできる限り簡潔に表示させるようにしましょう。インターネット検索の特性上、読者はじっくりと文章を読まずに、飛ばし読みをする傾向があります。そのことを意識して、下記の3つのアイディアも活用してください。
 

不要なナビゲーションは排除

スマホLPは片手で持ってスワイプしながら読む人が多いため、画面をタップしてページ遷移させる導線は適切ではありません。ユーザーの注意が散漫にならないようにするには、ページ内に出来る限り無駄なリンクを含めないことが大切です。
 

ファーストビューに入力フォームを設置

入力フォームは、ユーザーがページのどこを閲覧していたとしても、すぐに移動できるような位置に設置しましょう。固定ヘッダーなどを利用して、スクロールダウンに合わせてフォームが移動するように設計する方法もあります。
 

アコーディオン機能の活用

ユーザーが知りたい情報のみを読み進められるように、トピックや見出しをタップすると詳細が開く「アコーディオン機能」なども活用すると良いでしょう。過剰なスクロールや、入力フォームを探す手間は、ユーザーにとってストレスになります。

反対に、自分が知りたい情報が分かりやすく表示されているランディングページには、信頼感や期待感が高まるはずです。
 

③構成には「AIDCAS」や「PASONA」の法則を活用する

ランディングページの役割は、シンプルに言えばCTA(Call to Action)ボタンをタップしてもらえるよう誘導し、フォーム入力に繋げることです。一連のアクションを促すには、人間の購買意欲に直接つながるとされる「快楽」と「痛み」を用いた行動分析学の「AIDCAS」や「PASONA」の法則がヒントになるでしょう。
 

AIDCAS(アイドカス)の法則

AIDCAS(アイドカス)は、近年注目されている「カスタマーサクセス」の考え方を取り入れた最新のフレームワークです。人間の「快楽」の欲求に訴える行動プロセスを利用しているのが特徴です。

【AIDCAS(アイドカス)の頭文字の意味】

Attention 注意
Interest 興味関心
Desire 欲求
Conviction 確信
Action 購入
Satisfaction 満足

「AIDCASの法則」で構成を組むためには、まずはユーザーの注意を引き、興味関心を持ってもらって欲求を刺激し、商品やサービスの信頼性を理解して納得した上で購入、という流れを作ります。ここまでを「AIDCA(アイドカ)の法則」と呼びますが、購入した後の「顧客満足」まで考えるのがAIDCASの法則です。
 

PASONA(パソナ)の法則

ユーザー心理に沿って最適な情報を最適なタイミングで伝えるための方法として、「PASONAの法則」があります。

【PASONA(パソナ)の頭文字の意味】

Problem 問題提起
Agitation 扇動(問題点をあおりたてる)
Solution 解決策
Narrow down 絞り込み
Action 行動

こちらは「AIDCASの法則」とは逆に、人間が持つ「痛みを避けたい」という欲求に訴える行動心理を利用しています。読者がまだ気付いていない潜在的な問題に気付きを与え、その解決策を提案して行動を促す方法です。

このように、スマホ用ランディングページの構成は、ユーザー心理に沿って組むことが大切なのです。
 

④スマホに最適化したデータを設定する

スマホ向けのランディングページを制作する際は、ページサイズ・画像サイズ・フォントサイズを適正な数値に設定しましょう。
 

スマホに適したページサイズ

スマホのディスプレイサイズは機種によって異なりますが、横幅320px~640px、縦幅480px~960pxが主流の大きさです。すべてのデバイスに対応するのは難しいかもしれませんが、人気のあるモデルや最新世代の画面サイズを参考にすると良いでしょう。
 

スマホに適した画像サイズ

スマホ用ランディングページに使用する画像の大きさは、ページサイズの横幅のおよそ2倍の解像度で作成することをおすすめします。多くのスマホは高解像度ディスプレイを搭載しており、そのままの解像度では画像の輪郭などがぼやけてしまうためです。

現時点では、スマホ用LPで一般的な横幅640~750pxを目安に画像サイズを設定すれば問題ありませんが、デバイスの性能向上に合わせて随時見直すようにしてください。
 

スマホに適したフォントサイズ

スマホ表示に最適なフォントサイズは、タイトルで18~24px、本文で14~16pxが主流となっています。こちらも、各デバイスの画面サイズによって微調整が必要です。
 

⑤コンバージョンポイントは1つに絞る

ランディングページのコンバージョンは、問い合わせ・資料請求・注文のいずれかに絞りましょう。1つのLP上で複数のオファーを提示せず、1つの目的に限定します。ユーザーを惑わせてしまう要素はできる限り排除しましょう。
 

⑥CTAは分かりやすく目を引くデザインを意識する

CTAとは「Call To Action(コール トゥ アクション)」の略で、読者の注意を引きつけてアクションを促すための仕組みを指します。コンバージョンの手前に位置するため、ランディングページでも特に重要な要素と言えます。先にもお伝えしましたが、スマートフォン向けランディングページは流し読みする人が多いので、重要な情報を目立たせるための対策が必要です。

例えば、CTAボタンにページ上の他の要素とは対照的な色を使用したり、「送信する」「ダウンロードする(無料)」など、タップするとどのようなアクションに繋がるかわかりやすい単語を用いたりと、訪問者に何をしてもらいたいのかを明確に表現する手法が有効です。
 

⑦入力フォームは簡潔に

ユーザーが入力フォームにたどり着いた時、あまりに詳細な情報を入力しなければいけないとなると、ここでもページから離脱する可能性が生まれます。入力フォームには、最低限必要な情報だけを入力してもらうようにして、コンバージョンのハードルを下げるのが基本です。もしスマホ用ランディングページを作る目的が「見込み客の創出」なのであれば、氏名とメールアドレスといった情報だけで十分でしょう。
 

⑧サンキューページの用意

サンキューページとは、ユーザーがフォームへの入力を完了した後に表示されるページを指します。

サンキューページには、主に以下の役割があります。

  1. 商品やサービスに関心を寄せてくれたことへの感謝を伝える
  2. 関連性の高いコンテンツの紹介
  3. 今後の顧客化を促進するための土台作り

自社に興味関心を持ってくれた方と、その後の良好な関係を築いていくきっかけとなるため、サンキューページの作成にも力を入れましょう。
 

⑨A/Bテストの実施

スマホ用ランディングページができたら、実際にどれだけ成果に繋がるのかを確認するためにA/Bテストを行いましょう。キャッチコピーやCTAの配置が適正かどうかを判断するには、AとBの2つのバージョンを用意して、どちらのパフォーマンスが優れているかを検証する方法が有効です。

A/Bテストを実施する際は、一度に複数の箇所に変更を加えず、「見出しだけ」「画像だけ」など、1点ずつ確認していくのがポイントとなります。詳しいA/Bテストの方法については、以下の記事を参考にしてください。

⑩ヒートマップ・Googleアナリティクスでユーザーの反応を可視化

スマホ用のランディングページは作成・公開して完了ではありません。その後の運用・分析・改善こそが重要です。ランディングページの分析には、ヒートマップやGoogleアナリティクスデータを活用すると良いでしょう。
 

ヒートマップ

ヒートマップは、ユーザーのページ内での反応を可視化した観察データです。ユーザーが「どこまでスクロールしたか」「離脱した箇所」「注目した箇所」「クリックした箇所」「カーソルを乗せた箇所」が分かるようになっており、その反応や行動を分析することで、コンバージョンに結び付きやすいWebサイトの構築に役立ちます。

ヒートマップに関しては、こちらの記事もおすすめです。

Googleアナリティクス

Googleアナリティクスの「アクセス解析データ」を使えば、過去に問合せや申込みがあったユーザーがどのような行動パターンをとっているかを分析し、サイト改善に活かせるようになります。

アクセス解析データで得られるのは、たとえば以下のような情報です。

  1. ページ訪問数
  2. トラフィックソース
  3. フォーム送信率
  4. コンタクト
  5. 直帰率
  6. フォーム離脱率

Googleアナリティクスのデータを分析し、スマートフォン最適化に必要な情報の整理や、CTAボタンの配置の工夫などをおこないましょう。ランディングページの作り方について、さらに詳しく知りたい方は、以下の記事を参考にしてください。

なお、当社HubSpotが無料で提供するランディングページ作成ツールでは、LP作成、CTAの作成・効果測定、サンキューページ作成、ABテスト実施など、今回ご紹介したポイントを網羅する機能を実装しています。HubSpotCRM(こちらも無料です)とも連携しているので、LP経由で登録いただいたユーザー情報の管理も簡単です。気になる方はぜひ気軽に試してみてください。

スマホ向けランディングページのデザイン参考サイト5選

スマホ向けランディングページを作成する際のポイントは確認できたでしょうか。ここまでの内容を踏まえたうえで、今度はデザインの参考になるサイトを見てみましょう。LP作成のポイントをおさえ、自社に合ったLP構成をある程度イメージしてみたうえで他社デザインを見ていくと、参考になりそうなページを見つけやすくなります。
 

スマホ向けLPまとめ① LPアーカイブ

LPアーカイブ

LPアーカイブ

【特徴】

  1. 掲載LPデザイン数:20,000以上
  2. カラーやイメージからデザイン検索できる

【活用方法】

「シンプル系」「信頼・安心系」など抽象的なイメージでもデザインを探せるため、まだデザインの方向性が明確になっていない場合に活用すると便利です。
 

スマホ向けLPまとめ② LP advance

LP advance

LP advance

【特徴】

  1. 掲載LPデザイン数:1,000以上
  2. 業種・商材・色・イメージで探せる

【活用方法】

「お気に入り」機能があるため、参考にしたいスマートフォンLPを保存できます。
 

スマホ向けLPまとめ③ SANKOU!sp

SANKOU!sp

SANKOU!sp

【特徴】

  1. 高品質で最新のレイアウトやエフェクトを使用したデザインが豊富
  2. 条件検索機能は無い(2021年8月時点)

【活用方法】

高品質なスマホデザインがランダムに表示されており、気になるデザインのサムネイルをクリックすると、実際のページにリンクして動作も確認できます。
 

スマホ向けLPまとめ④ Web Design Clip [L]

Web Design Clip

Web Design Clip [L]

【特徴】

  1. 掲載LPデザイン数:1,000以上
  2. メインカラー・サブカラーの2色で検索が可能
  3. カテゴリ・タイプ・テイスト・レイアウト別の検索が可能

【活用方法】

検索機能が充実しているため、作成するランディングページのカラーやテイストなど詳細が決まっている方におすすめです。
 

スマホ向けLPまとめ⑤ iPhoneデザインボックス

iPhoneデザインボックス

iPhoneデザインボックス

【特徴】

  1. サムネイルクリックで、iPhone・PCなどデバイスごとの実際のページを確認できる
  2. 条件検索機能は無い(2021年8月時点)

【活用方法】

パソコン表示用デザインと、モバイル表示用デザインとを見比べたい時に利用すると便利です。
 

良いLPを作成するための第一歩は「スマホユーザーの視点に立つこと」

今回ご紹介したように、成果に繋がるスマホ用ランディングページを作成するコツは多数あります。目的に合ったフレームワークを理解して取り入れてみる、ユーザーに合わせたデザインを設計してみるなど様々ありますが、前提となるのはやはり「ユーザー視点」です。

どのような課題を持ち、どのような解決策を求めている方にアプローチするべきなのか、その方にとってわかりやすいUIはどう設計するべきかなど、ユーザーを起点にLP設計を進めましょう。もちろん、これはLP作成に限らずすべてのマーケティング施策も同様です。

元記事発行日: 2021年8月31日、最終更新日: 2021年8月31日

トピック::

ランディングページ