Adobe XD入門

Adobe XDを使ってみる
初級編

アジェンダ
0.Adobe XDとは？
1.アートボードを作る
2.四角を作る
3.丸を作る
4.線を引く
5.テキストを入力する
6.ペンツールを使う
7.ズームしてみる
8.オブジェクトを選択する
9.角丸を調整する
10.グラデーションを作る
11.パスの操作
12.リピートグリッドを作る
12-1.リピートグリッドで塗りつぶす
12-2.奇数行/偶数行で色が違う表
12-3.左上に伸ばせるリピートグリッド
13.プロトタイプでリンクする
14.スクロールさせる
15.公式UIKitの紹介

0.Adobe XDとは？
３つのステップを１つのソフトで実現するAdobeの新しいソフト。
動作も軽快で、非常にわかりやすいUIで出来ているのが特徴。

起動すると出てくる各種アートボードのサイズから、
任意のアートボードを選択して作成します。

アートボードを２つ３つと増やす場合には、
ツールチップ画面からのアイコン
（ショートカットはA）を選択し、
複製したい元のアートボードをクリックします。

2.四角を作る
ツールチップ画面のを（ショートカットはR）クリックすると四角が作れます。
Shiftを押しながら伸ばしていくと正方形になります。
右画面にある「アピアランス」から
・塗りの透明度
・角丸
・塗り色
・境界線の太さ/色
・シャドウ
・背景のぼかし
の設定が行えます。

3.丸を作る
丸も四角と同様にツールチップのから（ショートカットはE）作成が行なえます。
Shiftを押しながら広げると真ん丸になります。
丸に関しても右画面の「アピアランス」から
四角と同様の操作ができます。（角丸以外）

4.線を引く
ツールチップのから（ショートカットはL）作成が行なえます。
Shiftを押しながら引くと０℃、45℃、90℃の方向に真っ直ぐな線が引けます。
線に関しても右画面の「アピアランス」から
・線の太さ/色
・シャドウ
が設定できます。

5.テキストを入力する
ツールチップのから（ショートカットはT）テキスト入力が行なえます。
右画面の「テキスト」から
・フォント
・フォントサイズ
・フォントの太さ
・行揃え
・文字の間隔
・行間
「アピアランス」から
・塗り色
・シャドウ
が設定できます。

ツールチップのから（ショートカットはP）ペンツールを使うことが出来ます。
作成したオブジェクトに対しては、
右画面の「アピアランス」から
・塗り色
・シャドウ
の設定が行なえます。
その他、ベジェ曲線が引けます。

ペンツールを使用すると、左右にベジェ曲線が描けるハンドルが
出ますが、そのパスをダブルクリックすることでハンドルを
消したり付けたりすることが出来ます。（図１、図２）
また、ペンツールは既存のオブジェクトに対して新たなパスを
自由に追加することが出来ます。
各オブジェクトは、オブジェクト選択ツールでダブルクリックをすると
パスモードに切り替えることが出来ます。（図３）
この状態でオブジェクトの線上をクリックすると新たにパスを
追加できます。
もちろん、パスをダブルクリックでハンドルの付け替えが可能です。図３
図１図２

7.ズームしてみる
ツールチップのから（ショートカットはZ）ズームアウト/ズームインが出来ます。
ズームツール時にクリックするとズームインします。
ズームアウトする場合はOptionを押しながらクリックします。
ショートカットでは、Command + +、Command + - で
ズームイン/ズームアウトが可能です。

8.オブジェクトを選択する
ツールチップのから（ショートカットはV）オブジェクトを選択出来ます。
選択されたオブジェクトは右のように
青枠で囲まれた状態になります。
この状態になっている場合はドラッグ＆ドロップで
移動をしたり、色変更などの各種エフェクトが
使用可能な状態になっています。

角丸はプロパティインスペクタ以外からも調整可能です。
図の赤枠部分をドラッグすると調整可能です。
そのままドラッグすると四方が変わりますが、
Optionを押しながらドラッグするとその四隅だけ角丸が調整可能です。
こんな感じです。
9.角丸を調整する

塗りをクリックすると、カラーピッカー上部に
ベタ塗りとグラデーションを変更できる
プルダウンがあります。（図１）
グラデーションにすると、グラデーションが
かかった状態となり、
制御用の印が表示されます。（図２）
丸印の距離を短くしたり横にしたりすることに
よって、グラデーションのかかり具合を
調整できます。（図３）
10.グラデーションを作る
図１
図２
図３

【パスの合体】
オブジェクト同士を合体（１つのオブジェクトにする）ことができます。
このように、２つ以上のオブジェクトを選択した状態で右画面の「合体」をクリックすると、
１つのオブジェクトにすることが出来ます。
11.パスの操作

【パスの型抜き】
前ページのオブジェクトを型抜きすると下記のようになります。
【パスの交差】
交差の場合下記のようになります。
交差している部分だけがオブジェクトとして残ります。
11.パスの操作

【パスの中マド】
中マドすると下記のようになります。（わかりづらいので灰色で塗りつぶしてあります。）
11.パスの操作

各オブジェクトは合体・型抜き・交差・中マドをしても編集が可能で、
例えば合体したオブジェクトの場合、
このような形のオブジェクトで、
このオブジェクトだけを右図のように移動させた場合、
このような形に変更を加えることが可能です。
11.パスの操作

このような操作はテキストのオブジェクトでも可能です。
左図のようなオブジェクトも、中マドをすると…。
このようにテキストも中マドが出来ます。
色とボーダーは背景にある側に揃うので注意です。
11.パスの操作

連続して同じ要素を作りたい場合はリピートグリッドを使います。
要素をグループ化して右画面のリピートグリッドをクリックします。
要素がリピートグリッドモードに切り替わります。

このまま下方向に引っ張ると下方向に連続して同じ要素が並びます。（図１）
右方向に伸ばした場合も同じです。
要素間の余白も変更可能です。（図２）
図１
図２

また、リピートグリッド状態では一つの要素を更新するとすべての要素が更新されるので、
更新性が非常に良い状態になっています。
図のように１つ目のシェイプの形を変えると全体に適用されます。
また、画像を３枚一気にドロップした場合でも、シェイプにマスクされて当てはまります。

リピートグリッドをグループ化すると右下に引き伸ばすことができます。
これを使用するとパターンで塗りつぶしたりすることが可能です。
12-1.リピートグリッドで塗りつぶす

下地になる色違いのリピートグリッドの表を作ります。（図１）
テキストレイヤーを作成し、下地の表と全く同じ大きさにして
配置し、リピートグリッドにします。
２つをグループ化すると奇数行/偶数行で色が違う表が完成します。
12-2.奇数行/偶数行で色が違う表
図１

左上に伸ばしたいリピートグリッドのオブジェクトをリピートグリッド化します。
該当のリピートグリッドを180℃回転させます。
オブジェクトを選択し、ダブルクリックした後、「編集＞すべて選択」を行い、
この状態で180℃回転させます。
これで左上に伸ばせるリピートグリッドが出来上がります。
12-3.左上に伸ばせるリピートグリッド

上部の「デザイン」タブから「プロトタイプ」タブに変更します。
要素を選択するとリンクマークが出てきてリンクが設定できます。
トランジションやイージングを設定します。

右上の「▶」マークから、プロトタイプを確認できます。
設定したリンクがプレビューできるので、確認してみましょう。
https://xd.adobe.com/view/88626ad4-67dc-
4d27-b3fe-de6713c6a119/

記事が長くなってきた場合、スクロールを設定することが出来ます。
右画面の「スクロール」から垂直方向を選択します。
14.スクロールさせる
点線がある位置でスクロールするようになるはずです。
プレビューで確認してみましょう。

公式で一般的に使うようなUIを一式のファイルにして公開しています。
ダウンロードは下記から可能です。
https://storage.googleapis.com/material-
design/publish/material_v_11/assets/0BwUHyfgaED5veTZucHk4Z2U3QzA/stickersheet_compo
nents.xd
もしXDで何か作業する際は一度見ておくと参考になるかもしれません。
15.公式UIKitの紹介

・非常にキビキビ動くことにびっくりした。Adobe製品とは思えないほどの軽快な動作だった。
・リピートグリッドなど、デザインをやっていて煩わしい部分をうまく解消していると思う。
・今回は紹介してないが、コーダーにとっても便利な機能があり、流行ってほしいと思うツールの一つ。
・現時点でデザイナーがデザインする際にも使うことができると思うが、
やはりワイヤーフレームを作るという部分において効率的な作業が可能なツールの一つという認識。
Adobe XDを使ってみて

Adobe XD入門

Recomendados

Recomendados

Mais conteúdo relacionado

Mais de GIG inc.

Mais de GIG inc. (20)

Adobe XD入門