Illustratorを使うとWeb制作も捗る！メリットを大公開！
Webデザインをする上でPhotoshopを何年も使っているという方はかなり多く、デザインの必須ツールとして定着しています。
しかし、このところIllustratorでWebデザインをする方も年々増えているそうです。これは興味深い話ですので少し調べてまとめてみました。
IllustratorでWebデザインをするメリットや注意点をしっかり伝わるように致しますので、どうぞご参考になさってください！
PhotoshopでWebデザインの何がいけないのか？
なぜWeb制作にPhotoshopをオススメしないのか、いくつか理由を挙げてみます。
■レイヤー分けを幾重もすることによりファイルサイズが大きくなる
小規模な制作環境ではスペックの良いPCが常に置いてあるわけではありません。一昔前のMac Miniが現役だという話もよく聞きます。
そのような低スペックのPCにとってPhotoshopファイルの重さは無視できない問題です。アプリケーションがフリーズしたり保存内容が失われたりと、PCに負荷がかかってしまいます。
その点Illustratorはファイルサイズは比較的低容量で済みますので、PCトラブルを極力抑えることができるでしょう。
■Illustratorで作成したオブジェクトを扱いにくい
Illustratorで作ったキャラクターをPhotoshopで配置したと仮定しましょう。そのキャラクターに修正が入ったら……当然、Illustratorに戻って修正しなければいけません。
同じAdobe製品ですがソフトを跨いで作業するというのはたいへん非効率だと言えます。
修正のしやすさという面ではPhotoshopはどうしても劣ってしまいます。
あくまで画像編集ツールだということを覚えておいた方がいいですね。
■Photoshopはレイアウトが苦手
現在のサイト制作でも一つの構築手段としてグリッドシステムが挙げられます。これは等間隔に配置したグリッドに沿ってデザイン・コーディングしていく手法であり、まだまだ発展性のあるシステムです。
Photoshopでグリッドシステムを再現しようと思うと、等間隔でガイドを敷き詰め、ボックスを作りレスポンシブ化をしていくといった流れになります。
しかもPhotoshopの場合、カンバスは一つですので新しいカンバスを作成してはガイドを敷いて、と大変手間がかかる作業になってしまいます。
Illustratorならカンバスはファイル上にどれだけでも作れますので、例えばスマートフォン用のレイアウトとPC用のレイアウトを、ファイル移動することなく編集することが可能です。
IllustratorでWebデザインをするメリット
Photoshopデザインに慣れている方は、Illustratorと聞いて「ロゴやキャラクターを作るアプリケーションなんでしょ？」という認識の人も多いと思います。
しかしIllustratorでのWebデザインはメリットがたくさんあるのです！詳しくご紹介します！
■レイアウトのしやすさ
Illustratorはもともと紙媒体のメディアをデザインするアプリケーションです。ですので、レイアウトがとにかくしやすいですし、ボックス要素の集まりであるWebデザインも相性が良く、容易にレイアウト決めが可能です。
Webデザインの初期段階のワイヤーフレーム作成においても大いに役立ってくれますし、グリッドデザインも[整列]を駆使することによって、正確なオブジェクトの配置が可能になります。
■画像はリンクさせておけば、いつだって修正可能
画像をIllustrator上でリンクさせておけば、リンク元の画像が修正されればすぐさま反映されます。画像ファイルは埋め込まない限り、ファイルサイズも大きくはなりません。
画像の編集はIllustrator上ではできませんが、クリッピングをすることは可能ですので画像の扱いやすさには長けています。
■Illustratorの1つのファイル上で様々なデザインを再現できる
デザイナーにとっては周知の事実ですが、Photoshopのカンバスは1ファイルにつき1つです。これは常識ですね。
しかし、イラストレータは複数のカンバスを同じファイルにまとめることが可能です。
もしもPCビュー・スマホビュー・タブレットビューなど複数のデザインを作っていく際は、わざわざ新規ファイルを作ることなくデザインの進行が可能になります。
PCビューからスマホビューを作り込むにあたっても、オブジェクトを移動させるだけで様々なコンテンツの制作が可能になります。
■アプリケーションがあまりPCの負荷にならない
PCが古いとどんなアプリケーションでも落ちるときは落ちるのですが、それを加味してもIllustratorは動作が軽いです。Photoshopでレイヤーを何枚も作りヒヤヒヤしながら作業することに神経を使うことも少なくなります。
やはり画像を編集するということは、かなりPCの負担になるということですね。
IllustratorでWebデザインをする時の注意点
いろいろとIllustratorのいいところをまとめましたが、IllustratorでWebデザインをするにあたって注意点がいくつかあります。
■解像度は72dpiでいい
初期設定ではIllustratorの解像度は300dpiとなっていることが多いですが、Web媒体の制作ですので解像度はディスプレイに合わせて大丈夫です。
■Illustratorの単位はpxにしておくこと
こちらも紙媒体ではミリメートル（mm）を使いますが、PCでの表示はピクセル単位（px）ですので変更を忘れないようにしましょう。
■カラーモードはRGBカラーに
カラーモードは紙媒体ですと皆さんおなじみ「CMYK」です。しかし、ディスプレイカラーは（RGB）を使うので、最初は必ずメニューからカラーモードを選んでRGBで作業するようにしましょう。
まとめてた結果
フラットデザインやグリッドデザインにIllustratorは必ず役に立ってくれます。しかし「長年の経験でPhotoshopデザインの方がしっくりくる」という方はPhotoshopのままでいいと思います。
要は適材適所であり、一つのデザインの手法としてマスターしておくと臨機応変に対応できますね。
ラライフでは、一緒に未来を切り開く勇者を募集中！
