- 文字のレイアウトって何が最適なの？
- 読みやすいレイアウトにしたい
こんな悩みを解消します。
文字のレイアウトは記事を読みやすくする大切な要素です。
読みにくい文字レイアウトでは離脱率を上げるばかりか、2度と訪問してくれないかもしれません。
今回は、調査を重ねて導き出した最適な文字レイアウトを紹介します。（一部ソースコードあり＆丸パクりOK）
本記事を参考にすると、より読みやすいブログ記事を書くことができます。
✔ 記事の内容
- ブログ記事が読みやすくなる文字レイアウト
- 読みやすい文字レイアウト：注意点
✔ 記事の信頼性累計500サイト以上を見て回り、当サイト「ガオのノート」で検証済み。
ブログ記事が読みやすくなる文字レイアウト
文字レイアウトですが、今回は下記の4つの観点で解説をしていきます。
では、順に解説します。
文字のサイズ
文字のサイズは15pxか16pxにしましょう。
理由は2点。
では、実際に確かめましょう。
下記は14px～16pxの比較です。
| サイズ | 見本 |
| 14px | 最適 |
| 15px | 最適 |
| 16px | 最適 |
文字単体だとあまりピンと来ないかもしれないので、文で比較しましょう。
【 14px 】
【 15px 】
【 16px 】
ちなみに当サイト「ガオのノート」では「15px」に設定しています。
14pxでは小さく、目が疲れてしまいます。16pxでも良いのですが、少し文面に圧迫感を感じたため、15pxとしています。
文字の色
文字の色は薄い黒がオススメ。
デフォルトだと真っ黒になっていますが、見やすいと感じる記事は色が薄い黒であることが多いです。
薄い黒が良い理由は2点。
このようにユーザビリティを考慮すると少し薄めがベスト。
では、実際に色を比較してみましょう。
| ↑濃い | ① 黒 |
| ② 黒 | |
| ③ 黒 | |
| ④ 黒 | |
| ⑤ 黒 | |
| ⑥ 黒 | |
| ⑦ 黒 | |
| ↓薄い | ⑧ 黒 |
ちなみに「ガオのノート」では、③④辺りの濃さに調整しています。
細かいですが、記事は文字が数千字にもなるので、視覚の負担はしっかり考慮すべきです。
サイトの横幅
横幅は画面の端と文字までの距離です。下記の画像で言う「⇔」がそれにあたります。
検索上位の記事やトップブロガーの記事を見ると、横幅は92％～96％の間で調節されていることが多いです。（初期状態だと横幅はないので、調整が必要）
「ガオのノート」では、ワードプレスのCocoonというテーマを使用しており、カスタムCSSに下記のようなソースコードを入力しています。
これにより横幅を94％に調整しています。
同じくCocoonユーザーの方は編集ページの下にある「カスタムCSS」にコピぺすれば、「ガオのノート」と同じ横幅となります。（丸パクりOK）
横1列の文字数
結論から言うと、文字数が横1列に20字か21字がオススメ。
横1列の文字数とは下記のような感じです。
理由としては、検索上位やトップブロガーの横1列の文字数を調べた結果、ほぼ20字か21字だったから。（ちなみに「ガオのノート」では21字）
19字以下だと文字が大きく圧迫感があり、22字以上だと文字が小さく小難しい感じが出ます。
その結果、離脱率が高くなるといった感じ。
横1列の文字数を変更するには、下記の2点を調整します。
「ガオのノート」では、「15px・94％」に調整することで、横1列が21字となっています。
読みやすい文字レイアウト：注意点
注意点が1つあり、それは自分の読者層に合った文字レイアウトにすることです。
私の場合は上記のような文字レイアウトで、自らの記事に応用したら離脱率も下がりました。
が、あなたの記事の読者層の年齢はどのくらいでしょうか？
文字レイアウトは読者の年齢層で考える
例えば、記事で狙う読者層が50代当たりの場合は、場合によって老眼の人も出てくるはず。
文字を小さくしてしまうと余計読みづらいですよね。
なので、その場合は敢えて文字を大きくするのもあり。
自分が読みやすいか否かも大事ですが、もっと大事なのは”読者が読みやすいか否か”です。
ちなみに人の視線を考慮した記事の書き方も、下記で紹介しています。
文字レイアウトを最適化して読みやすくしよう
記事は文字数が数千字と多くなるので、必ず読者の負担を考慮するべきです。
視覚負担を減らし、快適に読んでもらうための対策をしっかりとしましょう。
また、他の役に立つブログ記事は下記にまとめていますので、ご活用下さい。
人気記事 【おすすめのASP 5選＋1】
人気記事 U-NEXTのメリット・デメリット！評判・口コミを調査
コメント