BLOGスタッフブログ

インソースマーケティングデザイン

2018.05.22 その他

Webフォントのメリットとデメリット

こんにちは。WEBクリエイターの黒柳です。

私は、マリンロードに入社して約半年が過ぎ、仕事も(少しずつですが)慣れてきました。
出来ること、任されることが少しづつ増えていくのはとても嬉しいです!

さて。突然ですが、私はフォントが大好きです。

街でポスターやPOPを見かけると、内容よりもフォントのほうが目に入ってきます……^^;

今回はWeb制作会社ならでは(?)のフォント「Webフォント」について書いてみようと思います。

そもそも、Webフォントって何?

通常、Webブラウザでは、端末に入っているフォントを表示しています。

ところが、端末によって入っているフォントのラインナップが違います。
(同じWindowsでも入っていたり、入っていなかったりするんです。)

指定したフォントが端末に無い場合は端末内に入っているフォントで代用されるのですが、やっぱり「どの環境で見ても同じように表示されるようにしたい!」ですよね。

そんな夢を叶えてくれるのがWeb上のフォントを読み込んで表示する「Webフォント」です。

Webフォントのメリット

Webフォントの利点…の前に、Web制作の現場でよく使われる「フォントと文字を丸ごと画像化」という方法についてお話します。

Webデザイナーが作成したデザインから文字の部分を切り抜きして、画像として表示する方法ですが、これはいくつか欠点があります。

  • ・iPhoneなどの高精細ディスプレイでぼやけて表示されてしまう
  • ・文面を変えるたびに画像を作り直す必要がある
  • ・画像なので、テキストをドラッグ等で選択できない
  • ・自動翻訳や音声読み上げなどの対応が難しい

最後の2つはユーザビリティ(使いやすさ)に直結します。

一方でWebフォントの場合は、Web上にあるフォントを読み込んで表示するので、基本的にどの環境で見ても同じように表示されますし、画像化した場合の課題をすべてクリアしています。

  • ・フォントなので、いくら拡大してもぼやけない
  • ・文面を変えたくなっても、テキストの修正だけで済む
  • ・テキストなので、もちろんドラッグ選択ができる
  • ・自動翻訳や音声読み上げにも対応しやすい

これがWebフォントの強みです。

Webフォントのデメリット

先ほど、「Web上にあるフォントを読み込む」と書きましたが、それが実は欠点でもあります。

なぜか? それは、フォントを読み込むのに少なからず時間がかかるためです。

フォントを読み込んでいる間は文字が表示されないので、アクセスしてきた人が「何だよこのページ、全然表示されないじゃん!」と思って帰ってしまうかもしれません。

(一応、JavaScriptなどを使ってページ全体を読み込んだ後でフォントを読み込むやり方もありますが、その場合は「ページを読んでいる最中にいきなりフォントが切り替わる」という現象が発生してしまいます。個人的な意見ですが、あまり気持ちのいいものではありません……)

また、Webフォントを利用するにあたって、利用規約にも従う必要があります。

有料のWebフォントの場合、月額数千円程度のサービス利用料がかかります。

まとめ

WEBフォント フォントの画像化
メリット ・拡大してもぼやけない
・テキストの修正がしやすい
・ユーザビリティが高い
(テキスト選択/翻訳/読み上げが容易)
・フォントに比べて読み込みが早い
・フォントの月額利用料なし
デメリット ・読み込みに多少時間がかかる
・(サービスによっては)月額利用料がかかる
・利用規約に従う必要あり
・高精細ディスプレイでぼやける
・テキスト修正時に画像を作り直す必要あり
・ユーザビリティが低い
(テキスト選択不可。翻訳/読み上げが困難)

画像化とWebフォント、どちらにもメリット・デメリットがあります。

マリンロードは、フォントに限らず、「どうすればよりベストか?」常に考えながら お客様の課題を解決してまいります。

インソースマーケティングデザインが書いた他の記事

見積もり・ご依頼など、
お気軽にご相談ください

本サイトはユーザーエクスペリエンスの向上などを目的に、Cookieを使用しています。
右記のバナーで「同意する」をクリックする、または本サイトを利用することにより、
お客様は弊社のCookieポリシーに同意したことになります。

同意します