【いまさら聞けない】 Webフォントとは?-その2- メリット

こんにちは(^ ^) FONTPLUSスタッフのナオです。
今日はWebフォントのメリットについてご紹介します。 まずはWebフォントのおさらいから。

Webフォントとは

Webフォントとは、インターネットを通してサーバーにおいてあるフォントを読み込んで表示することができる機能と、そのフォントのことです。

Webページで文字を表示させる方法は、主に3つ。

  1. 機器に入っているフォント(デバイスフォント)を使う
  2. 文字を画像にして表示させる
  3. Webフォントを使う
 

そして、1.と2.には次のような問題があります。

  1. 機器によって入っているフォントが異なるので、指定したフォントが使えず、同じページでも機器によって異なるフォントで表示されることがある。
  2. 同じフォントで見せることができる反面、「画像」特有の問題がある。 文字をコピーできない、検索エンジンに好まれない、文字が変更になる度に画像を作り直さないといけない・・など。
 

Webフォントは1.と2.の問題の解決策として登場しました。

【いまさら聞けない】 Webフォントとは?-その1- 参照

Webフォントのメリット

それでは、Webフォントのどんなところがどんな人に嬉しいのか? 1つずつご紹介していきます。 Webに携わる3人のコメントと共にご覧ください♪

デザイナー(Webサイト制作者)さんデザイナーのアイコン サイトオーナー(企業担当者)さんサイトオーナーのアイコン ユーザー(Webサイトを見にきた人)さんユーザーのアイコン

文字がきれいに見える

画像の文字は拡大すると輪郭がぼやけてしまいますが、Webフォントなら、きれいなままです。 フォントデータなので文字のサイズによって最適化して表示してくれます。

ユーザーさん
スマホで拡大することが多いから、読みやすい!

デザイナーさん
スマホやタブレットのようなタッチパネルデバイスを使う人は多いから、これは重要。

サイトオーナーさん
ユーザーが読みやすいサイトは、イメージアップにつながる!

デバイスを問わず同じフォントで表示できる

画像化することなく、パソコンやスマホに入っていないフォントが使えます。 デバイスによってフォントが違う、という状態にならず、指定した通りのフォントで表示させることができます。

デザイナーさん
見出しやバナーに画像を使わなくても、同じフォントで見せられるところが良い!

ブランディングに効果的

ブランドイメージに合ったフォントが使えます。 Webサイトだけでなく、出版物や商品パッケージなどとフォントを合わせることができるので、トータルブランディングにも活用できますね。

サイトオーナーさん
ブランディング戦略にぜひ使いたい!

コピーできる

スマホで気になった文字をコピーしようとしたら画像だからできなくて → 別の画面を開いて → 画像見直して ⇄ 入力・・・あー面倒〜!ってなることありませんか? Webフォントは画像ではなくテキストなので、文字がコピーできます。

ユーザーさん
コピペして検索したり、お店を調べたりできるのは便利!

サイトオーナーさん
住所や電話番号に使ったら、問い合わせが増えそう。

※ 画像でもHTMLにalt属性というタグにその文字を記述していれば、コピーさせることができますが、ひと手間がかかります。また文字の一部分だけをコピーすることはできません。

制作効率アップ

画像の文字を使っていると、更新の度に画像を作り直して差し替えなければなりませんが、Webフォントならテキストなので、文字を変更するだけです。 効率的ですね。

デザイナーさん
作業の効率化は日々の課題。 これはうれしい!

たとえば、こんなことが簡単に!

  • Webサイト内の「ウェブサイト」という単語を一括で「Webサイト」に置換できる
  • 日めくりカレンダーの様に毎日自動的に日付が変わるコンテンツが作れる
  • Webサイトを作ったことがない方でも、タイトルやメニューの文字修正ができる
  • CMSにあらかじめフォントを設定しておけば、テキストを入力するだけでブログが投稿できる

制作効率が上がるだけでなく、Webサイトの管理やメンテナンスもしやすくなります。

レスポンシブデザインと相性がいい

画像の場合、デバイスサイズに合わせて複数の画像を用意する必要がありますが、Webフォントなら1テキストですみます。 デバイスサイズによって異なるレイアウトに柔軟に対応できます。

デザイナーさん
レイアウトにあわせて調整できる! 画像だとそうはいかない。

SEO対策に効果的

Webサイトをキーワード検索でなるべく多く、そして上位に表示させるために、SEO(検索エンジン最適化)対策は欠かせませんね。
検索エンジンには画像よりもテキストの方が歓迎されます。 また画像を使った場合、HTMLのalt属性に“どんな画像なのか”をわかりやすく記述しなければならないので、alt属性の記述漏れや間違いを防ぐためにもWebフォントはおすすめです。

サイトオーナーさん
なるべく上位に表示させて、集客につなげたい!

デザイナーさん
altタグの記述はなにかと面倒だから、助かる。

最近、検索エンジンでは、コンテンツの重要性が高まっているそうです。 Webフォントで作業を効率化し、コンテンツ内容を充実させる時間に当てたいですね。

アクセシビリティ対応と連携しやすい

あらゆる人にWebサイトの情報を伝えるためのアクセシビリティ対応。
たとえば、自治体サイトや観光サイトでは、目の不自由な方のために、文字のサイズや色を切り替えられるようにしたり、音声読み上げブラウザに対応することが求められます。 こんなとき画像を使っていると、文字サイズや色を変更できないので別の画像を用意する、音声で読み上げるためにalt属性を記述する、という作業が必要です。 また外国からの観光客のために翻訳機能をつけたい、という時も画像は翻訳できないため、言語毎に画像を用意することになります。 こういった作業がWebフォントなら不要です。

デザイナーさん
自治体案件ではここをアピールしよう!

サイトオーナーさん
コストをかけずにアクセシビリティを高められる。

 

以上、Webフォントのメリットをお伝えしました。 8項目もある! 多すぎ(レン)ですね〜w

Webフォントのデメリット

良いところだらけのWebフォントですが、やはりデメリットがあります。 そのほとんどがWebフォントを自分で設定する場合の問題点です。

表示速度が遅くなる

フォントの表示速度が遅くなる場合があります。

フォントファイルをよそから取ってくるのでデータが重いと読み込むのに時間がかかり、表示が遅くなります。 特に日本語には、ひらがな、カタカナ、漢字などたくさんの文字が入っているのでデータの容量がかなり重くなるんです。
また、通信環境やページ構成(画像データが多い)などによっても、表示速度は遅くなります。

設定に手間がかかる

Webフォントを自分で設定するとなると、少し手間がかかります。 フォントデータをサーバに置いたり、CSSの@font-faceにブラウザ毎のフォントデータ形式を指定したり…Webサーバーの設定やHTMLやCSSが苦手な方には、取っつきにくいかもしれません。

Webフォントの使用許諾があるフォントが少ない

フォントメーカーの多くは、販売しているフォントデータをWebフォントとして使用することを許諾していません。 このフォント使いたいな〜と思っても、使用できない可能性も。。

Webフォントサービス

そこで、Webフォントのメリットを最大限に発揮しつつ、デメリットを軽減することのできるサービスとして、 「Webフォントサービス」 が生まれました。 FONTPLUSも、フォントデータを軽量化し、自分で設定する手間を省いて、フォントメーカーの許諾をとったWebフォントを快適に使ってもらえるように開発されたWebフォントサービスです。

ということで、次回はWebフォントとFONTPLUSサービスのしくみついてご紹介します♪

ではまた〜(^ ^)/