「うわっ…はてなブログ、読みにくすぎ…！」最大の原因はコレ
僕は元々WordPressユーザーであり、今年から新規にはてなブログを始めた。もちろん今でもWordPressは触るし、徘徊するブログもWordPressが多い。
ただこの1ヶ月間、主にはてなブログのデザイン面を意識して、軽く1,000個以上のはてなブログを観察してきて気づいたことがある。
それは…
文字が読みにくい！
ってこと。
何故はてなブログはこれほどまでに読みにくいのか？その原因は？対策は？今回は、そんな考察記事である。
カスタマイズどうこうの次元ではない
はてなブログには公式非公式問わずたくさんの「テーマ」が存在する。そして、多くのユーザーがそれらテーマを使用し、尚且つカスタマイズしたりしなかったり。
「カスタマイズ」というと、オシャレさ、イケてる感、オリジナル性、とりわけ目立ちそうな挙動とか見栄えに終始しがちだ。
ヘッダー周りやグローバルナビゲーション、サイドバーやカード型レイアウト、シェアボタンやフォローエリア、ホバーエフェクトやアニメーション等など…
それらカスタマイズの影響なんて誤差レベルである。「読みにくい」とは直接的に関係しない。なんなら、僕のブログなんてカスタマイズの塊である。
では読みにくいとはどーゆーことか？
記事そのものだ。
読みやすいか読みにくいか。それを決定づける最大のポイントはここにある。ヘッダーやサイドバーやフッターをゴリゴリにカスタマイズしてようがしてなかろうが関係ない。
では、見出しのカスタマイズか？
いや違う。見出しに関してはデフォルトであろうとカスタマイズであろうと、基本的にフォントが太くなったり大きくなったり、装飾があったりでだいたい分かるし影響は少ない。
読者が読みやすいか読みにくいか、一番直接的に関係あるのは
記事の文字サイズ。
googleが推奨している文字サイズ
ところで、あなたは「googleが推奨している文字サイズ」というのがあることをご存知だろうか？
一言でいうと
16px以上
これがgoogle推奨の文字サイズ。これはPCだろうとスマホであろうと関係ない。どちらも16px以上だ。
SEO的にも不利
ちなみに、google公式のSEOチェックツール「Lighthouse」というChromeの拡張機能が最近リリースされた。
これによると、そのチェック項目のひとつに「フォントサイズが適切か（ページ内の75%以上の文字が16px以上にする）」というのがある。
つまり、googleのSEOチェック項目のひとつに、記事内の文字サイズも確実に影響しているということが言える。
そもそも、機械的なSEOを考えるまでもなく、読者として読みにくい時点で離脱率は高まり、回遊率は下がり、結果的にSEOに影響することは言うまでもない。
はてなブログの文字サイズ
これは、はてなブログのテーマストア「人気順」でのTOP画面だ。
ちょっとやる気のある多くのはてなブロガーがこの中からテーマをインストールし、それを基にカスタマイズをしている。
ちょっとやる気のあるブロガーが多いので、検索やSNSで見かける多くのはてなブログが、だいたいこのどれかを使用している可能性が濃厚。
では、それぞれのテーマの文字サイズを確認しよう。
| テーマ名 | PC | スマホ |
|---|---|---|
| Minimalism | 15px | 14px |
| Brooklyn | 16px | 16px |
| Innocent | 16px | 15px |
| SOHO | 16px | 14.5px |
| ZENO-TEAL | 14.5px | 14.5px |
| DUDE | 15px | なし |
| Blank | 16px | 16px |
| Naked | 16px | 15px |
| CONTENTS | 16px | 16px |
改めて確認しておくが、これらははてなブログの中で特に人気のある上位9テーマだ。
そのうち、PC/スマホともにgoogle推奨の16px以上を満たしているテーマは
たったの3つ…
人によっては、たかだか1pxや2pxくらい…とお思いの人もいるかもしれない。あなどるなかれ。
明らかに違う。そして明らかに小さい。
文字における1pxは非常に重要。とくに、記事本文における文字サイズは細心の注意をはらう必要がある。
上記のテーマの中でも、特に「Minimalism」がヤバい。
その名前から察しがつくように、とにかくミニマム意識。ミニマムを意識しすぎたのか、あるいははき違えたのか、テーマの説明の中でこのように述べている。
現存のレスポンシブテーマは、スマホからみると文字が少し大きすぎたり、若干バランスがおかしくいものが多いですが、当テーマは「モバイルファースト」に作られているので、スマホからみても本当にレスポンシブテーマなのかっ思われるくらいデザインが整っているかと思います。
こんな短い文章の中で、誤字脱字が2箇所もある件については目をつむろう。
要は「既存のテーマではスマホでの文字サイズが大きすぎるので、”あえて”文字サイズを小さくしておきました！」ってことだ。
余計なお世話である。
皮肉にも、このテーマはそのデザインの素晴らしさ故、人気ランキング常にTOP。多くのユーザーがこのテーマを使用し、今なお新規でインストールされ続けている。
その結果、多くのブログがgoogle推奨の文字サイズにも満たないちっさい字で記事を投稿しまくっている事態だ。
アーメン。
はてな公式テーマの文字サイズ
ちなみに、はてなブログにはもちろん公式テーマも存在する。そんな公式テーマの中でもダントツで人気のテーマが「Epic」というテーマだ。
2位のテーマのインストール数が7万ちょいに対して、このEpicは23万以上のインストールを誇る。バケモノである。もはやキングオブテーマ。はてなブログと言えばEpicと言っても過言ではない。
そんなEpicの文字サイズ。この確認は避けては通れない。で、調べてみた結果驚愕の事態が。。。
PC：14px
スマホ：14px
オワタ。
はてなブログのキングオブテーマ、そんな公式テーマの文字サイズがなんと、PC/スマホともに14px。どのテーマよりも小さかったという事実…
アーメン。
超人気WordPressテーマの文字サイズ
ちなみにちなみにだが、はてなブログをディスるためにはもちろん比較対象も必要だろう。
そこで、今をトキメク超人気WordPressテーマ「STORK」と「SANGO」の文字サイズを確認してみた。
結論から言うと…
余裕で16px以上！
PCとスマホともにだ。
特に、SANGOに至ってはスマホであろうと17px以上の文字サイズであった。SANGOが居心地の良いデザインで読みやすく、ユーザーに愛される理由がわかった気がする。
文字サイズを変更しよう！
ここまでの考察を読んで、出来ることなら文字サイズを変更したいとお考えのあなた。ジャスティス。
変更したいではなく、変更しなければならない。
記事とは、自分のためではなく読者のためにあるべきで、そのためには最善を尽くすのがブロガーの務め。今スグに変更しよう。
CSS
.entry-content p {font-size: 16px;}
これを突っ込むだけでおｋ。
もし、これでもスマホがまだ適応されませ〜ん😭 って人は
@media screen and (max-width: 480px){.entry-content p {font-size: 16px;}}
これも付け足しておけばおｋ。
上記では、16pxと記載しているが、別にこれは17pxでも構わない。ちなみにこの「オークニズム」はSANGOにならって17pxだ！
まとめ
はてなブログには素晴らしいブロガーがうじゃうじゃいる。とくに文章が。そんな素晴らしい文章を、読みづらいままにしておくことは勿体ない以外の何ものでもない。
たった1pxだ。
このたった1px文字サイズを大きくするだけで、あなたのブログの読みやすさは圧倒的に変化する。
そしてその結果、良いことが起こる可能性がアップする。別に何も難しいことではい。
是非全てのはてなブロガーにやって頂きたいと切に願っている。
