IllustratorでWebデザインをする時の初期設定

最近、WebデザインをIllustratorでする人が増えているようなので嬉しいかぎりです。

IllustratorでWebデザインをするというエントリーを多く見かけるので、私も真似して自分のIllustratorの設定をまとめました。

なぜIllustratorなのか？

なぜ私がIllustratorでWebデザインをしているかというと、「ラクだから」の一言に尽きます。
紙デザイナー出身なもので、やはりIllustratorが一番慣れているツールなのです。

建築CGをPhotoshopでゴリゴリレタッチしていた経歴のあるディレクターも、レイアウトはIllustratorの方がラクと言っていましたし……

「ラクだから」以外の理由としては、

Retinaディスプレイ対応をする時に、Illustratorで作っててラッキー！という経験をしたことがあるから。ベクターデータなので拡大縮小に強いです。
1つのaiファイルに複数のアートボードを用意できるので作業がしやすい。（CS4からの機能）
今後はSVGの使用が増えてくることが予想される。

といったところでしょうか。

仕事でWebデザインを始めた時からずっとIllustratorでデザイン制作をしていたので、Photoshopが業界標準ならそちらに合わせた方が良いのかも？と思うこともありましたが、そうはならずに現在に至ります。
デザインからコーディングまで自分で行うことがほとんどですし、コーディングを外部の方に依頼する時も、ありがたいことにaiデータでもOKだったので、Illustratorで制作することで問題が起こらなかったということもあると思います。

環境設定

まずは、Illustrator > 環境設定 から設定をしていきます。

一般

「キー入力」を1pxにします。
キーボードの矢印キーでオブジェクトを移動させる時の距離です。

単位

「一般」「線」「文字」「東アジア言語のオプション」を全て「ピクセル」にします。

ガイド・グリッド

私はデフォルトのガイドの色がまぶしすぎるのでカラーを変更しています。
グリッドは使用していないのですが、「グリッド：100px」「分割数：10」に設定してあります。

その他も好みや環境に合わせて設定していきます。
紙とWebとで案件が変わるたびに毎回設定しているところなので、いくつか設定を保存して選べるようにできればいいのにと常々思っています。

ドキュメント設定

新規ファイルを作成する際の設定です。

プロファイル

プリント・Web・デバイス・ビデオとフィルム・基本RGBと選択できますが、まずは「Web」を選択します。

この後、各設定を変更していくとプロファイルの「Web」が「カスタム」という表記に変わりますが気にしないでOKです。どこかしら設定を変更すると「カスタム」になります。

アートボードの数

必要に応じて設定します。後から自由に足したり減らしたりできます。
今回は10に設定しました。

間隔

アートボードを複数設定した際の、アートボード同士の間隔。
だいたい320に設定しています。（理由は後述。）

サイズ

用意されている中から選ぶか、幅・高さを任意の数字で設定します。

PCサイトなら960×1000px、スマホサイトなら640×2000pxと設定しています。
背景がwidth:100%;になる場合など、960px以上の描画範囲の確保のために間隔を320pxあけました。
320pxあけておくと、横幅が1280px分確保できます。

単位

ピクセルになっていることを確認します。
プロファイルで「Web」を選択していれば、ピクセルになっているはずです。

裁ち落とし

印刷物用の設定なので今回は無視します。天地左右0になっていれば問題ありません。
（私は印刷物制作の際にも0で設定しています。）

カラーモード

RGBになっていることを確認します。

ラスタライズ効果

スクリーン（72ppi）になっていることを確認します。

Illustrator効果を使用した際の解像度です。
Illustrator上でドロップシャドウ・光彩（内側）・光彩（外側）・ぼかしはどを使用した場合に影響します。

プレビューモード

左がピクセルプレビュー、右がデフォルトを拡大した時の見え方です。

ピクセルを選択します。

「新規オブジェクトをピクセルグリッドに整合」はチェックを外しておきます。

うまくは言えませんが、オブジェクトに線を設定した時にオブジェクトの位置と実際の見え方にずれが生じてしまうためです。
昔のバージョンよりも改善されているようなので、お好みでチェックを入れたままでも良いかもしれません。

ここまで設定できたら「OK」をクリックしてドキュメントを作成します。

その他の設定

表示 > ピクセルにスナップ にチェックが入っているか確認します。
入っていなければチェックをいれます。
表示 > 定規 >アートボード定規に変更 をします。
すでになっている場合は「ウィンドウ定規に変更」と表示されています。
アートボード定規に変更することで各アートボードの左上が起点となり、数字での制御がしやすくなります。
（ウィンドウ定規のままだと、2つめのアートボードの左端は1280pxになってしまうのです。）

こんな設定でWebデザインをしています。

IllustratorでWebデザインをする時の初期設定

目次

なぜIllustratorなのか？

環境設定

一般