文字が多くの割合を占めるウェブサイトにおいて、フォントはサイトイメージを決める重要な要因のひとつです。『上品なデザインにしたい』『和風な雰囲気を出したい』といった場合、指定する日本語フォントの書体として『明朝体』を思い浮かべる方は多いのではないでしょうか。

しかし、明朝体のフォントをウェブサイトへ指定しても、閲覧している環境がWindowsかMacかでフォントの表示処理や種類に違いがあるために、印象が大きく変わって見えてしまうことがよくあります。

特にそれが顕著に表れてしまうのが、Windows 8.0以下の環境でウェブサイトを閲覧した時です。

 

なぜWindows 8.0以下だと明朝体の見た目に差異が出るのか?

WindowsとMacについては、最近のMacbookシリーズのモニター解像度が高いことや、そもそもアンチエイリアスの掛かり方がWindows OSとは違うため、印象の違いは仕方ないところがあります。ではその他に、どういった理由があるのか解説していきます。

理由の一つとして、WindowsとMac両方に搭載されている明朝体のフォントは、現状『游明朝』ただひとつしかないですが、それがWindows 8.0以下にはインストールされていないことです。

二つめは、Windows 8.0以下に搭載されている明朝体フォント『MS明朝』『MS P明朝』が、フォントサイズ22、23px以下ではアンチエイリアスがかからないことが挙げられます。通常の文章で適用するフォントサイズは約14〜18pxが多いため、そのサイズで『MS明朝』『MS P明朝』を使用してしまうと、フォントは角ばったギザギザな見た目になってしまい、汚く映ってしまうでしょう。

 

游明朝とMS P明朝の違い (Windows 7 Chrome環境において)

現在、Windowsはバージョン10が主流になりつつあり、Windows 8.0以下のユーザーは今後減少していくと予想されますが、それでも日本の2017年3月時点におけるWindowsユーザーのバージョン別統計では、バージョン7が40.96%と以前高い数値ですので、出来ることなら何か対策を行い、OSの違いによるフォントの差異を可能な限り減らしたいところです。

 

『MS明朝』『MS P明朝』をブラウザでも綺麗にする

フォントの種類については、閲覧している側で『游明朝』をインストールするなどの対応を行う以外に解決する手立てはありませんが、『MS明朝』『MS P明朝』にアンチエイリアスがかからない問題については、実は見かけ上綺麗に見せる方法があります。

対応方法

以下のようなHTMLソースがあり、pタグのCSSクラス”mincho”にフォントサイズ16pxと明朝体フォントの指定がされていると仮定します。

HTML

<p class="mincho">明朝体の見え方の違いについて</p>

CSS

.mincho {
  font-size: 16px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "MS P明朝", "MS 明朝", serif;
}

Windows 8.0以下で閲覧した場合のイメージ画像

 

このままではWindows 8.0以下で閲覧した場合、MS P明朝が指定され、16pxではフォントの曲線のギザギザが目立つ印象を与えてしまうでしょう。これをWindows 8.0以下でも綺麗に見せるには、CSSに” transform: rotate(.03deg);”を追加します。

 

CSS

.mincho {
  font-size: 16px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "MS P明朝", "MS 明朝", serif;
  /* 追加 */
  transform: rotate(.03deg);
}

イメージ画像

 

たった一行スタイルを追加しただけですが、これだけで、Windows 8.0以下でも明朝体のフォントが驚くほど綺麗に見えるのではないでしょうか?

16pxだとフォントの太さが少し細くなってしまうため、font-weight: 700;を追加して調節してみてもよいかもしれません。

 

font-weight: 700 にしたイメージ

 

見比べてみます

游明朝と設定を変えたMS P明朝の見比べ

 

もうほとんど游明朝と遜色ありません。

 

まとめ

ニッチな内容の記事でしたが、いかがでしたか? Windowsを使用しているユーザーの40%弱、フォントサイズが22、23px以下で明朝体が指定されているテキストの場合という、狭い条件下での問題ですが、明朝体のフォントが綺麗に表示できない環境の方は結構多いと思います。コンテンツの内容ももちろんですが、文章のフォントそのものについてもこだわることは大切です。手軽に対応できる手法ですので、ぜひ試していただければ幸いです。

すべての人にインターネット
関連サービス