理想のfont-familyを考える【おすすめのフォント】

SEOとデザインのバランスを考えるとおすすめは「ヒラギノ」「Noto Font」「メイリオ」です。検索に上位表示され、かつ、可読性の高いサイトを約40サイトを調査しました。「新ゴR」「游ゴシック」も魅力的ですが、利用には工夫が必要です。シンプルにスタートするという観点で理想のfont-familyを考えました。
Welcome
  • 手間をかけない
  • サーバサイドのWebサイトを使わない
  • 全世代にやさしい

結論:おすすめのfont-family

当サイトがおすすめする理想のfont-familyは以下のとおりです。

font-family: "ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Noto Sans", "Noto Sans CJK JP","メイリオ","Meiryo","MS Pゴシック", "MS P Gothic","Osaka", Verdana, Arial, Helvetica, sans-serif;

当サイトのコンテンツ部分は、まさにこの組み合わせです。

また、ビジネスなどの格式が必要な場合は、丸ゴシックを除いてください。

font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Noto Sans", "Noto Sans CJK JP","メイリオ","Meiryo","MS Pゴシック", "MS P Gothic","Osaka", Verdana, Arial, Helvetica, sans-serif;

なぜ、このfont-familyがおすすめなのか?

当サイトのオープンは2017年9月ですが、その3か月前から研究と準備を進めてきました。

そして、その難所の1つがこの「font-family」の選定でした。

Webフォントはこちらの記事の通り、自由に設定できますので、デザイン的にこだわろうと思えばとことんこだわれます。当サイトも、当初はいろいろなフォントでデザインを検証していました。

そして、検証の最中、ある重要な結論にたどり着きました。

フォントにこだわりすぎると、将来の可能性を狭める。

Webサイトは成長と共に変化していきます。GoogleもYahooもMicrosoftも全部そうです。

  • ビジネステイストからフレンドリーテイストへの変化
  • 「游ゴシック」のような新たなフォントの登場
  • 高年齢化と共に進む老眼世代の増加

このような変化に追従していくとき、サーバインストール型のWebフォントは「重石」になることに気がつきました。

未来に柔軟性を残しておく

font-familyは、毎日設定を変えるような場所ではありませんので、変更したいと思ったときには、やり方はきっと覚えていません。なので、あらかじめコピー&ペーストで変えられる程度に簡単な設定にしておいたほうが後々安心です。

このような視点に立った時、現時点で選択できるフォントは限られてきます。

  • あらかじめパソコンやモバイル端末に入っているフォント
  • フォント設定方法が提供されているフォント

そして、この代表選手が「游ゴシック」「ヒラギノ」「Google Noto Font」「メイリオ」です。また、レンタルサーバによっては「新ゴR」のような新潮流のフォントも利用することができます。

この中で、「游ゴシック」はこちらの記事でのご紹介どおり、設定しないままですと線が細身となって読みづらさが残ります。老眼が進む世代にとってはやさしくなく、あらゆる端末に適合できるようにCSSを作り上げるのは、プロデザイナーでなければ難しいです。

以上のような消去法で残るのは、「ヒラギノ」「Google Noto Font」「メイリオ」です。これを、Mac、Windows、モバイルで各々美しく表示されるように並べると、冒頭のようになります。

また、Linuxなどでこれらのフォントがインストールされていない端末では、端末のデフォルトのフォントが利用されます。例えば、Ubuntuでは「小塚ゴシック」で表示されるはずです。

まとめ

クイックスタート、成長性、シンプルな管理という三方向から理想のfont-familyを考えると「ヒラギノ」「Google Noto Font」「メイリオ」が残りました。「游ゴシック」は抗えない老眼の壁があり、「新ゴR」などの新潮流フォントはサーバ移転リスクを考えると、これらよりは若干優先順位を下げておいたほうが無難です。

この考察は、あくまで一般論ですので、

  • デザインにフォーカスしたサイト
  • 期間限定のサイト
  • サイト管理に人員を割いている会社・組織
  • 見た目のインパクトを重視したいケース
  • 「物語系ラーメン店」のようにこだわりをPRしたい場合

などでは、サイトに集まるユーザーさんの視点をもとに決めるのがベストです。