Webデザイン=Photoshopはもう古い！？IllustratorでWeb制作が捗る！

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で」などの注文があるかもしれません。その場合はもちろん、求められている形式で対応してくださいね。柔軟に！です。