フェンリル

Developer's Blog

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 変換し(色の微調整は必要ですが)、印刷物用のデザインに組み直す…といったことが簡単にできます。

Illustrator の推しポイントをつらつらと書きましたが

Illustrator でのカンプ作成は、私自身まだまだ日が浅いのですが、導入のきっかけになれば幸いです。自分にとって一番効率が上がるツールを常に選択していきたいですね!

導入に役に立つリンク

IllustratorでWebデザインをはじめよう! | Adobe Creative Station:https://blogs.adobe.com/creativestation/serialization/web-start-design-with-illustrator

おすすめの本

Web 制作者のためのIllustrator&ベクターデータの教科書 マルチデバイス時代に知っておくべき新・グラフィック作成術:http://www.amazon.co.jp/dp/4844338161

それでは、楽しいクリスマスを!

Facebook コメント

コメント

名前(必須)

メールアドレス(必須)

URL

スタイル用のタグが使えます

このコメント欄でのご質問、ご要望には、開発チームから回答できない場合があります。ご質問、ご要望は「User Community」内のフォーラムまでお寄せください。