Hints of fonts on the web―Web におけるフォントのヒント

Section 2:画像化テキスト

 一般的でないフォントをどうしても使いたい場合,画像として挿入する必要がある(画像化テキスト)。ここでは,画像化テキストを作成するときの注意点を中心にまとめる。

画像化テキスト

 画像化テキストは,主にロゴや見出しなどについて,文字情報を“文字の入った画像”として作成するものである。WWW では,通常のテキストでは,原則として閲覧側にも同じものが存在しないとフォント情報は再現されないが,画像化テキストはあくまで画像であるので,イメージどおりのフォントを使用して作成されたものでも,閲覧側で再現される。

 画像化テキストは,ほとんどの画像処理・作成ソフトウェアで作成することができる。

アンチエイリアス(スムージング)

アンチエイリアスあり・なしの比較。

 画像にテキストを書き込む場合,輪郭のぎざぎざが目立つことがある。このぎざぎざを軽減させる処理をアンチエイリアスという。また,その処理の結果,輪郭が滑らかになることから,スムージングと呼ばれることもある。

 アンチエイリアスは,画像化テキスト作成時に,ソフトウェアが対応していれば,適用させることができる。

 また,アンチエイリアスの手法として,液晶ディスプレイなどの発光素子の配列のされかたを利用する場合があり(サブピクセルレンダリング),一般にその手法で想定されているディスプレイでの表示品質が向上する。しかし,たとえば CRT ディスプレイで表示させた場合,輪郭がぼんやりと異なる色が現れることがある。

 ただし,ビットマップフォント,および,ピクセルフォントと呼ばれるもとよりアンチエイリアス処理を行わず使用することが想定されているフォントでは,一般にアンチエイリアスをかけないほうが良好な品質が得られる。

 もともとアンチエイリアスは,信号処理における折り返し軽減処理のことを指す。画像における“ぎざぎざ”は,“高周波”のことであり,それをカットして滑らかにする処理という点で,本質的に同じ処理であることがわかる。

アンチエイリアスと透過処理

透過 GIF 画像化テキストの重ね合わせ。

 アンチエイリアス処理がされた画像化テキストが挿入されるとき,背景が単色であれば,それと同じ背景色を持つ画像を作成しておけばよい。しかし,背景に柄がある場合などは,挿入時に背景とずれてしまう場合が考えられる。このようなときは,GIF 形式の透過色を利用するのが一般的である。

 透過 GIF 形式では,画像中の 1 色を,透過色に指定する。アンチエイリアスでは,テキストの輪郭は濃淡表現されており,したがって輪郭周辺は単一の色ではない。よってたとえば,画像背景と異なる系統の色を使用した背景に重ね合わせると,テキストの周囲が,うんのさしたように見える。したがって,重ね合わせ先の背景色に近い色を背景色にして,画像化テキストを作成する。

 なお,アルファチャネル付き PNG では,ピクセルが透過度を持つので,うまく作成できれば重ね合わせ先の背景色の影響は受けない。ただし,アルファチャネル付き PNG は Internet Explorer 6 以前において対応していないことに注意しなければならない。

画像化テキストの作成と挿入

画像化テキストの形式

JPEG 形式で作成した画像化テキスト。

 画像化テキストは,一般に塗りが均一で,境界が(アンチエイリアス処理を行ったとしても)はっきりしている。したがって,GIF・PNG 形式での保存に向くが,JPEG 形式には向かない。JPEG 形式は,色が滑らかに変化する自然画を得意とする一方,画像化テキストのような特徴を持つ画像は得意としない。JPEG 形式では,右図のように輪郭がぼやけたり,周囲に雑音が現れることがある。JPEG 形式でも,圧縮率を低く設定すると,こういった見苦しい点が軽減されるが,同等の GIF・PNG 形式よりファイルサイズが大きくなることが多い。

 グラデーションを含んだり,写真にテキストを重畳させたりしたときなど,JPEG 形式で保存しないとグラデーション部分・写真部分の品質が損なわれる場合がある。このときは圧縮率を変化させながら試行錯誤し,納得いく品質とファイルサイズの点を見つけて保存することになろう。または,ファイルサイズが許せば PNG 形式での保存も検討するとよい。

代替テキスト

 画像化テキストは,文字情報を表現してはいるものの,あくまで画像である。したがって,WWW ページに挿入する際には,適切な代替テキスト(alt 属性)を指定する必要がある。一般に,画像化テキストの代替テキストには,画像中に書かれているテキストをそのまま指定する。

画像化テキストと文字サイズ

 画像化テキストは,画像であるから,ブラウザ側のテキストサイズ設定に連動してその大きさが変化することは,一般にはない。拡大・縮小される場合でも,ビットマップ画像の拡大・縮小になるわけだから,品質が低下する。

 ブラウザによってテキストサイズが変化する状況では,その設定によって,たとえば見出しに画像化テキストを使用した場合,本文と見出しのサイズ比(ジャンプ率)が変化する。これによって,デザイン上の印象が変化するばかりか,サイズの序列が逆転する危険性もある。