この記事を読んでいるデザイナーの皆様、もしくはWeb関連の仕事を毎日頑張っている皆様、Webサイトのデザインって何のソフトを使って作りますか？私は、Photoshopを使っています。
海外では、Illustratorを使って作業をするデザイナーが多くいるようですね。
日本でも、Illustratorを使ってWebデザイン制作をしている企業が増えてきているようです。
そこで今回は、Illustratorを使ったWebデザイン制作についてご紹介したいと思います。
Illustratorって印刷物用のツールだよね？
はい。もともとIllustratorは印刷物を作るためのソフトです。
なので、Webとの相性は良いとは言えない状態でしたよね。
オーサリングツールで開いた時の、各パーツの汚さだったり、細かいズレだったり…。
ただ最近では、Illustratorの機能も充実してきており、Webにも対応できるようになってきています。
Illustratorが使われ始めた理由
Illustratorの機能の充実により、Photoshopに劣らないほど便利になってきているのが一番の要因です。
では、実際なにが便利なのでしょうか。
１ファイルでレスポンシブWebデザイン制作に対応できる
Illustratorでは、複数のアートボードをひとつのファイルとして扱うことが出来ます。
Photoshopでレスポンシブデザインを作る場合、PC用のデザインデータ、タブレット用のデザインデータ、スマートフォン用のデザインデータと３ファイル必要になります。
ただ、Illustratorの場合、１ファイル内に複数のアートボードを設けられるので、PCデザイン、タブレットデザイン、スマートフォンデザインの３画面サイズを横に並べてデザインを作ることが出来ます。
それぞれの画面サイズでの比較も容易ですし、修正も一気にまとめて対応することが可能です。
ピクセルパーフェクトが実装
こちらは随分前になりますが、ピクセルパーフェクトの実装によりピクセルズレなどがなくなりました。
この実装により、今までのようなズレやぼやけがなくなりました。
文字スタイルの保存
この機能はPhotoshopにない、魅力的な機能です。
その名の通り、文字のスタイルを設定することができ、適用することもできます。
この機能を使用することで、全体のデザインの統一性を持たせることが可能です。
CSSコードをコピー可能
Illustratorで作れば、もれなくCSSコードがついてきます。
時間短縮にはもってこいの機能ですよね。
ちなみに、SVGコードでもコピー可能です。
IllustratorでWebサイト制作する場合の注意点
これほど便利な、Illustrator。
ただ、注意点ももちろんあります。
必須で守っておきたい基本的な注意点を２つほど
カラーモードは「RGB」
Illustratorの場合、紙媒体でよく使用されるためCMYKにデフォルトで設定になっている
場合があります。
Webでは、RGBなのでこちらの設定変更を間違えないようにしましょう。
単位は「ピクセル」
こちらもRGB同様、mmやptがデフォルトで設定になっている場合があります。
mmやptは絶対単位と呼ばれ、どのような環境でも大きさが変わらない単位です。
Webでは、見る人によって環境が異なるため一般的に相対単位と呼ばれるものを使用します。
なので、単位はWebで一般的なpxを選定しましょう。
まとめ
海外では浸透しつつある、Illustratorを使ったWebサイト制作。
フラットデザインやモバイルファーストが主流になった今、Illustratorを使用したWebサイト制作のほうが便利なのかもしれないです。（実は、私も個人的に勉強中です）
ただ、やはりPhotoshopはIllustratorにない良いところはあるので迷ってしまいますね。
フラットデザインかつマルチデバイス対応が主軸の場合は、Illustratorで作成し、写真メインのポートフォリオやギャラリーサイトの場合は、Photoshopを使用するなど用途によって使い分けられると良いですね。
