ZeroPlus Media > Web制作 > Webデザイン > Adobe XDの導入

Adobe XDの導入

Webデザイン

2022/07/23

2022/09/13

Webデザインをするためにはデザインツールを使える必要があります。

この記事では、Webデザインを作成するのに優れているAdobe XDのインストール方法と使い方を説明していきます。

また、Adobe XDの操作をより効率的に行うことができる便利なプラグイン（拡張機能）についても紹介しているので、ぜひ最後までご覧ください。

デザインツールを使おう
- デザインツールとは
- Adobe XD とは
Adobe XD のインストール
- Adobe アカウントを作成
- Windows OS と Mac OSの方のインストール方法
Adobe XD の使い方
Adobe XD のプラグイン
- Adobe XD にプラグインを入れる
- Adobe XD のおすすめのプラグイン
Adobe XD を使いこなそう！

デザインツールを使おう

Adobe XD をインストールする前に、デザインツールについての理解を深めていきましょう。

デザインツールとは

デザインツールとは、デザインを制作するツールの総称です。デザインソフトなどとも言われます。

有名なデザインツールとして、「Adobe Photoshop」「Adobe Illustrator」「Adobe XD」「Figma」「Sketch」などが例にあげられます。

デザインツールによってそれぞれ制作に向いているデザインの系統が違うので、違いを把握しておくことが大切です。

Adobe XD とは

Adobe XD とは、Adobe社が提供するUIデザインに特化したデザインツールです。

数あるデザインツールの中でも特に操作性に優れ、シンプルかつ簡単にデザインを作ることができます。

Adobe XD のインストール

次に、Adobe XD のインストール方法を説明していきます。

２０２２年の４月下旬から「Adobe XD」が有料化されました。そのためこの記事では、Adobe XDを購入する流れをご紹介します。

Adobe アカウントを作成

Adobe公式サイトにアクセスし、「ログイン」をクリックする

まずは、Adobeアカウントを作成します。

Adobe公式サイトにアクセスし、「ログイン」をクリックしてください。

Adobeアカウントを作成する

「Googleアカウント」「Appleアカウント」からもアカウントの作成が可能なので、自分が作りやすい方法でアカウントを作成しましょう。

Adobeアカウントの作成が終わったら、そのままログインして次に進みます。

Windows OS と Mac OSの方のインストール方法

Adobe XDのインストールは、Windows OS とMac OSで大きな違いはありません。

なので、どちらのOSを使っている方も、以下の手順に従ってインストールを続けていきましょう。

Adobe XDの公式サイトにアクセスして「購入する」をクリック

次に、Adobe XDの公式ページにアクセスします。
「購入する」と書かれたボタンがあるのでクリックして、次の画面へ進みます。

「メールアドレス」と「支払い方法」を設定する

次に、メールアドレスと支払い方法を設定します。

インストール用のファイルをダウンロードして開く

購入の手続きを進めていくと、インストール用のファイルがダウンロードされます。

Windows OSの方は「XD_Set-Up.exe」、Mac OSの方は「XD_Installer.dmg」がダウンロードされます。

「インストール用のファイル」を開いて、XDのインストールの準備を進めましょう。

「XD Installer.app」をダブルクリックする

こちらはMac OSを使っている方のみの説明です。

Windows OS の方は飛ばして次の説明に進んでください。

Mac OS の方は「XD_Installer.dmg」を開くと、画像のような画面になります。

次に、「XD Installer.app」を起動してAdobe XDのインストールを進めていきましょう。

「続行」をクリックし、パソコンのパスワードを入力する

「XD_Set-Up.exe」または「XD Installer.app」を開くと画像のような画面になります。

そのまま「続行」のボタンをクリックしましょう。

インストールのためにパソコンのパスワードが求められるので、入力します。

事前に作成したAdobeアカウントでログインする

ログイン画面が出てきたら、先ほど作成したAdobeアカウントでログインします。

「インストール開始」をクリックする

「インストール開始」のボタンをクリックすることで、XDのインストールが始まります。

アンケートに答えて待機する

XDのインストールが始まったらアンケートの画面が出てきますので、回答しながら待機しましょう。

「Adobe Creative Cloud」から「開く」をクリックする

インストールが完了すると、「Adobe Creative Cloud（Adobe CC）」が起動します。

インストール済みの項目からXDの「開く」をクリックしましょう。

XDが起動すれば完了

XDが起動すると、XDのホーム画面が出てきます。

この画面が出てくればXDのインストールは完了です。

Adobe XD の使い方

次に、Adobe XD の使い方を簡単に説明していきます。

デザインファイルの開き方

「開く」をクリックする

Adobe XDのホーム画面から「開く」をクリックして開きたいファイルを選択します。

開きたいファイル形式を選択する

最近開いた項目はホーム画面に表示されるので、そちらからも開くことができます。

開きたいファイルをダブルクリックでも可能

xdファイルをそのままダブルクリックしてもAdobe XDでファイルを開くことができます。

画面の見方

次に、Adobe XDの画面の見方を説明していきます。

画像はAdobe XDの操作画面になります。

この操作画面全体を「ワークスペース」といいます。

Adobe XDのワークスペースは大きく分けて３つに分けることができます。左から「ツールバー」「アートボード」「プロパティインスペクター」です。

ツールバー

ツールバーはデザインを作成するために必要なツールが並んでいます。

Adobe XDの操作は、この９つのツールを駆使してデザインを作成していきます。

Webデザインを作成する際に、特によく使う３つに「*」をつけました。まずは、「選択ツール」「長方形ツール」「テキストツール」を使えるようになりましょう。

操作の基本は「選択ツール」

「要素を作成→選択ツールで要素を選択→プロパティで値を変更」が基本的なAdobe XDのデザイン制作の流れになります。

アートボード

アートボードは、デザインを作る際の画用紙のようなものです。

アートボードの上に配置されている要素が最終的に画像として書き出されます。

作成するデザインの大きさに応じて、作成するアートボードの大きさは変わります。

例えば、パソコン用やスマートフォン用によってアートボードを分けて作成します。

プロパティ

プロパティは、作成した要素の大きさや色などの値を設定する箇所です。

XDのデザインデータを見ながらコーディングする際には、このプロパティを理解している必要があります。

基本のプロパティ

それぞれの項目が何のCSSのプロパティを表しているのかを把握できるようになりましょう。

テキストのプロパティ

テキストを編集する際も、どの項目が何のCSSプロパティに対応しているかを把握しておくことが必要です。

操作	ショートカットキー
選択ツール	V
長方形ツール	R
テキストツール	T
アセットパネル（ライブラリ）	⌘ Shift Y
レイヤーパネル	⌘ Y
プラグインパネル	⌘ P
グループ化	⌘ G
グループ化解除	⌘ Shift G
最前面へ移動する	⌘ Shift }
前面へ移動する	⌘ }
背面へ移動する	⌘ {
最背面へ移動する	⌘ Shift {
シェイプでマスク	⌘ Shift M