WindowsでもMacでも綺麗な明朝体を表示したい

WEBサイトを制作していていつも悩むのがフォント。格式高い雰囲気に仕上げるには明朝体を使いたいですが、Windowsの場合、明朝体にアンチエイリアスがかからずギザギザになってしまうケースがあります。画像を使いたくない場合の最善策を探ります。

Contents

1 WindowsとMacのフォント一覧（OSバージョン別）
2 Windowsの場合
3 最善策を考える
4 Macの場合
5 WEBフォント
6 まとめ
7 関連書籍

WindowsとMacのフォント一覧（OSバージョン別）

バージョン	搭載フォント（明朝体）	搭載フォント（ゴシック体）	備考
XP	ＭＳ明朝ＭＳＰ明朝	ＭＳゴシックＭＳＰゴシック MS UI Gothic
Vista	ＭＳ明朝ＭＳＰ明朝	ＭＳゴシックＭＳＰゴシック MS UI Gothic メイリオ	ゴシック体にメイリオ登場
Windows7	ＭＳ明朝ＭＳＰ明朝	ＭＳゴシックＭＳＰゴシック MS UI Gothic メイリオ
Windows8	ＭＳ明朝ＭＳＰ明朝游明朝	ＭＳゴシックＭＳＰゴシック MS UI Gothic メイリオ游ゴシック	明朝体に游明朝、ゴシック体に游ゴシック登場。Macにも標準搭載。
Windows8.1	ＭＳ明朝ＭＳＰ明朝游明朝	メイリオ游ゴシック
※Officeフォント	HG明朝

Windowsの場合

MS系は、フォントが小さいとアンチエイリアスがかかりません

WindowsのMS系の場合、ゴシック体は24px（or 25px）以下、明朝体は22px以下でアンチエイリアスがかかりません。

Vistaでメイリオ登場

Windows Vistaでメイリオが登場し、ゴシック体はアンチエイリアスがかかったフォントが標準になりました。でもこの時点で明朝体はMS明朝ですのでフォントが小さいとギザギザのままです。

Officeがインストールされている場合、HGS明朝が綺麗

OfficeがインストールされているWindowsの場合、HGS明朝というフォントがインストールされます。これは13px以上でアンチエイリアスがかかりますので、小さいフォントを指定しなければ（もしくは小さいフォントの場合はギザギザで良しとすれば）比較的綺麗に表示できます。

ただし、当然ながらOfficeがインストールされていないWindowsマシンもありますので注意が必要です。

MS系にCSS3でアンチエイリアスをかける

CSS3のtransformを使ってアンチエイリアスをかけたように見せる方法です。IE9以上で使えます。（出典：“ＭＳＰゴシック” をメイリオみたいにアンチエイリアスさせるCSS3ハック）

.clear-type {
  -webkit-transform-origin: 0 0;
  -webkit-transform: scale(1, 1.01);
     -moz-transform-origin: 0 0;
     -moz-transform: scale(1, 1.01);
      -ms-transform-origin: 0 0;
      -ms-transform: scale(1, 1.02); /* IE9だけ1.02 */
       -o-transform-origin: 0 0;
       -o-transform: scale(1, 1.01);
}

.clear-type {

-webkit-transform-origin: 0 0;

-webkit-transform: scale(1, 1.01);

-moz-transform-origin: 0 0;

-moz-transform: scale(1, 1.01);

-ms-transform-origin: 0 0;

-ms-transform: scale(1, 1.02); /* IE9だけ1.02 */

-o-transform-origin: 0 0;

-o-transform: scale(1, 1.01);

}

最善策を考える

SEOを考えると明朝体もテキストで表示したい（画像は使いたくない）
フォントサイズで調整するのはデザイン的に難しい場合が多い
IE8やXPでも綺麗に見せたいけど、優先度としては低い

という条件下でしたら、

font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;

1	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳＰ明朝", "ＭＳ明朝", serif;

という指定をし、Windows7以下でCSS3のtransformによるアンチエイリアス化を施すというのがいいのではないでしょうか。

ちなみに游明朝とMS明朝は文字間（ピッチ）が違うので改行位置などに注意が必要です。また、上記フォントファミリーで100％完全にカバーできるものではないことをクライアントさんにご理解いただきましょう。

Macの場合

Macの場合は、ヒラギノ明朝か游明朝か？という選択肢がありますが、どちらも綺麗に表示されますのでそういう点では問題ありません。Windowsで明朝体を綺麗に表示するために游明朝を使うのでしたら、それにあわせてMacも游明朝にするという手もあると思います。

WEBフォント

ちなみにですが、GoogleWEBフォントや有料日本語WEBフォントを使うという選択肢もあります。こちらはまた別の機会に記事にしたいと思います。

まとめ

個人的には游ゴシックが明朝体とゴシック体の中間くらいに見えるので、クライアントには最初に游ゴシックを勧めています。游ゴシックって明朝体ほど堅苦しくなく、ゴシック体よりは品があるように感じているのですが、皆さんはいかがでしょうか？個人の感覚によるところもありますし、デザイナーの意向もあるでしょうから、よく話し合って決めるのがいいですね。