Adobe XDの便利な機能をご紹介！【初心者・入門者向け】

Adobe XDとは、Adobeが販売しているベクターベースのプロトタイピング作成ツールです。Adobe IllustratorやAdobe Photoshopなどと違い「プロトタイプ」「コンポーネント」の機能が備わっており、よりUI/UXデザイン向けに開発されています。「思考の速さでデザインする」というスローガンを掲げており、素早い操作が可能です。

基本的な機能としては、以下のようなものがあります。

・デザイン作成
Adobe XDのメインと言える機能で、初心者でも直感的かつ簡単にデザインがおこなえるインターフェースになっています。

・プロトタイプ作成
プロトタイプとは、Webサイトの設計に問題がないかを確認するための試作品のことです。Adobe XDではコーディングをせずに、Webサイトの実際の動きを再現し、確認することができます。

・デザインの共有
URLを作成、送信するだけで簡単にデザインを共有することが可能です。デザインの編集後は同じURLのまま更新をするだけで、すぐに最新の状態を確認することができます。

・共有編集
制作しているデザインをクラウド上に保存し、他のデザイナーを招待するだけで共同編集が可能です。また編集履歴が残せるので、誰がいつどこを編集したのかがわかります。

Adobe XD 公式サイト

ヘッダーやナビゲーション、見出し、ボタンなど、複数ページで繰り返し使用されるデザインパーツを管理する機能です。コンポーネント化したデザインパーツはすぐに呼び出すことができ、さらに一括で編集できるのでとても効率的です。

コンポーネント化したいオブジェクトを作成し、選択した状態で右クリックし「コンポーネントにする」を選択するだけでコンポーネントを作成できます。

コンポーネントは大きく2種類に分けられ、それぞれの性質が異なります。

・メインコンポーネント：コンポーネントの元になっているオブジェクト
メインコンポーネントを編集すると、サブコンポーネントにも反映されます。すべての色などを変更したい場合は、メインコンポーネントを編集します。

・サブコンポーネント：メインコンポーネントの複製
サブコンポーネントを編集しても、ほかのサブコンポーネントやメインコンポーネントには反映されません（オーバーライドされたインスタンス）。

コンポーネントによる作業

デザイン制作で繰り返し使用するカラー、文字スタイル、コンポーネント、オーディオアセットを保存して、管理・共有ができる機能です。保存しておいたカラーや文字スタイルを編集すると、ドキュメントアセットを使用した要素すべてに反映されます。

保存したい要素が含まれているオブジェクトを選択した状態で、画面左側の「＋」ボタンをクリックするとドキュメントアセットを保存できます。

Adobe XD でドキュメントアセットによる作業

同じオブジェクト（要素）を繰り返し複製したいときに便利な機能です。Webサイトでよく見られる一覧表示などのデザインを作成する際、効率よく作業ができます。

繰り返しオブジェクトの作成

固定された表示エリアの中で、オブジェクトをスクロールできる機能です。Webサイトでよく見られるカルーセルや、Googleマップの埋め込みなどの再現が可能です。

スクロールさせたいオブジェクトを選択し「水平方向のスクロール」ボタン（もしくは「垂直方向のスクロール」）をクリックするだけで使用できます。

Adobe XD でスクロールグループを作成する

グループ内のオブジェクトの並び替えや調整を、直感的に操作できる機能です。オブジェクトのサイズが変動しても、設定した余白や方向は自動で保持されるので修正や変更が簡単にできます。

オブジェクトをグループ化し、グループを選択した状態で画面右側の「スタック」にチェックを入れるだけで使用できます。上下や左右に並んでいるオブジェクトをドラッグ&ドロップすることで、順番の入れ替えが可能です。

スタックを使用して動的なデザインを作成する

すべてのAdobe製品が使えるプランです。すでにこのプランを契約済の方は、追加料金無しでAdobe XDを使用できます。

※初めての方は7日間の無料体験が利用できます。

Creative Cloud コンプリートプラン

Webデザイナーならば使えるようになっておきたいAdobe XDについて紹介しました。直感的に扱えるインターフェースとたくさんの便利な機能のおかげで、初心者でも扱いやすいデザインソフトです。初めての方は7日間の無料体験が利用できますので、ぜひこの機会にAdobe XDの使いやすさを体感してみてください。