Loading...
Loading...
投稿日:2017年01月15日
2015年4月にGoogleがモバイルフレンドリーを発表したのも、まだ記憶に新しいでしょう。モバイルフレンドリーとはWebページのスマホ対応度を測るための基準で、これを機にスマホ対応は一気に進んだと言えます。
スマホ対応とその方法については下の記事でご紹介しています。
» レスポンシブだけじゃない！スマホ対応の方法3つと特徴まとめ
さて、スマホ対応はWebサイトやブログに限った話ではなく、LPにとっても重要です。スマホ対応によってページの使い勝手が高まりますし、検索結果を改善するSEOにも効果が期待できます。
本稿では、LPをスマホ対応させるときに気をつけることを8つ取り上げて解説していきます。これからスマホ対応を検討している方や、制作済みのLPを改善する時のチェック項目としてもご活用いただければと思います。
LPではファーストビューは非常に大切です。ファーストビューとは、スクロールせずに見られるページの範囲のこと。ファーストビューがつまらないものであれば、ユーザーはすぐに離脱をしてしまうでしょう。ファーストビューでユーザーに興味を持ってもらえるかが、LPの成否を分けていると言っても過言ではないのです。
さて、ファーストビューを考える時に注意をしたいのが、デバイスごとにファーストビューが異なることです。デバイスによってディスプレイサイズが異なるので、ファーストビューを設計する場合、端末ごとにデザインを変える必要が出てきます。
対応する端末を決めたのち、それぞれに最適なファーストビューを設計していくようにしましょう。
スマホ対応にはいくつかの方法がありますが、中でもレスポンシブデザインは最もよく使われています。レスポンシブデザインはデバイスごとにCSSを切り替えるので、同じ画像を使うケースがほとんどでしょう。画像のサイズを拡大縮小して、デバイスごとにちょうど良いサイズにしてページに表示するのです。
ここで注意すべきことが一つ。スマホページの時に、画像が見づらくなってしまうことがあるのです。バナーなど、画像にテキストが入っていると特にそれが顕著になってしまいます。
画像を縮小して見づらくなってしまう時は、デバイスごとに画像を出し分けることをオススメします。デバイスごとに、表示する画像を切り替えるのです。画像を作成する手間は増えますが、圧倒的に見やすいページにすることができるでしょう。
上では画像の見やすさについて解説しましたが、文字についても配慮が必要です。
スマホ対応されているWebページであっても、PCと比較すると文字が小さく表示されていることがあります。そのため、文字を読むためにはいちいちダブルタップをして拡大縮小をしなければならず、非常に不便です。
LPをスマホ対応する時はこの点を考慮して、読みやすい文字にするよう対策をしましょう。文字のサイズは大きく、識別しやすいよう配置します。場合によってはフォントを変えることも検討してください。
PCやタブレットなどの端末と比較して、スマホは「ながら見」されることが多いです。通勤途中の電車の中や、仕事の休憩時間、喫茶店でコーヒーを飲みながら、など。
「ながら見」しているユーザーとしては、長い文章を読むのは億劫に感じるものです。たとえLPの内容に興味を持っていたとしても。
スマホ対応する時はこの点も考慮してください。コンテンツのレイアウトだけでなく、文章が多すぎないかチェックするようにしましょう。
横にコンテンツが配置できるPC向けのページとは違い、スマホサイトでは縦にしかコンテンツを配置できません。そのため、ともするとコンテンツがダラダラと続いてしまうケースが見受けられます。
どんなに良いコンテンツでも、ダラダラと文章が続いてしまってはページを読み進めてもらえません。ページを読み進めてもらい、コンバージョンまで到達してもらうには、そのための工夫も必要ということです。
例えば、スマホ向けのLPを作る際には、できるだけコンテンツにリズム感を持たせるといいでしょう。文章や画像をビッシリと配置するのではなく、スペースや改行をうまく使っていくのです。
LPでは、ユーザーが思い立ったらすぐにアクションをしてもらえるようにデザインしておく必要があります。せっかくユーザーがその気になっても、購入ボタンやお問い合わせフォームが見つからなかったら意味がないのです。スマホ向けのLPを制作するときは、CTA要素の配置には特に気をつけましょう。
よく使われるのが、CTA要素を画面上か下に常時表示させておく方法です。いわゆるstickyな要素のことですが、いつでも画面内にボタンを表示しておけるので効果的です。
マウスが使えるPCとは違い、スマホページは指で画面をタップして操作をします。PCのレイアウトをそのまま踏襲すると、要素の距離が近すぎるためタップしづらかったり、誤操作を招いてしまうことも多くなります。
スマホページをデザインする時は、要素と要素の間にはスペースを設けるようにしてください。ボタンを大きくしたり、入力欄をそれとわかるように強調してもいいでしょう。
冒頭で述べたように、Googleは2015年4月からモバイルフレンドリーを検索順位の要因としています。モバイルフレンドリーとは、Google独自に行っているスマホ対応の基準のこと。モバイルフレンドリーにパスしておくことは、LPをスマホ対応する上で最低条件とも言えるでしょう。
モバイルフレンドリーにパスしているかは、Googleが提供しているモバイルフレンドリーテストを使うことで調べられます。
» モバイル フレンドリー テスト – Google Search Console
上記からモバイルフレンドリーテストのページをひらき、中央の入力欄にチェックをしたいURLを入力。「テストを実行」ボタンを押せば、数秒ほどでテスト結果がわかります。
スマホ版のLPを制作する時に注意すべきこととして、代表的な8つのポイントをご紹介しました。LPを制作する時にご覧いただき、チェックリストとして参考にしていただければと思います。
また下の記事でも解説していますが、LPで成果を上げるには小さな改善を繰り返していくことが大切。すぐに結果がでないからと諦めることなく、地道に改善を続けていくことも忘れずに。
