Webサイトでの游ゴシック設定の注意点

ここ2～3年でつくられたWebサイトは、本文の文字まで美しくなったと感じませんか？昔はWebサイトに用いることができるフォントの種類が限られていましたが、現在は様々なフォントを用いることができます。

特に注目されていたのが、Windows以上とMacの両方に標準搭載されている游ゴシックです。PC標準フォントならではの使い勝手のよさが魅力ですが、より見た目にこだわりたい場合の注意点を解説します。

游ゴシックの基礎知識

游ゴシックとメイリオの比較

游ゴシック（Yu Gothic）は、Windows 8.1から、MACでは10.9 からOSに搭載されるようになった標準フォントです。以前からよく使われていたメイリオ（Meiryo）と比べると字面の幅が狭めにつくられており、隣の文字と文字の間がスッキリとしています。このため文字のまとまりがよく、見た目がすっきりとして洗練されてみえると人気が高いです。

特に、印刷のことを考えると、メイリオはディスプレイ表示重視の書体のため、プリンターではあまり文字がキレイに印刷できませんでしたが、游ゴシックは印刷美しく読めるのが特徴です。

WindowsとMacでの游ゴシックの表示違い

WindowsとMacに共通のフォントと言いましたが、厳密にはウェイト（文字の太さ）が異なっていることをご存じですか？フォントには通常、太さの異なるバリエーションが用意されており、たとえばLight→Regular→Midium→Bold→Heavyといった名称で、ウェイトの種類が用意されています。

Windowsの場合、標準搭載されているのは游ゴシックのLight（細字）、Regular（標準）、Medium（中字）、Bold（太字）です。一方、Macに搭載されているのはMediumとBoldというやや太めの2種類だけです。このため、単純に游ゴシックと指定した場合、Macでは読みやすい游ゴシックMediumが、Windowsでは游ゴシックのRegularが表示されるので、結果、Windowsユーザーからは文字がかすれているとか、細すぎて読みづらいといった不満が出てしまいます。

ブラウザによっても游ゴシックの表示に差がある

さらにやっかいなのは、ブラウザの種類やバージョンによっても表示され方に差があることです。

Windows版のChromeユーザーが一番問題で、游ゴシックRegularが非常にきたなく見えてしまいます。

このように、MacかWindows、どちらのパソコンを使っているかだけでなく、ブラウザでも游ゴシックは見え方が変わる場合があります。

游ゴシック設定時の対処方法

スタイルシートでfont-weightを500に設定する

WindowsやMacでの表示の違いを抑える対処方法としては、CSSで游ゴシックを指定するとき、フォントウェイトを太めの500という設定にしておくことで、Windows ユーザーの読みづらさを解消するという方法が一般的です。

Macユーザーにとってはやや太く感じられることもありますが、最もシンプルに解決するための妥協点だといえるでしょう。ただし、游ゴシックが使えないPC で閲覧しているユーザーには、代替フォントも太くなってしまう可能性があるというデメリットも生じます。

Webフォントを効果的に使う

先に挙げたWindows版のChromeの例の通り、現状ではすべての環境に対して標準搭載のフォントで対応するのは難しいのが現状といえます。そこで、本文までしっかり見た目にこだわりたい場合は、Webフォントを使うというのも手です。

日本語も含まれているWebフォントでオススメなのは、GoogleのWebフォント「Noto Sans JP」です。様々なパターンが用意されており、汎用性があります。

https://fonts.google.com/specimen/Noto+Sans+JP

Webフォントは、どのデバイスにも同じ表示ができる便利なものですが、半面、大きなデメリットとしてサーバーからフォントを読み込むための時間がかかります。表示が重くなっても見た目でのブランディングを重視するか、少々妥協して表示の軽快さを選ぶか。Webサイトの目的に合わせて、どちらを選択するのがベターかを判断しましょう。

まとめ

OSにおけるフォントの表記違いついてご理解いただけたでしょうか？

Web担当になったけれど自分の知識に自信がない、自社のWebページをもっと改善したいけれどうちにはそんな時間も人材もないというお悩みはございませんか？

ITRAではお客様に真摯に向かい、ご要望に沿ったWebサイト制作やリニューアルを行ってきました。一人でお悩みにならず、まずはフォームでお気軽にお問い合わせください。