先日、こちらのサイトも含めて複数のWebサイトのデザインをする機会がありました。
それまでは基本的に、Adobe FireworksをメインにWebデザインを行なっていましたが、まだまだ操作に慣れていないアプリなだけに、ストレスが溜まってきます。
そんな中、今回はAdobe IllustratorをメインにWebデザインを行なってみました。設定などいろいろと調べながらな部分も多かったですが、これを機にWebデザインにもIllustratorをメインに使えるかもしれない！というところまで近づいてきたので、そんな方法や設定などなどをご紹介しようと思います。
はじめに
Webデザインを行う上で一番使われているソフトといったら、やはりAdobe Photoshopでしょうかね。僕も仕事で使うことはよくあるんですが、やはり画像の補正やら修正・レタッチ、合成などがほとんどで、オブジェクトを作って配置していくということをPhotoshop上で行うことに慣れていません。
そして、僕自身仕事で一番使うのはやはりAdobe Illustratorです。印刷物のデザインをメインにやってきましたので、自ずとそうなってしまいます。しかし、IllustratorはWebデザインには向いていないとよく言われます。そう言われるにはたくさんの理由があるのだと思うのですが、線にアンチエイリアスがかかるときがあることや、そもそもIllustratorの操作に慣れていないという声もよく聞きました。
ですので、今回こちらの記事では、僕のようなスタイルの人がWebデザインをIllustratorで行うにはどうしたらいいか、要するにDTP上がりの人のためのIllustratorでWebデザインを行うために気をつけたほうがいい設定や操作をご紹介できたらと思います。
環境設定
まず、制作に入る前にIllustrator環境設定の設定内容を確認し、変更していきます。
正直、DTPをメインにやっている方だと、ここらへんをあまり弄りたくないというのが本音でしょうね。僕もそうです。環境設定を制作物によって分けるいい方法はないですかね（ワークスペースで分けても環境設定は分けれないですもんね）。
キー入力を1pxに
まずは、キー入力を1pxに変更します。DTPだと、1mmや0.1mmで設定している人が大半だと思いますが、Webにおいては最小単位が１ピクセルなので、このような設定にしておきます。
オブジェクトを選択して、方向キーで移動するときに間隔の設定ということです。
単位をピクセルに
こちらもDTPですとミリメートル設定が多いと思いますが、Webデザインにおいてはピクセルに設定します。
線幅もピクセルで設定するのでピクセルに、書式とは文字の大きさなどの設定ですね。こちらもピクセルに設定します。
グリッドを1pxに
上の画像では0.35mmとなっていますが、1pxと入力するとこう表示されます（僕だけ？）。
こちらは好みですが、【背面にグリッドを表示】や【ピクセルグリッドを表示】にチェックを入れます。
これらをチェックすると、実際画像を書きだす時には表示されませんが、レイアウト作成するときに便利なグリッドを表示してくれるので、僕は重宝しています。
※後に【グリッドに吸着】を設定するので、そちらと合わせることによって否応なしに整数ピクセル単位でオブジェクトを配置することができます。
ドキュメントの設定
それでは、制作を開始するに当たって、新規ドキュメントを作成し設定していきます。
ドキュメントプロファイルをWebに
ドキュメントのプロファイルを【Web】に設定します。これをすることによって、基本的なWeb制作に対応するように各設定が変更されます。
任意のドキュメントサイズに
制作したいWebサイトと背景のサイズなども考慮して、任意のサイズへ変更します。最近の流れとしては横幅950px〜980pxのサイトが多いみたいですね。（参照サイト：http://ultra-zone.net/ @miya_85さん提供）
カラーモードをRGBに
DTPではCMYKでデータを作成するのが基本ですが、Webは当然ですがモニターを介して見る媒体ですので、カラーモードはRGBにします。ここを間違えてCMYKのまま制作してしまう人も多いようですが、後々変更すると色味がガッツリ変わってしまうことがあるので注意が必要です。
ラスタライズ解像度を72dpiに
各種効果などを画像として書きだす場合の解像度の設定です。印刷物の作成時には【高解像度：300dpi】という設定になりますが、こちらもモニター解像度以上は必要ありませんので72dpiに設定します。（高解像度モニターに対応するためには別途処理が必要かと思われます）
プレビューモードをピクセルに
プレビューモードをピクセルにしておきます。
「新規オブジェクトをピクセルグリッドに整合」にチェック
こちらにチェックを入れておくことにより、ピクセル単位で作業することができます。
制作前の下準備
ドキュメントの設定も終わりあとは制作するだけ！ですが、もう少しだけ準備に関する設定を…
コンテンツ幅にガイドを設定する
先ほどの【任意のドキュメントサイズ】で考慮されたコンテンツ幅でガイドを作成しておくと、制作する際にとても便利です。
そして、このコンテンツ幅よりも意図せず大きく作ってしまわないようにガイドを作っておくといいでしょう。
定規の原点をコンテンツ幅左上に合わせておく
制作の際にはルーラー（定規）を表示しておくと便利ですし、ガイドも作成しやすくなります。また、定規の原点はコンテンツの左上に設定しておくと、オブジェクトを数値制御する時にとても便利です。
「線の位置」を内側に設定する
基本設定では、線の位置は中心となっていると思いますが、Webデザイン制作においては内側が好ましいかと思います。
また、どうしてもアンチエイリアスが出たり、線幅を1pxに設定していても2pxみたいに太くなってしまう場合は、【効果】から【パス】→【パスのオフセット】で【-0.5px】をかけてあげると解消されることがよくあります。
「スマートガイド」「ピクセルにスナップ」をオンに
好みの問題もありますが、スマートガイドをオンにしておくと、ちゃんとポイントにスナップできているか確認できるのでオススメです。慣れると必要なくなったりするので、最初の頃は表示させておいてもいいかもしれませんね。
また、ピクセルにスナップにチェックを入れておくと、ピクセル整数のポイントに自動的にオブジェクトをスナップしてくれます。こちらは是非チェックして使われることをオススメします。
制作中のポイント
それでは制作に入ります。こちらでは制作の最中に注意したい点などをご紹介してみます。
レイヤーをきちんと分ける
自分以外データを触ることはないのであれば、どのように作っておいても自分の責任で終われますが、データを納品したり共同で制作する場合には、ある程度見やすいデータの制作が求められます。トラブルを事前に回避するためにも日頃から気をつけたい点ではあります。
レイヤー分けもその一つですよね。今回はサンプルとして上のように分けてみましたが、コンテンツの内容によって変わってくる部分でもあります。
ガイドはガイドレイヤーへ、メインのコンテンツはサブレイヤーに分けて集約します。また、マウスオーバー時専用の画像を置いておく【オーバー】というレイヤーグループを作ってもいいでしょう。メインレイヤーから複製して後で作ることにより、位置を変えずに制作することができますし、必要がない場合は非表示にしておくことで作業効率も上がると思います。
HTMLテキストのルール付け
テキストデータとして流しこむのか、それとも画像として生成するのかを分かりやすくするためのルールは必要かと思います。
例えば、テキストデータとしてデザイン制作するのであれば、【フォント】：MSゴシック（ヒラギノゴシック）、【フォントサイズ】：12pxで統一する、小さい文字に関しても10pxまでにするとか。そういったルールを用いて視覚的にも分かりやすくすることも必要かと思います。
オブジェクトを偶数整数ピクセル単位にする
ちょっと下の例を見てみて下さい。
こちらは、幅：15px、高さ：8pxのオブジェクトで、【ピクセルグリッドに整合】のチェックは外してあります。
すると、このようにアンチエイリアスがかかってしまい、ぼやけたイメージになり、意図した結果を招きにくいですね。
そして、こちらは【ピクセルグリッドに整合】のチェックを入れた場合です。アンチエイリアスはかからなくなりましたが、線幅1pxにしてあるのに、左側だけ2pxになってます。
原因として考えられるのが、横幅整数値が奇数であることが考えられます。数値に奇数を用いるとこのような動作を招く恐れがあります（正確な情報ではありませんが）
ですので、このようにプラス0.5pxしてあげるか、もしくは16pxという整数偶数値にするかのどちらかで対処したほうがいいような気がします。
オブジェクトのサイズを決める時には奇数値にせず偶数値にしておくことが望ましいようです。
画像として実装するのかプログラムで実装するのかを分かるようにしておく
特にDTP関係の方には、ちょっと慣れるまでに時間がかかる部分かもしれませんが、Illustratorでアピアランスなどからドロップシャドウなど効果を適応することができます。
しかし、そちらを画像で書き出して使うのであれば問題ないのですが、背景の模様などとの兼ね合いから、そのように使えない場合も多々あります。その際に、CSSでbox-shadowを用いるのか、またはどのような数値で用いるのかまで考えぬいた効果の適応をしていくべきだと思います。
スライス用のレイヤーを作成しておく
上のレイヤー分けの項目では説明しませんでしたが、最終的にコーディング用に画像をスライスするために、スライス専用のレイヤーを用意しておくと便利だと思います。
後で少し修正が入ったなんてことはよくある話です。そういう場合でも、このようにレイヤーわけをしっかり行なっておくことによって、無駄なミスを未然に防ぐこともできると思います。
まとめ
某質問サイトでもたまに話題にのぼりますが、グラフィックデザイナーがWebデザインをやるとひどい云々と話題がたまに流れてきます。
ですが、僕個人の意見としてですが、人それぞれだと思うし、Web制作サイドの工程をどれくらい理解しているかがポイントになってくるように感じています。
欲を言えば、グラフィックデザイナーもHTMLとCSS、できればJavaScriptからちょっとjQueryまでひと通り触れた方が、Webデザインを制作する時に生きてくると思います。
そもそも、〇〇デザイナーなんて区切って考えずに、トータルでデザイナーを目指していくべきだと思います。浅く広くの見地も大事だと思います（専門性を否定するわけではありません）。
ちょっと長くなってしまいましたが、グラフィックデザイナーの方や、どちらかというとイラレが得意でこれからWebデザインをやってみたい方、はたまたグラフィックデザイナーを相手にWeb発注する場合の資料としてでも活用していただければ幸いです。
さーて、僕も頑張ろっと！
