AFFINGER5ではフォントを簡単に変更できます。
当ブログもしばらくは「Noto Sans JP」を使ってきました。
フォントを変更するとブログの雰囲気がガラッと変わるので、ブログのテーマに合わせて変更するのはオススメです。
しかし、フォントの中にはブログの表示速度に悪影響をもたらす場合があるので注意が必要です。
この記事ではAFFINGER5の時にオススメのフォントを解説します。
何気なく速度を測ったらめっちゃ遅かった
いままでブログの表示速度にあまり関心がありませんでした。
パソコンやスマホで自分のブログを検索して表示させても、とくに遅いと感じることはありませんでした。
でも一応「TAKUBLOG」のスコアをPageSpeed Insightsで測ってみたところ
パソコン：78
スマホ：41
結構スコアが低い…
表示速度優先（β）を試す
AFFINGER5には様々な機能がついていますが、「表示速度優先（β）」はそれらを使えないようにする代わりに表示速度、読み込み速度を速くする機能です。
【使用できなくなる主な機能】
- スライドショー機能（ショートコード含む）
- Googleフォント・マテリアルアイコン
- スクロール追尾広告
- コピー機能（SNSボタン）
- アニメーションクラス
- カウントダウン（EX）
- もっと読む（無限スクロール）（EX）
使ってみた結果が
パソコン：94
スマホ：73
めっちゃスコアが伸びた。
良いスコアになったのはうれしかったんですが、ここで衝撃の事実が。
表示速度優先（β）で使えなくなった機能の内、私が使っていたのは「Googleフォント」だけでした。
つまり、スコアを下げていた原因は、私が使用していたフォント「Noto Sans JP」ということに。
「Noto Sans JP」はPageSpeed Insightsの点数が低くなる
調べてみたところ日本語フォントは重いみたいです。
理由はわからないんですが、日本語フォントを使うと文字が読みやすくなるメリットはありますが、速度を犠牲にしないといけなくなる。
どっちをとるかはサイトやブログの規模次第だと。
記事数の多いサイトやブログでは速度を優先にして、30ページほどのミニサイトくらいなら日本語フォントでもいいんじゃないかなと思いました。
ちなみにAFFINGER5ではNoto Sans JP以外にも4つフォントが選べます。
- M PLUS Rounded 1c
- 游ゴシック
- 游明朝
- 旧テーマ版（ヒラギノ角ゴ Pro W3）
一応、上記の4つのフォントでもスコアを測ってみましたが、どれもスコアはNoto Sans JPよりも良い結果でした。
Noto Sana JP以外を選べば問題ないの？
Noto Sans JPがスコアを悪くしているのはわかったので、その他のフォントを選べば良いかというとそうではなくて。
個人的にNoto Sans JP以外なら「游ゴシック」が使いたいフォントなんですが、「游ゴシック」はiPhoneでは表示されない問題があります。
游ゴシックに設定してもiPhoneで確認すると違うフォントで記事が表示されちゃうんです。
これはiPhoneに搭載されてる「iOS」に游ゴシックがインストールされていないからなんです。
游ゴシック以外の「M PLUS Rounded 1c」「游明朝」「旧テーマ版（ヒラギノ角ゴ Pro W3）」はiPhoneでも同じように表示されます。
なので、この3つの中から選ぶのが良いと思います。
私は「旧テーマ版（ヒラギノ角ゴ Pro W3）」を選びました。
いろんな大規模サイトで使われているのと、小さい画面サイズのスマホで確認しても読みやすいと感じたからです。
まとめ
サイトやブログのイメージにフォントはとても重要です。
しかし、私のように見た目が良いというだけでフォントを選んでしまうと、表示速度が遅いブログになりユーザーの離脱に繋がってしまいます。
AFFINGER5ではNoto Sans JP以外のフォントがPageSpeed Insightsのスコアが良かったんですが、PCとスマホで表示を同じにしたいなら「M PLUS Rounded 1c」「游明朝」「旧テーマ版（ヒラギノ角ゴ Pro W3）」の3つから選ぶのが良いです。
私のオススメは「旧テーマ版（ヒラギノ角ゴ Pro W3）」です。