ウェブサイト制作では、游ゴシックはおすすめしない理由

こんにちは、こんばんは！せきゆおう です。

游ゴシックは好きですか？僕も印刷物では使いますが、ウェブサイトでは「游ゴシックを使ってください」と指示されるまでは使いません。

また、そう指示された場合もデメリットは必ずお伝えするようにしています。
「游ゴシックってMacでもWindowsでも標準でインストールされているし、デバイスフォントとして使う際に最有力候補では？」という方も多いです。それでも僕は推奨しません。

その理由は4つあります。
・游ゴシックはWindowsでかすれて見える
・スマホ端末に游ゴシックは搭載されていない
・実はMacOSで游ゴシックは標準では搭載されていない
・今後、システムフォントとして使えないブラウザが増える

それら4つの理由を参考資料を交えつつ解説したいと思います。

その前に...游ゴシックの採用率は非常に高い！

ウェブ制作会社ICSの池田さんが2023年4月20日に取ったアンケートとその結果です。
https://x.com/clockmaker/status/1648923492765806592

[その1]
游ゴシックはWindowsでかすれて見える

有名な話ですが、Windowsのフォントレンダリングで游ゴシックはかすれて見えることがあります。対策方法はTAKさんのこちらの記事が参考になります。font-weightに500を指定するなどの対策が必要になります。

[その2]
スマホ（iPhone, Android）には游ゴシックが搭載されていない

游ゴシックはiOSやAndroidにはインストールされていないので游ゴシックを指定しても別のフォントで文字が表示されます。そのため、別のフォントを指定する必要があります。クライアントから「スマホだとフォントが違うのだけど？」と指摘されてしまうので、事前に了承を得る必要があります。

ユーザー自身が游ゴシックをインストールすることで表示できますが、「こちらのサイトは游ゴシックを使われています。正しく表示させるために游ゴシックをインストールしてください」なんて言えませんよね...。

こちらの話は、游ゴシックに限った話ではありません。Windowsにはヒラギノが、Macにはメイリオがデフォルトで入っていません。どの端末にどのフォントが入っているか？を知ることが大切です。そのため、別のフォントを指定する必要があります。

[その3]
実はMacOSで游ゴシックは標準では搭載されていない

「游ゴシックはMacでもWindowsでも標準でインストールされている」という記事を見ますが、実は2024年5月現在、游ゴシックはMacOSの追加ダウンロードフォント扱いで、標準では搭載されていません。

調べると...macOS Sierra（リリース日： 2016年9月20日）では、既にダウンロードフォント扱いでした。
https://support.apple.com/ja-jp/101179 

...そんなに前から？

Mac OS「OS X Mavericks」（リリース日： 2013年10月22日）から、游ゴシック体と游明朝体がインストールされるという記事をいくつか確認しました。調査をしましたが、2013年〜2016年にダウンロードフォントに変わったと推測します。

なので、「游ゴシックはMacでもWindowsでも標準でインストールされている」という誤認が、もしかしたら10年近く続いていたのかもしませんね...

（僕も游ゴシックをわざわざダウンロードをした記憶がないんだよな...）

[その4]
ブラウザーフィンガープリントの観点から使えない

今後、システムフォントとして使えないブラウザが増えるの理由です。「ブラウザーフィンガープリント」や「フィンガープリント」を聞いたことがない方も多いと思います。

ブラウザーフィンガープリントは、インターネットを閲覧する際に利用する、個々のWebブラウザーを判別するために用いられる技術のこと。「フィンガープリント（Fingerprint）」とは、人間の指紋のことであるが、転じて個々のユーザーを判別する情報を表すようになった。

判別のために、閲覧ユーザーのWebブラウザーやデバイスの情報を参照し、固有の識別子を生成する。ブラウザーフィンガープリントの生成要素として、利用OSやブラウザーを判別する文字列であるユーザーエージェント、画面解像度、インストールされているフォント、プラグインの有無、タイムゾーンなどの情報が用いられる。これら要素の組み合わせが完全に一致する可能性は非常に低いという前提のもと、個々のユーザーを判別するために利用されるようになった。

引用：ブラウザーフィンガープリント | サイバーセキュリティ情報局

ここで注目していただきたいのが、引用部分の「インストールされているフォント」です！
なぜブラウザーフィンガープリントの観点から、游ゴシックが使えないかを解説します。

ブラウザーフィンガープリント対策として、Safari・Brave・Firefoxではシステムフォント以外のローカルフォントの使用ができなくなるようです。游ゴシックも対象です。

Firefox公式サイトの「どのように保護されますか？」の項目に、コンピューターにインストールされているフォントがウェブページで使用できないように制限します。と書かれていますね。（変更されたり無効になったりする可能性があります。）

▼Firefoxのフィンガープリント採取防止機能
https://support.mozilla.org/ja/kb/firefox-protection-against-fingerprinting

「多くの人が標準装備と勘違いするくらい、游ゴシックのダウンロード率が高いなら良いのでは？」と感じる方もいると思いますが、それは違います。

2024年5月現在、Macはフォントを格納する場所が複数存在します。標準フォントが入っている、システムフォントの格納フォルダ（/System/Library/Fonts）とは別に、ダウンロードフォントが格納されているフォルダがあるのです。

なんと、ブラウザーフィンガープリント対策として、システムフォントの格納フォルダ（/System/Library/Fonts）に格納されているフォントは許可するが、游ゴシックを含め、その他のフォルダに格納されているフォントは読み込まれなくなる可能性があるということです。

つまり、ダウンロードフォント扱いの游ゴシックを読み込めなくなります。

それでも游ゴシックを使いたい！

それでも游ゴシックをウェブサイトのフォントとして使いたい場合は、ウェブフォントとして使うことができます。REALTYPEさんでの契約（1,000円/月）や、Adobe Fontsでの利用が可能です。もちろん、游ゴシックが入っていない端末は別のフォントを読み込ませることは今後も可能です。

▼REALTYPE
https://www.realtype.jp/view/font

▼Adobe Fonts
https://fonts.adobe.com/fonts/yu-gothic-pr6n 

ただし、クライアントにAdobe CCのアカウントを取得してもらう必要があります。

Adobe Fontsをウェブフォントで使う注意点

これは、知らない人が多く何度もX（旧：Twitter）で注意喚起をしているのですが、Adobe Fontsをウェブフォントとして利用する場合は、クライアントのアカウントが必要です！つまり有料です。

クライアントのWebサイトでウェブフォントを使う場合、クライアントのアカウントからAdobe Fontsを読み込む必要があります。

つまり、クライアントがサブスクを支払う必要があるのです！自身のアカウントを使用することは再版になります。再販は許可されていません。

遊ゴシック以外の選択

游ゴシックが使えないならどうしたらよいのか？個人的には、ICSさんの「無難」なフォント選定を参考にしています。記事も毎年更新されているので、非常に頼もしいです🙏

実機で検証してみた

2024年5月現在、ブラウザーフィンガープリントと游ゴシックが実際にどれくらいかすれて見えるかの検証をしてみました。僕個人の環境での検証なので、他の方の環境によってはまた見え方が変わります。スクリーンショットを貼りますが、プラットフォームの都合上100%のサイズで表示できない可能性があるのでご了承ください。

検証用に使ったフォントは以下です。

font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "M PLUS 1", sans-serif;

游ゴシックのMediumと、最後に「M PLUS 1」を加えています。游ゴシックと「M PLUS 1」の見た目は大きく異なるので、読み込まれていないことを分かりやすくするためです。游ゴシックはウェブフォントではなくデバイスフォントを指定するようにしています。

さて結果は...
Frame 6.png 34.12 KBFrame 7.png 32.2 KBFrame 8.png 31.65 KBMacOSの場合、Safariが完全に「M PLUS 1」フォントになっているのでアウト！
Firefoxが2024年5月段階では游ゴシックを読み込んでいます。最新版のFirefoxを見ると、フィンガープリント採取の文字はありますが、公式サイトには「別の実験的な機能」と書かれているので、読み込めなくなるのはもう少し先の話かもしれませんね。

iPhoneはもちろんこの通りダメでした！
Frame 9.png 34.69 KB
続いてWindowsです。
Frame 10.png 50.61 KBFrame 11.png 47.75 KBFrame 12.png 90.4 KB游ゴシックオールクリアです👏
かすれる問題ですが、個人的にそこまで気にはなりませんでした。再度お伝えしますが、個人の端末に大きく左右されます。

しかし、游の文字だけかすれていたので、font-familyを通常の游ゴシックに変更し、簡単な文字から、難しい「薔薇や国士無双」という漢字に変更するとこうなりました。かすれていますね。

まとめ

結局どうなのか。表でまとめるこんな感じです。
Frame 6.png 41.17 KB赤文字のブラウザは別のフォントに切り替えるか、游ゴシックの有料ウェブフォントを使う。どちらにせよWindowsのかすれる仕様には目を瞑る必要があります。

游ゴシックは素敵なフォントですが、これだけデメリットがあると、やはりウェブサイトには不向きと言わざるをえないのかなと思います。

・Windowsだとかすれること
・MacOSのSafariやスマホ端末では表示されないこと
・ブラウザーフィンガープリントの観点から今後不安であること

システムフォントとして使用する場合、MacOSのChromeでは綺麗に表示されますが、ユーザーがそもそもダウンロードをしていなければ、MacOSのChromeでも游ゴシックは表示されません。

世の中にはMacユーザーよりもWindowsユーザーが多く、パソコンから閲覧をする人よりもスマホで閲覧をする人の方が多いので、システムフォントの游ゴシックと別フォントを組み合わせて使う意味は、あまりないように感じます。どうしても使いたい場合は、ウェブフォントの採用をご検討ください。全ての端末でフォントを統一したい場合は、游ゴシックでなくてもウェブフォントを採用するしかありません。

「実際に私も検証したい」そう思った方は、ぜひこのブログを実機でご確認ください。
なぜなら... このブログのフォントは游ゴシックなのだから...！

... YuGothic, "Yu Gothic Medium", "Yu Gothic" ... が指定されています！

2024年の記事なので将来的に情報が古くなる可能性があることをご了承ください🙇‍♂️

さいごに

2024年5月現在、游ゴシックが最もトラブルになるフォントだと思い焦点をあてましたが、ウェブ制作に携わる人が、どんなフォントでもどのように表示されるかを理解しなくてはならないと思います。

しかし、游ゴシックのデメリットはデザイナーが知らないことは、なんなら当然だと思っています。理解したほうがよいことは間違いない。

しかし、font-familyを使い、普段からブラウザで検証をするエンジニアの方が、フォントの違和感には気付きやすいですよね。矢面に立つディレクターもかな？

知らない人の方が多いと思うので、知っている人が説明していければと思います。その際に、この記事が少しでも役に立てれば幸いです🙇‍♂️

参考になった方は、ぜひ せきゆおう をフォローしてください！怪しくないです！
シナカフェ では、このようにWeb制作に役立つ情報交換や交流、勉強会などを開催しているので、よろしければご参加ください。インボイス発行事業者の登録番号付きの領収書を発行できます。（7日間無料クーポン：csc2024sns_co）

記事の訂正などありましたらDMをいただけると嬉しいです。

参考リンク