読者です 読者をやめる 読者になる 読者になる

Tortoise Shell

デザイナーによる、デザインやライフハックブログです。

まだマルチデバイス対応で消耗してるの?Illustrator&SVGで効率的にデザインしよう!

Webサイトやアプリのデザインをする時、どのツールを使っていますか?

Illustrator?Photoshop?

はたまた、まだまだFireworksが現役だぜ!という人もいるでしょう。

さて、そんなWebの世界に生きる皆さんなら、わたしがこれから言うことにも共感してもらえるでしょう。

そう…

マルチデバイス対応、めんどくさい!!!とうことです笑

どうしてこんなに面倒なのか

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

それが今や、スマートフォン、タブレット、極めつけはこれから確実に波が来るであろうGoogleGlassやAppleWatch等のウェアラブルデバイス…。

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

ちなみにスマホの話をすると、現在市場にはAndroidデバイスだけで1万〜2万種類もあるそうです。

もちろんAppleのデバイスに搭載されているRetinaディスプレイ等も含めて、ディスプレイの解像度も実に多岐にわたっています。

ピクセルの檻から抜けだそう!

これらの問題にオールインワンで対応する方法があります。

その方法のキーワードとなるのが、ずばり「ベクターデータ」です。

ベクターデータといえば、Illustratorがベクターベースのアプリケーションとして一番有名ですが、最近はSketch3等のWebデザイン専用のアプリケーションも流行していますね。

ちょっと前なら、PhotoshopやFireworksでビットマップベースで作成しても全く無問題でした。

しかし、現在のWebやアプリのデザイン現場においては、様々なユーザーの閲覧環境を考慮し、解像度を問わないデータ制作が求められるようになりました。

そこで、ベクターデータをベースとした制作を行い、SVG等のベクター形式の画像を書き出して利用することで、「ピクセルの檻から抜け出す」ことができるようになるのです。

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

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

www.webcreatorbox.com

Illustrator&SVGの最も効率的なワークフローを知ろう!

さて、ベクターベースのデータが作成できるIllustratorで、SVGデータを扱えば良いということは分かっていただけたかと思いますが、具体的にはどうすればいいのでしょうか?

それを解決するのが、下記の書籍です。

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

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

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

はい、今年の5月に出たばかりの比較的新しい書籍ですが、めちゃくちゃおすすめです。

タイトルの通り、Illustratorとベクターデータを扱うWeb制作について厳選した知識を得ることができます。

どんなところが役に立つ?

FireworksやPhotoshop等をメインで使っている方や、Illustratorを普段DTP用に使用していて、Webやアプリのデザインのために利用したことが無いような方にはとくにおすすめです。

というのも、書籍のサブタイトルにもある「マルチデバイス時代に知っておくべき新・グラフィック作成術」という文言の通り、これからのWeb制作シーンを見越した最新のワークフローや活用事例について知ることができるからです。

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

例えば、ランディングページのような広告的要素の強い、写真を利用するサイトならばビットマップベースのPhotoshopを使い、WebアプリケーションのUIデザインにはIllustratorを利用するようにしています。

この書籍をひととおり読めば、イラレを使ったWebデザインの最新の情報を知ることができる上に、今熱いSVGの実用的な活用方法を抑えることができます。

広告系のサイトばかり制作されるデザイナーさんならばそれほど必要ないかもしれませんが、アイコンやロゴ、フラットデザインやマテリアルデザインを取り入れたWebデザイン、UIデザインに興味のある方はぜひチェックしてみてください。

まとめ

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

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

SVGが主流になるとは限りませんが、これからの時代は間違いなくビットマップデータよりも解像度を問わないベクターベースでのWeb制作が主流になっていくでしょう。

とりあえず、マルチデバイス対応めんどくさい…と思っているデザイナーやエンジニアの方は必読です。

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

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

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

おすすめ記事セレクション