Adobe XDの使い方！初心者のための25の基本スキルマスター方法

Webデザインでよく使われることが多いAdobe XD（Adobe Experience Design）。Adobe社が提供している、ワイヤーフレーム・デザインカンプ・プロトタイプ作成に必要な機能がまとめられた、UI/UXデザインツールです。

今回は、そんなAdobe XDの入門編として、知っておいて欲しい操作と機能をまとめました。XDだけではなくAdobeソフト未経験・初心者の方でもわかるよう、基本の基本から順に紹介します。

• Adobe XD超入門、最初に知りたい5つのこと
• Adobe XDの基本①基本操作と図形描画
• Adobe XDの基本②画像と文字の配置
• これぞXD! Webデザインに役立つ便利機能

Adobe XD超入門、最初に知りたい5つのこと

1.Adobe XDでの新規作成・保存

Adobe XDを起動すると、最初に新規作成か、既存のドキュメントを開くかを聞かれる画面が開きます。初めて使う場合は新規作成して、分かりやすいドキュメント名をつけて保存しましょう。

初心者でもわかる！Adobe XDの使い方 新規作成&保存とドキュメントの開き方
http://e-adshin.com/adlab/6187

2.XDのワークスペースを知る

XDでドキュメントを開くと、下図のような画面が表示されます。
この画面全体をワークスペース、もしくはデザインワークスペースと呼びます。

上部や左右のメニューのような部分には、それぞれ名前がつけられています。
最初から全て覚える必要はありませんが、以下3つは把握しておきましょう。

• メインメニュー
• ツールバー
• プロパティインスペクター

ワークスペースの基本 - Adobe XD ユーザーガイド
https://helpx.adobe.com/jp/xd/help/workspace-basics.html

3.XDのデザインモードを知る

XDのメインメニューの下には、下図のようにデザイン・プロトタイプ・共有という３つのメニューが表示されています。

これは表示モードの切替部分です。
今までPhotoshopやIllustratorで行ってきたようなWebデザイン、デザインアイテムを配置していくような作業時には“デザインモード”を使用します。

UI、UX、プロトタイプ作成ツール、Adobe XD の使い方・方法
https://knowledge.cpi.ad.jp/tech/165/

4.XDのアードボードサイズ変更・追加

Wevデザインでは1アートボード＝1ページ（1画面）でデザインしていくのが基本です。それぞれのページデザインをしたアートボードを並べて表示、レスポンシブデザインの場合は幅の違うアートボードを並べることも多いです。

必要分のアートボードを作成し、ページのコンテンツ量にあった長さに調整する方法を知りましょう。

Adobe XDのアートボードの使い方を解説する【初心者向き】
https://miya-system-works.com/blog/detail/adobe-xd-howto-art-board/

5.XDでの表示倍率の変更・画面移動

Adobe XDで画面の表示倍率を変更するには、ワークスペース右上の表示倍率や、ズームツール（ツールバーの虫眼鏡アイコン）を使用します。
100%表示や、全てのアートボードが表示されるまで縮小などはショートカットを覚えておくと便利です。

Adobe XDをもっと使いこなすヒント！ 第4回 思い通りにズームする
https://blog.adobe.com/jp/publish/2018/07/27/web-xd-protips-4-zoom

また、XDで画面（アートボード表示部分）を上下左右に移動したい場合は、ハンドツールを使います。Illustratorなどのようにハンドツールや上下スクロールバーが表示されていないので戸惑いますが、spaceキーを押すとカーソルが手のひら型に変わり、そのままspace+ドラッグで移動できます。
macの方はトラックパッドで2本指でスワイプでも動かせます。

まずは無料の7講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする

Adobe XDの基本①基本操作と図形描画

6.XDで図形を作成する

ワークスペース右側、ツールバーにある長方形ツールや楕円ツールを使用するとアードボードに図形を描くことが出来ます。
Shiftキーを押しながらドラッグすると正方形や正円になります。
多角形ツールを活用すると、星も簡単に作れますよ。

【Adobe XD】マネしたい！シェイプの使い方を具体的に解説
https://shuns.me/?p=3779

7.XDでのオブジェクトの拡大縮小・回転

アートボード上のオブジェクトを選択すると、拡大縮小や回転が出来ます。
ドラッグすると位置も変更可能です。

Adobe XDの使い方
https://www.pc-koubou.jp/magazine/23532#section02-01

8.XDでオブジェクトを整列・分布させる

オブジェクトの整列・分布を活用して、デザインアイテムをきれいに並べられるようになりましょう。

オブジェクトの整列、分布
https://xdtrail.com/align-distribute-objects/

9.XDでのアンカーポイント選択・編集

アンカーポイントを使った編集が出来ると、より自由なデザインができるようになります。

【第4回】Adobe XDの図形の描き方　その3　アンカーポイントの編集・ペンツールの使い方

10.XDで塗り・線・角の設定をする

XDではオブジェクトの塗りと線の色、線の太さなどはプロパティインスペクター内で設定します。角丸や線の形状、シャドウなどの効果設定も近い位置にまとまっているので分かりやすいですね。

グラデーションの設定

円形・線形のグラデーションも簡単に作成できます。

【初心者必見】誰でもできるAdobeXD グラデーションのかけ方！
https://zeroichi.app/media/web-design/4009/

11.レイヤーの順序を入れ替える

XDでは、新しく描画したオブジェクトが前面のレイヤーとして表示されていきます。例えば、後から背景を付け加えたくなった、など、重なり順を変更したい場面は多いので、早い段階で覚えておくと便利です。

オブジェクトの配置
https://xdtrail.com/arrange-objects/

作業時間短縮のためショートカットを覚えることをおすすめします。

12.パスファインダー（ブーリアン）を使う

Webデザインをしていると、シェイプ（図形）を組み合わせてアイコンを作りたい、などの場面も出てきます。XDには“ブーリアングリープ”という、Illustratorのパスファインダーのような機能がついているので、複合シェイプおよび複合オブジェクトの作成も可能です。

ブーリアンはプロパティインスペクターにあります。

使用できるオプションは以下の4つ。

• シェイプを結合
• 前面オブジェクトで型抜き
• シェイプ範囲を交差
• シェイプが重なる領域を中マド

ブール演算とマスキングテクニックを使用したオブジェクトの編集
https://helpx.adobe.com/jp/xd/help/combine-mask-objects.html

Adobe XDの基本②画像と文字の配置

13.XDのアートボードに画像を挿入

XDで作成中のデザインに画像を挿入するには、2つの方法があります。

• A:ファイルメニュー→読み込み
• B:アートボード上に画像をドラッグ

配置された画像は、図形と同じように移動・拡大縮小・回転などの操作が可能です。

14.XDで画像をマスクする

挿入した画像をトリミングしたい（一部分だけ使いたい）、円く切り抜きたい、などの場合は「マスク」を使用します。
わかりやすいXDでのマスクの適用方法として、トリミングしたいサイズ・形状の図形を重ねて“シェイプでマスク”があります。Illustratorのクリッピングマスクと同じ感覚です。

• Windowsの場合 ： Ctrl+Shift+M
• Macの場合 ： cmd + shift + M

その他にも、何通りかマスクの適用方法があります。
以下のページでは、Adobe XDでマスクをかける方法の種類と違いを、わかりやすく紹介してくれています。

Adobe XDの３つのマスクのかけかた
https://wb-hp.com/blog/2019/07/03/xd_masking.html

15.XDでテキストを追加する

アートボードにテキストを入力したいときは、ツールバーのテキストツール（Tのアイコン）を選択します。テキストツール選択状態でアードボードをクリックすると、文字入力が行えます。

文字色やサイズを設定・変更する

テキストツールで入力した文字は、右側のプロパティインスペクターから見た目の変更・調整が可能です。フォントや文字サイズ、文字揃えの設定は“テキスト”の項目、文字の色や透明度は“アピアランス”項目から変更できます。

テキスト関係の設定に関しては、Adobe XD Trailのテキストツール紹介動画が分かりやすいです。各項目を逐一紹介してくれていますので「グラフィックソフトにあまり馴染みがなくて、アイコンを見てもよくわからない！」という方は、ぜひ見てみてください。

テキストツール 1/2（テキストの作成と編集）
https://xdtrail.com/text-tools/

16.ポイントテキストと固定サイズを使い分ける

Webデザインでは、決められたサイズ内で文字を配置したい箇所も多くあります。そんな時に便利なのが、あらかじめテキストを表示する幅・高さを決められる“固定サイズ”（エリア内テキスト）です。

切り替えはプロパティインスペクターの“テキスト”項目内、オレンジの線で囲った部分で行うことができます。

ポイントテキストとエリア内テキストの違い、テキストの設定方法をもっと知りたい方は以下の記事がおすすめです。

【XD】テキストタイプの変更・サイズ・文字間隔・行間の調整方法を解説
https://bamka.info/xd-text/

17.アピアランスをペースト

アピアランスをペーストとは、コピー元のオブジェクトの塗りや線・フォント・ドロップシャドウなどのスタイルのみをペーストすることが出来る機能です。
角丸の角度なども引き継がれるので、作業スピードをアップしながら統一感のあるWebサイトデザインを作成しやすくなりますよ。

アピアランスをペーストは以下のショートカットで行なえます。

• Windowsの場合 ： Ctrl+Alt+V
• Macの場合 ： Cmd+option+V

【Adobe XD】「アピアランスをペースト」で出来ること【まとめ】
https://drawthinks.com/adobe-xd-appearance-paste/

これぞXD! Webデザインに役立つ便利機能

18.XDでレイアウトグリッドを設定する

Webデザイン、特にレスポンシブWebデザインの場合は、グリッドシステムというレイアウト手法が多く使われています。グリッドレイアウトのWebページは、デザイン段階から要素がグリッドに沿って配置されるよう設計する必要があります。

ウェブデザインツールであるAdobe XDには、レイアウトのガイドラインとなるグリッドを簡単に作成する機能も備わっています。
基本の使い方は、アートボード選択状態で、右側に表示されているプロパティインスペクターの“グリッド”にチェックを入れるだけ。

ただし、最大コンテンツ幅が決まっている場合などは、列（1グリッド）の幅や“リンクされた左右のマージン”を自分で計算して入力する必要があります。よくわからん！という方は、ひとまず他人が推奨している設定を使ってみるのも◎。

Adobe XDで設定するレイアウトグリッドの最適解。
https://www.tagtec.net/xd-grid-layout/

19.XDのコンポーネントを活用する

XDでは“コンポーネント”という機能を使うことで、ボタンやナビゲーションなどのデザインパーツを部品のように扱うことが出来ます。

コンポーネントが便利なのは一括管理ができること。作ったデザインパーツをマスターコンポーネントとして保存し、他の場所に配置すしておくと、マスターコンポーネントを編集するだけで一括変更ができます。
もちろん「ここのパーツだけ文字を変える」など、個別に変更もできます。

【Adobe XD】コンポーネント機能を分かりやすく解説【初学者向け】
https://teru1213.com/xd-component/

20.XDのリピートグリッドを活用する

Adobe XDの便利な機能として外せないのが“リピートグリッド”。
リピートグリッドは、上下左右にドラッグするだけでデザインパーツの複製と配置が出来ます。記事一覧のように同じデザインが繰り返されるパートを、非常に効率よく作成することが可能です。

リピートグリッドがどんな機能か、基本的な使い方は、以下のAdobe XD Trail動画をご確認下さい。とてもわかりやすく、使い方も意外と簡単。

下記サイトでは、リピートグリッドのコンポーネント化やスタック機能も紹介されています。
活用できると、よりWebデザインの制作がスムーズに進められるでしょう。

【Adobe XD】リピートグリッド機能を分かりやすく解説【初学者向け】
https://teru1213.com/xd-repeat/

21.XDの「レスポンシブサイズ変更」を活用する

XDでは、オブジェクトのサイズを変更する際、要素の配置やサイズを自動的に調整する“レスポンシブサイズ変更”という機能が搭載されています。

デバイスごとのデザインを作る際、デザインアイテムを複製して、それぞれ良い具合の位置に配置していく……という地道な作業があります。ある程度その作業を自動で行ってくれると、作業効率アップに繋がりますね。

レスポンシブサイズ変更とレイアウトの制約
https://helpx.adobe.com/jp/xd/help/using-responsive-resize.html

22.プロトタイプでインタラクション（画面遷移）を表現

Adobe XDはリンクをクリックしてページを遷移するなど、実際にブラウザでWebページを見ているような感覚で確認できる“プロトタイプモード”が搭載されています。

プロトタイプではインタラクションという仕組みを使って、遷移先のアートボードとリンクを繋げていきます。プレビューモードで確認すると、青い線（インタラクション）で繋がったところが<a href ="">で囲ったように、リンクされた状態になっています。

実務で活かせる！Adobe XDの基本と「プロトタイプ」機能の使い方
https://www.pc-koubou.jp/magazine/29086#section02

23.XDのステート機能で動きをつける

Adobe XDのコンポーネントには、デザインパーツを部品化して管理できることに加えて、「ステート機能」という1つのコンポーネントに複数の状態を設定しておくことが出来る機能も用意されています。

• 要素にマウスが重なったとき
• ハンバーガーメニューの開閉表示
• スライダーで切り替わる画像

などなど、IllustratorやPhotoshopでは「～したとき」の表示を作って並べることが多いです。が、XDではステート機能を使い、1つのアートボードで完結させることが出来ます。

設定したステートはプレビューモードで確認可能。
実際のWebページでどう機能するのか伝わりやすいですね。

下記サイトではWebデザインで特によく使われる、ホバー表示、カルーセル、ハンバーガーメニューの作り方が紹介されています。

Adobe XDステート機能を使いこなそう！
ホバー、カルーセル、ハンバーガーメニューの効率的な作り方
https://ics.media/entry/200305/

24.XDでプレビューを共有する

Adobe XDで作成したデザインデータは、「共有」モードから確認用URLを発行することができます。ファイルをやり取りする形ではないので、Adobe XDがインストールされていない環境でもURLを開けばOK。デザイナー以外の方にも親切な機能です。

【超便利】AdobeXDのデータ共有方法を徹底解説！（エラー対処法もご紹介）
https://crestadesign.org/xd-share/

インタラクションやステートを設定すれば、実際のWebページに近い状態でみせることができるので、クライアントへの説明もしやすくて良いですね。

25.プラグインを活用してもっと効率的に！

Adobe XDはプラグインを使って、標準機能を拡張することが出来ます。
例えば、アイコンフォントを使えるようにしたり、整列機能を強化したり、カラーパレットを追加したり…。自分に必要な機能（プラグイン）をインストールして、更に作業効率を高めていきましょう。

【Adobe XD初心者必見！デザイナー目線で選んだおすすめプラグイン5選
https://blog.nijibox.jp/article/xd_plugin/

XD自体の操作方法や活用方法を紹介した記事も多いですし、Adobe XD TrailなどAdobe公式のチュートリアルも素晴らしいラインナップです。
利用しているユーザーが多く、わからないことはすぐに調べられるので、モチベーションを保てれば独学でも学習・習得しやすいです。