Design:Illustratorでwebサイトのデザインを作る〈デザインデータ作成編〉

DTPメインのデザイナーさんが、webサイトのデザインをするシーンも増えている昨今。同じ「デザイン」ではあるけれど、DTPと同じように作ってしまうとコーダー 泣かせなデザインデータができてしまいます。今回はトラブルを防ぐ意味でも、Illustratorでデザインデータを作成するときの注意点をメモしていきます。

01. 環境設定

単位を「px」に設定

「環境設定 > 単位」にて変更。
webでの単位はpxです。フォントサイズも、ptや級(Q)ではなくpxにします。

02. 新規ドキュメント設定

「カラーモード:RGB」、「幅:実寸大」に設定

「ファイル > 新規」から設定します。
カラーモードはRGBです。

幅はブラウザで閲覧した際の「実寸大」を設定。PCサイトであれば、960px1024px1280pxなど任意のサイズ(px)を指定すれば問題ありません。
縦幅に関してはページのボリュームにより増減するので適当でOKです。

プレビューモードを「ピクセル」に設定

プレビューモードを「ピクセル」にします。

03. 「ピクセルグリッドに整合」にチェックを入れる

ドキュメント新規作成後、作業画面の右上にある「ピクセルグリッドに整合」をクリックして有効にします。これを有効にすると、オブジェクトがpx単位でフィットしてくれるようになります。これをすることで、オブジェクトのサイズが小数点を刻むことなく生成されるので画像がぼやけたり、Photoshopで再度切り出し…のような事態を回避することができます。

04. 画像の解像度は「72dpi」あれば足りる

画像データの解像度は72dpiあれば問題ありません。
トップだけやLPのみの場合はそこまで気になりませんが、ページ(アートボード)が増えるほどファイルサイズが大きくなってしまうので、開くだけで時間がかかります。webはDTPのように莫大なデータ容量を必要としないので、大容量のデザインデータを開けるような作業環境が無いコーダーの方も居るのではないかと思います。ここ数年はRetina対応のPCも主流になってきているので、小さすぎるのも困りものですが、ある程度画像をスリム化しても良いと思います。

URLをコピーする