これが読みやすいブログデザイン！有名サイトの記事幅と余白設定を大公開

2024/09/09

ブログのメインは記事本文。どんなにタイトルで惹きつけて訪問者を増やしても、肝心の記事が読みづらければ最後まで読まれないうちに離脱してしまいます。当然、シェアもしてくれないしリンクもしてくれません。

では読みやすいブログとはどのようなものでしょうか。そのひとつは、「流し読みしやすい文章」です。

文章の改善はいますぐできることではありませんが、読み疲れさせないデザインにするのはすぐに実行できるかもしれません。

本記事では、記事本文が表示されるメインコンテンツの幅と、周囲の余白設定に焦点を絞って解説していきます。

有名どころ 18 サイトを調べて、各サイトがどれくらいの幅で記事を表示し、どのくらい余白をとっているのか調べてみました。ぜひご参考に。

2014 年に調査・公開した数値のため、参考サイトの内容が変わっている場合があります。

ブログ訪問者の目線はどのように動くのか

日本語を横書きにした場合、左がスタートになりますね。このため、基本的に読者の目線は左上からスタートします。

そこからの目線の動きをもとにブログ全体の構造を設計しなければなりません。これが「F 型配置」や「Z 型配置」と呼ばれているものです。

ブログにかぎらず、飲食店のメニューでも一番売りたいものを左上に配置しています。今度じっくりご覧ください。デザインにうといスタッフが自作したメニューはわかりませんが、プロが作ったものはこの原則が守られています。

テキストがメインのブログ記事は、読者の目線がジグザグに動きます。フォトリーディングをマスターしている方ならちょっと違うかもしれませんが、一般的に左から文字を追っていくからです。

左から右に目線が動き、なおかつスクロールして縦方向に移動していきます。

ということは、読みやすくするにはまず横方向の移動距離を考える必要がありますね。メインコンテンツ幅が広ければそれだけ目線の移動距離も長くなるため、あまりに広すぎると読む気を失わせることになります。

一方、あまりにも幅が狭くなると今度は縦方向の移動距離が長くなり、改行の仕方によっては文字のカタマリが連続するので、これも読みづらい記事になってしまいます。

それでは、最適なメインコンテンツ幅はどれくらいなのでしょうか。

ブログ、検索サイト、ニュースサイトからランダムに 18 サイトをピックアップして、記事部分の幅を調べました。ウィンドウ幅によって上限なしに可変するサイトは除いてあります。

1920px のモニタでブラウザをフル表示し、計測ツールと CSS 設定からピクセル数を抽出しました（1px 前後の誤差あり）。

テキストを基準に記事の左端から右端までの数値です。

それでは記事部分の幅が大きいサイトから順に見てみましょう。

平均値は「616px」となりました。このあたりが目線を極端に移動させずに読んでもらえる幅、といって差し支えないでしょう。

読みやすいブログを目指すなら、記事まわりの余白設定も重要です。今度は余白を見ていきましょう。

先ほどあげたサイトのうち、メインコンテンツ部分を枠で囲ってあるようなサイトを抽出しました。

メインコンテンツの幅と記事の幅から余白部分を計算しています。CSSで設定されている場合はその数値を抜き出してあります。

余白の大きいサイトから順に見ていきましょう。