概要

Illustrator・Photoshop・XD の3ツールを連携させてWebデザインの基礎を習得する

想定読者

Adobe CCでWebデザインを始めたい人、またはツールの基本操作は知っていても実際のWeb制作ワークフローに自信がないデザイナー志望者

こんな人には向いていない

• すでにIllustrator・Photoshop・XDをWebデザイン業務で日常的に使いこなしているデザイナーには既習内容が中心となる
• 特定ツールの高度な機能(アドバンスドフォトレタッチや複雑なベクタートレースなど)を深掘りしたい人には本書の対象範囲外となる
• Figma等Adobeエコシステム外のツールを前提とした環境で働く人には適合しにくい

読了後にできるようになること

• IllustratorとPhotoshopの役割の違いを理解し、用途に応じて使い分けられる
• Adobe XDでワイヤーフレームからプロトタイプまでの一連の制作フローを実行できる
• Creative Cloudライブラリを活用してIllustrator・Photoshop・XD間でアセットを共有管理できる
• Webページ向けの画像書き出し(Photoshop/Illustrator双方)の設定と手順を習得できる
• XDからエンジニアへの仕様共有(CSS抽出・デベロッパー連携)の基本を理解できる
• Sketch・Zeplin等の周辺ツールとのインテグレーション概要を把握できる

本書のキー概念(章解説)

• 第 1 章 Webデザインのツール選択とワークフロー — 3ツールをいつ・なぜ使い分けるかの判断軸を最初に整理する章。全体像の把握に必須
• 第 2 章 ワイヤーフレームからレイアウトへのワークフロー
• 第 3 章 Illustratorでアイコン・ロゴを作成する
• 第 4 章 Photoshopで写真を編集する
• 第 5 章 Photoshopで写真・パーツにエフェクトをかける
• 第 6 章 Creative Cloudライブラリでアセット管理をする — 複数ツール連携の核心。ここを習得するとチーム制作での生産性が大きく変わる
• 第 7 章 Webページ制作テクニック
• 第 8 章 Adobe XDを使ったレイアウト
• 第 9 章 XDでプロトタイプを作成する — Webデザイン制作でのXD導入を検討している人が最初に確認したい章
• 第 10 章 テキストデザインを各アプリで行う
• 第 11 章 Photoshopから画像を書き出す
• 第 12 章 Illustratorから画像を書き出す
• 第 13 章 XDから書き出してエンジニアと連携する — デザイナーとエンジニアの協業ポイントを扱う実務直結の章
• 第 14 章 ファイルからCSS・テキストを抽出する
• 第 15 章 他のアプリケーションと連携する

ハイライト

• モノを作るためには道具を自分の身体のように使えることが大切です。デジタルなクリエイティブの世界でもそれは同じ。創造するためには、まず技術を身につけましょう。(本書の学習哲学を端的に表す書き出し。ツール習得を創造の前提として位置づけている)

編集メモ

Qiita言及記事0件・likes合計0。Rakutenランキング情報なし。書誌シグナルのみで評価。2018年出版のAdobe XD入門として一定の需要はあるが、外部言及シグナルが確認できないため supplementary とした

読む前に押さえておきたいこと

• Adobe Creative Cloudのサブスクリプション(Illustrator・Photoshop・XDが使える環境)
• Windowsまたはmacosの基本操作(ファイル管理・アプリ操作)
• HTMLとCSSの基礎知識があると書き出し・エンジニア連携の章がより理解しやすい(必須ではない)

学習のコツ

• Lesson 1でツール選択の判断軸を把握してから、自分が最も使う用途(アイコン制作ならLesson 3、プロトタイプならLesson 8-9)を優先して読み進めると効率的
• Lesson 6のCreative Cloudライブラリは他のレッスンと横断的に関係するため、早めに実施して以降のレッスンで実際に活用しながら進めると定着しやすい
• Lesson 11-13の書き出し系レッスンは最後にまとめて実施するより、各ツールのレッスン直後に対応する書き出しレッスンを行うと理解が深まる