Adobe社が提供する「XD」は、デザイナーにとって欠かせないソフトの1つです。

Webサイトやアプリなどのデザイン制作・編集などに使われるデザインオールインワンツールとして知られています。

この記事ではAdobe XDの概要や利用までの流れ、さらにXDで出来る作業や便利機能の例をご紹介します。

Adobe XDとは

「Adobe XD」は、 Adobe社が提供しているUI/UXツールで、主にWEBサイトやモバイルアプリ、音声デバイスのUI/UXをデザインするために使用されます。

それまではAdobeのPhotoshopやIllustratorが主流でしたが、使い勝手のいいXDが登場したことで、さらに効率よく作業を進められるようになりました。

ワイヤーフレームやプロトタイプの制作が可能であるほか、 作成したデザインの共有もスムーズであるため、仲間やクライアントとの共同作業にもピッタリです。

実務で活かせるレベルまで上達することは簡単ではありませんが、公式サイトでも初級〜中級者向けのスターターキットを用意し、基本的なスキルアップを助けてくれるのも魅力の1つ。

また、ソフトは日本語に対応しているほか、解説本も出版されているので、デザイン未経験者でもトライしやすい環境が整っています。

Adobe XDの利用方法

Adobe XDは、プランによって無料または有料で使用できるソフトウェアです。

利用する際はプランを選択して料金を支払い、パソコンにインストールするというステップを踏みます。

XDの料金システム

XDの有料プランは月額、または年額で契約する必要があります。

ほかのソフトと違ってXDには期限なしの無料プランがあるため、7日間の無料体験版は提供されていません。

ソフトを契約するとMac・Windows・iPadにインストールでき、アップデートなどが追加料金なしで利用できます。

＜XD スタータープラン料金＞

・月額料金：無料

・年額料金：無料

＜XD 単体プラン料金＞

・月額料金：1,298 円（税込）

・年額料金：15,576円（税込）

さらに、 Adobe XDを含むAdobe Creative Cloudのアプリを20以上も利用できる「コンプリートプラン」もあります。

XD以外には、定番のPhotoshopやIllustrator、そして動画編集ソフトのPremiere Proなどが利用可能です。

＜個人用コンプリートプラン料金＞

・月額料金：2,728 円（税込）

・年額料金：28,776円（税込）

デザイナーとして仕事をする場合、Adobe XDのほかにも使用するソフトが出てくるので、単体でそれぞれ契約するよりもコンプリートプランを契約したほうがお得です。

XDのインストール方法

XDのインストール方法は、他のソフトをパソコンにインストールする手順と同じです。

まずはCreative CloudのWEBサイトからXDの詳細ページに移動し、希望のプランを選択しましょう。

そしてパソコンにソフトをダウンロードし、画面の指示に従ってインストールをすることで、すぐに利用できる状態になります。

Adobe XDでできること

Adobe XDはこれまで時間をかけていた作業を効率化してくれる、デザイナーにとって欠かせないソフトです。

ここからは、そんなAdobe XDでできる主な作業についてご紹介します。

レイアウト・デザインの制作

まずは「レイアウト・デザインの制作」がXDでできることの1つです。

操作が全体的に直感的でわかりやすいため、プロでなくても使いやすい仕様になっています。

また、 Photoshop・Illustrator・Sketchで作成したデータの読み込みも可能なので、スピーディーに作業を進められます。

より高度な編集ができるPhotoshopやIllustratorでデザインを制作したあと、XDでデザインをまとめる、といった使い方も可能です。

プロトタイプ制作

XDではデザインのほかに、 ユーザー体験（＝UX）の検証を目的としたプロトタイプ制作ができます。

ページ同士を線でつなぐだけでリンクが作成できる「アンカーリンク」などの便利機能があるほか、操作方法がシンプルで直感的なため、スピーディーな制作が可能です。

また、スマホなどのデバイスでプレビューしながら、リアルタイムで編集することも可能なので、実際の利用シーンに近い状態で細部までデザインの確認ができます。

共有・コメント機能

Adobe XDで作成したプロトタイプは、グループ内で共有したり、リアルタイムで共同編集したりすることが可能です。

URLで簡単に共有ができるほか、コメント機能も付いているため、修正箇所の指示や確認事項などをスムーズに共有できるのが大きな魅力。

この機能によって社内のチーム間はもちろん、クライアントとのやり取りにおいても、かなりの効率化が可能となります。

また、作業が他のメンバーと重複しないように、いま誰がどの部分を触っているか確認できる仕様になっているのも嬉しいポイントです。

Adobe XDの便利機能

Adobe XDには、WEBサイト・アプリにおけるデザインやレイアウトを制作するための機能が揃っているので、そのなかでも主な機能をピックアップし、ご紹介します。

アップデートによって新しい便利機能が追加されるため、インストールしたあとも定期的にチェックし、使いこなせるようにしておきましょう。

3D変形

「3D変形」は、奥行きの追加、面の回転、遠近法を使った表現などができる機能です。

3D空間内でオブジェクトを移動・回転し、さらに奥行きを加えたり、遠近法を活用したりといった編集を加えることができます。

コンポーネント

「コンポーネント」は、作成したデザインを再利用できる機能です。

たとえば、よく使われるボタンなども1度だけ作成すれば、あとはそれを再利用して簡単に複数箇所に配置することができます。

また、仮にボタンを編集した場合も、編集箇所をすべてのボタンに反映してくれるため、作業効率の大幅アップが可能です。

リピートグリッド

「リピートグリッド」は、作成したギャラリーやリストをクリック＆ドラッグするだけで複製してくれる機能です。

要素をあらゆる方向に複製できるほか、編集した箇所を要素全体に反映してくれる特徴があります。

スクロールグループ

「スクロールグループ」は、スクロール操作によってコンテンツを表示させるための機能です。

スクロール領域を定義し、水平・垂直・水平＆垂直の3種類から設定することができます。

たとえばマップのような、画面幅以上の要素をスクロールさせたいときに使える機能です。

まとめ

この記事では、Adobe XDの概要や利用までの流れ、さらにXDで出来る作業や便利機能の例などをご紹介しました。

XDでは高クオリティなデザインやレイアウト、プロトタイプの制作ができるほか、作業を何倍も効率よく進められる便利機能がたくさんあります。

PhotoshopやIllustratorなどとの互換性も高く、使い慣れたソフトでデザインを制作し、XDに読み込んでデザインをまとめるという使い方ができるのも魅力です。

さらに公式サイトでスターターキットを用意し、基本的なスキルアップを助けてくれるので初心者もトライしやすい環境が整っています。

無料で利用できる「スタータープラン」もありますので、興味がある場合にはぜひインストールし、操作感をチェックしてみてください。