指で読まれる前提で作る——スマホ用LP(モバイルLP)の作り方
いまやLP(ランディングページ)を訪れる人の多くは、パソコンではなくスマホから来ます。それなのにパソコン画面ばかり見て作ってしまうと、スマホで見たときに文字が小さい、ボタンが押しにくいといった問題が起きがちです。大切なのは「スマホで見られる前提」で設計すること。この記事では、モバイルで成果を出すLPの作り方を初心者向けに解説します。
なぜスマホを基準に考えるのか
パソコンの大きな画面で作ったLPは、見栄えがよく感じられます。しかし実際の訪問者の多くは、手のひらの小さな画面を指でスクロールして読んでいます。基準を取り違えると、肝心の多数派にとって使いにくいLPになってしまいます。
スマホは画面が狭く、横に並べた情報は縦に積み替わり、操作はマウスではなく指です。この違いを前提に作れば、自然とパソコンでも見やすくなります。「まずスマホで成立させ、それからパソコンを整える」という順番が、今のLP作りの基本です。
1ファーストビューを作り込む
スマホで最初に表示される一画面分が、勝負を分けます。ここで興味を引けなければ、指は次の瞬間に画面を閉じてしまいます。
- 誰の何の悩みを解決するかが一目で分かる見出し
- 長すぎず、画面に収まるキャッチコピー
- 最初の画面のうちに最初のボタンが見えるとなお良い
スマホは縦に長い分、最初の一画面に詰め込みすぎないことも大切です。要点を絞り、続きを読みたくなる入り口に仕立てましょう。
2押しやすいボタンにする
スマホで操作するのは、マウスの矢印ではなく幅のある指です。ボタンが小さかったり、別のリンクと近すぎたりすると、押し間違いやストレスのもとになります。
3文字量と改行を読みやすく整える
狭い画面では、パソコンで適切だった文章量がびっしり詰まって見えることがあります。読み疲れさせない配慮が要ります。
一文を短くし、適度に改行や段落の区切りを入れ、見出しでこまめに区切って流し読みできるようにしましょう。文字サイズは小さくしすぎず、スマホで快適に読める大きさを保つこと。情報を横並びにせず縦に積む、画像は縦長を意識する、といった工夫も読みやすさにつながります。
4実機で確認しながら仕上げる
最後に欠かせないのが、実際のスマホでの確認です。パソコンの画面を縮めただけでは気づけない問題が、実機には潜んでいます。
自分のスマホで開いて、上から下まで指でスクロールしてみましょう。ボタンは押しやすいか、文字は読めるか、画像が画面からはみ出していないか、フォームは入力しやすいか——気になった点をその場で直していきます。フォームは特に、スマホで入力する手間を想像しながら項目を絞り込むと、最後の離脱を防げます。お客様の声を載せる場合も、スマホで縦に読んで自然に流れるかを確かめましょう。
よくある質問
Q. スマホ用とパソコン用、別々に作る必要がありますか?
Q. スマホでボタンが押されない原因は何が多いですか?
まとめ
スマホ用LPは、「スマホで見られる前提」で設計するのが出発点です。最初の一画面で興味を引くファーストビューを作り込み、指で押しやすい大きなボタンを適切に配置し、文字量と改行を読みやすく整える。そして必ず実機で上から下まで確認しながら仕上げます。多数派であるスマホ訪問者に合わせて作れば、パソコンでも自然と見やすくなります。フォームの項目を絞り、お客様の声で安心を添えれば、モバイルでも成果につながるLPになります。
関連記事: ファーストビューとは?