blog

design

最近話題のWebフォント、そのメリットと使い方をご紹介!

最近Web業界で注目を集めているWebフォント。Webサイトのデザイン性を高められる便利な機能である一方、いくつかのデメリットもあります。本記事では、Webフォントのメリット・デメリットから導入方法まで、詳しく解説していきます。Webフォントの特徴をしっかりと理解した上で、上手に活用していきたいものですね。

CSS3から実装された新機能、Webフォント

Webフォントとは、特定のサーバ上にあるフォント情報を取得して使用するWebページ用のフォントのことで、スタイルシートの最新版であるCSS3から新しく実装されました。ややこしいように聞こえるかもしれませんが、その導入は難しくはなく、様々なメリットもあります。Webフォントを使うことで閲覧者の環境に依存せずに、すべてのPCやスマートフォンで常にデザイン通りのWebページを表示させられるようになるのです。このようなWebフォントの特徴はWebデザインの可能性を大きく広げてくれるでしょう。

Webフォントの特徴と得られるメリット

では、Webフォントを導入することでどういったメリットが得られるのでしょうか。Webフォントの特徴と併せて、代表的なメリットについてご紹介していきます。

1.ユーザの端末環境に依存しない

従来、ホームページなどのウェブ制作物をつくる際にフォントを指定しても、そのフォントがユーザの端末にインストールされていない場合、意図しないフォントで表示されてしまうことがありました。それに対してWebフォントはサーバからフォント情報を取得するので、ユーザの端末環境に左右されず、常に意図したフォントでページ上のテキストを表示させることが可能になります。どんなときでも指定したフォントで表示できるので、デザインを統一させることにもつながりますね。

2.画像をテキストに置き換えられる

意図しないフォントで表示されることを回避するために、画像の中に組み込んで表示させていたテキストをWebフォントに置き換えると、いくつかのメリットを得ることができます。

  • 画像の枚数が減り、ページのデータ量が小さくなる
  • テキストの修正が容易になる
  • SEO(検索エンジン最適化)に有利

3つ目の点について少し補足をしておきます。Googleなどの検索エンジンは、クローラとよばれるプログラムを使ってサイトを巡回し、データ収集をしています。そのクローラは基本的に画像上の文字を読むことができないため、テキストで直接情報が書き込まれているサイトの方が、クローラにとって内容を理解しやすいサイトといえるのです。Webフォントを導入することで、検索エンジンにサイトの内容をより適切に伝えられるようになり、SEO対策を考える上でも有利にはたらくのです。

Webフォントのデメリット(注意点)

このように、様々な点でとても便利で役に立つWebフォントですが、いくつか注意しなければならないこともあります。ここからはその、Webフォントを導入する際のデメリット(注意点)について見ていきましょう。

1.インターネット環境が必要

上述の通り、Webフォントは指定したサーバからフォント情報を取得してWebページ上にテキストを表示させます。つまり、ページを表示する際には必ずインターネットに接続しなければならないということです。ユーザの端末がインターネットに接続していなかった場合、ページを表示させることができなくなってしまうので、注意が必要です。

2.フォントファイルの読込時間が必要

Webページ上のテキストにWebフォントを使用した場合、画像を読み込む時間は短縮されるのですが、その代わりにサーバに置かれたフォントファイルの情報を取得して読み込むための時間がかかるようになります。特に日本語の場合、ひらがな・カタカナ・漢字に加えてアルファベットを使用することも多いため、英語などに比べて読み込むデータ量が膨大なものになりがちです。
この問題を解決するために現在よく用いられている方法には、大きく分けて3つほどあります。

・非同期でWebフォント情報を読み込む方法
フォント情報を非同期で読み込ませると、その読み込みが完了するまでの間には代替フォントを用いて仮にページが表示されるようになるため、読み込み時間中にページが空白になることを防ぐことができます。

・キャッシュを利用する方法
フォント情報をキャッシュとして端末内に記憶させるように設定しておけば、一度見たページと同じWebフォントを使用しているページを開くときに、一々サーバに問い合わせる必要がなくなり、読み込み速度を上げることができます。

・ページで使用している文字のデータだけを取得する方法
日本語特有の難しさを解決するために開発されつつある技術であり、これにより表示速度の問題も以前に比べると大分改善されてきているようです。

3.著作権に配慮する必要がある

3つ目にご紹介するのは、デメリットというよりは注意点ですね。通常のフォントと同じように、Webフォントにも著作権が発生しています。フォントを提供しているサイトによって無料のものや有料のもの、登録が必要なものや商用利用に限って使用料のかかるものなど、さまざまな規定があるので、使用するフォントの利用規約等を事前によく確認し、トラブルにならないように配慮しておいた方がよいでしょう。

Webフォントの導入手順

最後に、Webフォントの使い方(導入手順)についてご紹介します。難しいと思われがちなWebフォントですが、実は下記の3つのステップを踏むだけでとても簡単に導入することができるのです。

ステップ1.使用するフォントを探す

まずは使用したいフォントを探します。たくさんのサイトが様々なWebフォントを提供しています。Googleが提供しているもののように無料で使えるものや、有料登録をすることで使用できるフォントもあります。その中から好きなフォントを選び、使用するものが決まったらそのフォントのサーバへのパス、ライセンス(利用規約)などを確認しましょう。

ステップ2.CSSでWebフォントファイルを指定

次に、そのフォントを使用するページのCSSの@font-faceにフォントファイル名やサーバへのパスなどを記載します。また、Google Fontsなどの場合には、それぞれのフォントにHTMLに書き込むためのソースが用意されていて、それを使用したいページの~の間に記載することによっても指定することができます。無料で利用できるフォントの場合は、これで使用できるようになります。無料や有料での登録が必要なフォントの場合は、サイトの指示に従って登録をしておかなければなりません。料金やプランによって使用できるフォントの種類や数に制限がある場合もありますから、ご利用される用途に応じて慎重に検討されることをおすすめします。

ステップ3.CSSでフォントをHTMLに適用させる

最後に、Webフォントを適用させるタグ要素にCSSで「font-family: ‘フォント名’;」と記載します。これにより、指定したタグ要素内の文字が読み込んだWebフォントで表示されるようになります。

日本語対応のWebフォントサイト

先に紹介したGoogle Fontsは無料で簡単に導入できる便利なWebフォントなのですが、残念ながら日本語には対応していません。そこで、日本語にも対応したWebフォントを提供しているサイトをいくつかご紹介します。有料のものもありますが、一部のフォントだけを無料登録で使用できるサイトなどもありますので、興味のある方はとりあえずそれを使って試してみられるのもよいのではないでしょうか。

・FONTPLUS
使用を開始するためには入会金が必要になります。ライセンス料は月額と 年額のいずれかから選べ、使用したページへのアクセス数で料金が変わるプランと固定料金のプランとがあります。また、無償フォントを1サイトに6ヶ月間使用できる無料トライアルも用意されているので、気軽にWebフォントの効果を試すことができます。
http://webfont.fontplus.jp/

・Fonts.com
海外で有名なWebフォントサイトで、欧文だけではなく和文フォントにも対応しています。有料プランと無料プランが用意されており、無料プランではフォントを使用するサイトにFonts.comのバナーを掲載することで一部のフォントを使用できます。有料プランではページビューが多いほど料金は高くなりますが、料金が上がればその分機能も充実していきます。
http://www.fonts.com/ja

・TypeSquare
日本語対応のWebフォントサイト中ではもっとも有名なサイトの一つです。もともとフォントメーカーとして有名であったモリサワが提供しているサービスです。ページビューに従って料金が変わり、無料プランの場合1ヶ月あたり1万ページビューまでフォント情報が提供される仕組みになっています。
http://typesquare.com/

・デコもじ
日本で最初にWebフォントサービスを始めたサイトです。サービスプランはページビュー制限のない固定料金制で、料金は個人と法人によって異なります。料金設定は個人の方が低額に設定されており、1サイトに2フォントまでなら無料で使用できるので、個人でWebフォントを使用したいと考えておられる方には使いやすいサイトといえるでしょう。
http://decomoji.jp/

まとめ

いかがでしたでしょうか。確かに、日本語WebページのテキストをすべてWebフォントで、というのには現在ではまだ技術的な問題があります。しかしWebフォントには、そのデメリットを補っても余りある多くのメリットがありますから、「その効果が最も期待できるような部分に限定して使用する」などといった工夫をして上手く活用することが、Web製作者には求められているのではないでしょうか。長所も短所もあるWebフォント、そのメリットだけをしっかりと享受するためにも、賢く使っていきたいものですね。