Ellora 『メインコンテンツの幅と余白ってどれくらいが良いんだろう？』
ブログのメインは記事本文。どんなにタイトルで惹きつけて訪問者を増やしても、肝心の記事が読みづらければ最後まで読まれないうちに離脱してしまいます。当然、シェアもしてくれないしリンクも張ってくれません。
では読みやすいブログって何でしょう？ 文章にテンポがあってぐいぐい引き込む文才があれば良いですが、それは誰にでもできることではありません。
誰にでもできることといえば、読み疲れさせないデザインにすることです。記事本文が表示されるメインコンテンツの幅と、周囲の余白設定がそのひとつ。今回はこの部分に焦点を絞ってみます。
有名どころ18サイトを調べて、各サイトがどれくらいの幅で記事を表示し、どのくらい余白をとっているのか調べてみました。ぜひご参考に。
Headline
ブログ訪問者の目線はどのように動くのか
日本語を横書きにした場合、左がスタートになりますね。このため、基本的に読者の目線は左上からスタートします。
そこからの目線の動きをもとにブログ全体の構造を設計しなければなりません。これが「F型配置」や「Z型配置」と呼ばれているものです。
ブログに限らず、飲食店のメニューでも一番売りたいものを左上に配置しています。今度じっくりご覧ください。デザインにうといスタッフが自作したメニューはわかりませんが、プロが作ったものはこの原則が守られています。
読者の目線は横に動くことを忘れない
テキストがメインのブログ記事は、読者の目線がジグザグに動きます。フォトリーディングをマスターしている方ならちょっと違うかもしれませんが、一般的に左から文字を追っていくからです。
左から右に目線が動き、なおかつスクロールして縦方向に読んでもらうことになります。
読み疲れさせないために、まず横方向の移動距離を考えなければなりません。あまりにメインコンテンツ幅が広いと目線も大きく動くため、読む気を失わせることになります。
しかし、あまりにも幅が狭くなると今度は縦方向の移動距離が多くなり、改行の仕方によっては文字のカタマリが連続するので、これも読みづらい記事になってしまいます。
それでは、最適なメインコンテンツ幅はどれくらいなのでしょうか。
有名サイトの記事部分の幅を見てみよう
ブログ、検索サイト、ニュースサイトからランダムに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さんがなぜそのサイズの広告にしているのかという事を考えれば、やっぱり「一番効果が高い」からだと思うんですよね。だったら、軍服に身体を合わせればいいんじゃない？ということです、はい。
広告に合わせて横幅を変える人はあまりいませんね。
無理やり合わせるというより、どうすれば広告がスッキリ収まって記事を読む邪魔にならないデザインにできるか、を考えた設定が必要です。
メインコンテンツの余白も見てみよう
読みやすいブログを目指すなら、記事まわりの余白設定も重要です。今度は余白を見ていきましょう。
先ほど挙げたサイトのうち、メインコンテンツ部分を枠で囲ってあるようなサイトを抽出しました。
メインコンテンツの幅と記事の幅から余白部分を計算しています。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クリエイターボックス さんのようにメイン部分を枠で囲まず、サイドバーとの余白設定だけしてあるタイプもあります。この場合も余白が狭すぎるとギチギチな印象になるので注意しましょう。
サイト全体のバランスが重要
記事本体とメインコンテンツに焦点を絞っていますが、サイト全体の幅や文字サイズなども考える必要があります。
たとえば、サイト全体の幅が960pxでサイドバーを300pxにすると、メインコンテンツは660pxになります。サイドとメインの余白、メインと記事の余白などを考え、枠をつけるならさらに1px単位の設定をしなければなりません。
また、フォントの種類によって設定した幅にちょうどおさまるのか、微妙に余白ができるのかが変わります。
PCだけではなくスマホやタブレットの最適化も考えていくと・・・「ぬぁー！」となるほど悩まされます。僕はけっこう楽しんでデザインしましたけどね。好き嫌いが出てくる部分でしょう。
行数と段落は「3」を意識するといいかも
せっかく読みやすい記事幅と余白を設定するんですから、記事の書き方にも注意してください。
改行はどこにいれるのか。段落はどのように使うのか。句読点の位置をどこにするのか。
基本的に同じ意味をもつカタマリを段落とします。「しかし」や「ところで」など、意味が変わるタイミングで段落にすると読みやすくなります。
また、段落もたくさん続くと目を休めるタイミングがつかめないので、見出しを使って章を区切ったり画像を挿入すると文字だらけのブログでも与える印象が変わります。
僕は「3行・3段落」を意識して書いています。
ひとつの段落は最大3行を目安に。段落は見出しごとに最大3つを目安に。もちろんこれを超えることもありますけどね。段落がたくさんできてしまったら、途中に画像や引用、リストを入れるようにしています。
いろんなサイトを調べる便利ツール
今回の調査では2つのツールを使って計測を行いました。
まず、Chromeのアドオン「MeasureIt」。ブラウザ上にメジャーが出現してピクセル数を調べることができます。
もうひとつがChromeの「デベロッパーツール」。ブラウザ標準機能で、HTMLとCSSの構造を調べることができます。
文字サイズやカラー設定を調べるほか、テーマのカスタマイズを行うときにも重宝します。
まとめ
有名サイトの記事幅と余白の平均値はこのようになりました。
- 記事幅平均……616px
- 余白平均……35px
これが絶対に正解！とは言えません。自分が読みやすいと思うブログやサイトがあれば、積極的に調べる癖をつけるといいかも。学びは真似から始まります。
楽しみながら試行錯誤して、読みやすいブログデザインに仕上げていきましょー！
それでは、また。
