ヒトリゴト こんにちは！はまちょうです。
最近HTMLとCSSをちょっとだけ勉強した成果として、ブログの読みやすさについて研究しています。
その成果として、全く知識がない初心者の方でも、下記のようなことができるように解説する記事を書いてきました。
今回はその第三弾として、文字の余白について考えていきたいと思います。
適度な文字の余白はどのくらい？
適度な文字の余白はどのくらいかという問いに対して、残念ながら正確な答えを持ち合わせていません。ですが、少なくともこのブログでは、僕自身が一番読みやすいと感じている文字の余白を採用しています。ここではあえて、文字の余白の大切さを感じていただくために、文字余白をほとんど確保せずに文章を表示しています。
新聞を彷彿とさせるような段落になりました。これではよほど内容に興味がない限りは文章を読む気持ちになれませんね。
もしかしたら、上の読みにくい文章の塊が目に入って、この記事から離脱してしまう人もいたかも。。
極端な例で説明しましたが、文字の余白でどれだけ文章の読みやすさが変わってくるか、実感していただけましたでしょうか。
2種類の文字余白
縦方向の文字余白：行間
先にご紹介するのが、縦の余白を表す「行間」です。行間を広くとるほど、文章が縦に広がっていくイメージです。例として、冒頭の文章で数パターン比較してみます。文章はすべて同じなので、それぞれぱっと見のイメージを感じてください。
・行間無
適度な文字の余白はどのくらいかという問いに対して、残念ながら正確な答えを持ち合わせていません。ですが、少なくともこのブログでは、僕自身が一番読みやすいと感じている文字の余白を採用しています。ここではあえて、文字の余白の大切さを感じていただくために、文字余白をほとんど確保せずに文章を表示しています。
・行間1.2文字分
適度な文字の余白はどのくらいかという問いに対して、残念ながら正確な答えを持ち合わせていません。ですが、少なくともこのブログでは、僕自身が一番読みやすいと感じている文字の余白を採用しています。ここではあえて、文字の余白の大切さを感じていただくために、文字余白をほとんど確保せずに文章を表示しています。
・行間1.4文字分
適度な文字の余白はどのくらいかという問いに対して、残念ながら正確な答えを持ち合わせていません。ですが、少なくともこのブログでは、僕自身が一番読みやすいと感じている文字の余白を採用しています。ここではあえて、文字の余白の大切さを感じていただくために、文字余白をほとんど確保せずに文章を表示しています。
・行間1.6文字分
適度な文字の余白はどのくらいかという問いに対して、残念ながら正確な答えを持ち合わせていません。ですが、少なくともこのブログでは、僕自身が一番読みやすいと感じている文字の余白を採用しています。ここではあえて、文字の余白の大切さを感じていただくために、文字余白をほとんど確保せずに文章を表示しています。
・行間1.8文字分
適度な文字の余白はどのくらいかという問いに対して、残念ながら正確な答えを持ち合わせていません。ですが、少なくともこのブログでは、僕自身が一番読みやすいと感じている文字の余白を採用しています。ここではあえて、文字の余白の大切さを感じていただくために、文字余白をほとんど確保せずに文章を表示しています。
同じ文章でも、だいぶ印象が変わってきますね。個人的には1.6文字分の行間が一番読みやすいと感じます。
後のパートで自分の好みの行間に設定する方法を説明するので、上記の例をみて、どれが一番みやすかったかを覚えておいてください。
横方向の文字余白：字間
続いてご紹介するのが、横方向の余白である「字間」です。
先ほどと同様に、実例をつかってどの例が読みやすいか確認してみましょう。こちらも文章は同じです。見た目のイメージを感じてください。
・字間0.05文字分
適度な文字の余白はどのくらいかという問いに対して、残念ながら正確な答えを持ち合わせていません。ですが、少なくともこのブログでは、僕自身が一番読みやすいと感じている文字の余白を採用しています。ここではあえて、文字の余白の大切さを感じていただくために、文字余白をほとんど確保せずに文章を表示しています。
・字間0.1文字分
適度な文字の余白はどのくらいかという問いに対して、残念ながら正確な答えを持ち合わせていません。ですが、少なくともこのブログでは、僕自身が一番読みやすいと感じている文字の余白を採用しています。ここではあえて、文字の余白の大切さを感じていただくために、文字余白をほとんど確保せずに文章を表示しています。
・字間0.15文字分
適度な文字の余白はどのくらいかという問いに対して、残念ながら正確な答えを持ち合わせていません。ですが、少なくともこのブログでは、僕自身が一番読みやすいと感じている文字の余白を採用しています。ここではあえて、文字の余白の大切さを感じていただくために、文字余白をほとんど確保せずに文章を表示しています。
・字間0.2文字分
適度な文字の余白はどのくらいかという問いに対して、残念ながら正確な答えを持ち合わせていません。ですが、少なくともこのブログでは、僕自身が一番読みやすいと感じている文字の余白を採用しています。ここではあえて、文字の余白の大切さを感じていただくために、文字余白をほとんど確保せずに文章を表示しています。
行間と同じく、かなり文章の印象が変わってきます。個人的には0.05文字分がみやすいように思います。
字間の変更方法についても後に解説するので、こちらも合わせて自分の好みの字間をチョイスしておいてください。
文字の余白を変える方法
文字の余白を変えるために設定が必要な場所
文字の余白を変えるために設定が必要な場所は、文字の大きさを変える時と同じ場所です。※クリックで動きます
もしも上記のGIFを見てもわからない場合は、この記事ブログを読みやすく！意外と大事な文字の大きさの変更方法の「文字の大きさを変えるために設定が必要な場所」をご覧ください。
具体的な設定方法
上記でご紹介した箇所に、下記のコードを貼り付けてください。
現在の設定は、僕が一番読みやすいと感じている行間・字間にしています。
※行間：1.6字分、字間：0.05文字分
お好みの余白にカスタマイズするには、下記のマーカー部分を変えてください。上が行間、下が字間の余白です。
人によって1段落当たりの文章量が違うので、適切な余白も異なると思います。
おわりに
文章は同じでも、行間・字間などの見た目を変えると、最後まで読んでもらえる確率がグッと高まります。
まだまだ読みにくい（というか中身もない）このブログですが、今まで紹介してきた方法を実践することで、直帰率やセッション継続時間に明らかな改善がみられています。
たかが見た目。されど見た目。このように簡単に変えられるので、ぜひ皆さんのブログでも実践してみてください！
最後に、今までの「ブログを読みやすく！」シリーズをご紹介して、終わりにします。ぜひ読んでみてください。
以上です！ここまで読んでいただき、ありがとうございました！！
コメントを残す