Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い?

(2016年7月26日:フォロー記事を書きました。「Windowsで游ゴシックが汚いのは、結局誰が悪いのか?」
(2016年7月11日追記:Windows8.1においても細字ではなく標準が使用されているのではないかというご指摘を受けて、若干表記を修正しました)
(2016年6月29日追記:Twitterでご指摘を受けて、Windows8.1と10での違いを追記しました)


タイトルが旬を外していて、しかもちょっと釣り気味で申し訳ありません・・・

OS X MavericksとWindows 8.1に共通のフォント「游ゴシック」「游明朝」が搭載され、CSSのfont-familyに「游ゴシック」を指定すれば、Webデザイナーの長年の悲願であった「MacとWindowsで同じ見た目にする」ということが可能になりました。

しかし実際に指定してみると、Macでは綺麗なのに、Windowsでは文字がかすれたように見えて非常に読みづらくなってしまいます。

これについて「やっぱりWindowsはMacに比べて表示が汚い」とか言われてWindows使いの私はガッカリしていたのですが、実は違うところに原因があったんです。

Macに搭載されている游ゴシックは「ミディアム」「ボールド」なのに対し、Windowsに搭載されているのは「細字」「標準」「中」「太字」(「中」は、Windows10から搭載)。
そのため、font-familyで「游ゴシック」と指定すると、Macでは「ミディアム」で表示されて綺麗なのに、Windowsでは「細字」で表示されるためにかすれてしまうんです。
(追記)これに関しては、ブラウザがchromeだと他のブラウザに比べて細く見える傾向があるので、「標準」なのに「細字」のように見えているのではないかというご指摘をいただいています。

ちなみに、私がこのサイトで使用しているCSSでのフォント指定は下記のようになっています。

body {
font-family: "Hiragino Maru Gothic W4 JIS2004", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 500;
}

この “font-weight: 500;” という指定が肝で、この数値を指定してやると、Macでは「ミディアム」、Windows10では「中(ミディアム)」が使用されます。
これで、Windowsでも読みやすく表示されます。
(追記)ただし、Windows8.1では「標準」が使用されるので改善されません。

なお、Bootstrapを使用していると、リード文に使うクラスなどで、わざと細いウェイトが指定されていることがあるので、後から追記して変更したりする必要があります。
こちらは、Windows8.1でも効果があります。

.lead {
font-weight: 300;
}
.jumbotron p {
font-weight: 200;
}

Windowsで游ゴシックの表示がかすれてしまうのは、勉強不足のWebデザイナーのせいでもあるんです。
よく調べもせずに、Windowsのせいばかりにしないでくださいね。
(公開当初は「Windowsは悪くない、Webデザイナーが悪い」と書いていましたが、皆さんの意見を聞いて、若干表現を変えました)

追記

「Windowsのせいにしないで」って書きましたが、

  • 「デフォルトがLightなのはどうかと思う」
  • 「W3Cの仕様では、font-weight:400; が normal だからWindowsの仕様のほうが悪いのでは」

というご意見もいただいています。

うーん、やっぱり、Windowsが悪いのかもしれませんね・・・
(他にも、ご意見お待ちしています)

追起 その2

たくさんのご意見をいただいた中で、「Windows10だと "font-weight: normal;" で「游ゴシック 標準」が適用されるので、見づらいほど細くならない」という話があり、調べてみたところ確かにそのようでした。
下記の記事で、CSSの仕様から本記事について考察していただいているのですが、仕様上、"font-weight: normal;" では「游ゴシック 標準」がマッチするはずなのに、なぜかマッチせずに、より細い「游ゴシック 細字」が適用されるという現象になり、これはやっぱりWindowsが悪いということでいいんじゃないかということです。

Windows で游ゴシックが細字になってしまう件は誰が悪いのかについて CSS 仕様から考えてみる | WWW WATCH

Windows10になって、ひそかに問題が解決してしまっているのでしょうか?
もし事情に詳しい方がいらっしゃいましたら、教えていただけるとありがたいです。

追記 その3

何人かの方の検証記事で、Windows8.1でChromeを使用している場合、他のブラウザより文字が細く見えるので「標準」が使用されているのに「細字」が使用されていると誤認したのではないかというご指摘をいただいています。
となると、追記その2は、これが理由なのかもしれません。

私の意見としては、Windows8.1の場合はWindows10にアップグレードしない理由が見当たらないので、早くアップグレードしたほうがいいと思います。

追記 その4

フォロー記事を書きました。

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

Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い?” に対して 16 件のコメントがあります

  1. アリス より:

    僕はWindows使ってますがMACの方が可愛い字体なので好きです
    まだ7なんで今回の記事に関係あるのかわかんないですが
    今後表示が改善されていくことを期待しましょう!

    1. 川井 昌彦 より:

      コメントありがとうございます。
      私も会社員時代はMacを使っていたので、Macの画面表示は好きです。
      性能とかよりも、何か、細かいところへの気の配り方が違うような気がします。
      そういうところが、游ゴシックの扱いの差に表れているのかもしれません。

  2. くつぼ より:

    windows7を使用しております。
    firefoxなどですとわりときれいに表示されるのですが、
    chromeですととくに細く、かすれて表示されるので僕はbodyに
    text-shadow: 0px 0px 0px #000;
    を書いて対応しております。
    サンプルとしてこちらのサイトで試した場合のキャプチャ添付させてもらいます!
    上記cssなし
    https://gyazo.com/e9c77d451297443d87a7c78a9eaffbc4
    上記cssあり
    https://gyazo.com/0a7ed75056f9a5e9f365e76a3d372c70

    1. 川井 昌彦 より:

      コメントありがとうございます。
      text-shadow で0pxを指定というのは面白いですね。

      「chromeだととくに細く、かすれて表示される」というのが気になります。
      Windowsの問題ではなく、chromeの問題なのかなという気がしてきました。

  3. Sonic より:

    これを見る限りChromeさんが悪いですね・・・。
    http://qiita.com/hrdaya/items/0f5985794e2a2b451ac0

    1. 川井 昌彦 より:

      情報ありがとうございます。
      リンク先を見ると、chromeだけ文字が見づらいですね。
      これが、Regularだけど見づらく表示されているのか、Lightが使われているのか、が判明するとスッキリするのですが・・・

  4. t-hoso より:

    最近、font-weight:500がいい!という記事を目にするので、調べてここへたどり着きました。

    わたしも嬉々としてやってみたんですが、win8.1 chromeの環境だと何も変化がありません。
    ブラウザのせい?と思い、勝手ながらこちらのサイトでchrome、firefox、IEで比較してみました。

    https://pbs.twimg.com/media/CmQfD1lVUAAfD-0.jpg

    環境
    chrome 51.0.2704.103
    firefox 46.0.1
    IE 11.0.9600.18350

    やはりchromeが細く、かすれたままです。
    うーーん、これだとやっぱり使いづらいかなぁ、というのが正直な感想です。

    游ゴシックにはとっても期待しているので、改善されるといいですね

    1. 川井 昌彦 より:

      検証していただいてありがとうございます。
      文字が薄く見えていたのはLightが表示されていたのではなく、RegularだけどChromeだけ薄いから勘違いしているのではという説もあり、もう少し情報がほしいなと思っているところです。

  5. フォント検定15級 より:

    川井 昌彦様

    はじめまして。游ゴシックから検索で伺いました。
    興味深い記事で参考にさせていただいています。

    申し訳ありませんが、まだまだWebデザインを始めたばかりの初心者であるため、
    現状Win環境での確認しかできていません。

    参考の比較スクリーンショットなど用意してくださると更に理解が深まるのですが……。

    また、業務ではこちらを使わせて頂いています。
    http://honokak.osaka/

    ちゃぶ台返しも良いところですが、使えるものは素直に使おう精神でやっています。
    ご意見お聞かせ願えれば幸いです。

    1. 川井 昌彦 より:

      コメントありがとうございます。
      おっしゃるとおり、スクリーンショットなどをつけずに記事を書いたのはまずかったなと反省しております。
      いくつか、この件についてスクリーンショット付きで検証していただいているサイトもあるようです。
      私の環境ではWindows10以外の環境がないので、今、友人にWindows8.1でスクリーンショットをとってもらっています。他にもいろいろ情報をいただいておりますので、まとまったらまた記事にしたいと考えています。

      ご紹介いただいたテーマ、使いやすそうですね。
      私も使えるものは使おう精神で、業務ではデザインから起こしてオリジナルテーマを作るのに、このサイトは公式テーマをほぼそのまま使っていますよ。

  6. りょう より:

    こちらのページを拝見させていただきました。font weightを500で指定していると思いますが、やはりwindows10で見ると、こちらのページもかなり読みづらいです。500指定で少しは太くなっているので、デフォルトのlightよりはましなのですが、なんというか、太くなっているところと細くなっているところが、1文字の中に混在していて、全体として、とても汚く見えてしまっています。職場は8.1、自宅は10の環境ですが、8.1はあんなにきれいなのに。ウェイト指定してもこんな見え方では、メイリオに戻すしかないのかなと思っています。
    windows10 最悪ですね。ほんと

    1. 川井 昌彦 より:

      コメントありがとうございます。
      8.1のほうが綺麗というのは、メイリオで表示されているからでしょうか?
      私の感覚では、少なくとも8.1より10のほうが綺麗に見えると感じているので、ご自宅のパソコンで、ディスプレイ設定の「ClearType」がうまく調整されていないのかもしれません。
      ただこれは、同じ游ゴシックで見た場合の話で、おっしゃるとおり、游ゴシックよりメイリオのほうがハッキリ見えるのは確かだと思います。

      Webデザイナーとしては、ハッキリ見えることを優先するか、フォントの美しさをとるか、という悩ましい問題なのですが、そもそも見えにくいのでは意味がないですよね。

  7. 森田和 より:

    游ゴシックが線の太さに変化を持たせたりモダンフォントに比べると字面が小さかったりしてそもそもUI向きじゃないのはあるけど、他方でウェイトがMacを使っててLight相当のヒラギノ ゴシック W3の線が薄いなんて言われないのを考えたらどう考えてもWindowsが悪い。
    で、Windowsの貧弱なレンダリングエンジンで游ゴシックの微妙に太さの変化した線にアンチエイリアスをかけようとしたら線全体が中間色になっちゃったってところじゃない。

    1. 川井 昌彦 より:

      コメントありがとうございます。
      まったくもって、おっしゃられている通りだと思います。
      他にも実際にいろんなブラウザでスナップショットをとって比較されてる方などもいらっしゃるので、近いうちにそのあたりをまとめて、新たに記事を書きたいと思っています。

      記事タイトルの「Webデザイナーが悪い」は、「デバイスのせいにせずにWebデザイナーがカバーするべき問題なんじゃないか?」という意味なのですが、多くの方は「こんなのカバーしきれないよ!」っていう意見のようですね。

  8. 増岡元則 より:

    なんとなく、こちらのサイトにたどり着いてしまいました。
    もちろん游ゴシックが汚いのは気になっていました。
    原因は、游ゴシックそのものが汚いのではないかと思います。

    Web云々以前に、游ゴシックはMicrosoft Officeで使っても見るに堪えません。
    可読性ならMSゴシック、美しさならメイリオにかなうものはないと感じます。

    WindowsとMacintoshで同じフォントが使えることが、長年の悲願であったことは間違いないと思います。
    しかしながら、この二つが共通に使えるようになったとしても、Web全体では、もはや、半数に及ばないはず。
    統一するには遅すぎました。

    正直、游ゴシックには、このまま眠りについて戴きたいと思います。

    1. 川井昌彦 より:

      コメントありがとうございます。
      私も長年Windowsを使っているのですが、だからこそあえて申し上げますと、游ゴシックが汚く見えるのは、やはりWindowsのディスプレイで見ているからだと思います。

      游ゴシックは元々印刷用途に開発されたフォントです。
      したがって、MacのRetinaディスプレイのような印刷物並みの解像度を持つディスプレイでないと、細かいところが潰れてしまって綺麗に見えません。

      これに対して、美しさを犠牲にして低解像度ディスプレイに最適化したMSゴシックや、文字幅を広くとったメイリオのほうが、低解像度ディスプレイで見たときには綺麗に見えると思います。

      正直申し上げますと、私も游ゴシックよりメイリオのほうが好きなんです。
      なぜWindowsは游ゴシックを選んだんでしょうね?

コメントを残す

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