Webサイトは基本的にゴシック系のフォントを使用する事が多いのですが、上がってきたデザインが明朝体で困った…なんて事も多いのではないでしょうか？

なぜ明朝体だと困るのか？その理由は「環境依存」になります。
では、どのように明朝体を使っていけばいいのかをまとめてみました。

そもそもWebサイトに明朝体を使うデメリット

現在、Webサイトは多くのデバイスで見られています。
Windows、Mac、スマートフォン、iPhone、その他タブレットなどなど…非常に多くのデバイスを気にしなければなりません。

また、ブラウザもChrome、IE、Firefoxなどなど、そちらも気にしなくてはならないですよね。

そんな時、ゴシック体ならあまり気にしなくてもなんとかなるのですが、明朝はとっても環境依存してしまうんです…。
OSによってプリインストールされているフォントが違うし、OSのバージョンによっても変わってきます。

では、どのように明朝体を使えばいいのか…。

明朝体を使うパターン1　画像にする

これは昔からある手法ですよね。とにかく思った通りに表示させたいなら画像にしちゃおう！って考え方です。
確かに環境依存もほとんどないので、画像にするのが一番だと思います。

しかし、メリットがあればデメリットもあるんですよね。

フォントを画像で使うメリット

デバイスやOSなどによっての依存度が限りなく0に近いので使用しやすい。
できる事なら画像にしてしまいたいものです…。

フォントを画像で使うデメリット

とにかく面倒臭い…。いちいちPhotoshopで画像を作ってWeb用に書き出して…なんてやってられない！
動的な部分に弱い…。更新情報や後で追加するものを画像にできない部分が出てくる。
SEO的によくない…。今は画像よりとにかくテキストで！という流れになってきているので、テキストを画像にするのは絶対マイナス。

明朝体を使うパターン2　デバイスに入っているフォントを使う

画像にできないとなれば、次に「デバイスフォント」を使うという選択肢があります。

CSSで記述するとすれば、以下のような感じでしょうか。

 

まぁ、わりと一般的なのかなぁ…と思っています。
ただ、この方法にもメリットとデメリットがあります。

デバイスフォントを使うメリット

デバイスに元々インストールされているフォントを使用するので、とにかく動作が軽いです。
できる事ならデバイスフォントを使うのが良いですよね。

デバイスフォントを使うデメリット

デバイスフォントを使うという事は、各デバイスによって異なるという事がデメリットだと思います。
Macにはヒラギノ明朝が入っていて、Windowsには游明朝が入っている。windows8より前には入っていない。スマートフォンはそもそも明朝体は入っていない…などなど。
デバイスによる依存が激しいので、デザインに細かいこだわりがある場合はかなり厳しいです。

明朝体を使うパターン3　Webフォントを使う

昔にくらべてWebフォントを使用するサイトが増えてきている気がします。
いちいち画像にしなくても良いので、コーダーとして考えるととても使いやすいです。

CSSの記述はこんな感じでしょうか。※例ではフリーフォントの花園明朝を使っています。

 

しかしながら、こちらもメリットデメリットがあります。

Webフォントを使うメリット

フォントをサーバーに置くため、環境依存が少ない。
画像にする訳ではないので、動的な部分にも使用できる。

Webフォントを使うデメリット

日本語は「漢字・ひらがな・カタカナ」と、文字数が非常に多いので重くなる。
有名なフォントは有料。無料フォントはすごく少ない。
ブラウザによって読み込むフォントタイプが異なるので、いくつかの拡張子でアップしなければならない。（eot、ttfなど）

Webサイト製作時に明朝体のフォントを使う3つのパターン　まとめ

いかがだったでしょうか？
なんというかWeb製作って本当に面倒臭いなぁ…と思わせてくれる程悩ましいものなんですよね。

どれが正解！というのも今のところはないので、状況によって使い分けるしかないのかなと思っています。
皆さんはどういう状況で、どう対応されているのでしょうか？