Web デザインにも使える！ Illustrator の魅力再発見！

Fenrir Advent Calendar 2015

こんにちは:)デザイナーの牧村です。

この記事は Fenrir Advent Calendar 2015の最終日、25日目の記事です。

デザイナーの皆さんは、デザインデータを作る際、どのツールを使っていますか？

私は今年から Illustrator を Web デザインで使用しはじめた結果、 Illustrator の便利さに感動して、メインのデザインツールになりました。

そんなわけで、今日の「2015年にグッときたコレ」では、以前 Photoshop をメインで使用していた私が、 Illustrator を使ってグッときたポイントをご紹介します！

1. アートボードを使って複数のデザインが管理できる

Illustrator_artboard

CS4 バージョンからアートボード機能が追加されて、1ファイル内で複数のページデザインを管理することができるようになっており（あくまでも私の体感ですが） Photoshop のアートボードよりも動作が軽く、アートボードを増やしても重くなりにくいです。

私が特に便利だと感じるのは、以下のような場合です。

レスポンシブに対応した Web サイトの複数のデザインカンプを同時に作る場合

1ファイルに PC 用・タブレット用・スマートフォン用など、設定するブレークポイントに合わせてアートボードを並べ、確認しながら作業を進めることができます。これからレスポンシブ対応の Web サイトも増えてくるでしょうし、アートボードが活躍する機会も増えそうです。

大規模な Web サイトのデザインカンプを量産する場合

例えば、ディレクトリや関連ページごとに1ファイルにまとめ、アートボードで管理する、という使い方をしています。1ファイル1ページの時よりも、関連ページのデザインを横に並べて作業が進められることで、ミスが少なくなり作業が捗ります。

2. パーツを SVG 化させる際の書き出しが簡単！

Illustrator_svg

レスポンシブデザインをはじめ、マルチデバイス化の波をひしひしと感じる昨今、アイコンなどを SVG 化する機会が増えてきました。 Illustrator だとデザインファイルからすぐに書き出せるので、時間と手間が最小限で済みます。

3. パーツをシンボル化できる

Illustrator_symbol

繰り返し使用するパーツがあり、かつ複数人で作業分担する場合、解除しないとシンボルの編集ができないため、極端な例ですが「分担すると、ボタンのサイズがバラバラになってしまった！」なんてことを防げます。

4. Web 用データから、印刷用データへの流用がスムーズ

Illustrator_colormode

例えば Web サイトのデザインを印刷物に流用する場合、「ファイル > ドキュメントのカラーモード」でカラーモードを切り替えるだけで済むので、 RGB から CMYK への移行がスムーズです。Web 用のデザインを CMYK 変換し（色の微調整は必要ですが）、印刷物用のデザインに組み直す…といったことが簡単にできます。