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

IT/PC
この記事は約5分で読めます。

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も遊ゴシックが表示されるでしょう。

こちらも現在は使っていない様子。游ゴシックは後述するクセのせいで市民権を得られなかった印象です。

ライフハッカー[日本版]
ガジェットなどを駆使し、スマートに楽しむ仕事術「Lifehack」。「ライフハッカー[日本版]」では、その言葉を広義に捉え、生活全般に役立つライフハック情報を日々お届けします。

ちょっと細い

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

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

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

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

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

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

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

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

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

もちろん、ヒラギノ角ゴ(Macのフォント)を前に持ってきてもいいと思いますよ。

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

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

color: #383838;

をCSSの文字のところに設定してやるとよさそう。詳細な説明は他のサイトに譲ります。

font-family-スタイルシートリファレンス
HTMLタグ・スタイルシート・特殊文字等の早見表
文字色 CSS color:

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

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

ほんとに、フォント。フォントを活かしたデザインレイアウトの本 | ingectar-e | 彫刻・工芸 | Kindleストア | Amazon
Amazonでingectar-eのほんとに、フォント。フォントを活かしたデザインレイアウトの本。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。
タイトルとURLをコピーしました