※このページでは広告のリンクを含みます
Webディレクター、Webデザイナー、コーダーとAdobe XDの使用率が高まってきています。いまはまだAdobe XDを使用していないWebデザイナーでも必ず使用する機会があると思います。その時に、Webデザイナーとして必要な内容をステップごとにまとめましたので、Adobe XDを使っていない、使い始めのWebデザイナーは必見です。
STEP1.短時間で習得！Webデザインに必要なAdobe XDの基本操作
Adobe XDは使用用途が幅広いのですが、本記事ではWebデザイナー初学者にとって知っておきたい基礎機能（「デザイン」モード、「プロトタイプ」モード、「共有」モード）と便利な機能を紹介します。
Webデザイナーが知識として最低限覚えておきたいものをまとめています。
STEP2.初めてAdobe XDを使うためのワークスペース・アートボードの解説をします
STEP3.WebデザイナーがAdobe XDで習得すべきオブジェクト（図形）の種類や効果の扱い方
本記事では、オブジェクトの種類と設定、効果について解説しています。操作も直感的にできてしまうので、対応できる範囲を覚えておきたいです。
STEP4.WebデザイナーがAdobe XDで習得すべきアセットの使い方を解説します
アセット機能はライブラリとして、色味、文字スタイル、コンポーネントといったデザインパーツを登録しすぐ使用できる機能のことです。
本記事では基本的なアセット機能と既存のUIキットの使い方を解説しています。
また、実務で用いるスタイルガイド（デザイン時に使う要素やデザインルールなどをまとめたもの）についても解説しています。
STEP5.Adobe XDでワイヤーフレームを作る手順を解説します【現場で使える】
Adobe XDでのワイヤーフレーム作成に慣れてしまうと他のアプリケーションソフトを使用することが若干難しく思うかもしれません。
本記事では、使いまわしの効くワイヤーフレームの作り方と、自分以外の人と共有する方法について解説しています。
一度は、Adobe XDでワイヤーフレーム作成をしたくなるはず。
STEP6.Adobe XDにおけるデザインカンプの制作手順【画像を使い分かりやすく解説】
本記事では、上記メリットを解説しつつ、Adobe XDの機能を活用していきながらデザインカンプを制作手順に沿って解説しています。
STEP7.Adobe XDで制作したデザインカンプをコーディングする方法
Adobe XDでコーディングするメリットとデメリットを理解しつつ、Adobe XDによる画像の切り出しからHTMLとCSSを作成していく流れを解説します。
HTMLでマークアップとCSSでデザインの解説に関しては、どの画像処理ソフトを使用しても同じ作業なので、本サイトの別記事で書いてあります。一通りの手順を本記事で学んでみてください。
小コラム：Webデザイナーになるために、もし今から自分が選ぶとしたら？
もし自分が今からWebデザイナーを目指すとしたら、どのスクールを選ぶかの問いに、いろいろ調べた結果、自分が選ぶのは「デジタルハリウッド STUDIO by LIG」かなと思います。
まず、「LIG」っていうWeb業界の最前線に居るWeb制作会社が運営してるから、現場のリアルが学べるっていうのが大きいポイント。LIGの教室も自由に使えるから、自分のペースで学習が進められるのも魅力です。
あと、現役のプロ講師から直接指導を受けられるっていうのも、モチベーションが上がりそう。業界の裏話とかも聞けそうで、楽しそう。それに、教室で一緒に学んでる人たちと交流することで、自然と競争心が芽生えて「よし、負けてられないぞ！」ってなる気がします。
ただ、ぶっちゃけ費用は高い。でも、リスキリング支援で最大70%キャッシュバックされるんだったら、かなり助かると考えています。これを使って、コストの心配も少し軽減できるんじゃないかなって思います。
受講費最大70%キャッシュバック中
