岐阜でホームページ制作、マーケティング&デザインを提供しているMWORKSです

お気軽にお問い合わせください

TEL 0573-67-8189

Mブログ

- mblog -

2017年版個人的ベスト|CSSフォント指定WIN、MACでキレイに表示(ゴシック、明朝)

公開日:2017年3月24日 : ホームページ制作関連

2017年版個人的ベスト|CSSフォント指定WIN、MACでキレイに表示(ゴシック、明朝)カバー画像

WEB制作者として、頭を悩ます問題あるあるとして、フォント指定(文字)があります。

まったく同じホームページを見ていても、フォントが違うだけで見づらく感じることもあれば、高品質な印象にすることもできます。

Web上の情報伝達は、文字、デザインなど色や写真などを含めた全体でユーザーに伝えますが、その中でもまず始めに必要となるものが文字情報です。

どのような記述でフォントを指定すれば、WIN、MAC、スマホ、各種ブラウザで文字をキレイに表示させることができるのか、2017年現在の個人的なベストを考えてみたいと思います。

フォント指定2017年現在での結論から公開

現状の答えとしては、下記の設定でCSSフォント指定をすることにしました。

ゴシック体の場合

明朝体の場合

フォント指定補足情報

・表示させたいフォントから順番に記述する
(左側から優先的に表示されます。端末に入っていなければ次のフォントといった具合に読み込まれる)
・欧文フォントを使用したい場合は先に指定する(日本語フォントが先になると日本語フォントに含まれている英字フォントが使用されてしまうため)
・フォント名にスペースが含まれている場合は、クォーテーション「””」で囲む(スペースが含まれていないフォント名を囲んでも適応はされます)
・フォントの英字名と日本語名を併記する場合は、日本語名を先に記述する
・最後にsans-serif,serifを記述することで、該当フォントがない環境でもゴシックと明朝の指定はできるようにする
・Windowsでの游ゴシックの名称は「游ゴシック」と「Yu Gothic」。Macでは、「游ゴシック体」と「YuGothic」なので併記する
・游ゴシック体と游明朝体は、Winodws 8.1では日本語名、OS X Mavericks(10.9)ではアルファベット名のみの対応であるため、両名の併記が必要。
・Macのヒラギノ書体は、アルファベットで、「Hiragino Kaku Gothic ProN」のみ記述。OS10.5以降に入っている、ProNを表示させるため。それ以前のPCには、デフォルトが「ヒラギノ角ゴ Pro」なので記述しなくてもOKとしました。
・「MS Pゴシック」「MS P明朝」の指定はしない(記述しなくても最終的には表示されるため)
・和文フォントの日本語名はおまじない的に記述(現在では日本語表記がなくても正常に読み込まれていますが、古いブラウザ向けに念のため記述)

windows、macのOS別、フォント表示

実際に上記のCSSフォント指定では、OS毎に下記のように表示されるはずです。

Windows

Win_ゴシック体

游ゴシック / Windows8.1以降
メイリオ / Windows Vista以降
MS ゴシック / Windows95以降

Win_明朝体

游明朝 / Windows8.1以降
HGS明朝 / MicrosoftOfficeをインストール済のPCに表示
メイリオ / Windows Vista以降
MS 明朝 / Windows95以降

Mac

Mac_ゴシック体

游ゴシック / MacOS10.9以降
ヒラギノ角ゴ ProN / Mac OS 10.5以降、iOS
ヒラギノ角ゴ Pro / Mac OS X以降

Mac_明朝体

游明朝 / MacOS10.9以降
ヒラギノ明朝 ProN / Mac OS 10.5以降、iOS6以降
ヒラギノ明朝 Pro / Mac OS X以降

・参考サイト:Font−familyのベストな書き方 2015年版
http://sole-color-blog.com/blog/design/246/

その1. 游ゴシック、游明朝を使用する理由

基本のフォントとして一番始めに、游ゴシック、游明朝を記述します。理由は幾つかあります。

游ゴシック、游明朝を使用するメリット

デザインの統一性(Win、Mac共に同じフォントがインストールされている)

Win、Mac共に游ゴシック、游明朝は最初からインストールされているので、どちらのOSでも同じ見せ方をすることができます。

Macにはヒラギノゴシック、明朝という優れたフォントがインストールされていますが、デザインの統一性を考えると、Win、Mac共に同じ表示ができることがWeb制作者にとっては好ましいと思うからです。(ユーザーがサイトをどのように閲覧しているかを確認しやすい、個別にチェックする手間も省けます)

Windowsでキレイなフォントを表示できる

游ゴシック、游明朝がWindows8.1以降からインストールされたことにより、一応Winでも読みやすいフォントを使用できるようになりました。(実は幾つか問題がありますが。。下記に続く項目で説明していきます)

※Winodws 8.1、OS X Mavericks(10.9)から游ゴシック体と游明朝体が標準でインストールされています。

その2. Windowsで游ゴシック文字が細すぎる!問題への対応

その1でメリットを書きましたが、実は游ゴシックをそのままCSSで記述すると文字が細くなり見づらくなってしまいます。

その理由はPCにインストールされている游ゴシックの太さがWinとMac違うからです。下記の表がそれぞれのOSに導入されているフォントファミリーです。

Windows(Windows 8.1 以降)

游ゴシック Light、Regular、Medium、Bold
游明朝 Light、Regular、DemiBold

Mac(OS X Mavericks 10.9以降)

游ゴシック Medium、Bold
游明朝 Medium、DemiBold

Windowsはそのまま游ゴシックを指定するとRegularが表示されます。それが細い文字で見づらくなる原因です。Macでは、そもそもRegularが入っておらず、游ゴシックを指定するとMediumが表示されます。

そのためWinでも游ゴシックを見やすい太さで表示するためには、「游ゴシック Medium」と指定する必要があるのです。

・参考サイト:Windowsの游ゴシックをfont-weightを使わずにMacに合わせる方法
http://www.tomotanuki.com/entry/yugothic-weight

今回採用した游ゴシックの記述方法は、上記のサイトを参考にさせていただき、個別に内容をアレンジしました。

游書体_参考サイト

游書体メーカー取説_搭載フォント名や文字セット、製品版との互換性
游書体_ウィキペディア

ブラウザテスト結果

Windows10のブラウザでテストしました。Edge、ie11、Chrome、firefoxで確認しています。

font-weight 指定なし

Windowsでそのまま(font-weight 指定なし)で游ゴシックを指定すると、下記画像のように文字が細く読みづらくなってしまいます。

■font-weight 指定なし

Win10_Edge(今回記述のCSS)

Edge

Win10_ie10(今回記述のCSS)

ie11

Win10_Chrome(今回記述のCSS)

Chrome

Win10_Firefox(今回記述のCSS)

Firefox

その3. Windowsの明朝体、表示が汚いよ!問題への対応

以前からのWindows Vista以前にインストールされているフォントは、アンチエイリアスがかからず小さな文字では、ギザギザして読みづらい表示となっていました。(メイリオが導入されたことで一応改善された)

同じWebページを見ていても、WinとMacで比べると間違いなくMacの方が読みやすく感じます。(MacとWinでは入っているフォントの種類が違うことと、アンチエイリアスという画像を滑らかに表示する処理が古いwinでは対応されていないため)

ゴシック体はまだそれなりに見えていますが、Windows8.1以前の環境で小さな文字で明朝体を表示するととても見づらくなります。そこで明朝体についてどのように対応しているか下記に紹介します。

Windows8.1以前の環境_明朝体の場合

今回の指定では、游ゴシック、游明朝が表示されるのは、Windows8.1以降、Macos10.9以降です。それ以前のOSでは別のフォントが表示されます。

明朝体の場合は、Office製品のソフトがインストールされているPCであれば、HGS明朝E。その次がWindows Vista以降はメイリオ。それ以前は「MS 明朝」が表示されます。「MS 明朝」はアンチエイリアスで表示されませんが、古いOS環境ですべて対応することは無理なのでここは妥協します。

※Windowsの「MS ゴシック・明朝」は、20数px以上で表示しないとアンチエイリアスがかかりません。
※見出し以外の本文やキャプションなど小さな文字にはゴシック体をなるべく使用する。

スマートフォンへの対応

レスポンシブデザインでのWebサイト制作が標準となりつつある現在。スマホサイトのフォント指定も共通のCSSに記述することが多いと思います。その対応方法についても考えてみます。

iOSの場合

最初から入っているフォントが限られているので特に記述しなくてもよさそうです。Mac用に書いた記述と共通になります。(ゴシック、明朝の指定、sans-serif、serifの指定)

iOSには、日本語フォントとして下記のフォントがインストールされています。

iPhone/iPad/iPod touch

ヒラギノ角ゴ ProN W3(HiraKakuProN-W3)
ヒラギノ角ゴ ProN W6(HiraKakuProN-W3)
ヒラギノ明朝 ProN W3(HiraMinProN-W3)
ヒラギノ明朝 ProN W6(HiraMinProN-W6)

※iOS6から、日本語フォントの初期設定が、明朝体になったのでゴシック体を表示したい場合は記述が必要です。

Androidの場合

結論から言うとAndroidには特に記述をする必要はないかなと思います。Androidには明朝体が入っていないこともあり、搭載されているフォントで表示という対応で行きます。

Android 3.x 以前は、「Droid Sans」がデフォルトの標準フォント。これには日本語フォントとしての、「Droid Sans Japanese」も含まれます。

Android 4.0 になって、「Roboto」が標準フォントになりました。日本語フォントは、「モトヤフォント」です。

※「Droid Sans Japanese」「モトヤフォント」には明朝体がありません。
※どうしてもデザイン的に必要な場合は、Webフォントで対応する。

Webフォントを使用する方法もあるが、今回は見送ります

Webフォントを利用することで、源ノ角ゴシック(Noto Sans CJK JP)を使用するなどもできますが、Webフォントはローカルフォントと比べて、ページの表示に時間がかかるので、今ところは使用を見送ります。

Webフォントは欧文をデザインのポイント的に使用することはありますが、Webサイト全体で使用する基本フォントとしては表示速度の問題がデメリットに感じるので個人的にはまだ使用はしていません。

サーバーにフォントをアップして表示させる方法もありますが、Webフォント同様に表示が遅くなるので現状では使用しないことにします。

参考サイトリンク

游書体メーカー取説_搭載フォント名や文字セット、製品版との互換性
游書体_ウィキペディア
ヒラギノ_ウィキペディア
メイリオ_ウィキペディア

まとめ

【2017年版個人的ベスト|CSSフォント指定WIN、MACでキレイに表示する方法(ゴシック、明朝)】 何年もWeb業界で働いていますが、いまだにフォント指定は悩ましいです。OSの違い、ブラウザの違いで色々と調べたりテストしたりで、この記事はすごく大変でした。。

個人的にはしばらくこの記述て対応しようと思いますが、これが唯一の回答ではないと思いますし、今回の内容もまた時が経てば変わりますしね。

また他によいCSS文字指定方法があれば、追記していきたいと思います。


スポンサーリンク

お問い合わせ

- contact -

お仕事の依頼やご相談はお気軽にどうぞ!お客様の商売発展の力になります

新着記事

- new articles -

ホームページ制作やマーケティングの他にも、日々の仕事での考えや気付きなどを記事にしています