まだ間に合う、XDのおさらい【これからはじめるXD】

はじめに

SketchやFigmaといったUIデザインツールが使われ始める中、PhotoshopやIllustratorでお馴染みのAdobeも「Adobe XD(Experience Design)」というUIデザインツールを半年ほど前に正式リリースしました。そこで今回はAdobe XDについて導入手順から基本操作までご紹介していきたいと思います！

Adobe XDとは

ここで簡単にAdobe XDについてご説明したいと思います。Adobe XDとはAdobe社が開発したUIデザインソフトです。従来のデザインソフト(Illustrator/Photoshop)に比べてとても動作が快適でWebサイトのようなたくさんアートボードが必要になるデザインでも動作が重くなるということはありません。（筆者はXDを使用する前はIllustratorでデザインをしていたのでこの快適さには驚きました）
また、Adobe製ということもありIllustratorやPhotoshopと画面構成や操作が似ているため、普段からAdobe製品を使用している方であれば違和感なく使用することができると思います。
（下はXDの画面になります。）

正式リリース前まではSketchに機能面で遅れていることもありましたが、月に１回ペースでアップデートがくるので、他のUIデザインソフトに引けを取らないものになっていると感じます。

また、SketchやFigmaと比べてUIの日本語表記に対応しているというのも大きなアピールポイントではないかなと思います。

導入手順

Adobe XDの導入手順について解説していきます。Adobe XDはAdobe CCの管理画面からインストールができます。

Adobe CCを契約していない方は、１ヶ月の体験版が使用できます。以下よりアクセスして体験版をダウンロードしてみてください。（Adobe公式サイトより）

体験版ダウンロードはこちらから

基本操作

では、早速AdobeXDを触っていきたいと思います。
立ち上げるとまず初期の設定画面が表示されます。

ここではデザインするアートボードを指定します。スマートフォンのWebサイトのデザインであればメニュー左側の「iPhone 6/7/8」を選択。任意の大きさを指定したい場合は右側の
カスタムサイズより指定します。

アートボードが表示されるので早速操作していきましょう。

まずは四角形ツールを使い背景のデザインから始めます。左側のメニューの四角のアイコンをクリック、またはキーボードのRキーで四角形ツールになります。任意の大きさにドラッグしてみましょう。

四角形を作成したら配置を調整してみましょう。左側メニューの一番上の矢印のアイコン、またはキーボードの「Vキー」
を押すことで選択ツールになります。選択ツールが選択された状態でマウスカーソルを先ほど作成したオブジェクトの角の方へ近づけることでオブジェクトの大きさや角度の変更ができます。

また、細かく大きさを指定したい場合や場所を正確に指定したい場合などは右側にプロパティがあるのでここで指定することができます。（ここら辺はIllustratorと同じですね）

（右側のメニュー画面。上から順にIllustratorではおなじみの「整列」や「分割・拡張」機能、オブジェクトの座標や大きさのメニュー、その右側には角度の調節も可能です。その下はアピアランスの画面になります（後述））

(上から順に、「選択ツール」「四角形ツール」「楕円形ツール」「直線ツール」「パスツール」「アートボード作成」「虫眼鏡ツール」です。)

色も右側のメニューに表示されている「アピアランス」の画面より設定ができます。「塗り」と「境界線」が指定できます。
クリックすることで詳細設定ができます。

文字入力に関しては左側の「文字ツール」かショートカット「T」で選択します。

文字を選択すると右側のメニューにテキストの項目が追加されるので、
ここでフォントサイズやフォントの種類字間の調節が行えます。

まとめ

今回は導入事例や簡単な操作についてご説明しました。
Bageleeでは【これからはじめるXD】という名前で今後もXDの機能等についてご紹介していきたいと思います。ぜひ今後の学習に役立ててください。