IllustratorでWebデザインをする時に気をつけておきたい設定あれこれ

Webデザインに使用するソフトはデザイナーさんの好みや、制作するサイトのテイストによっても様々だと思いますが、今回は表題にちなみIllustratorにフォーカスして紹介していこうと思います！

「いや、PhotoshopかFireworks使えよ」という声が多々聞こえてきそうではありますが…、押さえておくべき部分をしっかり押さえておけばIllustratorも結構Webデザインに使えますよね。

IllustratorでWebデザインをする大きなメリットとして、「サイズを計りやすい」、「アートボードを複数設置できる」といったことがあります。では、実際どういった部分に気をつける必要があるのか。押さえておきたい設定を以下にまとめてみました。

① 表示形式を「ピクセルプレビュー」に
②「ピクセルグリッドに整合」にチェック
③「ピクセルにスナップ」にチェック
④ アートボード定規の基準点を正確に

① 表示形式を「ピクセルプレビュー」に

この表示形式にすることで、オブジェクト全体を72dpiの画像として表示することができます。設定方法は、新規ドキュメント時の詳細から選択する or 表示＞ピクセルプレビューから選択することができます。

ピクセルプレビューを使用するとスマートガイドが適用されなくなるという欠点もありますので、実際には表示形式をうま〜く使い分けながら作業することになるかと思います。

②「ピクセルグリッドに整合」にチェック

Webデザイン以外ではイラッとしてしまう場面が多いこちらの機能ですが（アップデート直後は、知らずにチェックが入っていて端数に泣かされていました）、これがかなり重要。この部分にチェックをいれることでピクセル単位でオブジェクトを作成・配置することができます。

③「ピクセルにスナップ」にチェック

②と似ている機能ですが、表示＞「ピクセルにスナップ」にチェックをいれることによってピクセル単位で移動・配置することができます。
①②③を設定することで、端数によって起こる不要なアンチエイリアスを避けることができ、オブジェクトをキレイに保つことができるのです！

④ アートボード定規の基準点を正確に

デザインデータとWeb上の位置を正確に合わせるため、アートボード定規の基準点を正確に設定する必要があります。この設定を疎かにしてしまうと位置が計りづらくなったり、スライスする場合にずれてしまうことがあるので要注意。アートボード定規の基準点とwebページの左上の端点が同じ役割を持つように設定しましょう。

以上の設定を行うことでIllustratorでも円滑にWebデザインが可能に！
また、①と②を設定することにより「キー入力」で定めている値に関係なく、1pxずつ移動させることが可能なので、紙・Webと平行して作業をしている方にも便利な機能となっています。 個人的には画像の書き出しまでデザイナー側で済ませておいた方が後々問題も発生しにくいと思っているので、実際にはこの設定をした上で、画像データとして扱う部分は画像として配置し、テキストデータとして扱う部分は標準フォントなどを選択し保存しています。その後、画像は一つのファイルにまとめ、確認用のjpgデータとIllustratorデータとを一緒にしてコーディングの担当者などにバトンタッチをするようにしています。
というより、HTML・CSSレベルはデザイナー側で組むのが一番の理想ですよね…エンジニアの方々いつもお世話になっていてすみません＾＾；

コーディング作業を担当してくれる方と連携しつつ、一度試してみてはいかがでしょうか。 執筆者：みなみうらそうすけ