実際にWebフォントを導入しているWebサイトを見てみよう(中編)

第5回では2つのWebフォント導入事例を解説しましたが、今回はもう一つ、ブログサイトを解説します。書体選定のポイントを知り、Webフォントを使うメリット/デメリットについても学びましょう。

どんなコンテンツにも違和感なく使える書体とは…?

世の中には、たくさんのブログが存在します。そんな中で2011年1月から300本以上の記事で「サイトの運営に役立つTips」や「今更、人に聞けない初歩的なこと」を中心に情報発信している「ふにろぐ」をご紹介します。

このサイトはブログタイトルのみならず、本文もWebフォントを利用しています。このサイトで使用されている書体名をご存じですか? 左図は「スーラ」、右図は「ハミング」という書体です。「スーラ」は現代風の丸ゴシック体で、暖かく優しい表情をしています。「ハミング」は明るい印象の書体で、優しさを感じさせながら上品さも兼ね備えています。

適度な優しさがある書体を使うと、キツイ話題の内容を思い切って書いても大丈夫かもしれませんね。どんなコンテンツにも使える守備範囲の広い書体は他にもたくさんありますので、さまざまな書体をじっくり観察すると勉強になります。そんな書体をいくつか、ピックアップしてみました。

そのリニューアル、本当に必要?

そのリニューアル、本当に必要?

そのリニューアル、本当に必要?

そのリニューアル、本当に必要?

書体名は、上から「スーラ」「ハミング」「スキップ」「モード明朝Bラージ」です。見慣れた明朝体やゴシック体ではなく、かと言って「ポップ過ぎない書体」を利用したいケースに選択してはいかがでしょう。

一方でこうした書体はどうでしょうか? ブログで使用することは少ないと思いますが、個性が強い書体を使ってしまうと読者に対して間違った印象を与えてしまうかもしれません。

そのリニューアル、本当に必要?

そのリニューアル、本当に必要?

そのリニューアル、本当に必要?

書体名は、上から「コミックレゲエ」「パルラムネ」「ミステリ」です。とがってる感のある書体、ゆるかわいい書体、おどろおどろした書体を選択してみました。これらの書体は「キャッチコピー」や「テレビテロップ」でよく使われています。もちろん、正しい使いどころで利用すれば、読者に一瞬で、ストレートに印象を伝えられる書体です。

サイトの特性やコンテンツの性格を理解し、それにマッチした書体を選定することはとても重要ですし、かなり楽しい作業でもあります。サイトの雰囲気にマッチした素敵な書体を見つけたときは、それがどういう意図で制作された書体なのか、フォントに詳しい人に聞いてみる。そう勉強してみれば、より一層フォントへの理解も深まるはずです。

Webフォントを利用するメリットとデメリット

ここまで「コンテンツの特性に応じて、どんな書体が選定されているのか」を一緒に学んできました。サイトの印象や表情を表現するために、書体が果たす役割がとても重要であることが理解できたのではないでしょうか。Webフォントを利用するメリットは、これまでさまざまな角度から説明してきましたが、いま一度、メリットとデメリットを整理してみましょう。

メリット

1. コピー&ペースト

ホテルやレストランの名前・住所がコピーできなくてイライラしたことがありませんか? 文字が画像で作られている場合はコピペできませんが、Webフォントであればコピペできます。

2. 制作効率の向上

テキストを画像で表現すると、更新の度に編集ソフトを使って修正作業しなくてはなりません。Webフォントはテキストですから、HTMLの文字列を変更するだけで修正作業が完了します。

3. マルチデバイス対応

さまざまな閲覧環境(PC、タブレット、スマートフォンなど)で見ても、同じフォントで表現できます。閲覧端末のOS環境によって内蔵フォントが異なるため、システムフォントの指定ではブランドイメージを適切に伝えきれません。Webフォントを利用すれば、サイトイメージが統一できるので効果的です。

4. 拡大しても文字が綺麗に

画像で作成された文字は拡大するとぼやけた感じになりますが、Webフォントはアウトラインデータですから、どれほど拡大しても綺麗に表示されます。

5. SEO効果

テキストを画像データで表現する場合、検索エンジンへの最適化はHTML内の「alt属性」に画像を説明する代替テキスト情報を記述する必要があります。Webフォントで表現すれば代替テキスト情報の記述が必要なくなるため、記述漏れや記述間違いが発生しません。

6. アクセシビリティ対策

Webフォントはテキストデータであるため、文字サイズや配色の変更、音声の読み上げに対応しやすいです。

7. レスポンシブデザインへの対応

文字を画像データとして扱ってしまうと、画面サイズに合わせて複数の画像を用意する必要があります。Webフォントは手間がないだけでなく、デバイスサイズによる異なるレイアウトに対して、柔軟に対応できます。

デメリット

1. テキスト表示の遅延

最近ではほとんど気にならない程度に改善されていますが、テキスト表示が遅くなる場合があります。サイトの構成やフォントデータの容量、通信環境などに左右されます。

2. コスト

当然ながら、有料の日本語Webフォントサービスを利用する場合は利用料が掛かります。

こだわりを表す「Webフォント」

2011年頃から徐々に使われはじめたWebフォントですが、特にこの数年はさまざまな課題が解決方向に向かい、日本語Webフォントを利用しているサイトを見ることは珍しくなくなりました。

これまで、デザイン性の高い文字は画像データで表示されることが多かったと思います。Webフォントとは、ブラウザにこだわりのフォントを表示させるための「新しい絵の具」と考えると分かりやすいかもしれません。htmlやCSS、JavaScriptなどの筆を使って新しい絵の具を使いこなせば、Webサイトがもっともっと素敵になると思います。

次回は、自治体サイトや企業サイトの事例を解説します。