ランディングページのスマホ対策ポイント!

 

LPは特定の商品・サービスの販売、資料請求や問い合わせなどを行ってもらうためのWebページで、増え続けるスマホユーザにとっても効果最適なページであり、特に個人顧客ビジネスであるBtoC事業の企業では、よりスマホ用LPの必要が高まってます。ただ、小さな画面の中にどのように情報を適切に配置していくことや、PCでのデザインや構成などの表現が変わってしまうなど、スマホユーザーの視点にたった構成やデザインでの対策する必要となりますので、ご説明いたします。

スマホLP作成

スマホのWebページではレスポンシブが更新性などに有効的ですが、LPだと情報量やデザイン表現に制約を受けるため、スマホのPDCAサイクルがまわしにくくなってしまい、LP効果を最大限に発揮することができないので、あまりオススメではありません。
スマホ用のLP作成するなら、一部例外を除けば、レスポンシブではなくスマホ用LPで作成する方がよろしいでしょう。
なのでPCとスマホのLPは全く別物ですので、レイアウトやテキストの調整やコンテンツの順番を入れ替えるなど調整することも必要となります。

スマホLPのテキスト

PCデバイスのLPでは、多くのテキスト要素は効果的ですが、スマホだと限られたスペースの中で、最短で伝えたいことを効果的に構成していく必要があるので、大量のテキストや数多くの要素は、むしろ理解するための時間がかかってしまい、またスマホでは適切な文字サイズになるので、しっかり説明されたキャッチコピーやコンテンツを用意したとしても、とても読みづらいと感じてしまうでしょう。PCのLPをそのままスマホLPで表示させている場合もありますが、スマホLPデザインに修正するの方がオススメです。

スマホLPの画像構成

スマホはお手軽に外出先で見ることができるデバイスですが、スマホの通信速度となると、PCのLPと同じ画像要素数を使ってデザインをしてしまうと、スマホLPの表示速度は遅くなってしまいますので、あまり画像を多くしすぎないよう注意してください。
ただ望まれるコンテンツによっては、大きい画像写真をレイアウトする方が効果的なこともありますので、全て画像枚数などを考慮して、極力画質は落とさないよう軽量化したコーディング作業をいたしましょう。

スマホLPのコンテンツ

PCのLPは、サービスの流れやお申し込みの流れなど、横向きにデザインを組み立てたり、際立つ特徴など説明したりなど、要素を並列にレイアウトするデザインでコーディングされておりますが、スマホLPでは、ほとんど縦読みになるケースです。そのためPCは横型のモニターと、スマホの縦型のモニターでは、レイアウト自体のベースが異なます。
そしてスマホでは、PCデバイスと比べて表示させる面積が、圧倒的に狭いため、ユーザー側には、伝えたい情報をわかりやすくナビゲートしていく必要がありますので、見出しや背景色に画像などデザインを工夫し、どの情報に対して詳細に説明するのかをわかりやすく、メリハリある対応いたしましょう。

スマホLPでは長いページはNG

LPは商品のタイプにもよりますが、あまりに長くなってしまうとスマホの場合、1ページ完結型が難しいこともありますので、その場合はメインLPとサブLPという形で必要に応じたミニサイトのように情報要素を切り分けるといよろしいです。特に競争が激しい業界や商品・サービスで説明コストが高いなら、情報量も大量でしょうから、しっかりと構成しましょう。
また縦に長い設計上、スマホLPでは1つのコンテンツが長すぎるのもわかりづらくなるため、できるだけ1画面内にコンテンツの縦幅をおさめていくデザイン・レイアウトすることも大切なポイントです。特にファーストビューでは、最初に伝えたい情報をスクロールしないで、できる限り1画面におさめられるようにすることも重要です。
またPCのLPに比べて、スマホLPはより縦長いページになりますので、できるだけ縦幅を短くしたいのなら、同じレイアウトが複数続くようなコンテンツをアコーディオンやタブで切り替える仕様にするとよろしいでしょう。例えば、体験談でのユーザーの感想欄が複数続くコンテンツや、よくある質問での質問と回答のコンテンツなどに便利です。ただ、アコーディオンやタブは隠しコンテンツになるため、SEO上の有効性は下がりますので、LPの目的に合わせて使い分けるように対応しましょう。

スマホLPの電話対応

スマホは電話ですので、PCよりも圧倒的に電話をかけやすいデバイスですので、すぐにタップで簡単に電話をかけることができます。
なのでPCでのLPのバランスでコンバージョンポイントを配置するのではなく、電話でのコンバージョンがしやすい構成にすることで、より高い効果となります。
またユーザーにとって、スマホ画面でのフォームへの記入は、とても大変な作業になってしまいますので、リンクするフォームもスマホ用に最適化して、できるだけ入力項目を減らすべきです。
また電話番号バナーやフォームへのアンカーリンクなど、スマホでタップする部分は大きめにすることで、バナーがとても目立ち、タップをしやすくなりますので、お問い合せの効果が上げられますので心がけましょう。

  • このエントリーをはてなブックマークに追加
  • Pocket

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。