まず「モバイルファースト」で考える
LPを作るとき、パソコンの大きな画面で見栄えを整えていませんか。でも実際にあなたのLPを見る人の多くは、電車の中や寝る前のベッドで、片手のスマホからアクセスしています。スマホでの見やすさを最優先に設計する考え方が「モバイルファースト」です。この記事では、その意味と、文字・ボタン・読み込みをどう整えればよいかを初心者向けに解説します。
なぜモバイルファーストが大切なのか
モバイルファーストとは、その名のとおり「スマホでの体験を一番に考えて作る」という設計の考え方です。広告やSNS、検索からLPにたどり着く人の多くはスマホを使っています。つまり、スマホで読みにくいLPは、ほとんどの人にとって読みにくいLPということになります。
パソコンで作ったきれいなレイアウトも、スマホに縮めると文字が小さすぎたり、ボタンが押しにくかったりすることがあります。だからこそ、最初からスマホの細長い画面を前提に組み立て、そのうえでパソコン向けに広げていく——この順番にするだけで、多くの人にとって使いやすいLPになります。
1まずスマホの画面でレイアウトを考える
作り始めるときから、頭の中の基準を縦長のスマホ画面に置きます。横に並べたい要素も、スマホでは上から下へ縦一列に積み重なる前提で考えましょう。
一番伝えたいことと申し込みボタンを上の方に置けているか、指でスクロールしていって自然に読み進められるか——スマホで確かめながら作るのが近道です。
2文字は小さくしすぎず、ゆとりを持たせる
スマホでは画面が狭いぶん、文字の読みやすさが成果を左右します。本文は小さくしすぎず、行と行の間にゆとりを取りましょう。一行が長すぎると目が疲れるので、ほどよい長さで改行されるようにします。
ぎゅうぎゅうに詰まった文章は、それだけで「読むのが面倒」と感じさせます。余白は読みやすさのための大事な要素だと考えてください。
3ボタンは指で押しやすい大きさにする
パソコンはマウスで正確にクリックできますが、スマホは指です。申し込みボタンは指の腹で気持ちよく押せる大きさにし、まわりに余白を取って誤タップを防ぎましょう。
- ボタンは横幅をたっぷり取り、文字も大きめにする
- ボタン同士やリンクを近づけすぎない
- 大事なボタンは、スクロールしても押せる位置にあると親切
4重い画像を避けて、すぐ表示されるようにする
スマホは外出先で電波が弱いこともあります。重すぎる画像を貼らず、表示が速い状態を保つことが、スマホでは特に大切です。読み込みが遅いと、開く前に離れてしまう人が出てしまいます。
大きな写真は適切なサイズに縮める、必要のない装飾を盛り込みすぎない——こうした地道な工夫が、スマホでの離脱を減らします。表示の速さも、立派な「見やすさ」のひとつです。
よくある質問
Q. パソコンでの見え方は気にしなくてよいのですか?
Q. スマホ対応かどうかは、どう確かめればよいですか?
まとめ
モバイルファーストとは、多くの人がスマホでLPを見る前提に立ち、スマホでの見やすさを最優先に設計する考え方です。(1)まずスマホ画面でレイアウトを考え、(2)文字にゆとりを持たせ、(3)ボタンを指で押しやすくし、(4)重い画像を避けて速く表示する——この4点を押さえるだけで、ほとんどの訪問者にとって使いやすいLPになります。完成したら、必ず自分のスマホで最後まで申し込めるか試してみてください。
関連記事: LPの表示速度がCVRに与える影響