2018.4.19 更新
普段ネットを使用していると「あ、このサイトなんだかすごく読みやすい」なんて感じるサイトってありますよね。
ブログでも文字の大きさや行間、適度に見出しを付けるなど、ちょっとした工夫で「読みやすさ」を向上させることができます。ブログを書かれている方は一度は気にしたことがあるんじゃないかなと思います。
しかし、読みやすいという印象を与えている要素は何なのか、意識しないとなかなか気づくことはできません。
そこで今回は「文字・フォント」に注目して、より読みやすい記事を作るための工夫について3つのポイントに分けて順に書いていきます。
「見出しも付けてるし、改行したり行間だって気にしてるけど他にも何かできないか」
「もっと読みやすくしたい・工夫したい」
という方に向けた記事になってますので、誰かの参考になれば幸いです。
文章の両端揃え（均等割り付け）
サイト・ブログの文章というのは通常であれば「左揃え」なっていますよね。改行された場合も左から次の行が始まります。
これはcssで行揃えの位置や、均等割付を指定する際に使用する「text-align」というプロパティが、デフォルトで「left」になっているためです。
今回はこの「text-align」プロパティに「justify」という値を設定した際の影響についてご紹介します。
text-align:justify
まずは下の画像を見てください。これは当ブログの記事をスマホで見たときの画面です。
左側は「text-align:justify;」を適用した状態、右側はデフォルト（left）の状態での画面の見え方を比較した画像になっています。
見え方にかなり違いがありますね。左の方は両端揃えになっているため、文章がスッキリとまとまって見えます。
画面幅が狭くなると改行される回数が多いため、上の例ではスマホ表示でご紹介しましたが、このcssはスマホ表示だけでなくPC表示でも適用されます。
CSSの記述場所
はてなブログでは、編集画面のサイドメニュー内「デザイン」をクリック→サイドメニューのカスタマイズアイコンをクリック→「デザインCSS」から、サイト内のcssを編集することができます。
ここにcssをコピペ、または記述することで、自分のブログに設定することができます。
記述内容
.entry-content { text-align: justify; }
「デザインCSS」内にコピペすると適用されます。些細なことではありますが、ページ全体を通して見たときに読みやすさに差が出てくるのではないかと思います。
文字の大きさ（フォントサイズ）
Googleは16px以上を推奨している
Googleが推奨している読みやすいフォントサイズは16pxだそうです。
いまやネットを利用するユーザーの大半がスマホからアクセスしているため、スマホの画面サイズで見たときに見やすいデザイン・モバイルフレンドリーが重要であるとされています。
このことから多くのサイトが16px以上をデフォルトのフォントサイズとしており、当ブログも他者様のサイトを見習って記事本文に関しては16pxに設定しています。
iOS、Androidの推奨サイズは？
iOSは11ポイント（14.6px）、Androidでは18sp（spはAndroid独自の単位）をそれぞれ推奨しているため、これらを考慮しても16px以上に設定しておくことが無難なようです。
はてなブログのテーマの中には、デフォルトのフォントサイズが16px未満のものがあるので、一度自身のぶログやサイトを確認し、もし16px未満であるようならcssを変更してみてはいかかでしょうか。
.entry-content { font-size: 16px; }
文字の色
はてなブログのデフォルトのテーマ「Life」における文字の色は「#3d3f44」に設定されています。
color: #3d3f44;
これはカラーコードといって、#から始まる6つの英数字で構成されています。16進法という表し方で、例えば「#ffffff」は白、「#000000」は黒です。
「#000000」は真っ黒に当たるので、「#3d3f44」は前者と比較するとほんの少し明るい黒になります。ではなぜ少し明るい黒をデフォルトで使用しているのでしょうか。
理由は黒過ぎると背景に馴染まず、文字が読みにくくなってしまうからです。ためしに「#000000」と「#3d3f44」で書かれた文字を見比べてみましょう。
#000000
当ブログは2017年2月10日に開設しました。2018年2月10日に1周年を迎えたわけですが、ブログを1年間続けたことに対して、それまでのことを振り返るような記事は投稿できずにいました。理由はプライベートが忙しくなってしまい、1周年の日に投稿することができず、そのまま公開のタイミングを失ってしまったためです。
#3d3f44
当ブログは2017年2月10日に開設しました。2018年2月10日に1周年を迎えたわけですが、ブログを1年間続けたことに対して、それまでのことを振り返るような記事は投稿できずにいました。理由はプライベートが忙しくなってしまい、1周年の日に投稿することができず、そのまま公開のタイミングを失ってしまったためです。
微妙な差になりますが、「#000000」で書かれた文章は少しギラギラして見えてしまいます。逆に「#3d3f44」で書かれた文章は背景に馴染んでおり、落ち着いた印象を受けますね。
この例ではたった数行なのでわかりにくいかもしれませんが、サイト全体で見るとなると見やすさに結構違いが出てきます。
私もネットサーフィンしていると、まれに全文「#000000」で書かれたブログやサイトを見かけます。「このブログ妙にチカチカするな...」と思い、確認してみると「#000000」だった、なんてことも。
一度ご自身のサイトやブログの文字色を確認してみると気付かなかったことに気づけるかもしれません。
ちなみに当ブログでは「#4444444」という色を採用しており、こちらもほぼ上記の例と同じで「少し明るい黒」になります。今お読みいただいているこの文章も「#444444」ということになります。
.entry-content { color: #444444; }
まとめ
今回は文字に焦点を当てた今すぐできる工夫についてご紹介しました。
上記の3つのポイントをまとめたcssコードはこちら↓
.entry-content { text-align: justify; font-size: 16px; color: #444444;/* 「#000」になっていたら変更を検討してみてください */ }
不明点や質問などございましたら、Twitterやコメントなどでご連絡いただけますと幸いです。
以上、最後まで読んでいただきありがとうございました！
気に入ってくださった方は、読者登録やブックマークなどしていただけると嬉しいです。（励みになっています！）
よろしくお願いいたします！m(._.)m
ブックマーク・コメントありがとうございます。
YUUU BroG
＞めんおうさん（id:mennou）
お読みいただきありがとうございます！
＞naoさん（id:nyaonyaokun）
早速適用していただけたようで嬉しいです！！ちょっとの工夫で受ける印象も変わってきますよね！
＞いかベーダーさん（id:yonjyoudansi）
参考になったようで幸いです！！（はてなのお名前が「いかベーダー」に変わっていたこと今気が付いた）
＞オレンジさん（id:mata1）
ブログを読んでくれた人に与える印象が結構変わってきますよね。特に文字の色は影響が大きいと思います。
＞たいやんさん（id:taiyanmama）
テーマを作成している人は本当に細かい部分まで考えて作っているんだと、私もこの記事を書いていて改めて思いました。
＞ぽめcさん（id:PoMec）
文字はサイトの印象を作る大事な要素のひとつだと思うので、意識してみると初めて気づくことがたくさんあります。