Web制作におけるIllustratorを使うメリットと効率化の話

今回は最近購入した黄色い本をお友にWeb制作×Illustratorについて書いてみます。

はじめに…

いきなりこういうことを書くのもあれですが、私はAdobeのソフトの中ではFirewoksが一番好きです。(元々はAdobeではなくMacromediaのソフトですが…)
個人・会社ではFireworksをメインで使っており、たまに外注のデザイナーさんからIllustratorやPhotoshopでくるとちょっとだけ「うっ…」となります。

しかし世間では最近、Fireworks自体が開発を終了したことに加えマルチでバイス化の影響もあり、WebでのデザインをIllustratorやPhotoshopを使っている人が多くなってきているのが現状…。

なんとか苦手意識を無くそうと、Illustrratorに関する勉強会にも積極的に参加し、ここ最近、なるべく使うようにはしているものの、中々慣れず、Fireworksでささっと作業してしまうことが多いのが現状です。
ストレスを感じないくらいまで使いこなしたい!Illustratorラブ!と言えるくらいまで上達したい!
そんな思いもあり、しばらくブログの方ではIllustratorに関する記事を書いていこうと思います。

今回はWeb×とIllustratorの相性について、最近買った黄色い本を元に書き出してみました。
ちなみに内容については出版元のサイトに行くと、期間限定で公開しているので、興味のある方はどうぞ。
Web制作者のためのIllustrator&ベクターデータの教科書

Illustratorを使うメリット 効率化。

  • ベクターデータなので、様々なデバイスに対応できる
  • 印刷物からWebへの作業の流れがスムーズ
  • 数値でオブジェクトを管理すればWebへの落とし込みが楽
  • ファイルサイズの軽量化
    (Photoshopの場合カンバスサイズによってファイルサイズに差が出るがIllustratorの場合はカンバスサイズを大きくしてもファイルサイズが大きくなることはないようです)
  • 複数のアートボード(印刷や書き出しができる領域)を配置できる
    Webの場合、複数画面のデザインを並べて作業するときまとめて管理ができて便利。
    (例:デスクトップ用とスマートフォン用デザインを一緒に置くなど)
    また、アートボード外にも作業途中で発生した、デザインには直接必要はないければ、とりあえず置いておきたいものなどを書き出し領域外に置けるのも何気に便利。
  • アピアランスを使って修正に強い装飾をつくることができる
    例:テキスト数が変更されても、角丸のサイズ間が自動的に変わるなど
  • スウォッチ・カラーガイド(選択中の色と調和する色の組み合わせやバリエーションを提案してくれる)で色の管理が楽
  • シンボルを使いまわせばデータを節約できる
  • 9スライス機能をつかえば、オブジェクトの拡大・縮小時に四隅の形状を保ったまま伸縮できる。
  • 複合シェイプを使えば後からパスの調整が簡単
  • 合成フォントでフォントを組み合わせられる

などなど…
また、開発が終了してしまったFireworksとは違い、バージョンが上がるごとに便利な機能が追加されていくのも魅力的です。
(その分バグ等も出てきたりしてますが…)

最後に

今回参考にした書籍については、Kindle版でもちょくちょくセールをしており、ちょうど現在もセールをしているようです。
Amazon.co.jp: Web制作者のためのIllustrator&ベクターデータの教科書 Kindle版

また、ちょっと先ではありますが、関西ではセミナーが開催されます。
第26回リクリセミナー「天下分け目のベクター祭り SVGじゃ! Illustratorを持てい!」

私も早速もうしこんでみたので、話においていかれないよう、本をよみつつ予習していきたいと思います。

Pocket