WebデザイナーがAdobe XDを使うために必要なロードマップ

Adobe XDは、WebデザイナーはもちろんWebディレクターまで役職幅の広い使われ方をしています。
Adobe XDは使用用途が幅広いのですが、本記事ではWebデザイナー初学者にとって知っておきたい基礎機能（「デザイン」モード、「プロトタイプ」モード、「共有」モード）と便利な機能を紹介します。
Webデザイナーが知識として最低限覚えておきたいものをまとめています。

Adobe XDの操作にはワークスペースの画面とアートボードの操作を覚えないといけません。特にワークスペースはPhotoshopやIllustratorと少し違います。最初は戸惑うかも知れませんが、まず一読して手を動かすことを推奨します。

Adobe XDでは、提案資料、ワイヤーフレーム、デザインカンプなど作成する時にオブジェクト（図形）を扱うことが大変多くなります。

本記事では、オブジェクトの種類と設定、効果について解説しています。操作も直感的にできてしまうので、対応できる範囲を覚えておきたいです。

Adobe XDでデザインカンプ、ワイヤーフレームの制作で作業スピードを上げるためにはアセット機能を使っていくことです。
アセット機能はライブラリとして、色味、文字スタイル、コンポーネントといったデザインパーツを登録しすぐ使用できる機能のことです。
本記事では基本的なアセット機能と既存のUIキットの使い方を解説しています。

また、実務で用いるスタイルガイド（デザイン時に使う要素やデザインルールなどをまとめたもの）についても解説しています。

Adobe XDの機能を使って効率的に作成するワイヤーフレームの作り方について解説しています。
Adobe XDでのワイヤーフレーム作成に慣れてしまうと他のアプリケーションソフトを使用することが若干難しく思うかもしれません。

本記事では、使いまわしの効くワイヤーフレームの作り方と、自分以外の人と共有する方法について解説しています。

一度は、Adobe XDでワイヤーフレーム作成をしたくなるはず。

Adobe XDでデザインカンプ制作するメリットは「動作が軽い」「同じデザインパーツを簡単に使い回せる」「プロトタイプまで作成できる」の3つになります。

本記事では、上記メリットを解説しつつ、Adobe XDの機能を活用していきながらデザインカンプを制作手順に沿って解説しています。

デザインカンプをAdobe XDで制作後、コーディングもAdobe XDで行っていきましょう。
Adobe XDでコーディングするメリットとデメリットを理解しつつ、Adobe XDによる画像の切り出しからHTMLとCSSを作成していく流れを解説します。

HTMLでマークアップとCSSでデザインの解説に関しては、どの画像処理ソフトを使用しても同じ作業なので、本サイトの別記事で書いてあります。一通りの手順を本記事で学んでみてください。