Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い？
（2016年7月26日：フォロー記事を書きました。「Windowsで游ゴシックが汚いのは、結局誰が悪いのか？」）
（2016年7月11日追記：Windows8.1においても細字ではなく標準が使用されているのではないかというご指摘を受けて、若干表記を修正しました）
（2016年6月29日追記：Twitterでご指摘を受けて、Windows8.1と10での違いを追記しました）
（2017年3月27日追記：当サイトでの使用CSSについて追記しました）
（2020年9月13日追記：当サイトでの使用フォントについて追記しました）
タイトルが旬を外していて、しかもちょっと釣り気味で申し訳ありません・・・
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でのフォント指定は下記のようになっています。
（この投稿を行った当時の設定です。現在はfontplusのWebフォントを指定しています）
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になって、ひそかに問題が解決してしまっているのでしょうか？
もし事情に詳しい方がいらっしゃいましたら、教えていただけるとありがたいです。
追記 その３
何人かの方の検証記事で、Windows8.1でChromeを使用している場合、他のブラウザより文字が細く見えるので「標準」が使用されているのに「細字」が使用されていると誤認したのではないかというご指摘をいただいています。
となると、追記その２は、これが理由なのかもしれません。
私の意見としては、Windows8.1の場合はWindows10にアップグレードしない理由が見当たらないので、早くアップグレードしたほうがいいと思います。
追記 その４
フォロー記事を書きました。
僕はWindows使ってますがMACの方が可愛い字体なので好きです
まだ７なんで今回の記事に関係あるのかわかんないですが
今後表示が改善されていくことを期待しましょう！
コメントありがとうございます。
私も会社員時代はMacを使っていたので、Macの画面表示は好きです。
性能とかよりも、何か、細かいところへの気の配り方が違うような気がします。
そういうところが、游ゴシックの扱いの差に表れているのかもしれません。
windows7を使用しております。
firefoxなどですとわりときれいに表示されるのですが、
chromeですととくに細く、かすれて表示されるので僕はbodyに
text-shadow: 0px 0px 0px #000;
を書いて対応しております。
サンプルとしてこちらのサイトで試した場合のキャプチャ添付させてもらいます！
上記cssなし
https://gyazo.com/e9c77d451297443d87a7c78a9eaffbc4
上記cssあり
https://gyazo.com/0a7ed75056f9a5e9f365e76a3d372c70
コメントありがとうございます。
text-shadow で0pxを指定というのは面白いですね。
「chromeだととくに細く、かすれて表示される」というのが気になります。
Windowsの問題ではなく、chromeの問題なのかなという気がしてきました。
これを見る限りChromeさんが悪いですね・・・。
http://qiita.com/hrdaya/items/0f5985794e2a2b451ac0
情報ありがとうございます。
リンク先を見ると、chromeだけ文字が見づらいですね。
これが、Regularだけど見づらく表示されているのか、Lightが使われているのか、が判明するとスッキリするのですが・・・
最近、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が細く、かすれたままです。
うーーん、これだとやっぱり使いづらいかなぁ、というのが正直な感想です。
游ゴシックにはとっても期待しているので、改善されるといいですね
検証していただいてありがとうございます。
文字が薄く見えていたのはLightが表示されていたのではなく、RegularだけどChromeだけ薄いから勘違いしているのではという説もあり、もう少し情報がほしいなと思っているところです。
川井 昌彦様
はじめまして。游ゴシックから検索で伺いました。
興味深い記事で参考にさせていただいています。
申し訳ありませんが、まだまだWebデザインを始めたばかりの初心者であるため、
現状Win環境での確認しかできていません。
参考の比較スクリーンショットなど用意してくださると更に理解が深まるのですが……。
また、業務ではこちらを使わせて頂いています。
http://honokak.osaka/
ちゃぶ台返しも良いところですが、使えるものは素直に使おう精神でやっています。
ご意見お聞かせ願えれば幸いです。
コメントありがとうございます。
おっしゃるとおり、スクリーンショットなどをつけずに記事を書いたのはまずかったなと反省しております。
いくつか、この件についてスクリーンショット付きで検証していただいているサイトもあるようです。
私の環境ではWindows10以外の環境がないので、今、友人にWindows8.1でスクリーンショットをとってもらっています。他にもいろいろ情報をいただいておりますので、まとまったらまた記事にしたいと考えています。
ご紹介いただいたテーマ、使いやすそうですね。
私も使えるものは使おう精神で、業務ではデザインから起こしてオリジナルテーマを作るのに、このサイトは公式テーマをほぼそのまま使っていますよ。
こちらのページを拝見させていただきました。font weightを500で指定していると思いますが、やはりwindows10で見ると、こちらのページもかなり読みづらいです。500指定で少しは太くなっているので、デフォルトのlightよりはましなのですが、なんというか、太くなっているところと細くなっているところが、1文字の中に混在していて、全体として、とても汚く見えてしまっています。職場は8.1、自宅は10の環境ですが、8.1はあんなにきれいなのに。ウェイト指定してもこんな見え方では、メイリオに戻すしかないのかなと思っています。
windows10 最悪ですね。ほんと
コメントありがとうございます。
8.1のほうが綺麗というのは、メイリオで表示されているからでしょうか？
私の感覚では、少なくとも8.1より10のほうが綺麗に見えると感じているので、ご自宅のパソコンで、ディスプレイ設定の「ClearType」がうまく調整されていないのかもしれません。
ただこれは、同じ游ゴシックで見た場合の話で、おっしゃるとおり、游ゴシックよりメイリオのほうがハッキリ見えるのは確かだと思います。
Webデザイナーとしては、ハッキリ見えることを優先するか、フォントの美しさをとるか、という悩ましい問題なのですが、そもそも見えにくいのでは意味がないですよね。
游ゴシックが線の太さに変化を持たせたりモダンフォントに比べると字面が小さかったりしてそもそもUI向きじゃないのはあるけど､他方でウェイトがMacを使っててLight相当のヒラギノ ゴシック W3の線が薄いなんて言われないのを考えたらどう考えてもWindowsが悪い｡
で､Windowsの貧弱なレンダリングエンジンで游ゴシックの微妙に太さの変化した線にアンチエイリアスをかけようとしたら線全体が中間色になっちゃったってところじゃない｡
コメントありがとうございます。
まったくもって、おっしゃられている通りだと思います。
他にも実際にいろんなブラウザでスナップショットをとって比較されてる方などもいらっしゃるので、近いうちにそのあたりをまとめて、新たに記事を書きたいと思っています。
記事タイトルの「Webデザイナーが悪い」は、「デバイスのせいにせずにWebデザイナーがカバーするべき問題なんじゃないか？」という意味なのですが、多くの方は「こんなのカバーしきれないよ！」っていう意見のようですね。
なんとなく、こちらのサイトにたどり着いてしまいました。
もちろん游ゴシックが汚いのは気になっていました。
原因は、游ゴシックそのものが汚いのではないかと思います。
Web云々以前に、游ゴシックはMicrosoft Officeで使っても見るに堪えません。
可読性ならMSゴシック、美しさならメイリオにかなうものはないと感じます。
WindowsとMacintoshで同じフォントが使えることが、長年の悲願であったことは間違いないと思います。
しかしながら、この二つが共通に使えるようになったとしても、Web全体では、もはや、半数に及ばないはず。
統一するには遅すぎました。
正直、游ゴシックには、このまま眠りについて戴きたいと思います。
コメントありがとうございます。
私も長年Windowsを使っているのですが、だからこそあえて申し上げますと、游ゴシックが汚く見えるのは、やはりWindowsのディスプレイで見ているからだと思います。
游ゴシックは元々印刷用途に開発されたフォントです。
したがって、MacのRetinaディスプレイのような印刷物並みの解像度を持つディスプレイでないと、細かいところが潰れてしまって綺麗に見えません。
これに対して、美しさを犠牲にして低解像度ディスプレイに最適化したMSゴシックや、文字幅を広くとったメイリオのほうが、低解像度ディスプレイで見たときには綺麗に見えると思います。
正直申し上げますと、私も游ゴシックよりメイリオのほうが好きなんです。
なぜWindowsは游ゴシックを選んだんでしょうね？
最近Web関係の勉強をし始め、フォントのことを調べていたところ、ここにたどりつきました。
MacとWindowsで搭載されているフォントに差があるのは認識していましたが、weightについても差があったのですね。
フォロー記事も含め、大変勉強になりました。ありがとうございました。
記事とは少し趣旨が違うのですが、一点質問よろしいでしょうか。
記事の中で、フォントは
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;
}
という設定をされているとのことでしたが、上記のフォントを調べてみても、私の画面で見られる記事のフォントと一致しないようなのです。
よろしければ現在何のフォントを使ってらっしゃるのか教えていただけますでしょうか。画面で見られるフォントがすごく素敵なので気になってしまい、質問させていただきました。
環境はWindows10 Chrome / iOS10.2.1 Chrome, Safariです。
PCとiPhoneで若干見え方の差はあれど、書体はどれも同じ書体のようでした。
お返事いただけると幸いです。
コメントありがとうございます。
現在はモリサワのWebフォントサービスで「ヒラギノUD丸ゴ W3」を指定しています。（将来的に変える可能性もあります）
UD書体なので通常の「ヒラギノ丸ゴ」とは少しデザインが違うものがあります。
同じような疑問を持たれる方がいらっしゃるかもしれませんので、本文中に追記しておきました。
混乱させてしまい申し訳ありませんでした。
なるほど、UD書体だからなんだかすっきりとしたイメージなのですね。
突然な質問にご丁寧なお返事ありがとうございました。助かりました。
現在は、ブログの本文フォントはフォントワークスのニューセザンヌを指定しております。
（今後もたびたび変えると思います）
＞Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い？
違います。游ゴシックが汚く見えるのはWindowsの文字のレンダリングがおかしいのが原因です。
Windowsを利用している状況では綺麗に表示するのは不可能です。
文字のデザインは一定の太さで統一感があります。文字の特定の部分が細く表示されたり
文字のバランスが狂って表示されます。それがWindowsで文字が汚く見える原因です。
汚いと思ったWindowsのフォントをMacで表示させてみれば一目瞭然です。
私も仕事でMacを使いますので、レンダリングの違いはよくわかっています。
ただ、本記事の主旨は「Macと比べて汚い」という話をしているのではなくて、汚く見えるのをWindowsのせいにして「思考停止するな」ということです。
Windowsユーザーをターゲットから外すことは出来ないのですから、Windowsユーザーが文字を読むのに苦労するようなウェブサイトが出来てしまったら、どう考えてもフォントを指定したデザイナーが悪いのです。
さらに深く、「本当にWindowsだけの問題なのか？」「Webデザイナーとしてできることはないのか？」と思って調べてみた記事もありますので、続けてお読みいただければ幸いです。
Windowsで游ゴシックが汚いのは、結局誰が悪いのか？ | Cherry Pie Web
https://www.cherrypieweb.com/959
Win10はシステムフォントの時点で汚く見づらくなったので、webがどうこうの次元の話ではありません。
右クリックした時に出るコンテキストメニューのカタカナなんて「半角！？」と思うほど謎の縦横比だし。
コメントありがとうございます。
先のコメントの返信にも書いたのですが「Windowsだからフォントが汚くても仕方がない」と言ってWindowsユーザーが読めないウェブサイトを作ってしまったら、それはプロじゃないと私は思っています。
そして、Webデザイナーとして出来ることがあるのではないかと考えて書いたのが本記事です。
フォロー記事もありますので、ご覧いただければ幸いです。
Windowsで游ゴシックが汚いのは、結局誰が悪いのか？ | Cherry Pie Web
https://www.cherrypieweb.com/959
あー、川井さんは「webありき」のお話なんですね。
私を含む何割かの人は「windowsメイン視点」でのお話なので、そこがちょっとかみ合ってないんですね（＾＾；
ブラウザがどうとか言う以前の時点でシステムフォントが見づらくて、win10に対して怒っているのです。
で、webの話なのですが、私が管理している某サイトではcssでのフォント指定など一切していませんが、win10上のchromeで見て普通に綺麗に見えますよ？ win7の時とほぼ同じ見え方のように思えます。なので、OSのシステムフォントは少なくともchromeのレンダリングには影響していないようですが。（実はつい最近やっとwin7からwin10に乗り換えたので、ここの変化の有無はハッキリわかっています）
そうか、タイトルが悪いんですね。
「Windowsで”ウェブサイトを見た時に”游ゴシックが汚いのは・・・」と書くべきでした。
CSSで特にフォント指定をしなければ（または昔ながらのフォント指定であれば）、Windowsではメイリオで表示されるので綺麗に見えるんです。
それが、Macを使っていて自称フォントにこだわっている（実はよくわかっていない）Webデザイナーが、わざわざ「游ゴシック」を指定するケースが増えて、『オレのMacでは綺麗に見えるのにWindowsで汚いのはWindowsが悪い』と言い出すので、この記事を書きました。
游ゴシック以外にも、ヒラギノ角ゴシックとか、Macの画面では綺麗なのにWindowsの画面だと汚く見えるフォントはいくつかあります。そういうフォントは印刷用に最適化してあるのでWindowsの画面表示には向いていないのです。
ですので、私はウェブサイト構築の際にそういうフォントは使わないようにしています。
＞『オレのMacでは綺麗に見えるのにWindowsで汚いのはWindowsが悪い』と言い出す
なるほど、そういうことだったんですね！！
Mac界隈の知識が全くないので知りませんでした。勉強になりました。
ところで川井さんのこのサイトなのですが、私のWin10のChromeで閲覧すると、とても見づらいです。見出し部分などはとても見やすいのですが、本文のフォントが太すぎて（黒すぎて？）目が疲れます。普通にCSSでフォント指示しないときの見え方、要するにヤフーとかGoogleとかを閲覧したときのフォント（メイリオ？ MSPゴシック？）が結局一番見やすいのでは、と思います。
> 本文のフォントが太すぎて（黒すぎて？）目が疲れます。
こういうご指摘は参考になります。
実は定期的にいろいろ変えて、何がいいか試しているんですよ。
先日フォントの偉い人に参考になる話を聞いたので、また変えようかと思っています。
あんまり分かってない或いは調べる事ができない系のちょっと頭が弱い人がこういう仕事してるんだろうね。
ということがよく分かる記事笑