【まとめ版】Adobe XDの使い方が学べる入門本4冊【入門サイトも3つ紹介】

こんにちは。現在Web系企業でフロントエンジニア2年目の斎藤です。

フロントエンジニアということもありこれまでに

  • Adobe XD
  • Photoshop
  • Sketch
  • Zeplin
  • Figma

などなど様々なデザイン系のツールを勉強してきました。

✔︎今回の記事ではAdobe XDの使い方が学べる本4冊+入門サイト3つを紹介します

【2020年】Adobe XDの使い方が学べる入門本4冊

1. Adobe XD プロトタイピング実践ガイド ~ユーザーの要求に応えるUI/UXデザイン (日本語) 単行本(ソフトカバー)

内容
UI/UXデザインを意識したAdobe XDで高速プロトタイピングを実践するための指南書です。

Webサイト構築やアプリ開発の現場ではプロトタイプ制作の重要性についての認識が高まっています。

背景には、ただかっこいいデザインを作ればいいというのではなく、
ユーザーに配慮したUI/UXを基とするデザインの構築が主流になりつつあることがあります。
ユーザーの声をより早く形にできるプロトタイプは、クライアントとの意思疎通をはかる上でも
重要な役割を担う方法として注目されています。
現在、さまざまなプロトタイピングツールが使用されていますが、
プロトタイピングをするためにツールをどのように活用してよいのか試行錯誤している状況です。

本書は、プロトタイプ制作の基礎知識を学びながら、プロトタイピングツールAdobe XDを使いこなす実践書です。
ツールの使い方だけに偏らず、プロトタイピング制作をはじめるために必要な知識、
構築の仕方についてもしっかり解説します。

◆Adobe XD プロトタイピング実践ガイド ~ユーザーの要求に応えるUI/UXデザイン

2. Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル

内容
コーディングに適したプロトタイプが作れる!

本書はAdobe XDを使った
WebデザインとUIのプロトタイピングを、
高品質なサイトを作りながら、
現場のワークフローに沿って学んでいく本です。

ワイヤーフレームの作り方から、
デザインカンプ制作、コンポ―ネントの管理、
画面遷移の設計、インタラクティブなプロトタイプ制作と共有、
コーディングに必要なデザインスペックの共有、
さらに動きのあるUI設計やプラグイン活用まで、
現場レベルで求められるスキルを、
より実践的な学び方で習得できます。

初学者から、現場経験が浅い新人デザイナー、
さらにグラフィックデザインからWebへキャリアを広げたい方まで、
しっかりWebデザインを学びたい、あらゆる方のための一冊です。

◆Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル

3. 世界一わかりやすいAdobe XD UIデザインとプロトタイプ制作の教科書 世界一わかりやすい教科書

内容
Webデザインの手法は,UIを考えながら設計するプロトタイプ方式へと急速に変わってきています。Adobe XDはCCアプリの1つとして,業界標準のプロトタイピングツールとなるべく毎月機能が拡充されており,同社のPhotoshopやIllustratorといったアプリとの連携も魅力です。
本書ではXDの基本から機能を丁寧に解説し,サンプルサイト制作を通じてXDによる実践的なプロトタイプ作成・公開・共有・改善の流れを学べます。XDビギナーのWebデザイナーはもちろん,導入を検討中のWebディレクターにも役立ちます。

(こんな方におすすめ)
・プロトタイピングツールとしてAdobe XDを使いたい方
・業務にAdobe XDを導入したいWeb制作者

(目次)

Lesson01 プロトタイピングとUIデザイン

Lesson02 XDの基本

Lesson03 XDでオブジェクトをつくる

Lesson04 曲線やアイコンの作成

Lesson05 テキストや画像の扱い

Lesson06 リピートグリッドの利用

Lesson07 共通パーツの管理

Lesson08 グリッド設定と画像書き出し

Lesson09 プロトタイピング

Lesson10 プロトタイプの共有

Lesson11 共通パーツの作成

Lesson12 トップページの作成

Lesson13 フォームや表の作成

Lesson14 プロトタイピングとデータの整理

Lesson15 Photoshopやサードパーティとの連携

◆世界一わかりやすいAdobe XD UIデザインとプロトタイプ制作の教科書

4. 世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書

内容
文章

◆世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書

Adobe XDの使い方を本以外で学びたい人: 入門サイト3つ

  • Adobe XD公式チュートリアル
  • Udemy(有料動画学習サイト。クオリティが非常に高い)
  • Youtube(xd tutorialとかで検索するとチュートリアル系動画が出てくる。英語が多い)