デザイン会社が発信するLP制作情報メディア

スマホ用ランディングページをデザインする5つのポイント

LPのデザインに関して
2021.5.19
スマホ用ランディングページをデザインする5つのポイント
パソコンから閲覧したランディングページが見やすくても、スマホからの閲覧は見づらいということにはなっていませんか。

ランディングページのコンバージョン数・PV数が伸び悩んでいるといった場合、パソコンだけでなくスマホ用のデザインも気にかけてみてください。

今、サイトやランディングページはスマホから閲覧するということが多くなりました。
スマホ用のデザインにも気を配ることで、コンバージョン数やPC数の増加に繋がります。
どのようなデザインがスマホ用として望ましいのか、
スマホ用ランディングページのデザインにおける5つのポイントをご紹介します。

目次

スマホ用のランディングページは必要?

スマホ用のランディングページは必要?
ランディングページはパソコンからの閲覧を中心として考えられがちです。
しかしスマホの普及に伴って、スマホからの閲覧率が急激に増加しています。

2015年4月21日にGoogleが全世界で実装した「モバイルフレンドリー」というアルゴリズムが生まれました。モバイルフレンドリーとはスマートフォンでの閲覧に適していないページの順位を引き下げる仕組みです。モバイルフレンドリーにすることでユーザーがスマートフォンの閲覧がよりスムーズになり、モバイル検索ユーザーの利便性が高まります。そのため「スマホの閲覧に最適化されたサイトが“モバイルにおける検索”ではより評価される」とGoogleが明言している程、現代ではスマホ向けのサイトが重要視されています。

よってスマホ用ランディングページの最適化をすることはCVRを上げることに有効となります。

見やすいスマホ用ランディングページを作るポイント

見やすいスマホ用ランディングページを作るポイント
いくらデザインや構成が良くても見にくいデザインでは効果が半減してしまいます。デザイン、構成以外でもクオリティアップできる項目が複数あります。現在のLPデザインを見直して改善してみて下さい。

長いページはNG

通常のランディングページでは必要最小限のボリュームでクローズすることが効果的です。これはパソコン用とスマホ用共に同じことが言えます。しかし、パソコン用と同じ内容をスマホページに設定すると長いページとなってしまいます。

スマホ用のランディングページは必要な情報はきちんと盛り込み、且つシンプルに短くすることが効果的です。

表示速度も大切

サイト表示までの待ち時間が長いとストレスを感じるという人が多いのではないでしょうか。特にスマホでは表示までの待ち時間がシビアに判断されます。

表示速度が遅くなる原因として、画像容量の大きさやソースコードが複雑になっていることが挙げられます。ランディングページだけでなくWebサイト全般において、表示速度を考慮する必要があります。

「スライド」と「アコーディオン」を使おう

スマホでランディングページを見やすくするために、様々なギミックが用いられることが多いです。
スマホでは極力短いページにするために「スライド」と「アコーディオン」の手法がよく使われています。

「スライド」と「アコーディオン」とは?

スライド
「スライド」は横方向にスワイプして、複数の画像を順番に見ることができる手法です。
複数の画像を、画像1枚分のサイズで表示できるのでよく使われます。

アコーディオン
「アコーディオン」は、ある要素をタップすると縦に内容がスライドして詳細が読めるという仕組みです。デフォルトではコンテンツが非表示のものが多いです。
説明文などの文章が長くなってしまう場合によく使用されます。
興味がある人にだけに見てもらえる上に、ページもスッキリとします。

電話のコンバージョンを有効利用しよう

電話のコンバージョンを有効利用しよう
電話コンバージョンとは、タップをするだけで簡単に電話をかけることができる仕組みです。スマホは「携帯電話」のため、パソコンより電話を掛けやすいデバイスです。
そのため購入・申し込みフォームだけでなく電話も追加すると、両方からのコンバージョンが見込めます。

タップしやすいボタンを作ろう

タップしやすいボタンを作ろう
タップしてもらいたいボタンは「タップしたくなる形」にしましょう。スマホは指でタップするので、指でタップしやすい形であることが大事です。
また、パソコンと比べるとスマホは画面サイズが小さいです。ボタンを指のサイズより大きくすることで押しやすくできます。

例えば細長い長方形より、丸くて面積の広い形にする方がタップに適しています。「押しやすさ」に注目することでCVRを上げることに繋がるかもしれません。

ページがスマホに最適かチェックしてみよう

ページがスマホに最適かチェックしてみよう
Googleが無料で公開しているモバイルフレンドリーテストツールというものがあります。スマホからの閲覧に適しているのかをチェックすることが可能です。
モバイルフレンドリーテスト

チェックされるポイントが以下の4項目です。

1、フォントサイズが小さすぎないか
2、ビューポートが設定されているか
3、タップ要素同士が近すぎないか
4、コンテンツサイズがビューポートに対応しているか

無料で誰でも使えるようになっているので、一度チェックしてみてください。
不合格の場合、どの項目か適していなかったのか表示されるようになっています。それら項目を確認しながら、改善に役立てることができます。

モバイルフレンドリーテストページ

まとめ

・パソコン用だけでなく、スマホ用のデザインも作成しよう
・スマホ用のデザインは表示速度が大事
・モバイルフレンドリーテストでスマホに適しているか確認しよう

LP制作.jpへのお問い合わせはこちらから

お電話でも承ります
050-3541-5719

    ※アンケートモニター提供元:ゼネラルリサーチ 
    調査期間:2020年8月7日~12日
    調査方法:インターネット調査 
    調査概要:デザイン制作会社10社を対象にしたサイト比較イメージ調査
    調査対象:全国の20代~50代の男女 1052名

    LPアーカイブ