Illustrator（イラストレーター）を使ってWebサイトのデザインをする際の注意点

2013/11/08 2014/11/12

1年以上前の記事です。内容が古い可能性があります。

自分、基本的にIllustrator（イラストレーター）ではWebデザインやりません。
というのは、ピクセル単位でのデザインができないから。

こんなんなっちゃいます。

ただし、最近のIllustratorではピクセル単位でのデザインもできるようになってきています。
以下、Illustratorを使ってピクセル単位でのデザイン（Webデザイン）をする際の注意点をお伝えします。

まずは、Illustratorを使ってピクセル単位でのデザイン（Webデザイン）をする際に注意すべき点を4つあげてからそれぞれに関して解説していこうと思います。

それではそれぞれの設定方法と解説です。

【設定方法】　「編集」→「環境設定」→「単位」

単位はピクセルに統一した方が良いでしょう。
Webデザインにおいてはフォントサイズもpx（ピクセル）で指定するほうが良いです。

【設定方法】「表示」→「ピクセルプレビュー」にチェック

これが一番重要。
要は実際Webサイトでどのように見えているかを確認しながらデザインすることができます。

【設定方法】「表示」→「ピクセルにスナップ」にチェック

ピクセルプレビューにすると初期設定で「ピクセルにスナップ」のチェックが入ります。
これは、パスを書いたり、図形を書いたりするときにピクセル単位でアンカー等を配置することの出来る機能です。
この設定を行うと、四角形などのオブジェクトの境目が綺麗にピクセル単位で切り取られます。

【設定方法】罫線パネルを表示して「線の位置」の設定を「線を内側に揃える」か「線を外側に揃える」に変える。

CS6の場合はスナップの基準がピクセルの中心になるのでこの設定は必要ありません。
CS4の場合はスナップの基準がピクセルとピクセルの境になるのでこの設定をしないと1pxの罫線が綺麗にでません。
なお、CS6でこの設定をすると上記のようにパスと罫線が微妙にずれてしまいます。

以上を駆使して最初に紹介したボタン（CS4で制作）を作りなおしてみました。

こんな感じ。
ボタンと背景の境目がきっちりして、さらに、1pxの罫線が再現できるようになりました。

なお、CS4には上の罫線の内側にちょっとグレーが残るというバグがあるようですが、CS6では解決されています。
上記（CS4）では0.9pxと指定を入れてごまかしています。