文章は良いのにレイアウトで読まれていないかもしれない話

文章の書き方だけ整えても、レイアウトがぎっしり詰まっていると読者は開いた瞬間に離脱します。わたくしも昔、内容には自信があるのにPVが伸びない記事があり、原因は文章ではなく見た目でした。

以前書いた新聞記者に聞いた文章術の記事は「何を書くか」の話でしたが、今回は「どう見せるか」の話です。夏休みの読書感想文やレポートにも使える実利的な話にしたいと思います。

見た目で離脱される

読者は文章を読む前に、まず画面の余白を見ています。文字がぎっしり詰まった記事は、内容を読む前に「うわ、しんどそう」と閉じられてしまうんですね。

このブログもリライト前の直帰率は高い数字が出ていて、正直ショックでした。

余白ゼロは読まれない

新聞のレイアウトは文字がぎっしりですが、あれはプロが計算した余白あってこそ成立するもの。素人が真似すると単なる「詰め込み」になります。

段落と段落の間に1行の空白を入れるだけで、体感の読みやすさはかなり変わります。

まず自分の数字を見る

「レイアウトはスマホ基準で組むべき」とよく言われますが、それを鵜呑みにする前に、まず自分のブログの実際の数字を見るクセをつけた方がいいです。

スマホが普及してきたことだし、K1も「このブログもスマホが9割くらいやろ」と決めつけていたんですが、実際にアナリティクスで確認したら、この記事はデスクトップ経由が約7割。予想と逆でした。なんでやねん。

デバイス	サイト全体（直近28日）	この記事（直近63日）
デスクトップ	76.2%	69.2%
モバイル	23.8%	30.8%

サイト全体で見ても、直近1ヶ月はデスクトップが76.2%、モバイルが23.8%。記事のジャンルや読者層によって、ここは大きく変わります。

レイアウトを最適化する前に、まず自分のアナリティクスでデバイス比率を確認するのが最初の一歩だと思います。思い込みで作業すると、的外れな改善になりかねません。

太字・箇条書きの効果

読者の多くは最初から最後まで読まず、拾い読みをしています。太字と箇条書きは、その拾い読みへの案内板の役割です。

• 結論を太字にする
• 手順や比較は箇条書きにする
• 1つの箇条書きは1行程度に収める

これだけで「ざっと見て要点が分かる記事」になります。

見出し階層を使い分け

見出しは「読む/読まない」を決めるだけでなく、記事の地図にもなります。大見出し(H2)で章を分け、必要なら中見出し(H3)で細分化。

見出しがバラバラの粒度だと、読者は今どこを読んでいるのか迷子になります。

画像で「間」を作る

文字だけの記事は圧迫感があります。わたくしは自分の写真(OM-DやSONY α7Sで撮ったもの)を挟むことが多いですが、これは装飾ではなく読者に一息つかせる「間」の役割です。

長文が続きそうな箇所の手前に1枚挟むだけで、体感の長さがかなり軽くなります。

冒頭に結論ボックス

前回の記事で「逆三角形で結論から書く」という話をしましたが、レイアウト面でも同じことができます。冒頭にこの記事で分かることを3行でまとめておくと、読者は読むかどうかをすぐ判断できます。

現状を知ることから

ちなみに、この記事(執筆術の記事)自体の直帰率も確認してみたら30.8%でした。数字だけ見ると悪くはなさそうですが、正直「思ったより離脱してるな」というのが感想です。

レイアウトを工夫したら、この数字がどう変わるか。K1自身、今後の記事で実験していきたいと思います。

文章術とレイアウト術は、実は同じ「読者に最後まで読んでもらう」ための両輪です。夏休みのレポートやブログを書く人は、まず段落に余白を入れることと冒頭に結論を書くことだけでも試してみてください。それだけでだいぶ変わると思いますよ♪