【入門者向け】はじめてのAdobe XD  基本ツールの使い方を紹介!

みなさんこんにちは!

新しいソフトを操作する時は、使い方・機能がわからない!と困りますよね。
そこで今回は、はじめてAdobe XDを使う初心者向けに、基本ツールの使い方についてご紹介します。

Adobe XDとは

Adobe XDとは、2016年にAdobeから発表された、WEB・アプリ制作に特化したソフトです。
初心者でも使いやすく、ワイヤーフレーム、アニメーション、デザイン、プロトタイプ、共同作業などの豊富な機能が搭載されており、作業効率化を図ることができます。
また、共有やコメント機能によりクライアント、制作関係者間との連携もスムーズです。

ただし、PhotoshopやIllustratorとは異なるため、画像編集やイラスト作成などの機能はありません。

それでは、Adobe XDの基本的な機能についてご紹介します。
Adobe XDの使い方を学びたいはじめての方は、ぜひ参考にしてください!

 

操作画面

操作画面には「ツールバー」「モード切替」「プロパティ画面」の3つがあります。fig28

①「ツールバー」・・・操作で使用するツール機能。
②「モード切替」・・・デザイン作成・プロトタイプ機能の追加・共有機能といった切替操作。
③「プロパティ画面」・・・詳細な設定ができる画面。

 

ツールバー

XDで使えるツールを以下にまとめました。
表の中にあるショートカットキーを覚えると作業効率があがります。

参考:https://helpx.adobe.com/jp/xd/help/keyboard-shortcuts.html(公式サイト)

fig01選択ショートカットキー:V(Win / mac)
ドラッグや「Shift」を押しながらクリックすると複数選択もできます。
fig02長方形

ショートカットキー:R(Win / mac)
「Shift」キーを押しながらドラッグすると正方形が描けます。
プロパティ画面、赤枠部分(以下『変形』と呼びます)のW(横)・H(縦)でサイズ調整することもできます。

fig16-1

fig03楕円形

ショートカットキー:E(Win / mac)
「Shift」キーを押しながらドラッグすると正円が描けます。

長方形と同様にプロパティ画面、変形のW(横)・H(縦)でサイズ調整することもできます。

fig04多角形

ショートカットキー:Y(Win / mac)
「Shift」キーを押しながらドラッグすると正三角形が描けます。
クリックしたまま「⇧」「⇩」キーを押すと角数の増減ができます。

プロパティ画面、アピアランスの赤枠部分を変更しても角数の増減ができます。

fig44

長方形と同様にプロパティ画面、変形のW(横)・H(縦)でサイズ調整することもできます。

fig05直線ショートカットキー:L(Win / mac)
「Shift」を押しながらドラッグすると45度ごとの直線が描けます。
プロパティ画面、アピアランスの赤枠部分の数値を入れると点線が描けます。

fig05-1

fig06ペン

ショートカットキー:P(Win / mac)
アンカーポイントで自由に矩形や線の作成や編集ができます。

fig07テキストショートカットキー:T(Win / mac)
クリックでポイントテキストを設置できます。
クリックしながらマウスを動かすと、エリア内テキストを設置することができます。
fig08アートボード

ショートカットキー:A(Win / mac)
ショートカットキーを押すと右側に様々なサイズのアートボードが表示されます。希望のサイズのアートボードをクリックすると、アートボード自動で生成されます。
プロパティ画面、変形の赤枠部分でも、任意のサイズ指定をすることもできます。

fig46

アートボードを選択し、ドラックするとアートボードを動かすことができます。

fig08-1

fig09ズーム

ショートカットキー:Z(Win / mac)
虫眼鏡アイコン(+)が表示されクリックすると拡大します。虫眼鏡で縮小したい時は「Opt / Alt」を押すと縮小します。

ショートカットキー:Ctrl  +「+ / -」(Win)/
Cmd  +「+ / -」、Cmd  +  マウスホイール(mac)

拡大・縮小ができます。

fig10ライブラリ

ショートカットキー:Shift + Ctrl + Y(Win)/ ⇧ + Cmd + Y(mac)
プロジェクトで使用するカラー・文字スタイル・コンポーネントなどの要素を一元管理する機能です。

fig11レイヤー

ショートカットキー:Ctrl + Y(Win)/ Cmd + Y(mac)
ドキュメント内の全てのアートボード・オブジェクト・グループを表示します。

fig12プラグイン

ショートカットキー:Shift + Ctrl + P(Win)/ ⇧ + Cmd + P(mac)
インストールしたプラグインが表示されます。

XDのファイル内で自由に移動したい時

fig13手のひら

ショートカットキー:スペースキー(Win / mac)
スペースキーを押しながらマウスをクリックし動かすとXD内を移動できます。

レイヤーパネル

fig29レイヤーパネルを表示したい場合は、赤枠部分の『レイヤー』アイコンをクリックしてください。
このパネル上にオブジェクト要素が追加されていきます。
要素ごとにグループ化すると管理しやすくなります。
※新しい要素ほど、上に追加されます。

 

fig14フォルダ

ショートカットキー:Ctrl +G(Win)/ Cmd + G(mac)
複数オブジェクトを選択した状態で「Ctrl / Cmd」 +「G」を押すとグループ化することができます。

グレーのフォルダ フォルダを閉じている状態

白いのフォルダ  フォルダを開いている状態

fig15画像

画像を配置したい時
ショートカットキー:Shift + Ctrl + I(Win)/  + Cmd + I(mac)
「ファイル」⇒「読み込み」⇒「指定フォルダ」から画像を読み込むこともできます。また、フォルダから直接ドラッグして読み込み・配置することもできます。

fig16長方形で
作成した
オブジェクト
長方形で作成したオブジェクト要素です。
fig17楕円形で
作成した
オブジェクト
楕円形で作成したオブジェクト要素です。
fig18多角形で
作成した
オブジェクト
多角形で作成したオブジェクト要素です。
fig19ペンで
作成した
オブジェクト
(パス)

ペンを用いて任意の矩形で作成されたオブジェクト要素です。

fig19-1

図形を編集したい時

fig19-2「長方形」「楕円形」「多角形」のオブジェクトをクリックし選択します。
fig19-3

選択したオブジェクトをダブルクリックし、アンカーポイントを選択すると編集することができます。

青いポイント    選択したアンカーポイント

白いポイント    選択していないアンカーポイント

fig19-4

曲線にしたい場合
アンカーポイントをダブルクリックして表示されるハンドルを操作して編集することができます。

fig31シェイプで
マスク

ショートカットキー:Shift + Ctrl + M(Win)/  + Cmd + M(mac)
複数のオブジェクトを選択し右クリックで「シェイプでマスク」を選択するとマスクされます。
※上に重なったオブジェクトの形にマスクされます。

シェイプを解除したい時
ショートカットキー:Shift + Ctrl + G(Win)/  + Cmd + G(mac)
シェイプオブジェクトを選択し右クリックで「マスクをグループ解除」を選択すると、マスクが解除されます。

fig35リピート
グリッド

ショートカットキー:Ctrl + R(Win)/ Cmd + R(mac)
プロパティ画面にある「リピートグリッド」をクリックして作成してください。リピートしたいオブジェクトを選択し、適用すると同じ要素が繰り返されます。

fig36

ピンクの部分を選択すると、スペースも均等に調整することができます。

fig45

リピートグリッドを解除したい時
「リピートグリッド」を再度クリックすると、リピートグリッドが解除されます。

fig33合体

ショートカットキー:Ctrl + Alt + U(Win)/  Opt + Cmd + U(mac)
プロパティ画面にある「合体」をクリックし作成してください。
重ねたオブジェクトを合体できます。

fig37

合体を解除したい時
「合体」アイコンを再度クリックすると、合体が解除されます。

fig30前面
オブジェクト
で型抜き

ショートカットキー:Ctrl + Alt + S(Win)/  Opt + Cmd + S(mac)
プロパティ画面にある「前面オブジェクトで型抜き」をクリックし作成してください。
前面の重なっているオブジェクトの形が型抜きされます。

fig38

前面オブジェクトで型抜きを解除したい時
前面オブジェクトで型抜き」アイコンを再度クリックすると、型抜きが解除されます。

fig32交差

ショートカットキー:Ctrl + Alt + I(Win)/ Opt + Cmd + I(mac)
プロパティ画面にある「交差」をクリックし作成してください。
重なった部分のみ型抜きされます。

fig39

交差を解除したい時
交差」アイコンを再度クリックすると、型抜きが解除されます。

fig34中マド

ショートカットキー:Ctrl + Alt + X(Win)/ Opt + Cmd + X(mac)
プロパティ画面にある「中マド」をクリックし作成してください。
重なった部分がくりかれます。

fig40

中マドを解除したい時
中マド」アイコンを再度クリックすると、中マドが解除されます。

fig23書き出し

①書き出し対象を選択したい時
ショートカットキー:Shift + E(Win)/ Ctrl + Cmd + E(mac)
写真・テキスト・図形などを書き出しの対象にしたい時に使用します。
複数選択もできます。

②選択したものだけ書き出ししたい時
ショートカットキー:Ctrl + E(Win)/ Cmd + E(mac)
「ファイル」⇒「書き出し」⇒「選択したオブジェクト」で選択したオブジェクトだけ書き出しすることもできます。

③チェックしたすべてを書き出したい時
ショートカットキー:Shift + Ctrl + E(Win)/  + Cmd + E(mac)
①でチェックを入れた写真・テキスト・図形をすべて書き出すことができます。
「ファイル」⇒「書き出し」⇒「全書き出し対象」でも同様の操作ができます。

fig41

書き出し対象のレイヤーは、書き出しアイコンが表示されます。
再度アイコンをクリックすると、書き出しを解除できます。

fig24ロック

ショートカットキー:Ctrl + L(Win)/ Cmd + L(mac)
レイヤーを選択しロックすると、移動や変更ができなくなります。

fig24-1

ロックしたオブジェクトには、ロックマークが表示されます。

fig42

ロックしたレイヤーは、ロックアイコンが表示されます。
再度アイコンをクリックすると、ロックを解除できます。

fig25非表示

ショートカットキー:Ctrl + ,(Win)/ Cmd + ,(mac)
選択レイヤーを非表示にしすることができます。

fig43

非表示にしたレイヤーは、非表示アイコンが表示されます。
再度アイコンをクリックすると、非表示を解除できます。

fig20マスター
コンポーネント

オブジェクトを選択し、右クリックで表示される「コンポーネントにする」を選択してください。選択オブジェクトをコンポーネント化することができます。
コンポーネント化した要素は一括で変更ができるので、管理がしやすく、作業効率があがります。

薄いグレー 選択していない状態

濃いグレー 作業中の状態

fig20-1

fig21複製された
コンポーネント

マスターコンポーネントから複製されたコンポーネントです。

POINT
複製されたコンポーネントには太い枠線が表示されます

濃いグレー 選択していない状態

     作業中の状態

fig21-1

fig22

複製・編集
された
コンポーネント

マスターコンポーネントから複製・編集されたコンポーネントです。
複製コンポーネントを修正してもマスターコンポーネントには反映されません。

POINT
複製 + 編集されたコンポーネントは太い枠線と「・」が表示されます

濃いグレー 選択していない状態

薄いグレー 作業中の状態

fig22-1

fig26アートボード

選択中のアートボードは青く表示されます。
名前をけて見分けできるようにすると、管理しやすくなります。

名称変更は、「アートボード」というテキストをダブルクリックして行ってください。

fig26-1

POINT
複数アートボードがある場合は、アートボードのアイコンをダブルクリックすると移動できます。

fig27ペースト
ボード

アートボード外にオブジェクトがある場合に、表示されます。
ペーストボードをダブルクリックすると、アートボード外のオブジェクトが一覧で表示されます。

まとめ

今回は基本ツールの使い方を紹介しましたが、いかがだったでしょうか。
XDには便利な機能が多くあり直感的に操作がしやすいので独学でも学習・習得しやすいツールです。ぜひXDを触ってみてください!

この記事をシェアする

Facebook Twitter LinkedIn note はてなブログ
アクセサイト編集担当

アクセサイト編集担当

マーケティングDX・営業DXに関連するお役立ち情報を投稿しています。
以下の公式SNSでも情報を発信していますので、ぜひフォローをお願いします!

SHARE

Facebook Twitter LinkedIn note はてなブログ
前の記事へ ブログ一覧へ戻る 次の記事へ