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

Webディレクター、Webデザイナー、コーダーとAdobe XDの使用率が高まってきています。いまはまだAdobe XDを使用していないWebデザイナーでも必ず使用する機会があると思います。その時に、Webデザイナーとして必要な内容をステップごとにまとめましたので、Adobe XDを使っていない、使い始めのWebデザイナーは必見です。

STEP1.短時間で習得!Webデザインに必要なAdobe XDの基本操作

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

STEP2.初めてAdobe XDを使うためのワークスペース・アートボードの解説をします

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

STEP3.WebデザイナーがAdobe XDで習得すべきオブジェクト(図形)の種類や効果の扱い方

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

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

STEP4.WebデザイナーがAdobe XDで習得すべきアセットの使い方を解説します

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

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

STEP5.Adobe XDでワイヤーフレームを作る手順を解説します【現場で使える】

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

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

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

STEP6.Adobe XDにおけるデザインカンプの制作手順【画像を使い分かりやすく解説】

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

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

STEP7.Adobe XDで制作したデザインカンプをコーディングする方法

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

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

おすすめの就職・転職エージェント