LP ノウハウ

条件指定
×閉じる

キーワード

検索範囲
カラー
× 閉じる
カテゴリ

× 閉じる
イメージ
× 閉じる
LP アーカイブ

LPのデザインに関して

2019.1.8

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

パソコンから閲覧したランディングページが見やすくても、スマホからの閲覧は見づらいということにはなっていませんか。

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

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

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

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

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

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

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

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

長いページはNG

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

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

表示速度も大切

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

ランディングページの参考デザイン

Sponsored Link


LPデザインを探す方法

リスティング広告やディスプレイ広告のリンク先は、ランディングページデザインの場合が多く、かつ最新のデザインで制作されている事が多いので参考になる場合があります。

キャッチコピーを一覧確認

現在表示されているデザイン一覧のランディングページで使われているメインのキャッチコピーを一覧で確認する事ができ、キャッチコピー作成時の参考としてご利用頂けます。

次へ

お気に入り登録が可能!

このサイトのランディングページデザインをフォルダ毎に分けて自分が参考になるデザインだけを集めて利用する事ができます。

ランディングページ制作.jp
「伝わる」×「欲しくなる」を目指した結果の出るランディングページ(LP)のデザインに特化
どんなLPを作ったらいいかわからない…そんな状態でも一度ご相談のご連絡を頂ければ構成などもお手伝い致します
ライン
電話番号
営業時間:10時~18時(土・日・祝日定休日)
【大阪本社】〒541-0053 大阪府大阪市中央区本町1-7-7 WAKITA堺筋本町ビル2階
【東京支社】〒107-0062 東京都港区南青山2-4-15 天翔南青山ビル3階
【福岡支社】〒812-0011 福岡県福岡市博多区博多駅前3-27-25 第二岡部ビル9階
ライン
Copyright © 2019 ランディングページ制作.jp
All Rights Reserved.