【文字レイアウト】ブログ記事が読みやすくなる『サイズ・色・横幅』を公開

読みやすい文字レイアウトブログ
スポンサーリンク
  • 文字のレイアウトって何が最適なの?
  • 読みやすいレイアウトにしたい

こんな悩みを解消します。

 

文字のレイアウトは記事を読みやすくする大切な要素です。

読みにくい文字レイアウトでは離脱率を上げるばかりか、2度と訪問してくれないかもしれません。

 

今回は、調査を重ねて導き出した最適な文字レイアウトを紹介します。(一部ソースコードあり&丸パクりOK)

 

本記事を参考にすると、より読みやすいブログ記事を書くことができます。

 

記事の内容

  • ブログ記事が読みやすくなる文字レイアウト
  • 読みやすい文字レイアウト:注意点

 

記事の信頼性累計500サイト以上を見て回り、当サイト「ガオのノート」で検証済み。

スポンサーリンク

ブログ記事が読みやすくなる文字レイアウト

読みやすいブログ記事の文字レイアウト
文字レイアウトですが、今回は下記の4つの観点で解説をしていきます。

  1. 文字のサイズ
  2. 文字の色
  3. サイトの横幅
  4. 横一列の文字数

 

では、順に解説します。

 

文字のサイズ

文字のサイズは15pxか16pxにしましょう。

 

理由は2点。

  • 500以上のサイトを見て読みやすいサイズが15・16だった
  • サイズを変えたところ滞在時間が伸びた

 

では、実際に確かめましょう。

 

下記は14px~16pxの比較です。

サイズ見本
14px最適
15px最適
16px最適

 

文字単体だとあまりピンと来ないかもしれないので、文で比較しましょう。

 

【 14px 】

500人以上の文字サイズを見て研究し、自身の記事を使い調査しました。結果を言うと、最適な文字サイズは「15px」か「16px」です。

 

【 15px 】

500人以上の文字サイズを見て研究し、自身の記事を使い調査しました。結果を言うと、最適な文字サイズは「15px」か「16px」です。

 

【 16px 】

500人以上の文字サイズを見て研究し、自身の記事を使い調査しました。結果を言うと、最適な文字サイズは「15px」か「16px」です。

 

ちなみに当サイト「ガオのノート」では「15px」に設定しています。

 

14pxでは小さく、目が疲れてしまいます。16pxでも良いのですが、少し文面に圧迫感を感じたため、15pxとしています。

 

文字の色

文字の色は薄い黒がオススメ

デフォルトだと真っ黒になっていますが、見やすいと感じる記事は色が薄い黒であることが多いです。

 

薄い黒が良い理由は2点。

  1. 文字を見ていてチカチカしない
  2. 文字の強調が映える

 

このようにユーザビリティを考慮すると少し薄めがベスト。

 

では、実際に色を比較してみましょう。

↑濃い① 黒
② 黒
③ 黒
④ 黒
⑤ 黒
⑥ 黒
⑦ 黒
↓薄い⑧ 黒

 

ちなみに「ガオのノート」では、③④辺りの濃さに調整しています。

 

細かいですが、記事は文字が数千字にもなるので、視覚の負担はしっかり考慮すべきです。

 

原色大辞典さんのサイトに、色のHTMLコードがたくさん揃っています。

 

サイトの横幅

横幅は画面の端と文字までの距離です。下記の画像で言う「⇔」がそれにあたります。

 

 

検索上位の記事やトップブロガーの記事を見ると、横幅は92%~96%の間で調節されていることが多いです。(初期状態だと横幅はないので、調整が必要)

 

「ガオのノート」では、ワードプレスのCocoonというテーマを使用しており、カスタムCSSに下記のようなソースコードを入力しています。

.article{
width:94%;
margin: 0 auto;
}

 

これにより横幅を94%に調整しています。

 

同じくCocoonユーザーの方は編集ページの下にある「カスタムCSS」にコピぺすれば、「ガオのノート」と同じ横幅となります。(丸パクりOK)

 

「%」で調整しないと、端末によっての誤差で文字が飛び出てたりする可能性があるので、「%」で調整をしましょう。




横1列の文字数

結論から言うと、文字数が横1列に20字か21字がオススメ。

 

横1列の文字数とは下記のような感じです。

 

理由としては、検索上位やトップブロガーの横1列の文字数を調べた結果、ほぼ20字か21字だったから。(ちなみに「ガオのノート」では21字)

 

19字以下だと文字が大きく圧迫感があり、22字以上だと文字が小さく小難しい感じが出ます。

その結果、離脱率が高くなるといった感じ。

 

横1列の文字数を変更するには、下記の2点を調整します。

  • 文字のサイズ
  • サイトの横幅

 

「ガオのノート」では、「15px・94%」に調整することで、横1列が21字となっています。

 

読みやすい文字レイアウト:注意点

読みやすい文字レイアウト:注意点

注意点が1つあり、それは自分の読者層に合った文字レイアウトにすることです。

私の場合は上記のような文字レイアウトで、自らの記事に応用したら離脱率も下がりました。

 

が、あなたの記事の読者層の年齢はどのくらいでしょうか?

 

文字レイアウトは読者の年齢層で考える

例えば、記事で狙う読者層が50代当たりの場合は、場合によって老眼の人も出てくるはず

 

文字を小さくしてしまうと余計読みづらいですよね。

なので、その場合は敢えて文字を大きくするのもあり

 

自分が読みやすいか否かも大事ですが、もっと大事なのは”読者が読みやすいか否か”です。

 

ちなみに人の視線を考慮した記事の書き方も、下記で紹介しています。

>>【Zの法則とFの法則】滞在時間と回遊率を高める方法

 

文字レイアウトを最適化して読みやすくしよう

まとめ

記事は文字数が数千字と多くなるので、必ず読者の負担を考慮するべきです。

視覚負担を減らし、快適に読んでもらうための対策をしっかりとしましょう。

 

また、他の役に立つブログ記事は下記にまとめていますので、ご活用下さい。

>>ブログ記事一覧へ

 

人気記事 【おすすめのASP 5選+1】

人気記事 U-NEXTのメリット・デメリット!評判・口コミを調査

 

トップへ戻る☝

コメント

お問い合わせ

お問い合わせは下記に必要事項を記入し送信してください。

タイトルとURLをコピーしました