Windowsで游ゴシックが汚いのは、結局誰が悪いのか?

(追記:本記事は、游ゴシックをWindowsで綺麗に表示するためのベストプラクティスを示すことを目的にしたものではありません。ご了承ください)

(追記:Macの代替ウェイトの表示は仕様に沿っているというご指摘を受けましたので、すこし表現を変えました)


先日投稿した「Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い?」には、思ったよりも大きな反響をいただき、ありがとうございました。
私の記事に対して検証をしてくださったりご指摘をいただいたりといったリアクションも多く、大変ありがたく思っています。

特に参考になったのは、下記の2つの記事です。
ありがとうございます。

これらのリアクションを受けて元記事に追記などを繰り返していたところ、結局何が言いたいのかわからなくなりそうでしたので、改めて、先日の記事の後で検証していただいたりご指摘いただいたりした内容をまとめておきたいと思います。

Chromeのフォントレンダリングが悪い?

先日の記事の中で、何人かの方に「間違っているのではないか」とご指摘を受けた部分が、『font-familyで「游ゴシック」を指定すると、Windows8.1では「細字」が使われる』という記述でした。

私の感覚では、パッと見では読めないくらい細いフォントに見えましたので『これは「細字」に違いない』と思っていたのですが、font-weight: normal;であれば「標準」が使われるはずだし、実際そうなっているというご指摘をいただきました。
また、『うちではそんなに細く見えない』という意見や、『Chromeは細く見える』という意見もありましたので、Windows8.1環境を持っている友人に、ChromeとFirefoxでまったく同じ画面のキャプチャをとってもらいました。

キャプチャをとってもらったHTMLは下記になります。

<html lang="ja">
<head>
<meta charset="utf-8">
<style>
p {
font-family:"游ゴシック";
font-size: 14px;
}
</style>
</head>
<body>
<p style="font-weight:normal;">font-weight:normal;<br>1234567890abcdefg愛のあるフォント</p>
</body>
</html>

そして、結果がこちらです。

ChromeとFirefox

左側の「Chrome」「Firefox」の文字はキャプチャしたものではなく、後から説明のためにPhotoshopで書き足したもので、フォントは「游ゴシック標準(Regular)」です。

同じものを表示しているにもかかわらず、Chromeでは読みづらいくらい細く表示されているのがわかります。
つまり、Windowsはちゃんとfont-weight: regular;で「標準」を表示しているにもかかわらず、それを「細字レベル」で表示してしまうChromeが悪いのではないか? と考えられます。

私が「細字が使われる」と思ってしまったのは、Chromeで見ていたから(そしてブラウザ間でこんなに表示が違うと思わなかったから)でしょう。
私の知識が足りずに誤ったことを書いてしまいました。申し訳ありません。

normal指定なのに、Mediumで表示するMacはずるい!

Web制作者の多くは『WindowsよりMacのほうが文字の表示が綺麗』と考えています。
そのため『Windowsで游ゴシックが汚いのは、Windowsだからでしょ?』で済ましてしまっている制作者が多いのも事実です。

でも、游ゴシックの表示に関しては、Macは「ずるい」と、私は考えています。

まず、font-weightと、対応するフォントの太さについての仕様を見てみましょう。
(この記事の最初にご紹介したWWW WATCHさんの記事にも、わかりやすい説明があります)

3.2 Font weight: the font-weight property : CSS Fonts Module Level 3

  • 100 – Thin
  • 200 – Extra Light (Ultra Light)
  • 300 – Light
  • 400 – Normal
  • 500 – Medium
  • 600 – Semi Bold (Demi Bold)
  • 700 – Bold
  • 800 – Extra Bold (Ultra Bold)
  • 900 – Black (Heavy)

normal
Same as ‘400’.

bold
Same as ‘700’.

上記より、font-weight: normal; であれば、400相当の「Normal」つまりは「Regular(標準)」の太さのフォントで表示されるのが正しいということになります。

ところが、Macに搭載されている游ゴシックは「Medium(中)」と「Bold(太字)」のみであるため、400相当のフォントがありません。
その場合、仕様では「まず、500相当のフォントを探しなさい」ということになっています。

If the desired weight is 400, 500 is checked first and then the rule for desired weights less than 400 is used.

このルールによって、Macでは游ゴシックで font-weight: normal; を指定すると「Medium(中)」で表示されます。
(「中」は「標準」より少しだけ太いフォントです)

おわかりでしょうか?

normal指定だと、

  • Windowsでは「Regular」
  • Macでは「Medium」

が使用されるのです。

RegularとMediumを見比べてみれば、やや太いMediumのほうが読みやすいのは明らかです。
Macに対して好意的な見方をすれば、游ゴシックのRegularは視認性が良いとは言えないので、Regularはあえて搭載せず最も細いウェイトをMediumにしたのかもしれません。

ただ仮にそうだとしても、バカ正直にRegularを表示しているWindowsと、仕様よりちょっと太いMediumを表示しているMacを比べて、

『Windowsだから游ゴシックが汚い』と言うのは、ちょっと違うんじゃないの? 

と、私は思うのです。

結論「やっぱり、Webデザイナーが悪い」

WindowsとMacは画面表示に対するスタンスが違います。
Macは美しく、Windowsはハッキリと見えることを重視しているので、どうしてもWindowsのほうがエッジが立って汚い印象をうけます。
ですから、『WindowsよりMacのほうが文字の表示が綺麗』と言われるのは仕方がないと思います。

しかし、游ゴシックに限っては、そもそも表示に使用しているフォントの太さが違いますから、その状況で比較をするのはフェアではありません。
そして、太さを同じにする方法が、先日の記事に書いた「font-weight: 500;」という指定なのです。

※なお、font-weight: 500; というのはベストプラクティスではありません。
 ネット上には、より良い解決策がいくつか掲載されています。
 本記事の最後でツイートを引用させていただいている塚りのさんの記事も参考になると思います。

font-weight: 500; の指定により、Windows10ではMacと同じ太さである「Medium(中)」が使用され、『Windows10だとそれほど汚くない』という印象になります。
Windows8.1にはMediumが搭載されていないので、残念ながら同じ太さにはなりません。

ここでもう一度言っておきますが、仕様本来の表示をしているのは、8.1も含めWindowsのほうなのです。
Macは仕様通りの太さを持っていないので、font-weightの指定でWindowsでも仕様から外れるほうに歩み寄っています。
ただ結果的には、仕様本来の太さでなく、代替の表示をしているMacのほうが読みやすくなっています。
もしMac側に『仕様から外れてでも読みやすくしたい』という意図があるのであれば、これはむしろ褒めるべきことかもしれません。
(追記)「Macはウェイトがないだけで仕様には沿っているのでは?」というご意見をいただきましたので、少し表現を変えています。

しかし、上記のことをよく考えもせずに『游ゴシックが汚いのはWindowsが悪い』と思考停止したWebデザイナーは、やっぱり悪いと思うのです。

最後に、こちらのツイートを引用しておきます。
多分、私の真意をご理解いただいているんじゃないかなと思って、大変嬉しかったです。
ありがとうございました。

この記事を書いた人

川井 昌彦
川井 昌彦
FAシステムメーカー、国内最大手印刷会社製版部、印刷・ウェブ制作会社を経て、家庭の事情で実家に帰省して独立
現在はフリーランスと制作会社シニアディレクターのマルチワーク
ウェブ制作のほぼ全般を見渡せるディレクター業務が主だが、デザイン・コーディングも好き

1997年ブログ開設
WordPressコミュニティには2011年から参加
WordCamp Kansai 2016 セッションスピーカー
WordCamp Tokyo 2023 パネルディスカッションパネラー
WordBench京都、WordBench神戸、WordPress Meetup八王子など登壇多数

ご質問・ご相談などありましたら
お気軽にお問い合わせください


“Windowsで游ゴシックが汚いのは、結局誰が悪いのか?” への13件のフィードバック

  1. あしあとのアバター
    あしあと

    悪いものを探したいのは、自分が悪くないと思いたいから。
    OS然り、ブラウザ然り、それぞれの結論がそこにあるだけ。誰も悪くない。

    本質を見失っている。僕らは最適のモノを作るだけ。
    環境に対応できないのであれば、落とし所を見つける。それが出来ないなら環境を変える。それだけ。

    感情に左右されるようじゃプロフェッショナルとして未熟すぎ。

    1. 川井 昌彦のアバター
      川井 昌彦

      コメントありがとうございます。
      私自身、Webデザイナーですので、一連の記事は自戒の念を込めて書きました。
      誰かのせいばかりにせず、与えられた環境で最適なものを作っていきたいと思います。

  2. Windowsでも、サイズが200%推奨くらいの高精細モニタならかすれて見えないのですよね。

    1. 川井 昌彦のアバター
      川井 昌彦

      Windowsは、高精細であってもなくても見づらいような感じがします。
      高精細モニタの場合は、どう表示させるかの設定で変わってくるかもしれませんね。
      手元にMac並みの高精細モニタが無いので何とも言えないのですが・・・

  3. デザイナーは自身が使ってる高性能なモニターだけでなく普及してる安い低性能なモニターでの使用を考慮すべき。それを怠った字游工房のデザイナーが悪いし、導入したMSの担当者も悪い。Windows10そのものがアップデートテロなのでWindows7に差し替えます。

    1. 川井 昌彦のアバター
      川井 昌彦

      游ゴシック Regular は、Windows chrome 以外では見づらくはないので、字游工房とMSが悪いというのは筋が違うかなと思います。
      ともあれ、ブラウザのバグであろうがOSのバグであろうが影響範囲が大きいのであれば対応するのがWeb制作者の仕事なので、デザイナーは最も普及している環境でのテストはしないといけないですよね。(今なら Windows10 + chrome)

      あと、Windows10をアップデートテロだって言ってしまうと、WordPressなんかもっとひどいんじゃないかと思いますよ。
      また、OSのアップデートでクリティカルな問題が出たり後方互換性を持たせずにユーザーに負担を強いるのは Mac OS のほうがひどいような気もしますしね。

      メリットとデメリットを比較すると Windows10へのアップデートのほうがはるかにメリットが大きいと、つい先日まで Windows7 と 10 を並行して使っていた私は思います。

  4. 鄭 元溶のアバター
    鄭 元溶

    残念ながら、遊ゴシックはWebページ以外にMS-OFFICEのアプリでも普通に汚く表示されます。少し縮小するだけでも、文字・記号が判別し難いところまで質が落ちてしまいます。

    WindowsのClearTypeで補正することで少しは改善するのですが。Chromeの場合、初期値のOpenGL関連のパラメータ指定によってはClearType補正が効かず、さらに汚く見える場合もありますね。

    仕事では主に「Meiryo」「MS Gothic」を目にしますが、遊ゴシックが使われているのは、MS-Officeをデフォルト値のままドラフト資料を作成してしまった場合などを覗いて正式ドキュメントではあまり見当たらないと思います。

    私の場合だと、遊ゴシックは名前通りお遊びで作成したドキュメントなら許せても、仕事で使われると不快感を覚えるほどに(ドキュメントを読みづらく、あまり深く読まれたくないがための工夫にまで見えてきます)拒絶感があります。

    1. 川井 昌彦のアバター
      川井 昌彦

      コメントありがとうございます。
      ビジネス書類には、游ゴシックよりもメイリオのほうが向いていますよね。
      (今なら BIZ UDゴシックがもいいかもしれません)

      ただ、パソコンはビジネス用途以外でも使用されますし、ウェブサイトもお堅いビジネス用途のものだけではありませんから、適材適所かなと思います。

  5. chromeかwindowsのアップデートなのかわかりませんが、
    最近文字が細く滲むように見える状態が改善されたようです。
    他の方はどうでしょうか?

    1. 川井 昌彦のアバター
      川井 昌彦

      コメントありがとうございます。
      私の環境では、まだchromeは他のブラウザと比べて「游ゴシック」は読みづらいです。
      同じ游ゴシックでも「游ゴシック-medium」と指定すると綺麗に見えますので、ちゃんとウェイトまで指定しているサイトが増えてきたのかもしれません。

      1. 返信ありがとうございます。
        確かに他ブラウザより見えづらいですが、
        ウエイト400でもかなり改善されていたので驚いてしまいました。
        クリエイターとユーザーが特に意識しなくても同程度まで改善されるといいですね!

  6. 今度こそアップデートで本当に直ったような気がします!

    1. 川井 昌彦のアバター
      川井 昌彦

      chrome 124で、Windows環境のClearTypeテキストチューナーに対応したようですね!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Vektor Passport(ライセンス期間1年)
VK Filter Search Pro
Vektor WordPress Solutions
PAGE TOP