ジブンライフ

自己啓発的なテーマを根拠(エビデンス)をもとに取り扱うブログ。

メイリオに変わる新標準フォント「游ゴシック」の解説

f:id:t-tane:20151123131026j:plain

プロでもアマチュアでも知っている人は知っていると思うのですが、Windows 8.1から「游ゴシック」「游明朝」というフォントが標準でインストールされているのはご存知でしょうか?

他の人にとっては当たり前なのか、それとも意外と知られていないのかわかりません。

しかし、ぼくは最近まで知らなくて非常に後悔しています。

 
Windowsに標準搭載されているフォントといえば「MSゴシック」とか「メイリオ」が有名です。

ぼくの認識では、Webサイトやブログに表示させるフォントは「メイリオ」が定番でした。

「メイリオ」は「MSゴシック」のようにギザギザしておらず、明らかに読みやすい。

ただ「メイリオ」の語源は「明瞭」だとか言われているように、読みやすさを重視していて、デザインとしては平凡な印象でした。

だからといって、Webフォントを使って、Webサイトやブログ全文をキレイなものに変えると、非常にサイトが重くなってしまいます。

 
そのため「游ゴシック」のような美しいフォントが標準搭載されているということに気づいたとき、今まで悩んでいたことが馬鹿らしくなりました。

これならなんのデメリットもなしに、サイトに美しいフォントを搭載することができます。

MacにもWindowsにも標準搭載

遊ゴシックのなにが優れているかというと、MacにもWindowsにも標準搭載されているという点です。

OS X MavericksとWindows 8.1にプロフェッショナル用書体の游ゴシック体と游明朝体が標準搭載 – フォントブログ

つまり、Webサイトで遊ゴシックで文字を表示するように設定しておけば、MacかWindowsかに関わらず、遊ゴシックを表示できるということになります。

遊ゴシックが出る前は、Macなら「ヒラギノ角ゴ」、Windowsなら「メイリオ」なんて感じでサイトのフォントを設定することが多かったんじゃないかと。

Windowsもフォントに力を入れ始めた?

Macは標準で美しいフォントがたくさん入っているんですが、Windowsはそれに大きく比べて劣るという印象でした。

メイリオが搭載されたときにはかなり感動しましたが、それでもMacには及びません。

好みはあるかもしれませんが、遊ゴシックはようやくWindowsに標準搭載された「いい感じのフォント」だとぼくは思っています。

遊ゴシックを採用しているサイト

バズ部

あの有名なバズ部も遊ゴシックを使っていました。最初は有料のWebフォントでも使ってるのかなと思っていたのですが、Windowsで表示されるフォントは遊ゴシックになっています。

一番優先して表示されるフォントは「ヒラギノ角ゴ Pro W3」、二番目に「遊ゴシック」、三番目に「Verdana」、四番目に「メイリオ」という具合ですね。

ですから、Windowsユーザーはおそらく遊ゴシックで表示されているということになります。

ちょっと細くてうすいので読みにくい印象を受けることもあります。

ライフハッカー[日本版]

ライフハッカーも遊ゴシックを指定しています。

第一優先は「SourceHanSansJP-Light」で、二番目に「遊ゴシック」、三番目に「ヒラギノ角ゴ Pro W3」。

「SourceHanSansJP-Light」(Webフォントかも)がパソコンにない場合は、WindowsもMacも遊ゴシックが表示されるでしょう。

ちょっと細い

ネット上でもちらほら見かけたのですが、「遊ゴシックは細すぎて見づらい」という声。

いくつか太さは選べるのですが、通常の太さのフォントでもかなり細いなという印象です。

他にも色々意見があるようで、一概に遊ゴシック最高というわけではないらしい。

ブログで遊ゴシックを表示させる方法

遊ゴシックを表示させたい場合は、CSSを変更しましょう。

CSSの書き方をメインに教えるブログではないのですが、簡単にご紹介します。

font-family:
   "游ゴシック", YuGothic,
   "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
   "メイリオ", Meiryo,
   "MS Pゴシック", "MS PGothic", sans-serif;

こんな感じがいいじゃないかなと適当に考えています。

これは先に書いているフォントから順番に表示しようと検討していって、もしそのフォントがパソコンの中になければ次を探すという具合です。

もちろんヒラギノ角ゴを前に持ってきてもいいと思いますよ。

ただ、ぼくはMac持ってないので表示した感じがわからないんですよね。

 
それから、ブログで遊ゴシックを使う場合は、白の背景に灰色の文字とかにしたほうが見やすいでしょう。

color: #383838;

をCSSの文字のところに設定してやるとよさそう。説明雑なので他のサイトを紹介しておきます。

http://www.htmq.com/style/font-family.shtml

http://www.shoshinsha.com/hp/ref/css/text_color.html

灰色の背景に黒めの文字もありかなと。ライフハッカーはそんな感じですね。

 
もしぼくと同じように遊ゴシックを知らなかった方はぜひ使ってみてください。PowerPointとかでも使ってあげるとすごいおしゃれになりますよ。

ちなみに、このブログも遊ゴシックを採用しています。フォントの太さや、白背景に対する文字の色には気をつかっています(ブログの雰囲気に合わせてメイリオへの変更も検討してみたり)。

© ジブンライフ. All rights reserved.