Web制作を始めたばかりの頃は、Webデザインをどのアプリですれば良いか、悩みますよね。
一昔前は、
Webデザイン = PhotoshopやFireworks
DTPデザイン = IllustratorやInDesign
というのが主流でしたが、現在では各アプリの機能も強化され、多様な使い方が可能になっています。
私は元々Webデザイナーとして就職しましたが、諸事情で途中からグラフィックデザインをメイン業務とするようになり、再びWeb専任に戻る数年の間は グラフィック6:Web2:他2 くらいで仕事をしていました。
必然とその間Illustratorをこれでもかと使用することになり、その柔軟性と軽やかな操作性に魅力を感じるようになりました。
ただ、PhotoshopにはIllustratorにはできない繊細なグラフィック機能が備わっているので、Illustratorだけ!とかではなく、制作物によって柔軟に使い分けるようになった感じです。
とあるプロジェクトで、デザインには入らずマークアップエンジニアとして制作に入っていた頃、Webデザインをすることになったグラフィックデザイナーさんがもがいていた事を覚えています。
慣れないPhotoshopでの作業に苦戦していたようです。
私はその頃、自身がWebデザインをする時にはIllustratorを使用している事が多かったので、「いくつかのルールさえ守ればIllustratorはむしろやりやすいかも」と伝えたところ、
「何でもっと早く教えてくれなかったんですかぁ~~(泣)」
と言われたり。
いや・・・自分で選んでやってると思ってたから・・・ほら、スキルアップの為にとか・・・。うん、でも、経験値あがったでしょ!
なんていうことがあったわけですが、いまだに「WebデザインはPhotoshopでやらなきゃいけない」みたいな考え方は損だと思うのです。
アプリは進化し、フラットデザインが流行し、Googleによりマテリアルデザインが提唱され、高密度のRetinaディスプレイの端末が増えたことでSVGなどのベクターグラフィックの使用頻度も増えました。となれば、ベクターを扱うIllustratorの方が制作に適した場面もあります。
もちろん写真を大胆に使用するようなサイトではPhotoshopをメインに制作した方が効率的ですし、Illustratorの出番は限られてくるわけですが、要は適材適所ということですね。
Illustratorは2016年のアップデートで「アセットの書き出し」という便利な機能が追加され、CC 2017では「ピクセルグリッドに整合」のオプションも登場したことで、Webデザインアプリとして更に強化されました。
これは「Illustratorだから」という訳ではありませんが、いくつかのルールに注意をすれば快適にWebデザインが進むはずです!
よく「Illustratorはコーダー泣かせ」みたいな事が言われますが、マークアップエンジニアをしていた私の経験からすれば、カンプと正確に切り出した画像、フォントサイズやブレイクポイントなどのルールをきちんと共有することができていれば、特に問題はないかと思います。クライアントや制作現場によっては、「あとで自分でテキストを書き換えて使いたいのでPSDで」などの注文があるかもしれません。その場合はもちろん、求められている形式で対応してくださいね。柔軟に!です。

このページで紹介している内容
IllustratorでWebデザインをする際に気をつけたいポイント
Web用設定でピクセル・RGBカラー・解像度を指定
下記はIllustrator CCの新規ドキュメントポップアップです。
[Web]のタブを選択すると、以下のようにピクセル・RGBカラー・72dpiに自動で切り替わります。便利ですね。
またWebモードの場合、自動で [作成及び変形時にアートをピクセルグリッドに整合] (画面右上)がONになります。
ピクセルプレビューに変更
[表示] → [ピクセルプレビュー]に変更します。
単位をpx(ピクセル)に
[環境設定] → [単位] → [線]・[文字]・[東アジア言語のオプション] の単位をピクセルに変更します。
線の位置は内側に(又は統一)する
線の位置は内側にします。
線の位置は外側でも良いですが、下記のように整列時に面倒ですので統一しておくことをお勧めします。1pxの線を外側にすると、上下2px、左右2px分増えますので、サイズには注意しましょう。
オブジェクトの境界線での整列となるので、こんな感じで線の分だけずれます。
意図的に線の位置を変えた上で揃えたい場合は、[環境設定] → [一般] → [プレビュー境界を使用] にチェックを入れると揃えることができます。
線の位置を中央にしたい場合
線の位置を中央にした場合、線幅が奇数値だとぼやけますが、下記の下段ボックスのようにクリアに表示する方法があります。
オブジェクトを選択し、[選択したアートをピクセルグリッドに整合] ボタンを押すだけです(超簡単ですね!)
ちなみにこんな風に座標が中途半端でぼやけている時も、このボタンひとつで自動で修正してくれます。
カラーパネルをRGBに
カラーパネルもCMYKになっていたらRGBに変更しましょう。
まとめ
Illustratorでデザインをすると、ブレイクポイントごとのレイアウトにも簡単に対応できます。
また、アートボードをオブジェクトごとコピーするだけで複数レイアウトを試せたり、シンボル化することで作業がサクサク進みます。
Illustratorが苦手なエフェクトはpsdファイルを配置するなどの工夫で、快適に作業することができます。※ Photoshopからもスマートオブジェクトで簡単にaiを呼び出せます
得意分野によって使い心地も変わってくると思いますので、自分に合ったもの、制作物に合ったもの、と柔軟に対応していきたいですね!