豆知識・お役立ち情報

クリエイター・プログラマーを目指している人のためのメディアくりぷろメディア-クリエイター・プログラマーを目指している人のためのメディア

2021.11.08更新

AdobeXDとは何か。マークアップエンジニアが最低限おさえておくべきXDの機能

AdobeXDとは何か。マークアップエンジニアが最低限おさえておくべきXDの機能

AdobeXDとは何か

XDは、Webサイトやモバイルアプリのデザインを効率的に作成する事に特化した「UI / UXデザインツール」と呼ばれるアプリケーションです。

Web制作やモバイルアプリなどを制作する場合、見た目・デザインを設計する際には、IllustratorやPhotoshopを使うことが主流でした。
しかし、XDが登場してからその便利さが高く評価されて、一気にXDが主流になりつつあります

これからXDを使ってデザインされることが多くなることは明白で、このアプリを使ってWeb制作など行われていくことは間違いありません。

Web制作の場合は、
画像編集はPhotoshopで、
イラストやロゴの作成はIllustratorで、

それらのパーツを組み合わせたモックアップを作成するのをXDで、
というように、それぞれのアプリケーションの良いところを使って制作していくことが多くなるでしょう。

AdobeXDの何が便利なのか

これまで長年デザインの仕事をしてきましたが、XDを最初に使用したときの衝撃は忘れられません。
IllustratorとPhotoshopもとても素晴らしいアプリケーションで、出来ることも豊富にあるのですが、その中の機能すべてを使ってデザインすることはあまりなくて、ほとんど使用しないような機能が搭載されていることによってアプリの動作自体が重たいなと感じることもあります。

XDはそんなIllustrator、Photoshopの機能の中から「これ!これはいる!」という機能がしっかり搭載されていて、なおかつプロトタイプを制作する際に必要な機能が新たに加えられています

しかも動作が軽いです。
IllustratorやPhotoshopに比べると機能数は少ないですが、その分アプリの動作は軽いのです。
もちろん、プロトタイプを制作するために厳選された機能が搭載されているので、作業していて困ることはほとんどありません。
まさに「かゆいところに手が届くアプリケーション」なのです。

さらに、搭載されている機能が少ないために、初心者の方でも比較的利用しやすいです
IllustratorやPhotoshopはある程度学習コストがかかって、時間をかけて練習する必要がありますが、XDの場合は、それほど使い込まなくてもある程度の操作はできます。

なので、デザイナーではない、ディレクターや営業職の方でもある程度は扱えるので、「細かいデザインはデザイナーで。その前の枠組みだけをお客さんと話し合って作ってもらう」ということもある程度可能です。

AdobeXDでできること

さて、XDの便利さについては理解していただけたと思いますが、このXDを扱えるマークアップエンジニアになることの意味について考えたいと思います。

まず、XDでは大きくできることが3つあります。

・デザインの制作
・画面遷移など、各デザインを繋げて動きを付ける
・制作したプロトタイプを共有し、コメントを使ってチーム開発ができる

これら3つの視点を、コーディングをする立場から考えてみます。

まず、デザインの制作の方法をある程度知っていれば、コードを書くときに必要な値の確認ができるようになります。
例えば、

・この四角の幅はいくつだろう?
・余白はどのくらい空いているのだろう?
・文字のサイズは?
・行間は?
・文字の色のコードは?

などなど、確認する数値はたくさんあります。

これらの値をどうやって確認するのかわからなかったらとても困ります。
デザイナーさんにあらかじめ数字を出しておいてもらったりする必要があります。
それはデザイナーさんの手間を増やしてしまいますし、お願いする自分自身の作業量・負担が増大します。

また、「この画像はCSSでは再現できないから書き出そう」といった、画像の書き出しもXDを使えば簡単に行えます。
その方法を知っておけば、自分で必要に応じて必要なサイズを書き出すことが可能になるのです。

また、共有の機能が使えれば、プロトタイプの制作においてチーム内の作業が円滑に進むことになります。コメントを残す、だけであれば使ったことがない方でも十分対応できますが、
共有の機能にはCSSを書き出す機能もあって、すべてをそのままコピーして使用することはできないにしろ、流用できるものも多々あります。

そういったことを知っておかなければ、コピペで済んでいた作業を全部手で入力しなければいけなくなることもありえます。

AdobeXDを始める手順

現在XDはスタータープランと言って、無料で利用することが可能です。
機能に少し制約がありますが、ほとんどの機能が利用できますので、無料で利用できる今のうちに使っておくべきだと思います。

すでに、AdobeCCを契約している場合は、Creative CloudからXDのインストールが可能です。

契約していない方は、
AdobeXDのページ
からインストールを始めましょう。

少し下にスクロールすると、無料が始まるボタンがありますので、そちらをクリックしてインストールします。

AdobeXDが使うマークアップエンジニアになろう

XDが使えるマークアップエンジニアになるということは、とても価値のあることだと考えます。
作業の効率も上がりますし、自分自身も楽になります。

XDは前述したとおり、学習コストは低めです。それほど難しい機能はありません。
それならば、いったん一通りの機能については学んでおきましょう。
必ずそれが、自分の財産になるはずです。