アウトライン化すると文字が崩れる落とし穴

Webデザインには、あなたの知らない「落とし穴」がたくさん。大きなものから小さなものまで、それが及ぼす影響はさまざまだ。カンペキだと思っているあなたのサイトも、実はすでに暗い穴の中かも・・・。

　最近のWebデザイナーの中には、PhotoshopやIllustratorではなくFireworksを使ってWeb用の画像編集をしている人も多いのではないだろうかω　Fireworksは画面上でデザインしたものを簡単にWeb用に生成できるところが魅力である。

　Webでのテキストは、画像にしない限りシステムフォントで流し込まれた状態で表示される。したがって、デザイン制作時にアンチエイリアスをしていない状態のテキストをダミーで入れておく必要がある。Fireworksでもテキスト入力をし（フォントはosakaなどのシステムフォントを選ぶ）、プロパティから「アンチエイリアスをオフ」を選択すればWeb上とほぼ同じ見た目になる【1】。

　そのときに何らかの理由でアウトライン化する必要がある場合、「アンチエイリアスをオフ」に設定してあると文字が若干崩れてしまう。フォントサイズが10px以下のときにこの現象が起こりやすい。そのような現象が起きた場合は「アンチエイリアスをオフ」にする必要があるテキストだけPhotoshopで打ち込み、アンチエイリアスの設定を「なし」にして【2】、ラスタライズしてからFireworksに持ち込んでデザインに当てはめよう。

解説：横山 剛

（※本文中、及びキャプション内で使用している「＜」、「＞」は、全角になります。ご注意ください。）