解 説

Illustratorで作成した文字がWeb用に綺麗に書き出せないと悩んでいませんか。

「ピクセルが小数単位になっているから」とか「アンチエイリアスを切れ」だとか色々情報がありますが、それでもどういうわけか書き出すと汚くなる。使い慣れないと本当に悩ましいのですが、これは大体アンチエイリアスのしわざです。
そしてIllustratorには文字のアンチエイリアスの設定ツールが色々と分散して用意されているためにどれを使ったら適切かよくわからないことが原因していると思います。

一般的に文字を書き出す時はアンチエイリアスを「なし」にするとと良いと言われます。けれどもそれは細かい文字を書き出す時に有効であってケースバイケースで対応が変わります。

アンチエイリアス とは?

何らかのオブジェクト(文字を含む)をコンピュータ上で描くと、画面では1ピクセルが最小単位となるため、オブジェクトの輪郭にジャギーと呼ばれるギザギザが発生してしまいます。
この輪郭のジャギーを目立たなくするために、輪郭の色を滑らかに変化させる事をアンチエイリアスといいます。
アンチエイリアスをかけると輪郭がぼやけてしまうため、ビットマップフォントなどではアンチエイリアス処理は行われない事が多いのです。

an28
アンチエイリアスなしの例

an29
アンチエイリアスありの例

失敗例1

まず12ピクセルの大きさで「美しい日本語」という文字列を作成してみます。
下の例は文字パネル下方のaaの場所で「鮮明」を選んでいます。ここはアンチエイリアスの設定場所です。
今回の設定はアンチエイリアスを「鮮明」になるようにかけているわけです。
an3
Web用ping8で書き出した結果は下のような感じです。「語」の文字がつぶれています。全然鮮明ぢゃないし!

an21

今度は文字パネルでアンチエイリアスを切ってみます。aaの場所で「なし」を選びます。
an1

その状態でWeb用ping8で書き出したものが下の例です。先ほどとかわらないような気がします。

an22

失敗例2

今度は背景色のある四角形に大きな文字を表示してみます。
黄色の背景に黒文字で「小塚ゴシック Pr6N」のLで36ピクセルとしました。
また、アンチエイリアスは「鮮明」にしています。
an23

これをWeb用ping8に書き出したものが下の例です。
an24

はい、きたないです。
この辺でIllustratorは諦めてPhotoshopで作成しようかとなります。

さらに、環境設定に「アートワークのアンチエイリアス」の設定箇所がありますので、これにチェックを入れたり外してみたりしてもうまくいきません。
an11

Web書き出しを思い通りにする解決方法

ポイントはWeb用に書き出すときです。
「Web用に保存」を行う際に、オプション項目の中に(「画像サイズ」の設定があるところ)アンチエイリアスの設定があります。
この例はCC2015の例ですが他バージョン(CS5は確認済み)もどこかにありますので探してみてください。
an8

ここで今回の場合は「文字に最適」を選択します。そうするとアンチエイリアスがかかり、先ほどの「鮮明」のアンチエイリアスが実現されます。書き出し例は以下のものです。

an25

先ほどの例と比べて見やすくなっていると思います。
先の汚い書き出しはアンチエイリアスを「なし」の状態で書き出したものです。

また、最初の12ピクセルの文字の書き出しはアンチエイリアスを「アートに最適」にしたものです。
再度ここに表示させます。
an21
今度はアンチエイリアスを「なし」にしてみます。
an26
少し見やすくなっていると思います。

結 論

アンチエイリアスは細かい文字の書き出しは「なし」にしておき、大きな文字の場合は適切なアンチエイリアスの種類を選択すると綺麗に見えます。さらに小数以下の位置でないかなどにこだわるとよいでしょう。

また、アンチエイリアスの最終設定は「Web用に保存」のオプションにあるアンチエイリアスを必ず希望のものに合わせることが最重要になります。
そうしないと、たとえアンチエイリアスをなしの状態で文字を作成をしても、「Web用に保存」の段階でアンチエイリアスの設定しだいでまたアンチエイリアスがかかってしまう結果になります。これが綺麗に書き出せない原因です。

ちなみに保存の際のアンチエイリアスの設定場所は「オブジェクト」の中の「ラスタライズ」の設定ボックスにもあります。
an10
けれども、やっぱり最終の書き出しの際にチェックするのが一番良さそうです。