2014/05/02511 Shares

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

『メインコンテンツの幅と余白ってどれくらいが良いんだろう?』

measure

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

では読みやすいブログって何でしょう? 文章にテンポがあってぐいぐい引き込む文才があれば良いですが、それは誰にでもできることではありません。

誰にでもできることといえば、読み疲れさせないデザインにすることです。記事本文が表示されるメインコンテンツの幅と、周囲の余白設定がそのひとつ。今回はこの部分に焦点を絞ってみます。

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

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

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

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

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

Z型とF型

読者の目線は横に動くことを忘れない

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

左から右に目線が動き、なおかつスクロールして縦方向に読んでもらうことになります。

読み疲れさせないために、まず横方向の移動距離を考えなければなりません。あまりにメインコンテンツ幅が広いと目線も大きく動くため、読む気を失わせることになります。

記事幅が広くても狭くても読みづらい

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

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

有名サイトの記事部分の幅を見てみよう

記事部分の幅

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

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

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

記事幅の平均値は616px!

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

サイト名 記事部分の幅(px)
和洋風KAI 730
nanapi 728
creive 660
バズ部 658
WEBクリエイターボックス 650
BLOGOS 640
NAVERまとめ 635
Yahoo! ニュース 634
livedoor ニュース 618
はてなブックマークニュース 610
ネタフル 610
Naifix 604
OZPAの表4 600
Find job! Startup 569
Googleが掲げる10の事実 558
ENJILOG 550
ホームページを作る人のネタ帳 530
Google検索結果ページ 510

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

こっそりこのブログも紛れ込んでいるのはナイショです。配布中のテーマ「Gush」も同じ604pxに設定してあります。

広告サイズも考えよう

余白を考慮せず600px以上のコンテンツ幅にしておくと、300pxのレクタングル(中)が2つ並べられます。広告収益を考えているなら、どんなサイズがマッチするのかも念頭に置いておきましょう。

あ、そうそう、もう一つ大事なこと。

「広告が入らないならブログの横幅を変えればいいじゃない」

これ、意外とみんなやらないんですよね。確かにテンプレートを弄るのは面倒だし知識も必要なのですが、あのGoogleさんがなぜそのサイズの広告にしているのかという事を考えれば、やっぱり「一番効果が高い」からだと思うんですよね。だったら、軍服に身体を合わせればいいんじゃない?ということです、はい。

Google AdSenseだけで家族を養ってきた僕が、今までやってきたブログ運営術をガチで解説するよ

広告に合わせて横幅を変える人はあまりいませんね。

無理やり合わせるというより、どうすれば広告がスッキリ収まって記事を読む邪魔にならないデザインにできるか、を考えた設定が必要です。

メインコンテンツの余白も見てみよう

記事左右の余白

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

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

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

余白の平均値は35px!

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

サイト名 コンテンツ幅(px) 余白(px)
Find job! Startup 675 53
OZPAの表4 702 51
ネタフル 660 50
バズ部 740 41
Naifix 684 40
ENJILOG 630 40
ホームページを作る人のネタ帳 592 31
livedoor ニュース 678 30
nanapi 776 24
creive 700 20
はてなブックマークニュース 650 20
和洋風KAI 764 17

左右の平均値は「34.75px」でした。

このブログはメインコンテンツが684pxで、記事が604px、左右の余白が40pxずつあるということです。

WEBクリエイターボックスさんのようにメイン部分を枠で囲まず、サイドバーとの余白設定だけしてあるタイプもあります。この場合も余白が狭すぎるとギチギチな印象になるので注意しましょう。

webcreatorbox

サイト全体のバランスが重要

記事本体とメインコンテンツに焦点を絞っていますが、サイト全体の幅や文字サイズなども考える必要があります。

たとえば、サイト全体の幅が960pxでサイドバーを300pxにすると、メインコンテンツは660pxになります。サイドとメインの余白、メインと記事の余白などを考え、枠をつけるならさらに1px単位の設定をしなければなりません。

また、フォントの種類によって設定した幅にちょうどおさまるのか、微妙に余白ができるのかが変わります。

PCだけではなくスマホやタブレットの最適化も考えていくと・・・「ぬぁー!」となるほど悩まされます。僕はけっこう楽しんでデザインしましたけどね。好き嫌いが出てくる部分でしょう。

行数と段落は「3」を意識するといいかも

せっかく読みやすい記事幅と余白を設定するんですから、記事の書き方にも注意してください。

改行はどこにいれるのか。段落はどのように使うのか。句読点の位置をどこにするのか。

基本的に同じ意味をもつカタマリを段落とします。「しかし」や「ところで」など、意味が変わるタイミングで段落にすると読みやすくなります。

また、段落もたくさん続くと目を休めるタイミングがつかめないので、見出しを使って章を区切ったり画像を挿入すると文字だらけのブログでも与える印象が変わります。

僕は「3行・3段落」を意識して書いています。

ひとつの段落は最大3行を目安に。段落は見出しごとに最大3つを目安に。もちろんこれを超えることもありますけどね。段落がたくさんできてしまったら、途中に画像や引用、リストを入れるようにしています。

いろんなサイトを調べる便利ツール

今回の調査では2つのツールを使って計測を行いました。

まず、Chromeのアドオン「MeasureIt」。ブラウザ上にメジャーが出現してピクセル数を調べることができます。

Firefox版MeasureItはこちら

MeasureIt

もうひとつがChromeの「デベロッパーツール」。ブラウザ標準機能で、HTMLとCSSの構造を調べることができます。

文字サイズやカラー設定を調べるほか、テーマのカスタマイズを行うときにも重宝します。

Chromeデベロッパーツール

まとめ

有名サイトの記事幅と余白の平均値はこのようになりました。

  • 記事幅平均……616px
  • 余白平均……35px

これが絶対に正解!とは言えません。自分が読みやすいと思うブログやサイトがあれば、積極的に調べる癖をつけるといいかも。学びは真似から始まります。

楽しみながら試行錯誤して、読みやすいブログデザインに仕上げていきましょー!

関連これが読みやすいブログデザイン!行間&フォントサイズ編

それでは、また。

この記事が気に入ったら
いいね!しよう

Twitter で