MENU
カテゴリー

AdobeXDとは?主な機能や使用される理由を紹介!

AdobeXDとは?主な機能や使用される理由を紹介!

takato(@n8takato)です!

XDってよく聞くけど何か知りたい

この記事は上記の課題に向けて作成しています。

ここ数年webデザインではXDが使用されています。

しかしwebデザイン初学者の中にはXDとは何か知らない方もいると思います。

そこでこの記事ではXDとは何かについて説明します。

この記事でわかること

  • XDとは何か
  • XDで出来ること
  • XDが使われている理由
  • XDの始め方

この記事を書いた人

この記事を書いた僕はこんな人です!

  • 都内制作会社でwebデザイナーとして勤務
  • webデザイナー3年目
  • web制作現場で学んだことを発信している人
目次

XDとは何か?

XDとはAdobeが提供しているデザインツールで、主にweb制作に使われます。
XDとは何か?

早速XDについて説明します。

XDとはAdobeが提供しているデザインツールの1つです。

XDはAdobeのデザインツール

Adobeは「Illustrator」や「Photoshop」、「Premiere Pro」などのデザインツールを提供している会社です。

XDもこのAdobeが提供しているツールの1つです。

XDはwebデザイン向けのデザインツール

これまでwebデザインはIllustratorかPhotoshopで制作されていました。

しかしXDの登場により徐々にXDで制作されることが多くなりました。

※今ではXDでwebデザインを制作することが多いです。これからwebデザインを勉強される方はXDの学習が必須です。

ちなみに現在のAdobeツールの立ち位置は下記のような感じです。

Illustrator

  • イラストや紙媒体の制作に使われる

Photoshop

  • 写真加工に使われる

XD

  • webデザイン(スマホアプリなど)に使われている

制作現場ではそれぞれの用途に応じてツールを使い分けています。

XDで出来ること

XDには「デザイン」「プロトタイプ」「共有」の3つの機能があります。
XDで出来ること

XDでは主に3つの機能があります。

XDの3つの機能

  • デザイン
  • プロトタイプ
  • 共有

デザイン

「デザイン」では主にwebサイトやスマホアプリのデザイン制作が出来ます。

Illustratorなどと同様に直感的に使用することが出来ます。

「デザイン」ではwebサイトやスマホアプリのデザイン制作が出来ます。
XDのデザイン機能

プロトタイプ

「プロトタイプ」は主にアニメーションの設定をすることが出来ます。

本来コーディングを必要とするサイトの動きをデザイン上で設定出来ます。

デザインの段階でサイトがどのような動きをするのか確認出来るのです。

※web制作の過程にあるワイヤーフレームもこの「プロトイタイプ」機能で作成します。

「プロトタイプ」ではアニメーションの設定をすることが出来ます。
XDのプロトタイプ機能

共有

XDには共有機能があります。

共有機能を使うとブラウザ上でデザインを確認することが出来ます。

さらに共有機能にはデザインにコメントすることも出来ます。

社内だけでなくクライアントにもXD上でFBしてもらうことが出来ます。

「共有」では他の人にデザインをチェックしてもらうことが出来ます。さらにコメント機能もついているためフィードバックをもらうことも可能です。
XDの共有機能

XDで共有する方法については下記の記事を参考にしてください。

あわせて読みたい
【2022年版】AdobeXDで共有する方法を紹介します! XDで共有する方法を知りたい この記事は上記の課題に向けて作成しております。 XDには共有機能があります。 共有機能を使うことで他の人にデザインを共有することが出来...

XDが使われている理由

XDが使われる理由は4つあると考えられます。その4つとは「直感的に使える」「プラグインの種類が豊富」「複数人で制作するのに向いている」「デザインに動きを加えることが出来る」です。
XDが使われている理由

ではなぜXDが使われるようになったのでしょうか?

僕が考えた4つの理由を紹介します。

XDが使われる4つの理由

  • 直感的に使える
  • プラグインの種類が豊富
  • 複数人で制作するのに向いている
  • デザインに動きを加えることが出来る

直感的に使える

なんと言ってもXDは直感的に使えます。

デザインツールの知識が無くてもXDは使いこなすことが出来ます。

Illustratorも直感的に使えるツールですが、XDはそれ以上です。

※ちなみにPhotoshopは直感的に使いづらいツールです。これまでPhotoshopでwebデザイン作っていた方がXDを使うと驚くと思います。

XDは初学者でも簡単に使うことが出来るので敷居が低く感じられます。

プラグインの種類が豊富

XDには「プラグイン」の機能が備わっています。

プラグインとは?

  • プラグインとは機能を拡張することの出来るものです。

プラグインを使いXDを自分好みにカスタマイズすることが出来ます。

僕がおすすめするプラグインは下記の3つです。

XDのおすすめプラグイン3選

  • 「Presentation」
  • 「Copy CSS to Clipboard」
  • 「Remove Decimal Numbers」

Presentation

「Presentation」はプレゼン用のテンプレートが使えるプラグインです。

デザイン性に優れたテンプレートが数多く存在しています。

テンプレートを使うので短時間で綺麗なプレゼン資料が作成出来ます。

「Presentation」はプレゼンテーション用のテンプレートが数多く存在しています。
Presentation

プレゼンテーション機能の使い方は下記の記事を参考にしてください。

あわせて読みたい
【XD】プレゼンテンプレートを使おう!(Presentationプラグイン) webデザインの提案に使えそうな綺麗なプレゼン資料のテンプレートが欲しい。 この記事は上記の課題に向けて作成しています。 XDにはプレゼンテーションに特化したプラグ...

Copy CSS to Clipboard

「Copy CSS to Clipboard」はcssコードを自動で生成出来るプラグインです。

cssコードを自動で生成してくれるのでコーディング時間が短縮されます。

コーディングを担当する方は必ず入れたいプラグインです。

「Copy CSS to Clipboard」はワンクリックでcssコードを取得することが出来ます。コードを一から書く必要がなくなります。
Copy CSS to Clipboard

「Copy CSS to Clipboard」の使い方は下記の記事を参考にしてください。

あわせて読みたい
【AdobeXD】cssコードを自動で取得出来るプラグインを紹介! XDからcssコードを取得したい この記事は上記の課題に向けて作成しております。 XDではデータからcssコードを取得出来るプラグインがあります。 このプラグインを使うこ...

Remove Decimal Numbers

「Remove Decimal Numbers」は小数点を消してくれるプラグインです。

画像を書き出す際小数点が含まれているとサイズが変わってしまいます。

このプラグインを導入することで小数点を自動で削除してくれるのです。

「Remove Decimal Numbers」はサイズに小数点が表示されなくなります。
Remove Decimal Numbers

複数人で制作するのに向いている

XDには共同作業出来る機能がついています。

そのため複数人で同じデータをリアルタイムで編集することが出来ます。

※web制作現場ではページ数の多いサイトは複数人で分けて制作することが多いです。その際XDの共同作業機能を使って制作します。

デザインに動きを加えることが出来る

おそらくXDが使われる一番の理由がこれです。

XDには様々なアニメーション機能があり、実際のwebサイトのような動きを実装することが出来ます。

XDで出来る一部のアニメーション

  • ページ遷移
  • ボタンホバー
  • 動画の再生
  • 画像のスライドショー など

上記は一部なので他にもありますよ。

それぞれのアニメーションの設定方法は下記の記事を参考にしてください。

あわせて読みたい
AdobeXDで画面遷移を設定する方法を紹介! XDで画面遷移する方法を知りたい この記事は上記の課題に向けて作成しています。 XDではプレビュー機能がありその中で画面遷移を設定することが出来ます。 画面遷移を設...
あわせて読みたい
【2022年版】AdobeXDでボタンホバーを作成する方法! XDでボタンホバーを作成する方法を知りたい この記事は上記の課題に向けて作成しています。 XDはカーソルを合わせると変化するボタンホバーが簡単に作成出来ます。 XDで...
あわせて読みたい
【2022年版】XDで動画を埋め込む方法を紹介! XDで動画を埋め込みたい この記事は上記の課題に向けて作成しています。 XDではデザイン上に動画を埋め込むことが出来ます。 共有することでデザイン上で動画の動きを確...
あわせて読みたい
XDのスクロールグループ機能で各方向のスクロールを確認する方法! XDで各方向のスクロールを確認する方法を知りたい この記事は上記の課題に向けて作成しています。 XDにはスクロールグループという機能があります。 スクロールグループ...

XDの始め方

既にAdobeCCに契約されている方は「Creative Cloud」からXDをインストールすることが出来ます。まだCCに契約していない方はXD公式サイトからインストール出来ます。
XDの始め方

XDの始め方を説明します。

既にAdobeCCに契約している方とそうでない方で始め方が異なります。

既にAdobeCCに契約している方

既にAdobeCCに契約している方は、Creative Cloudからインストールすることが出来ます。

「Creative Cloud」でXDの部分の「インストール」をクリックします。するとXDがインストールされます。
Creative Cloud

XDの箇所にある「インストール」をクリックするだけでインストールが実行されます。

AdobeCCに契約している方は簡単に始められますよ。

AdobeCCに契約していない方

まだAdobeに契約していない方は公式サイトよりインストールします。

※XDは月額1,298円(税込)で使用することが出来ます。また、初回のみ7日間の無料期間があります。ただし過去に無料期間を使用した方は使えません。

公式サイトからインストールする手順は下記の通りです。

XDを使う手順

  • XDをダウンロードする
  • XDをインストールする

XDをダウンロードする

XD公式サイトよりダウンロードします。

XD公式サイトより「無料で始める」を選択します。始めの7日間は無料でXDを使うことが出来ます。
XD公式サイト

XDをインストールする

ダウンロードが終わったら手順に従いインストールします。

インストールが終わったらアプリを開いて使うことが出来ます。

XDはweb制作に使用される!

XDはweb制作に使用されるデザインツールです。

実際のwebサイトのような動きを加えることが出来るのがXDの強みです。

これからwebデザインを学習したい方は是非XDを勉強してみてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次