ウェブフォントで表現力アップ!

ヘッダ画像

Webフォントとは

ウェブブラウザではそのパソコンにインストールされているフォントを使用してページを表示します。基本的にフォントの表現は機種依存であり、クライアントがWindowsかMac、もしくはLinuxかによっても見た目が異なってきます。

このことはサイト制作者の意図したフォントで表示することができない場合があることを意味します。

このため、見栄えのよいフォントで見出しなどを作りたいという場合には、画像化して使うという手法が用いられてきました。

テキストを画像化したものについてはalt属性でその内容を記することができますが、本文や見出しなどに、プレーンなテキストで入力したものと、画像化したもののどちらがユーザーに優しいかということを考えると言わずもがなかと思います。当然、どちらが検索エンジンにサイト内容を伝えやすいかも想像につきます。

webフォントとは

CSS3で実装されたwebフォントはあらかじめサーバ上にアップしたフォントをブラウジングするクライアント側で表示することができます。(正確にはwebフォントはCSS2以前でも存在していましたが、仕様や互換性の面で実用的ではありませんでした)

フォントフォーマット

Webフォントのフォーマットとしては、SVG系などもあるのですが、現状で考えるとTrueType・OpenType・WOFF、そしてIE8など旧ブラウザ用にEOTを考えておけばよいと思います。

WOFFはW3CがWeb標準のひとつとして勧告したもので、TrueTypeまたはOpenTypeをテーブル単位で圧縮して独自のヘッダ情報やXML形式のメタデータを付加した形式となっています。TrueType・OpenTypeから変換することもできます。

Firefox 3.6/Chrome 6.0/IE9.0以降などの多くのブラウザが対応しており、今後のスタンダードといえそうです。

サイトの更新効率もアップする!?

これまでデザイン的な要素から画像で使っていたものが、テキストで表現できるわけです。このことはユーザービリティだけでなく、サイト更新のスピードにも影響します。

このサイトのメインタイトル部分は手書き風のwebフォントを使用していますが、従来ですと、このような表現をしたければ、Illustratorなどを使い、希望のフォントで入力して画像化、それを配置するという作業が必要でした。

このサイトはWordPressで構築しています。記事タイトルが自動的にh1のサイトタイトル部分に挿入するようにテーマ側で指定してありますので、記事を書くだけでこのような表現が実現できるのです。

この一文のようにここはこのフォントを使いたいなんていうことも、簡単に実現できてしまいます。

webフォントの問題点

表示速度

パソコン上にその都度フォントをロードさせるわけですから、その分の負荷はかかってしまいます。欧文の場合は大文字・小文字や記号を含めても256文字(最小限なら26文字×2)あれば、表現できますが、漢字・ひらがな・カタカナのある日本語では「重い・遅い」というデメリットと向かい合わなくてはなりません、

閲覧者はもちろんのこと、検索エンジンの評価もサイトの表示速度も重要なファクターだといわれていますので、このあたりをうまくコントロールしてあげる必要があるかと思います。

これについてはより軽いフォントフォーマットや必要文字だけのフォントファイルにするサブセット化という手法がありますが、個人的には見出しやタイトル部分に限定するというのが、現時点での実用ラインなのかなとも感じています。

フォントライセンス

webフォントではサーバにアップしてだれもがダウンロードできる状態になるわけですから、フォントのライセンスというものが関わってきます。

モリサワやフォントワークス、モトヤなど従来のフォントベンダーも有償のサービスとしてwebフォントに参入してきています。コストを掛けることができるウェブサイトであれば、これらのクオリティの高いフォントを使用できますが、なかなか難しいウェブサイトの方が多いのではと思われます。

一方でフリーフォントの多い欧米と違い日本語の場合はライセンスフリーの書体は非常に少ないです。
なにせ、常用漢字+ひらがな+カタカナですぐに数千文字にはなってしまいますから、手軽に作ることが難しいというのが現状です。

その中でも探してみると無料で使えるライセンスフリーの日本語書体は存在します。実際のwebフォントの表示サンプルを作ってみましたので、ご覧になってください。

いずれにしても、webフォントはデザイン・効率・SEOなどさまざまな面でサイト制作者にとっては魅力的な存在であり、十分に実用の域に入ってきているのは間違いなさそうです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

超簡単!アイコンフォント Font Awesomeの使い方

ひと昔前なら画像で表現していたようなアイコン。 ウェブフォントの登場によって、描画速度が速く手軽に挿 […]

3分で設置できる!?CSS3の角丸グラデーションボタン

CSS3と対応ブラウザの登場により、角丸やグラデーションを使ったリンクやフォームの送信ボタンが画像な […]

日本語フリーwebフォント 表示サンプル(ゴシック編)

無料のwebフォントとして使用できる日本語書体を紹介しているサイトはたくさんあるのですが、肝心の表示 […]

webフォントの使い方

HTML5+CSS3で注目度の高いwebフォントの使い方を紹介したいと思います。 ここでいうwebフ […]