どうも、みずにゃんです。
Webフォントサービス「FONTPLUS」や今最強のフリーフォント「LINE SEED JP」を使って当ブログのフォントをWebフォントに切り替えてみました！
Webフォントに回帰した理由
Affinityを買っていろいろフォントについて調べているうちに、自分のサイトのフォントも気になり出しました。フォントについては各デバイスのデフォルトフォントに依存していてデバイスによってデザインイメージに差がありました。
それを解決するのが、Webフォントです。
これまでもWebフォントを採用していた時期がありましたが、サイトの表示速度に影響するデメリットを考慮して一時取りやめたことがあります。表示速度のスコアが落ちることで検索結果への影響が大きかったのです。
その一方でWordPressの性能が向上し、公式ディレクトリテーマでも表示スピードが高速になるようにチューニングされていることも多くなりました。
加えてレンタルサーバーの技術向上で、レンタルサーバー側の表示速度も改善してきています。とくに僕が利用している「ConoHa WING」は「WP-Search」の方が行った最新の各レンタルサーバーのスピード計測でも、ColorfulBoxに次ぐ2位と好位を付けています。老舗・定番のエックスサーバー（3位）よりも速く、GMO系では最速のスコアです。
Google検索でも単純な表示スピードだけでなくページ内容の質も重視されるようになり、「単純にサイト表示スピードが速いからGoogle検索の上位やアクセス数が獲得できる」時代ではなくなってきているのです。
8年半のブログ運営で少しづつデザインとUIの改善をしてきましたが、フォントが揃わないことで印象が変わってしまうことには大きく悩まされてきました。
ということで、Webフォントを全面的に採用しても不利な状況に追い込まれるリスクもだいぶ落ちてきているので、これを機にWebフォントを再導入することに決めました。
「FONTPLUS」を使って退屈なイメージを一掃
Webフォントは無料で使える「Google Fonts」やAdobe製品にバンドルの「Adobe Fonts」、それにConoHa WINGでも提供されている無料のモリサワフォント（月7.5万PVまで）もありますが、こういったサービスではフォントウエイト（太さ）の選択肢が狭く、フリーフォントではWindowsで表示した際に綺麗に出ないもの（本文で使うとギザギザする）もあるため、有料サービスを使うことにしました。
ソフトバンク傘下のSBテクノロジーが提供する「FONTPLUS」はフォントワークス、モトヤ、Monotypeなど、有名フォントベンダーのフォントが使えるWebフォント配信サービスです。
「スマートライセンス・プラン」の10万PVチケット（1ヶ月間有効）は月額1,100円（税込）で購入することができ、趣味系のウェブサイトでも気軽に使える点が魅力。フォントワークス系のサービスなのでデザイン書体も豊富に用意されています。
一般的にWebフォントを表示するにはサブセット化する必要があり、日本語フォントは容量が大きいためサイト表示速度への影響も大きいのですが、FONTPLUSでは独自技術で”サイトで表示する文字のみ”をサブセットする仕組みのため、他社でWebフォントを埋め込むよりもスピーディーにフォントを表示させることができるのです。
当ブログでは、使用するフォントを以下のように設定してみました。
- 本文：Tazugane® Info StdN Book
- 本文太字：Tazugane® Info StdN Bold
- H1（記事タイトル）：スキップ Std E
- H2以下の見出し：NUDモトヤアポロ5
「Tazugane® Info StdN」（たづがね角ゴシック Info）はMonotype製フォントで、欧文にはNeue Frutigerが使われています。モリサワ「TBUDゴシック」に比較的雰囲気が近く、FONTPLUSで提供中のゴシック体の中でもっとも安定感に優れていると感じて採用しました。
見出しで使っている「スキップ」（フォントワークス）と「モトヤアポロ」（モトヤ）は両者とも雰囲気は近いですが、モトヤアポロのほうが踊っています。なのでタイトルは見やすさを重視してスキップ、記事内の見出しはワクワクしながら読んでもらえるようにモトヤアポロにしました。
これで、安定感はそのままに、遊び心を加えて退屈な感じを和らげることができたと思っています。
万能に使えるフリーフォント「LINE SEED JP」
このほか、記事一覧のタイトル文字の部分に「LINE SEED JP」を使っています。
「LINE SEED JP」はフォントワークスとLINEが共同で開発したフリーフォント。日本語とアルファベットを組み合わせても美しく表示できるように白紙状態からデザインされていて、ゴシック体の安定感を持ちつつも、丸みを感じられる書体です。
無料で多用途に使えるフリーフォントなのですが、フォントワークスが関わっているとだけあって、有料フォント並の使い勝手を有しています。9000以上の文字に対応しているので、ブログの本文用としても不自由無く使うことができるのです。
今あるフリーフォントの中では間違いなく最も高いクオリティを有し、万能に使えるものに仕上がっています。
姉妹サイトのWebフォント導入
当ブログ本館だけでなく、Dreaming Factory運営の他サイトも、「FONTPLUS」ではないですがWebフォントを順次導入しています。
Dreaming FactoryオフィシャルサイトはConoHa WINGのモリサワフォント「TBUDゴシック」を核に、「見出ゴ」「ゴシックMB101」「新ゴ」を使用しています。
「みずにゃんの写真さんぽ」も同様にモリサワフォントで、こちらは明朝体の「UD黎ミン」と「リュウミン」を採用しました。
「てつぱら！アーカイブ」はCormorantテーマに標準搭載のモリサワ製フリーフォント「BIZ UDPゴシック」をそのまま使っているほか、現在制作中の「体操服イラスト全国図鑑」もWebフォントを採用する予定です。
Webフォントにしたことで、今まで以上にサイトの魅力は間違いなくアップしているはず。今後もWebフォントの美しさが発揮できるような楽しいサイト作りを心がけていきます！
最後まで読んでいただき、
ありがとうございました！
こちらもチェックしてみてください！
