こんなやり方があったとは！IllustratorやSketchでWebデザインをはじめる前に必ず読んでおきたい -ベクターデータの教科書

最近のWebデザインに、ベクターデータの存在は欠かせないものになってきました。
アイコンやロゴなどをSVGで使用したり、Webページやアプリのデザイン・UI設計といった制作のワークフローをベクターで作業している人も増えてきました。

今までPhotoshopでデザインをしていた人には、IllustratorやSketchを使うとそんな事もできるのか！ と目からウロコかもしれません。

IllustratorのWebデザインならではの使い方、Sketchの詳しい使い方を知りたい、SVGの効果的な使い方をマスターしたい、そんなWeb制作者に絶対オススメの一冊を紹介します。

IllustratorやSketchで扱うベクターデータには、マルチデバイス対応のWebデザイン・実装にとって大きなメリットがたくさんあります。

Kindle版はお値段がけっこうお安めです。

• Web制作者のためのIllustrator&ベクターデータの教科書 -Kindle版

出版社のサイトでは、第1章と他全章冒頭部分のお試しPDF（※期間限定）をダウンロードできます。

• Web制作者のためのIllustrator&ベクターデータの教科書 -インプレス

紙面のキャプチャで、中身を少しだけご紹介。

本書は6章構成で、1,2章はベクターデータの取り扱い方、3,4章はIllstrator、5章はSketch、6章はSVG。各アプリのWebデザインならではの使い方から、制作や実装で使うベクターデータの役立つノウハウまで、しっかりと学べます。

今までPhotoshopオンリーで、ピクセルベースで作業していた人は、この1章を読むだけで衝撃を受けるかもしれません。Illustratorでのベクターはデータが軽い、修正に強いだけではなく、レスポンシブ用の複数デザインをまとめてレイアウトできるアートボード、オブジェクトの外観を一元管理できるアピアランス、日本語フォントや英語フォントを組み合わせ利用できる合成フォントなど、Photoshopではかなり大変な作業も簡単にできます。

アプリを使う前に環境設定をするのは大切です。IllstratorでWebデザインがスムーズにできるよう設定しておきましょう。

Webデザインのようなピクセル単位のデザインをベクターで行う場合、気をつけた方がよいポイントがあります。制作作業を快適にするノウハウは、知らないと損です。

IllustratorでWebデザインを行うと、どんな利点があるのか。よく使うエレメントをシンボル化して使い回すことができたり、一つのグラフィックから異なるサイズの画像を書き出したり（ベクターだからどのサイズも同じ品質）、一つのファイルでグラフィックのバージョン管理をすることもできます。

Webページのデザインも実はIllustratorの方が優れている面があります。スマホ・タブレット・デスクトップ用のレイアウトをアートボードで作業・管理できます。もちろんページ遷移を伴う複数ページのレイアウトもOKです。

ページで使用するエレメントはシンボル化し、それぞれのレイアウトに配置することで修正・変更も簡単に対応できます。

5章は使用しているユーザーもかなり増えてきた「Sketch」。
Sketchの何が便利なのか、どう使うのか、その特徴と基本的な機能紹介だけでなく、実制作での使い方、Illustrator, Photoshopなどとの連携方法などが分かります。

Sketch

Sketchは、OS X 10.9+対応のアプリです。

Sketchの購入を検討している人は、必読ですね。

Sketchは単体でも非常に便利ですが、Photoshop, Illustrator, Fireworksなどの他アプリともデータをやり取りして作業することができます。

最後の6章はSVG。SVGを使う時に知っておきたい実装方法や軽量化、SVGならではの効果的な使い方など、ググるだけでは分からないようなSVGを使いこなすためのノウハウがたくさんでした。

Illustrator&ベクターデータの教科書の目次

1. マルチデバイス時代のベクターデータのススメ

   マルチデバイスとグラフィック

   Illustratorの特徴

2. 制作準備と気を付けるポイント

   制作準備

   作業中に気を付けること

3. 修正に強いIllustrator デザインワークフロー

   ピクトグラムデザインのワークフロー

   ロゴデザインのワークフロー

   可変幅のカード型Webデザインのワークフロー

   プロモーション系Webデザインのワークフロー

4. Illustratorからの素材の書き出し

   素材を効率よく書き出すには

5. 新世代デザインツール「Sketch 3」の魅力

   Sketchの魅力

   Sketchの使い方

   他のアプリとデータをやり取りする

   プラグインでSketchをもっと便利に

   Sketchと連携するアプリ&サービス

6. ベクターフォーマット「SVG」を使いこなす

   SVGとは

   SVGの基礎

   SVGの効果・装飾

   IllustratorとSVG

   HTML内でのSVGの表示

   SVGならではの効果的な使い方

Illustrator, SketchでWebデザインをする時はこの本の内容だけ理解していれば大丈夫、というくらいしっかりまとめられてあります。

画像のレタッチはさすがにPhotoshopですが、それ以外のWebデザインに関することは全てIllustratorでした方が楽かもしれません。

献本の御礼

最後に、献本いただいたインプレスジャパンの担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

• お問い合わせ｜コリス