Tortoise Shell

デザイン、システム開発、ライフハックについてゆるく書きます

IllustratorとSVGで効率的にデザインする

マルチデバイス対応、めんどくさいよね。(唐突)

つい5、6年前まで、WebといえばPCでの閲覧がほとんどだった。

今では、スマートフォン、タブレット、おまけに、これから来るであろうGoogleGlassやAppleWatch等のウェアラブルデバイス。

クリエイターにとっては、見過ごせない話題が盛りだくさんだ。

ちなみに、スマホだけでも、市場には1万から2万くらい種類があるらしい。

これらの問題に、オールインワンで対応する方法がある。ベクターデータを使うことだ。

ベクターデータといえば、Illustratorがベクターベースのアプリケーションとして最も有名だ。最近では、SketchというWebデザイン専用のアプリケーションでも利用できる。

以前なら、PhotoshopやFireworksで、ビットマップベースでデザインしていても問題はなかった。

現在では、ユーザーの様々な閲覧環境を考慮し、解像度を問わないデータ制作が求められるようになった。

ベクターデータをベースとした制作を行い、SVG等のベクター形式の画像を書き出して利用すれば、ピクセルの檻から抜け出せる。

SVGに関しては、現在のWeb制作のトレンドでもあるため、聞いたことのある人も多いだろう。

Webクリエイターボックスでもよく記事にされています。

www.webcreatorbox.com

さて、SVGを扱えば良いのは分かったところで、具体的にはどうすればいいのか。下記の書籍は、かなり参考になった。

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

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

  • 作者: あわゆき,窪木博士,三階ラボ(長藤寛和、宮澤聖二),松田直樹
  • 出版社/メーカー: インプレス
  • 発売日: 2015/05/22
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログ (1件) を見る
 

FireworksやPhotoshopをメインで使っていたり、IllustratorをWebやアプリのデザインのに利用したことが無い人におすすめだ。

わたしは普段、WebデザインにはPhotoshopを使っていたが、この本を読んでから積極的にIllustratorも取り入れるようにしている。

例えば、ランディングページのような広告的要素の強いサイトならば、ビットマップベースのPhotoshopを使う。一方で、操作要素の強いWebアプリのデザインには、Illustratorを利用している。

イラレのことをDTP用のアプリケーションとして捉えていたが、完全に見る目が変わった。

この書籍では、とにかく「効率化」「修正しやすいデータ作成」にこだわって編集されていた。パラパラ読むだけでも、効率的なデータ作りの方法がインプットできて良かった。

まだSVGが主流になるとは限らないが、これからの時代は間違いなく、この本で紹介されているような手法が主流になっていくだろう。

とりあえず、マルチデバイス対応めんどくさい、と思っているデザイナーは必読だ。