SEO対策なら株式会社ペコプラ > Webサイト制作 > Webデザイン > Illustratorでwebデザインのデータを作ろう【設定編】

Illustratorでwebデザインのデータを作ろう【設定編】

Webサイト制作

Webデザイン

2021.01.30

WebデザイナーはPhotoshopを使ってデザインをすることが多いとされていますが、最近はIllustratorを使う方も多くなっています。
また広告代理店のデザイナーがいきなりwebデザインだけを頼まれてしまい、Photoshopでデザインしたことがないと困った方もいるのではないでしょうか？
Illustratorでの作業に慣れているグラフィックデザイナーであれば、WEBデザインだからと言ってphotoshopを使う必要はありません。
最近はIllustratorでwebデザインがしやすい機能や設定が増えました。
ここではIllustratorでwebデザインを制作する際の設定方法を書いておきます。

Illustratorでwebデザインをする際の設定方法
1.環境設定
2.表示の設定
3.座標軸の設定
まとめ

Illustratorでwebデザインをする際の設定方法

環境設定

環境設定から単位の項目を出し、すべてピクセルにします。

最新のAdobe Illustrator CCではこんな画面が現れて、web制作にすると単位もピクセルに変えてくれますが、制作前に一応確認することをおすすめします。

次に環境設定の一般項目で以下2点を設定しましょう。

キー入力
カーソルキーを押した時の移動距離です。こちらも最小単位の1pxに設定します。
小数点は設定しないでください。
プレビューの境界
整列などを使用するときにパスを基準にするのではなく、描画に合わせてオブジェクトを整列します。
これを設定すると整列機能がとても楽です！

表示の設定

カラーモードはAdobe Illustrator CCでwebのドキュメントを使用すると自動的に設定されますが、印刷の仕事と並行すると間違えてしまう事もあるので確認しておきましょう。
WebではRGBにカラーモードを変更します。編集からカラー設定で確認してください。

またプレビューモードをピクセルプレビューモードに変更します。

定規は「アートボード定規」に変更しておきましょう！

座標軸の設定

これは忘れがちな設定ですが、座標軸を整数にしていないと書き出しでぼんやりした輪郭になります。私は最初は知らず小数点設定になっていたためいろんな意味でぼんやりしていました…。
そもそもなぜ整数！？とおもったのですが、これはピクセルの最小が１ピクセルで小数点がないためだそうですね。
設定しなかったせいでぼんやりなデザインを出してしまったのは恥ずかしい思い出です。

プリセットの中のXとYの部分を１pxで設定します。

またデザインをする時ですが、ピクセルの最小単位は１となりますので、書きだしをするデータの大枠は線も四角も小数点を使わずに作業していきましょう。

まとめ

いかがでしたでしょうか？
設定が多いなあ…と思うかもしれませんが、やってしまえば後がとても楽です。
ただ、印刷も並行でやられている方は毎回少し面倒かもしれません。
印刷のデータをつくっていたのに、web使用になっているとサイズや色で困る事もあるので、作業を始める前に確認を怠らないようにしましょう。
設定さえ終われば、あとは作業をするだけです。Photoshopにも負けないハイクオリティなデザインを短時間で仕上げましょう！
これからもIllustratorでの時短制作方法をご紹介していきたいと思います。