スクロールの指を止める「一画面」の工夫

どれだけ時間をかけて熱い想いを込めた文章を書いても、どれだけ魅力的なオファーを用意しても、読まれなければ存在しないのと同じだ。

Webマーケターのハルカは、アクセス解析ツールを見ながら深いため息をついていた。

パソコンの画面で確認したときは、読みやすくて素晴らしい仕上がりに見えた自社のLP(ランディングページ)。しかし、公開後のデータを分析してみると、アクセスの8割以上を占めるスマホユーザーの多くが、ページの序盤で速攻で離脱していたのだ。

「文章もデザインも悪くないはずなのに……なんでみんなスクロールすらしてくれないんだろう?」

落ち込むハルカのスマホをひょいと覗き込んだのは、デザインとマーケティング双方に精通する先輩のソウタだった。彼はハルカのLPを自分のスマホで表示させると、一瞬で問題点を見抜いた。

「ハルカちゃん、これパソコンでデザインしたでしょ? スマホで見ると文字がぎっしり詰まった『壁』に見えちゃってるよ。今のスマホユーザーは、文章を『読む』んじゃなくて『流し見(スキャン)』してるんだから」

「流し見……ですか?」

「そう。親指ひとつで超高速スクロールする読者に、ストレスなく最後まで画面を滑らせてもらうための『レイアウトの法則』があるの。それさえ抑えれば、一気に最後まで読まれるようになるよ」

ソウタから伝授された「スマホ時代の文章レイアウト術」を適用した結果、LPの平均滞在時間は2.5倍に延び、離脱率は激減したのだった——。

第1章:なぜあなたのLPはスマホで読まれないのか?

ソウタがまず教えてくれたのは、スマホユーザー特有の「閲覧環境と心理」だった。

1. 「文字の壁」を感じた瞬間に閉じる

パソコンの広い画面ではちょうど良い段落でも、縦長で狭いスマホ画面に表示されると「文字がびっしり敷き詰められた壁」に見えてしまう。現代のユーザーは「読むのに時間がかかりそう」と感じた瞬間にページを閉じてしまうのだ。

2. 「指の動き」を止めるきっかけがない

スマホユーザーは親指で画面をシュッと上に滑らせながら「自分に関係がある情報(見出しや画像)」だけを探している。途中で目を引くキャッチフレーズやメリハリがないと、スクロールの勢いそのままにページを離脱してしまう。

第2章:親指を止めさせる!スマホ向け文章レイアウト4つの法則

「じゃあ具体的にどうすればいいんですか?」と尋ねるハルカに、ソウタが提示したのが以下の4つの法則だ。

1. 1行は「20文字前後」で改行し、3〜4行ごとに余白を空ける

スマホの横幅で3行以上長文が続くと、読者の視線は迷子になる。 新聞や小説のようなビッチリした文章ではなく、「1行20文字程度」「句読点(、。)のタイミングで適度に改行を入れる」「段落ごとに大きめの余白(空行)を作る」ことを徹底する。

  • NG(文字の壁): 当店が自信を持ってお届けする最新のスキンケア美容液は、独自の保湿成分を配合しており、乾燥が気になる季節でも一日中お肌の潤いをキープして透明感のある肌へと導きます。
  • OK(リズムのあるレイアウト): 当店が自信を持ってお届けする、 最新のスキンケア美容液。

独自の保湿成分を配合しているため、 乾燥が気になる季節でも一日中潤いをキープ。

透明感のある素肌へと導きます。

2. 見出し(H2・H3)と太字・マーカーで「流し読み」に対応する

全体の文章をじっくり読まなくても、「見出しと太字・強調装飾だけを追いかければ大体内容が理解できる」状態を目指す。 装飾の色はあれこれ使わず、ベースの色+強調用の1〜2色に絞るのがポイントだ。

3. 箇条書き(リスト)を多用して情報を整理する

商品のメリットや特徴、利用手順などの「並列する情報」は文章で説明せず、必ず箇条書き(弾丸リスト)にする。これだけで視認性が跳ね上がり、スマホ画面でのストレスが激減する。

4. 2〜3画面ごとに「図解やビジュアル」を挟む

文章だけの画面が長く続くと読者の集中力は切れる。スマホで2〜3回スクロールするごとに、図解イラスト・比較表・写真・吹き出し(会話形式)などを挟み、視覚的な変化(休憩ポイント)を作るのがコツだ。

第3章:最後まで読ませる!スマホデザインの基本ルール

「文章の整え方が分かったら、最後は全体の見やすさを整えるデザインルールね」

ソウタが教えてくれた基本ルールは以下の通りだ。

ルール1:フォントサイズは「16px以上」にする

スマホ画面で文字が小さすぎると、それだけで読む気を失う。本文の文字サイズは16px〜18pxを基準とし、見出しはしっかり大きく(24px〜30px)メリハリをつける。

ルール2:コントラスト(背景と文字の濃淡)をはっきりさせる

薄いグレーの背景に薄い文字を載せると、屋外や明るい場所でスマホを見ている読者には文字が読めなくなる。背景は白(またはごく薄い色)、文字色は濃いグレーや黒に近い色を使い、十分な読みやすさを確保する。

ルール3:画面の端に「適切な余白(パディング)」を持たせる

スマホ画面の左右ギリギリまで文字が詰まっていると、非常に圧迫感が出る。左右に15px〜20px程度の余白(余白)を設けることで、洗練された「プロっぽさ」と「読みやすさ」が生まれる。

エピローグ:見やすさの先に待っていた成果

ソウタの助言に従い、ハルカはLPの文章レイアウトを徹底的にスマホ最適化(レスポンシブ見直し)した。

文章の内容や訴求ポイント自体は変えていない。ただ「改行の位置を調整し」「箇条書きと太字を増やし」「段落ごとの余白を広げた」だけだ。

改修の翌週。アナリティクスのスクロール深さ(読了率)を確認したハルカは思わず目を見開いた。

「すごい……! ページの最下部(申し込みボタン)までスクロールしてくれた人の割合が、改修前の3倍以上になってる!」

「ね? どんなに素晴らしいメッセージも、読んでもらえなきゃ届かない。スマホ時代のライティングは『いかにストレスなく流し読みさせるか』が勝負なんだよ」

誇らしげに微笑むソウタに感謝しながら、ハルカはスマホ画面の中で軽やかに躍動する自社のLPを嬉しそうに眺めるのだった——。

まとめ:あなたのLP、スマホで「文字の壁」になっていませんか?

「パソコンでは綺麗に見えるのに、スマホで見ると読みにくい…」というのは、多くのLPで発生している非常に勿体ないロスです。

アクセスの大半を占めるスマホユーザーにストレスなく最後までスクロールしてもらい、確実にCV(成約)へ繋げましょう。