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

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

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

本の表紙

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

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

本のキャプチャ

Web制作者のための
Illustrator&ベクターデータの教科書
[Amazonでみる]
[楽天でみる]

著:
あわゆき、窪木博士、三階ラボ(長藤寛和、宮澤聖二)、松田直樹
出版社:
インプレスジャパン
発売日:
2015/5/22

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

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

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

誌面のキャプチャ

本書は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でした方が楽かもしれません。

本のキャプチャ

Web制作者のための
Illustrator&ベクターデータの教科書
[Amazonでみる]
[楽天でみる]

著:
あわゆき、窪木博士、三階ラボ(長藤寛和、宮澤聖二)、松田直樹
出版社:
インプレスジャパン
発売日:
2015/5/22

献本の御礼

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

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

top of page

©2017 coliss