デザインにおいてフォントは重要です。
しかしウェブ上では日本語フォントはデフォルトのものか
画像に置き換えているのが現状です。
今回は、とくにウェブに向いていないと言われている
日本語ウェブフォントの「明朝体」でのデザインについて
無知なりに解説してみたいと思います。
ちなみに当ブログは「フロップデザインフォント」を使用してます。
webフォントとは、CSSで指定したフォントを表示する方法です。
閲覧者が指定したフォントを持っていなくても
制作者サイドでサーバーにアップしておけば表示可能になるのです。
しかし、これにはいくつか問題があります。
日本語フォントは容量が重いため表示に多少の問題がある。
サーバーにアップするという行為自体が禁止されている。
など実際にはいくつかの壁があります。
ただ今後はこれらの状況も変わってくると思います。
1.Winodws 8.1、OS X Mavericks（10.9）で游ゴシック体と游明朝体が
標準で搭載された。
2.フォントプラスなどのウェブフォントサービスの機能性・速度が
アップしてきている
ということで今までの明朝体を指定するときは
font-family:”ＭＳ Ｐ明朝”, “MS PMincho”, “ヒラギノ明朝 Pro W3”, “Hiragino Mincho Pro”, serif;
というのが普通でした。これは実際ほとんど使われていません。
これは単純に「ＭＳ Ｐ明朝」は多くの場合アンチエイリアスで表示されず
ガタガタで、しかも、それが読みにくいという現実が理由だと思います。
だったらサイトの雰囲気に合わなくてもメイリオを指定しておこうと
なるのもうなずけます。以下に今後オススメのCSS例を記述しました。
本文
font-family: “Times New Roman”, “游明朝”, YuMincho, “ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “メイリオ”, Meiryo, serif;
見出し・タイトル（18pt以上）
font-family: “Times New Roman”, “游明朝”, YuMincho, “ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “HG明朝E”, “メイリオ”, Meiryo, serif;
サンプル用に作ったページがこちらです。
https://webfontfan.com/mincho-font/
説明すると、まず「ＭＳ Ｐ明朝」を外します。そして「游明朝」を入れます。
そして「游明朝」が表示されない人用に「メイリオ」をいれます。
見出しではWindowsユーザーの50%以上が持っているだろう「HG明朝E」
をいれます。（HG明朝は13pt以上でアンチエイリアス。太いので見出しに）
たぶん全体で70%くらいの人は明朝体で表示されないと思うのですが
通常使用している、いままでのゴシック体で表示されているので
問題は無いと思いますし、今後古いOSは減っていくので良いのではと思います。
（逆に100%の人に明朝体を表示させようと無理するのは現状では
デメリットの方が多いように思います）
というわけで、やっと本題の明朝体ウェブフォントの話です。
今回はワードプレスを使って日本語明朝体フォントを表示してみます。
今回は自作の日本語ウェブフォントキットを使用しました。
サンプル用に作ってのが以下のページです。
https://webfontfan.com/utsukushi/
ワードプレスのスタイルシートに以下の記述を行っています。
@font-face {
font-family: ‘utsukushiregular’;
src: url(‘https://あなたのアドレス/utsukushi.eot’);
src: url(‘https://あなたのアドレス/utsukushi.eot?#iefix’) format(‘embedded-opentype’),
url(‘https://あなたのアドレス/utsukushi.woff’) format(‘woff’),
url(‘https://あなたのアドレス/utsukushi.ttf’) format(‘truetype’);
}
次にフォントの表示として
font-family: ‘utsukushiregular’ , ‘游明朝’, YuMincho, ‘ヒラギノ明朝 ProN W3’ , ‘HiraMinProN-W3’ ,”メイリオ”, Meiryo, serif;
と表示しています。基本的にはこれぐらいなので
私のようなHTMLやCSSがほとんど分からない人でも
なんとか表示するくらいはできると思います。
もちろん、見出しやh1、h2などのみに適用することもできますし
日本語ウェブフォントキットの場合、「ひらがな」「カタカナ｣など
よく使う文字のみの表示なので高速表示です。
とはいえWindowsXP以前や古いIEの問題が実は残っています。
そもそもアンチエイリアスで表示できないし困りものです。
というわけで、そういう場合はメイリオやMSゴシックで表示。
以下はゴシック体が代わりに表示された画面。
実はウェブフォントに使っている「うつくし明朝体かな」は
ゴシック体とも相性が良いです。これも無しじゃないでしょう。
あと日本語ウェブフォントキットは
今後は続々と新作の追加もされます。
（フリー版より15%くらいは完成度が上がっています。
とくにSmartFontUIは別物といえるくらいに良くなっている。）
もちろんフロップデザインの全製品は永久アップデート無料です。
もうひとつおまけでWordpressを使っている人には
プラグインタイプでワンクリックでwebフォントを反映できる
うつくし明朝体WEBフォント(WPプラグイン)も発売中です。