dtn.jpの各サイトでバラバラとなっていたフォントを統一してみることにしました。

これまで、日本語フォントといえばWindows 標準フォントの「MS P ゴシック」や「メイリオ」といったレベルぐらいしか知りませんでしたので、dtn.jpのサイトフォントも適当にfont-familyを設定するといった感じでやってしまっておりました。

そんな中、先日に本業の会社で運営しているサイトのリニューアルミーテイングに顔を出した際、フォントはあれがいい、これがいいとWEB担当が制作会社担当と議論しているのを聞きまして、実はフォントも非常に奥が深いんだなということを改めて知ることになったので、dtn.jpのサイトフォントも整えようと思い、色々と調べておりました。

この記事では、色々と調べた結果dtn.jpで新たに設定をすることにした標準フォント「游ゴシック」とwebフォント「IBM Plex Sans」の説明と、そこに辿り着くまでに調べた他のWEBフォントについてもご紹介をしたいと思います。

新しく設定したフォント

色々と試してみて最終的に設定をしたのがこの欧文webフォント(IBM Plex Sans)と標準フォント(游ゴシック)の組み合わせです。

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap');
font-family: 'IBM Plex Sans', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
font-weight: 500;

標準フォント「游ゴシック」

この「游ゴシック」はWindows 8.1頃からWindowsの標準フォントになっていたようです。Windows10マシンのコンパネをみたら、この游ゴシックだけでなく游明朝というものもしっかり入っておりました。

游ゴシックは書体デザインを専門に手がける「字游工房」さんが制作したフォントが元になっているようで、かなりスッキリしたプロっぽい印象があります。

Windowsフォント設定で見る游ゴシック
游ゴシックはすらっとした大人っぽい雰囲気です

メイリオとの違い

下の画像はWindowsでおなじみのメイリオですが、游ゴシックと見比べてみるとだいぶカジュアルな印象を受けるフォントだということが分かります。

Windowsフォント設定で見るメイリオ
メイリオは横に幅広いゆったりした印象

メイリオは欧文との混在に適するようにマイクロソフトが開発した日本語フォントだったようですが、改めて字游工房さんが作ったプロ向けのフォントと見比べると、字体の美しさというよりは見やすさ重視のフォントといった印象があります。

MacとWindowsの両方で標準フォント

游ゴシックの字体の完成度の高さもあってか、Windows 8.1 以降のWindowsやOS X以降のMacOSで標準フォントになっていたようですが、この游ゴシック体がMacとWindowsで標準フォントとなるまでは、両システムで共通の標準フォントというものが存在していなかったようです。

これまで全く気にしたこともありませんでしたが、ウェブデザイン職の方々には待望のフォントが登場という感じだったのかもしれません。

ちなみに、この字游工房さんは他にもヒラギノとか教科書用フォントも制作しており、さすがはプロが作ったフォントということで、どれもすごい読みやすい印象があります。更に、あの「モリサワ」のグループ会社にもなっているようです。自社フォントをここまで世に広げたというのも凄い話ですね。

font-weightに多少の違いがある

游ゴシック体の登場で、MacとWindowsで共通の標準フォントが登場したということはとても素晴らしい話と思いますが、使うにあたっては多少ポイントがあるようです。

Macに搭載されている游ゴシックは「ミディアム」「ボールド」なのに対し、Windowsに搭載されているのは「細字」「標準」「中」「太字」(「中」は、Windows10から搭載)。

そのため、font-familyで「游ゴシック」と指定すると、Macでは「ミディアム」で表示されて綺麗なのに、Windowsでは「細字」で表示されるためにかすれてしまうんです。

https://www.cherrypieweb.com/903

フォントは同じでも太さが異なるので注意が必要ということのようです。

下記のようにfont-weightに指定を入れれば多少解決することは可能のようですが、これでも100%同じとはいかないので、こちらのブログでは何年もこの話題で検討を重ねているようです。フォントは本当に奥が深い世界ということがよく分かります。

この “font-weight: 500;” という指定が肝で、この数値を指定してやると、Macでは「ミディアム」、Windows10では「中(ミディアム)」が使用されます。

これで、Windowsでも読みやすく表示されます。

(追記)ただし、Windows8.1では「標準」が使用されるので改善されません。

https://www.cherrypieweb.com/903

iOSとAndroidでは非対応

MacOSとWindowsで標準フォントとなった游ゴシック体ですが、スマホOSまでには対応がされていないようです。このため、最終的に全デバイスで同じフォントにするとなると、webフォントのお世話になるしかないようで、先ほどの字游工房さんでは「游ゴシック体 Pr6N M」というwebフォントを使っているようでした。

body {
    font-family: 'YuGothicPr6NM';
    font-weight: 500;
}

もちろん、游ゴシック体は有料のフォントですので、利用するにあたってはお金が必要になります。

有料webフォント配信サービス

先程の「游ゴシック体 Pr6N M」フォントはこちらの月額有料サービスを使って配信されているようですので、お金に余裕があるのであればこのような方法もアリのようです。とはいえ、WordPressのテンプレートすら買えない私のような人間は、OS標準フォントのみで対応するしかありません。

游ゴシック体 Pr6N MもWebフォントで利用可能なサービスREALTYPE
Webフォント配信サービスのREALTYPE

無料のwebフォントサービス

無料で使える日本語webフォントのサービスもあり、最もメジャーなものがgoogleが提供するフォントサービスのgoogle fontsのでした。今現在で日本語フォントは12フォントが無料で提供されています。

Google Fontsで提供されている日本語フォント一覧
google fontsでも日本語webフォントが提供されています

欧文webフォント

せっかくここまでフォントについて調べてきたので、標準フォントの游ゴシックだけでなく、webフォントも少し試してみることにしました。

日本語フォントは文字数も多いので表示速度にも影響しそうでしたので、欧文フォントで気に入ったものを探してみたところ、この「IBM Plex Sans」と名が付いたフォントが良さそうだと思いまして欧文にこちらを設定してみました。数字のシンプルさがなかなか良い感じです。

Google FontsでみるIBM Plex Sansフォントの字体
IBM Plex sansフォント

このフォントを調べてみると、どうやらIBMが相当気合いを入れて作ったフォントだったようで、こんなフォント紹介ページまで用意がしてありました。これまでフォントのライセンスに毎年100万ドルかかっていたので自社開発したようですが、金額を考えるとこの完成度もなるほど納得です。

「IBMのブランド精神と歴史を捉え、印刷物・ウェブ・モバイルインターフェースでも読みやすく、国際的に通用する書体」を目指して、IBM Plexを開発した

https://gigazine.net/news/20180330-ibm-plex-corporate-font/

欧文フォントにこの「IBM Plex sans」を適用させてから、日本語フォントの「游ゴシック」を適用させたかったので、このような優先順でフォント指定をしてありました。

font-family: 'IBM Plex Sans', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
font-weight: 500;

おわりに

まだ運営サイトを全て修正ができていませんが、このフォント指定を設定したサイトを見ると、中身のプログラムなどは何も変わっていないものの、なにやら洗練された印象になりました。たった数行CSSをいじっただけでこうできるとは、もっと早くに考えておけばよかったです。

もちろん、表示が強い方が見やすいので「MS P ゴシック」や「メイリオ」の方がいいという方もいらっしゃるとは思いますが、dtn.jpでは当面このフォント指定でやってみようと思います。

ABOUT dtn.jp

この運営ブログをみてdtn.jpの運営サイトに興味をお持ちになった方は下記のリンク集からサイトをご参照ください。PHP・SQL・JS・HTML・CSSや様々なAPIでゼロから立ち上げたサイトを複数運営しています。

dtn.jp関連サイト

  • ディレクトリ型検索エンジンdtn大手サイトは全てサービスを終了し、中小でも運営を継続するところがほとんどなくなってしまったディレクトリ型検索エンジンを2002年から細々運営しており、未だに細かい機能改修も行っております。申請されたサイトは実際に訪問して細かく確認をしているので登録までかなりお時間いただきます。
  • 猫ネコサーチエンジン猫・ペットサイト専用のディレクトリ型検索エンジンです。登録サイトはサイトのスクリーンショット付きでカテゴリに掲載しています。
  • 画像掲示板の泉画像やYouTubeやニコニコ動画が貼り付け可能な匿名画像掲示板です。27ジャンルに分かれた掲示板に、それぞれ100スレッドまで立てることが可能です。
  • ツイータンTwitter APIを使って10分おきに収集したTwitter(ツイッター)のトレンドワードや人気ハッシュタグデータを月別に集計してランキング形式で公開しています。
  • Keyword Tool++Yahoo APIや楽天サイトのデータを日次で収集したデータを元に、EC系キーワードをラインキング形式でご紹介しています。各ワードは検索ボリュームや関連語、24か月の検索ボリュームトレンドを確認も可能です。
  • 消費者金融の泉カードローン商品を取り扱う金融業者を一覧で比較可能としたサイトです。カテゴリ別、人気度別、限度額別、金利別に比較可能なサイトにしています。
  • TrendinGファッションモールに出店するブランドをアイテムヒット率でランキングとしたサイトです。まだβ版です。

各サイトの開発方法などについて

各サイトの開発方法や運用トラブルについては、当ブログで不定期にご紹介しています。Twitterで新着記事のお知らせもしています。宜しければフォロー下さい。