恥ずかしながら長い間ブログを書いてきたのに記事を書くとき、読者のことを考えずにかなり読みにくい書き方をしていたようです。
そのことに最近になってようやく気づきました。僕が気づいたブログにおける読みやすい行数、改行、空白とは一体どんなものなのか。ここでまとめておきました。
読みやすいブログ記事の最近の傾向
1、「Enter」による空白は入れない
このブログでもこれまで段落と段落の間は空白だらけでした。そっちのほうが読みやすいだろうと思っていたからです。
しかし最近ではスマホからの読者が増えてきているため、空白が増えるとその度にスクロールしなくちゃいけなくなり、手間を増やすことになります。これでは離脱率が高くなってもおかしくないですね。
これまではワードプレスで投稿するとき、ビジュアルモードで段落ごとに「Enter」を押して空白をあえて付けていました。
しかし「Enter」を押すと目視ではただの空白ですがコード上では「 」が入り、空白のたびに<p> </p>というコードが形成されてしまいます。これはコード文法上間違いとされているそうです。それは<br>を連続して使うのも同じことが言えます。
人によっては一行一行何度も「Enter」を押して空白を入れる人もいますね。昔はそんなのが流行っていたときもありましたが今は完全NGです。例えばこんな文章。
最近、東京では寒い日が続いています。
外に出て息を吐くと白くなって冬の訪れを強く感じます。
この時期になると家の外に出るのが億劫なのでできれば家で仕事がしたいです。
こういう文章を書く人は行間の微妙な間を演出したいんでしょうが、最近では読者には好まれません。最近のネットユーザーにとっては簡単に素早く読めることが重要だからです。
段落の間に空白を入れたいなら投稿エディターではなく、cssの設定で入れるようにしましょう。ちなみにこのブログではcssのp { margin-bottom: 2.2em;}という記述によって段落にほど良いスペースができるようになっています。
2、一段落の行数は3、4行まで
一つの段落に5行も6行も文章を並べると、文字ばっかりで読む気が失せるという読者が最近では多いです。特にブログ記事は小説とは違うので読みやすさが重要視されます。一つの段落には2行から3行が理想で、多くても4行までにしておきましょう。
有名ブロガーのブログをチェックすると分かりますが、ほとんどがこのルールに従っています。僕もこれまでずっと5行、6行が当たり前でしたがこれからは2,3行を目安にしていきます。
3、改行のしすぎに注意
たとえ空白を入れていないからといって、一行ごとに改行するのも読みずらい文章になってしまいます。例えばこんな感じ。
最近、東京では寒い日が続いています。
外に出て息を吐くと白くなって冬の訪れを強く感じます。
この時期になると家の外に出るのが億劫なのでできれば家で仕事がしたいです。
これならまだこっちのほうが好まれます。
最近、東京では寒い日が続いています。外に出て息を吐くと白くなって冬の訪れを強く感じます。この時期になると家の外に出るのが億劫なのでできれば家で仕事がしたいです。
4、理想のフォントサイズは16px
このブログでは大きめの16pxを使っています。人によってはもっと小さいフォントサイズに設定していますが、おおよそ最近の傾向は14pxから16pxのはずです。スマホの小さな画面でも文章が読みやすいようにフォントサイズも考える必要があります。
5、見出しや目次を入れる
記事タイトルとは別に見出しや目次を入れると文章がとても読みやすくなります。僕は目次はそれほど実践していませんが、見出しは注意して入れるようにしています。例えばこの記事の場合だと、「読みやすいブログ記事の最近の傾向」という大見出しがあり、その下に1~5の中見出しがあります。
1、「Enter」による空白は入れない
2、一段落の行数は3行まで
3、改行のしすぎに注意
4、理想のフォントサイズは16px
5、見出しや目次を入れる
それぞれの見出しの中にそれに関連する文章を書きます。読者によっては「2」と「4」だけ興味があるという人もいるはずです。そういう人は他の文章を飛ばして読めるので、読者が探し求めている情報にすぐにたどり着くためにも見出しは必要不可欠となってきます。