※説明に使用しているIllustratorのバージョンはCS3です。記事投稿時点ではCS5まで出ているのでWeb制作に関しては便利な機能が実装されているかもしれません。それでもいくつかは使えると思います。
ドキュメントの設定
印刷物と違いWebの場合は色はRGB、単位はピクセルが基本です。それをふまえていくつか設定します。
ドキュメントの設定
新規ドキュメントを作成します。
「新規ドキュメントプロファイル」を「Web」に設定すると、自動的にWebに最適な設定に変わります。ドキュメントのサイズは適宜入力します。一番下の「プレビューモード」は、「ピクセル」に設定します。新規作成後でも「表示 > ピクセルプレビュー」にチェックで設定出来ます。ピクセルプレビューにすることで、画像になった（ラスタライズ）時の状態が、PhotoshopやFireworksと同じように確認出来るので便利です。さらに、「表示 > ガイドにスナップ」が「ピクセルにスナップ」になり、自動的に1px毎にオブジェクトがスナップするようになります。
単位を変更する
「Illustrator > 環境設定 > 単位・表示パフォーマンス」ですべての単位を「ピクセル」にします。
キー入力を1pxに固定する
「Illustrator > 環境設定 > 一般 > キー入力」を1pxにします。時々「1.001px」と中途半端になっていることがあるので確認しておくと良いです。
原点を変更する
定規を表示し、原点を変更しておくと、オブジェクトを正確に配置出来るので便利です。ウインドウの左上隅からドラッグすることで原点を変更出来ます。自分はトリムエリアの左上の角に合わせています。
ここまでの段階でテンプレートとして保存しておけば使い回しも出来て便利です。ただし、環境設定は引き継がれないので面倒ですがその都度変更を。
オブジェクトの作成と配置について
IllustratorでWebデザインをする時、意図していないアンチエイリアスがかかってしまうのを防ぐ方法です。一番困るところですね。
線はアンチエイリアスをオフに
Illustrator で線を作成する場合、線の座標はパスの中心を基準にするので、線の太さが奇数値だと下図のように線にアンチエイリアスがかかってしまいます。
これを奇麗に表示するには、「効果 > ラスタライズ」で、「アンチエイリアス：なし」にします。以前は線をアウトライン化してましたが、アピアランスで編集ができるので今はこの方法でやっています。
四角形の線は「効果 > パス > パスのオフセット」で奇麗に
「線はアンチエイリアスをオフに」の理屈から考えれば、囲み罫は線を内側に設定すれば奇麗に表示されるはずなのに、上部の線が困ったことにぼけてしまいます。
しばらくの間は上にボケた部分を隠す四角を置いて対処してましたが、こんないい方法がありました。目から鱗です。
上記のリンク先の「実践編１ 1pxの線幅を持つ、四角形を描きたい！」の項目にあるように、この問題を解決するには「効果 > パス > パスのオフセット」で、囲み罫の線の1/2の太さのマイナス値で設定します。例えば、1pxの線だったら半分の-0.5pxにします。
Illustratorのアンチエイリアスの対策はいろいろ方法があります。下記のリンクに詳しく載ってるので参考まで。
オブジェクトのサイズと配置座標は必ず整数値で
Webの場合はイラストなど不定形なものを除いて、サイズや配置座標が整数値でないとアンチエイリアスがかかってしまうので常に整数値を心がけましょう。
画像の書き出し
2通りの方法があります。自分に合ったお好みの方法でどうぞ。
Illustratorでスライス→書き出し
Illustratorのスライスツールは一見わかりにくいのですが、トリムエリアツールの中に隠れています。
そして、スライスの名前ですが、「オブジェクト > スライス > スライスオプション」で設定します。ショートカットが無いので割り当てておくと便利です。これでPhotoshopやFireworksと同じようにざくざくスライス出来ます。
あとは「webおよびデバイス用に保存」で画像を切り出します。
Illustratorからpngで書き出し、他のソフトでスライス→書き出し
実は、今回の記事を書くまでIllustratorのスライスについてはあまりよく知らなかったので、今までは「ファイル > 書き出し」でpngで書き出してPhotoshopやFireworksでスライスしてました。ただ、直しが入ると修正後に再度書き出す手間はありますが、最初にスライスしたデータに書き出した修正画像をコピペすれば、たいして手間ではなくなります。
まとめ
以上、長々と説明しましたが、以上のことに気をつければIllustratorでもWebデザインのメインツールとして充分使えます。ここまで説明しておきながら自分のWebデザインのメインツールはPhotoshopかFireworks（笑）ですが、自分の中ではIllustratorが一番使えるソフトなので、これからはIllustratorだけでWebデザインを完結させてみようかと。
ところで、「効果」って侮れないですね。適用後も「アピアランス」で変更することもできるのは素晴らしい。Illustratorを使い始めて10数年、本当に便利になったものです。
