聞くところによると、文字のサイズが16px以上だと、SEO的にもメリットがあるとかないとか。（詳細はのちほど）
当たり前の話ですが、人は誰しも、読みやすければ読むし、読みにくければ離脱する生き物なワケですよ。
今日はちょっとブログ初心者にとって役に立ちそうな話を。
ブログ…読まれたいですか？だったら、読み手に対する思いやりの心を大切にね！
最近さ、スゲー読みづらいな、っていう「はてなブログ」を、ちょいちょい目撃するようになりまして。
なんなんだろう？なんでみんな、こんな読みづらいデザインのテーマ（テンプレート）を使ってんだろう？って、不思議に思いまして。
（※私は基本的に、パソコンから読んでいます。スマホからは滅多に読みません）
ザックリ言うとね、
文字が小さくて読めない！
（わしゃハズキルーペの渡辺謙か）
しかもダメ押しで
文字色が薄くて読めない！
なんで？
なんでそんなデザイン使用してんの？
あんまり立て続けにそういうブログばっかり訪問してるうちに、ちょっとイラッとしちゃいまして。
なんで、こんなことが起きてんだろう…？って不思議に思ってさ、「はてなブログ」のテーマのページ、見てみたのよ。
そしたら、「はてなスタッフがイチオシのテーマはこれです！」みたいな記事があったんよね。
記事の中身は見てませんけど、あ～これか、と。
おそらく、あくまでも、予想ですけど、はてなのスタッフが、「このテーマ、いいですよ！」って薦めてるデザインが、読みづらいやつなんだろうな～と。（憶測です）
なんでも鵜呑みにしちゃイカンよね～。
自分で調べて、確認して、体験して。
そういうのが大事なんよね「人生」っていうのはさ！（話を大ごとにする）
まぁ、私みたいな素人がアレコレ言っても説得力がまるでないんでね、ちょっと引用させていただきましょう。
【検証】スマートフォンで読み易いfont-sizeとは？ | SEO対策なら株式会社ペコプラ
読みやすいフォントサイズとは？読み物系30サイトを検証
文字サイズは16px、そしてその中でも行間は1.5emという設定が1番多く見られました。
yahooやbiglobeといったたくさんの人が目にするポータルサイトで使われているので、無意識に”読みやすい”と感じるフォント設定とも言えるのではないでしょか。
「Yahoo!」とか、「All About」とか、コンテンツの大半が文字で占められているような、「読みやすさ最優先」のサイトでは、文字のサイズを16pxに設定している場合が多いようですね。
読みやすさよりも「オシャレ度優先」っていうサイトの場合、文字が若干、小さめな傾向のようです。
PCとスマートフォンでフォントサイズを変えているサイトは30サイト中13サイト!?
意外な結果が出ました。PCとスマートフォンでフォントサイズを変えているサイトは30サイト中13サイトにとどまり、残りの約3分の２のサイトでPCとスマートフォンでフォントサイズが同じという事がわかりました。
また、1番多かった本文文字サイズ16pxを指定しているサイトのおよそ半数以上はスマートフォンでも16pxのままでした。この事から、16pxはPCでもスマホでも読みやすい文字サイズという事がわかります。
なるほど、調査した約3分の２のサイトで、
PCとスマートフォンでフォントサイズが同じだったと。
そして
記事本文の文字サイズは16pxが主流とのこと。
ようするに「16px最強」ってことですよね。
スマホもPCも、とりあえず、16pxにしておけば間違いない。
もうちょっと深掘っていきましょう。はてなブログの場合、どうなんだ？と。
思いっきり、がっつり、ドンピシャな記事がありました。
「うわっ…はてなブログ、読みにくすぎ…！」最大の原因はコレ - オークニズム
1000個以上のはてなブログを観察したそうです。
んで、その結果、「めっちゃ読みづらい」と。
身も蓋もないっすね。
googleが推奨している文字サイズ
ところで、あなたは「googleが推奨している文字サイズ」というのがあることをご存知だろうか？
一言でいうと
16px以上
これがgoogle推奨の文字サイズ。これはPCだろうとスマホであろうと関係ない。どちらも16px以上だ。
SEO的にも不利
ちなみに、google公式のSEOチェックツール「Lighthouse」というChromeの拡張機能が最近リリースされた。
これによると、そのチェック項目のひとつに「フォントサイズが適切か（ページ内の75%以上の文字が16px以上にする）」というのがある。
つまり、googleのSEOチェック項目のひとつに、記事内の文字サイズも確実に影響しているということが言える。
そもそも、機械的なSEOを考えるまでもなく、読者として読みにくい時点で離脱率は高まり、回遊率は下がり、結果的にSEOに影響することは言うまでもない。
Googleは、フォントサイズが適切かどうか？を気にしている、と。
そしてその内容は
「ページ内の75％以上の文字が16px以上かどうか？」みたいな。
これが1つの目安になっている、と。
まぁ、グーグル神どうこうを抜きにしても、ブログを読むのはあくまでも人間ですからね。
16pxだろうと18pxだろうと、とにかく、読みづらければ訪問者は読むのを辞めるし、サイトの評価は下がるわけですよ。
肝心なのは、読みやすいかどうか。
もっと突っ込んでいえば、
読んでくれる人のことを考えているサイトかどうか。
一言でいうと「思いやり」の話になってくる。
さらに突っ込んでいきましょう。じゃあ、はてなブログのテーマって、どれを選べばいいのか？
先ほどの記事（「うわっ…はてなブログ、読みにくすぎ…！」…）の中で、はてなで人気上位のテーマ、9個をチェックしています。
がっつり「ダメだし」されてるテーマもあったりしますが、一応ね、今回は「このテーマはダメ」って話は控えようと思います。
ダメなテーマを取り上げるのではなく、ナイスなテーマを取り上げていきたい。
PC用、スマホ用、どちらから観ても、初期設定から文字サイズが16pxのテーマを利用すれば、わざわざfont-sizeを自分でカスタマイズしなくてもいいわけです。
ということで。
実際のところ、どうなのかと言うと…。
PC/スマホともにgoogle推奨の16px以上を満たしているテーマは
たったの3つ…
はい、人気のテーマの大半がイマイチということで。
デフォルトの状態では、文字が小さすぎるようです。
テーマ導入後に、ブログ主自身が、文字サイズのカスタマイズをした方が良いってことなんでしょうね。
初期設定から「16px以上」の条件をクリアしているのは以下の3つのテーマのようです。
Brooklyn
Blank
CONTENTS
「Brooklyn」「Blank」「CONTENTS」、この中からテーマを選べば、文字のサイズに関しては、ブログ主が自分でいじる必要は無さそうです。
「カスタマイズとかよく分かんねぇよ、オレはブログが書けりゃいいんだよ」
っていう「中身で勝負派」の方は、この3つの中からテーマを選ぶといいんじゃないでしょうかね。
個人的には、「Brooklyn（ブルックリン）」がオススメですかね。
インストール回数が現時点で、2万6千回以上と、利用者がメチャ多いです。
必然的に、たくさんの人がブルックリンのカスタマイズ方法を記事にしていますので、自分自身でデザインをいじりたい時に、情報を得やすいです。
あと、ブルックリンは、表示のスピードが割と速いってのも魅力ですね。
（今現在はどうなのか分かりませんが、2016年当時、すでにあった似たようなシンプル系デザインのテーマと比較して、ブルックリンがスピードテストで一番速かったような記憶があります）
ちなみに、このブログ「自由ネコ」も、ブルックリンを愛用しております。（2019年2月現在）
【ちょっと追記】
はてな村随一の凄腕ハイパーメディアクリエイター、らいち師匠から、こんな助言が…！！
ありがとうございMAX！！！
ユーザビリティの観点からcssで文字サイズをpx単位で絶対値指定するのはオススメできません。多くのブラウザのデフォルト値が16pxなので弄らないか100%と設定し、文字の拡大は閲覧者側で変更できるようにしておくが吉。 / “【はてな初心者講座】文字のサイズ 16px以上にし…” https://t.co/hccf4ymeQp
— 阿豆らいち (@AzuLitchi) February 14, 2019
これ、ちょっとややこしい話になりますが
「多くのブラウザのデフォルト値は16px」
なんだそうです。
ようするに、サイズを指定しなければ、勝手に16pxで表示されるってことみたいで。
なので、
もしも自分でカスタマイズする時は、「16px」ではなく「100%」と指定した方がいいよ、って話です！
ちなみに、このブログが利用しているテーマ「ブルックリン」も、CSSを確認してみると、実は文字サイズの指定をしてませんでした。
何も指定してないので、結果的にブラウザのデフォルト値の「16px」で表示されていた、ってことなんですね。
これ、ちょっと説明が難しいなぁ～…。
よく分かんない時は、初期設定の状態でfont-sizeを指定していないテーマか、font-sizeを100％で設定しているテーマを利用すれば、自分でアチコチいじらなくても、勝手に最初から16pxで表示されますよ、って話ね。
ようするに、
はてなテーマは「ブルックリン」を使うか、
もしくは！
らいち師匠が満を持して先日リリースしたばかりの「steampunk」を使えば、手間をかけなくても、勝手に16pxで表示されるよ！
イラストや写真中心のブログのためのレスポンシブテーマ！！
「steampunk」！
どうですか、らいち師匠！
この巧妙なステマ！
あ、あと最後に。なんで私が「読みやすさ」にこだわるかと言うと、自分の目が悪いからです。
散々、思いやりうんぬんって話をした後でアレなんですけど、ぶっちゃけ、私自身、あんまり目が良くないってのが「読みやすさ」を追求する理由なんすよね。
ようするに、自分の都合。
近視、乱視、老眼、飛蚊症、網膜剥離…まぁいろいろとね、各種取り揃えておりますよ。
文字が読みづらいのよ、ホント。
文字が小さくて、薄い色だと、全然、読む気がしない。
よほど面白い内容だったら話は別ですけど、大抵は…ねぇ。
オシャレを追求したい人は是非、どんどん追及していけばいいと思います。
文字を小さく、色を薄く、どんどんシャレオツにすればいいと思います。
ただワシはそういうサイト、読まんけどね。
大事なのは、何のために書いているのか、自分で理解しておくということでしょうね。
オシャレな自分を観てもらいたいのか。
お洒落さん御用達のサイトを目指しているのか。
それとも、いろんな人に読んでもらいたいのか。
自分のために書いているのか。
それとも、
読んでくれる人のことも大事なのか。
目指すところは人それぞれだと思うんでね、明確な正解なんてないんでしょうけど。
文字のサイズしかり、文字の色しかり。
ただ、読みやすさを意識するなら文字のサイズは16pxが目安ですよ、って話です。
基本を理解したうえで、それを崩していく、自分スタイルを確立していく、ってのはイイと思うんですけどね。
なぜ16pxなのか、っていう「初歩の初歩」を知らないで、読みづらさ全開のブログを書いてる人がいそうだなって思ったんで、一応。
せっかく、良い内容の記事を書いてるのに、読みづらさのせいで訪問者の離脱率が高いとすると、かなりもったいないもんね。
あ！あとね、
いつもスマホからしか見てない人の中には、自分のブログが、「パソコンから見るとメッチャ読みづらい」ってことに気づいていないって方もいるみたいですよ！要注意！
はい、今回はこんな感じです。
他にもね～…記事タイトルの付け方で自滅してるブログビギナーの方々とかもいっぱいいそうだし、あ～もったいないな～って思うこと度々ございます。
メンタル的な話だけでなく、テクニック的な話も、今後、書いていく予定です。
こちらのカテゴリー「はてなブログ初心者講座」
