こんにちは、デザイナー・ブロガーの
ゆっきー（@elcielo_design）です。
今回は、Adobe XDを学ぶ上で、
参考になる書籍を紹介しようと思います。
この記事の目次
Adobe XDを本で学ぶ。
Adobe XDは、UIデザイン (Webデザイン)
で使われるツールの1つ。
そんなAdobe XDを本で学びたい方のために
今のAdobe XDのレベルや状況に合わせて、
学習できる本を一覧にしてまとめてみました。
なお、まだAdobe XDを
購入してない方はこの記事をチェック。
Adobe CCを安く購入することができます。
また、デザイン書籍等を1ヶ月無料で読むなら、
Amazonの「Kindle Unlimited」がおすすめ。
Adobe XDの学習に役立つ書籍・本まとめ
「Adobe XDの書籍・本の一覧」
| 系統 | タイトル (書籍名) |
| ① 基本・操作 (初心者向け) |
世界一わかりやすいAdobe XD UIデザインとプロトタイプ制作の教科書 |
| 豊富な作例で学ぶ Adobe XD Webデザイン入門 |
|
| 初心者からちゃんとしたプロになる Adobe XD基礎入門 |
|
| Adobe XD Webプロトタイピングツール 動的要素をプログラミングなしで盛り込む! |
|
| ② 実践的スキル (中級者向け) |
Adobe XD プロトタイピング実践ガイド 〜ユーザーの要求に応えるUI/UXデザイン |
| Adobe XDではじめる Webデザイン & プロトタイピング |
|
| ③ Illustrator等も同時に 学びたい人向け |
世界一わかりやすい Illustrator & Photoshop & XD Webデザインの教科書 |
下記でそれぞれ簡単に説明していきます。
① Adobe XDの基本・操作が学べる
書籍・本「初心者向け」
「Adobe XD初心者向けの入門書」
- 世界一わかりやすいAdobe XD
UIデザインとプロトタイプ制作の教科書 -
豊富な作例で学ぶ Adobe XD
Webデザイン入門 -
初心者からちゃんとしたプロになる
Adobe XD基礎入門 - Adobe XD Webプロトタイピングツール
動的要素をプログラミングなしで盛り込む!
Adobe XDを初めて使うという方は、
まずこの冊のどれかから選択して
学び始めるのがおすすめになります。
実際のAdobe XDの操作する画面も
載っていてサクサク学べると思います。
なお、その他の基本・操作等が学べる
書籍は次の記事にまとめています。
世界一わかりやすいAdobe XD
UIデザインとプロトタイプ制作の教科書
定番「世界一わかりやすい教科書」
シリーズのAdobe XD入門書。
| タイトル (書籍名) |
世界一わかりやすいAdobe XD UIデザインとプロトタイプ制作の教科書 |
| 価格 | ¥2,728 (税込) |
| 発売日 | 2018/6/13 |
| 対応バージョン | 〜 Adobe XD CC2018 |
| 特徴 | ・XD基礎の基礎から制作テクニックまで、 しっかり紹介されているデザイン本。 ・サンプルサイト制作を通じてXDによる 実践的なプロトタイプ作成・公開・共有・ 改善の流れも学べる。 ・15のLessonから構成 ・Lesson後に成果を出せる練習問題付き ・Lessonデータをダウンロードして 操作を実践することが可能。 ・Mac向けなのでWindowsの場合は少し不便 |
| 内容 | Lesson01 プロトタイピングとUIデザイン Lesson02 XDの基本 Lesson03 XDでオブジェクトをつくる Lesson04 曲線やアイコンの作成 Lesson05 テキストや画像の扱い Lesson06 リピートグリッドの利用 Lesson07 共通パーツの管理 Lesson08 グリッド設定と画像書き出し Lesson09 プロトタイピング Lesson10 プロトタイプの共有 Lesson11 共有パーツの作成 Lesson12 トップページの作成 Lesson13 フォームや表の作成 Lesson14 プロトタイピングとデータの整理 Lesson15 Photoshopや サードパーティとの連携 |
| おすすめの人 | ・定番シリーズでAdobe XDを学びたい人 |
| その他 |
豊富な作例で学ぶ Adobe XD
Webデザイン入門
初心者からプロまで、
すぐに使える知識が身につく一冊。
| タイトル (書籍名) |
豊富な作例で学ぶ Adobe XD Webデザイン入門 |
| 価格 | ¥2,838 (税込) |
| 発売日 |
2021/3/22 |
| 対応バージョン |
Adobe XD CC 2021 |
| 特徴 | ・初めてのXDでもこの一冊で使いこなせる 内容で、優しく丁寧に解説している。 ・豊富な作例で手軽にUIパーツ作成方法が 学べる。 ・業種別、業態別のWebサイト制作を、 現場のプロが紹介。 ・特典としてワイヤーフレームがあるので、 それをすぐに実務に役立てられる。 |
| 内容 | 第1章 Adobe XDの準備 第2章 Adobeツール初心者のための 基本操作 第3章 XD初心者のための作例体験 第4章 デザインとコミュニケーション 第5章 業種別に作るWebサイト 第6章 思考の整理シーンでの活用方法 第7章 将来を見据えた機能 |
| おすすめの人 | ・最新のAdobe XD学習本が欲しい人 |
| その他 |
初心者からちゃんとしたプロになる
Adobe XD基礎入門
プロトタイピングツールである
Adobe XDの2021年に発売された入門書。
| タイトル (書籍名) |
初心者からちゃんとしたプロになる Adobe XD基礎入門 |
| 価格 | ¥2,970 (税込) |
| 発売日 | 2021/9/22 |
| 対応バージョン | |
| 特徴 | ・XDの画面構成や基本操作からプロの 実践的な使い方までを6章構成で解説。 ・制作フェーズに応じたプロ使い方が分かる ・1,2章で基本的知識や画面の見方を学んで 3,4,5章ではワイヤーフレーム作成や デザイン作成等の実践演習を進めていく流れ ・記事ごとに学習時間の目安を設けていて、 学習教材としても利用しやすい。 ・第一線で活躍する現役のプロが噛み砕いて 分かりやすく解説している。 |
| 内容 | Lesson1 制作のワークフローとAdobe XD Lesson2 Adobe XDの基本 Lesson3 ディレクター視点で使う Lesson4 デザイナー視点で使う Lesson5 エンジニア視点で使う Lesson6 更に便利な機能&知識 |
| おすすめの人 | ・Adobe XDを初めて操作する人 ・制作フロート連携させた活用法を知りたい人 ・制作現場の一段深いノウハウを習得したい人 |
| その他 |
Adobe XD Webプロトタイピングツール
動的要素をプログラミングなしで盛り込む!
こちらもAdobe XDについて各章ごとに
基本からインターフェイス、LP、パス等
紹介している本。
| タイトル (書籍名) |
Adobe XD Webプロトタイピングツール 動的要素をプログラミングなしで盛り込む! |
| 価格 | ¥2,090 (税込) |
| 発売日 | 2018/4/1 |
| 対応バージョン | |
| 特徴 | ・Adobe XDの概要と基本的な仕組みを 理解できる本。 ・ページ数は100ページ未満と薄め。 |
| 内容 | 第1章 「Adobe XD」の基本 第2章 インターフェイス 第3章 ランディング・ページ 第4章 ブランドサイト・チュートリアル 第5章 作成テクニック 第6章 パス |
| おすすめの人 | ・Adobe XDの概要を抑えたい人 |
| その他 |
② Adobe XDを実践的に学べる
書籍・本「中級者向け」
「Adobe XD中級者向けの入門書」
- Adobe XD プロトタイピング実践ガイド
〜 ユーザーの要求に応えるUI/UXデザイン -
Adobe XDではじめる
Webデザイン & プロトタイピング
一歩先行く現場のスキル
中級向けでは、XDの基本操作も学べるが、
プロトタイピングなども実践的に学べる
書籍を紹介しています。
Adobe XD プロトタイピング実践ガイド
〜ユーザーの要求に応えるUI/UXデザイン
UI/UXデザインを意識したAdobe XDで
高速プロトタイピングを実践するための本。
| タイトル (書籍名) |
Adobe XD プロトタイピング実践ガイド 〜ユーザーの要求に応えるUI/UXデザイン |
| 価格 | ¥3,278 (税込) |
| 発売日 | 2018/12/18 |
| 対応バージョン | 〜 Adobe XD CC2019 |
| 特徴 | ・プロトタイプ政策の基礎知識を学びながら Adobe XDを使いこなす実践書。 ・ツールの使い方に偏らずプロトタイピング 制作をはじめるための知識、構築の仕方に ついてもしっかり解説。 |
| 内容 | 1 プロトタイピングの基礎知識 2 プロトタイプ制作の基本を理解する 3 Adobe XDの基本操作 4 Adobe XDで動くプロトタイプを制作する 5 ケーススタディで作業の進め方を学ぶ 6 プロトタイプを公開・検証する |
| おすすめの人 | ・プロトタイピングを実践的に学びたい人 |
| その他 |
Adobe XDではじめる
Webデザイン & プロトタイピング
一歩先行く現場のスキル
コーディングに適した
プロトタイプが作れるAdobe XD本。
| タイトル (書籍名) |
Adobe XDではじめる Webデザイン & プロトタイピング 一歩先行く現場のスキル |
| 価格 | ¥2,750 (税込) |
| 発売日 | 2020/5/29 |
| 対応バージョン | |
| 特徴 | ・WebデザインとUIのプロタイピングを 高品質なサイトを作りながら、 現場のワークフローに沿って学んでいく本 ・現場レベルで求められるスキルを より実践的な学び方で習得できる。 ・XD特有のクセの解決メモが役立つ。 ・キャプションも多く丁寧で分かり易い内容 ・細かい補足が多いのも特徴的。 ・Mac向けなのでWindowsの場合は少し不便 |
| 内容 | 1 Adobe XDの基本と製作準備 2 ワイヤーフレームの制作 3 スマートフォン版デザインカンプの制作1 トップページ 4 スマートフォン版デザインカンプの制作2 下層ページ 5 インタラクティブ・プロトタイプの制作 6 プロトタイプとデザインスペックの共有 7 デスクトップ版デザインカンプの制作 8 コーディングの準備と画像の書き出し 9 動きのあるUIの制作 10 プラグインの活用 |
| おすすめの人 | ・プロトタイピングを実践的に学びたい人 |
| その他 |
③ Adobe XDと合わせてIllustratorや
Photoshopを学べる書籍・本
「IllustratorやPhotoshopも同時に学べる書籍」
- 世界一わかりやすい Illustrator &
Photoshop & XD Webデザインの教科書
なお、IllustratorやPhotoshopは
別の書籍で学びたいという人は、
次の記事に一覧としてまとめています。
Photoshop & Illustrator & XD
Webデザインの教科書
Webデザイン学習の定番の入門書。
XDだけでなくPhotoshop等も学べます。
| タイトル (書籍名) |
世界一わかりやすい Illustrator & Photoshop & XD Webデザインの教科書 |
| 価格 | ¥2,728 (税込) |
| 発売日 |
2018/10/15 |
| 対応バージョン |
Adobe XD CS6 〜 CC 2018 |
| 特徴 | ・Webデザインで必要なるIllustratorと Photoshop、そしてXDも学べる本。 ・解説がかなり省略されている。 (Adobeソフト初心者には不向き) ・作業テクニックが参考になる。 |
| 内容 | ・Webデザインにおける各アプリの使い分け ・ワイヤーフレームからレイアウトへの スムーズな進行 ・Illustratorでアイコンやロゴマークなどの パーツを制作しよう ・Photoshopで写真の編集をしよう ・Photoshopで写真・パーツ加工をしよう ・Creative Cloudライブラリへのパーツの 登録と活用 ・PhotoshopでのWebページ制作テクニック ・XDを利用したレイアウトをしよう ・XDを利用したプロトタイプ作成を学ぼう ・各アプリで効率的にテキストをデザインする ・Photoshopから画像を書き出そう ・Illustratorから画像を書き出そう ・XDからの画像書き出しとコーダとの データ共有 ・PSD・AIファイルからCSSやテキストを 抜き出そう ・ほかのアプリとの連携について知ろう |
| おすすめの人 | ・Webデザインを学習したい人 |
| その他 |
最後に
以上がAdobe XDを学ぶ上で
役に立つ7冊の書籍の紹介でした。
全部を買っているときりがないので、
何冊かピックアップし買いましょう。
そして、それをベースに図書館の本や
ネットのチュートリアルをこなすのも
知識やスキルを磨くのに全然ありですね。