【お役立ち情報】 「Adobe XD」UI/UXデザイン&プロトタイピングツール
Adobe XDは、Adobeが提供するWebデザイン・UI/UXデザインツール。無料プランもあり、高性能であるにも関わらず導入も簡単。XDを使ってみてチーム内でアイデアを共有してみよう！
Webサイトやアプリの制作を行う上で、エンジニアリングと同様に大切なのが「デザイン」です。
さらに近年は、AppleやGoogleを見習ってビジネスシーンでも「デザイン思考」という概念が浸透してきており、デザイナーだけが「デザイン」を考える時代ではなくなってきました。
特に、UI/UXデザインにおいては、マーケティングからのデータ、人間工学的な知見、ユーザーやクライアントサイドからのフィードバックなど、様々な視点から総合的にデザインを考えていく必要があります。
そうした流れの中で、エンジニア、ディレクター、営業等も含めたビジネスサイド、クライアントといったデザイナーの協業者とチームになって、デザイナーがデザイン制作をおこなっていくスタイルが主流となってきているのです。
そこで、注目が集まっているのが今回紹介するAdobe XDというデザインツールです。
Adobe社はIllustratorやPhotoshopなど、これまでも数多くのデザインツールを開発・提供してきましたが、Adobe XDは、「デザイン」「プロトタイプ」「共有」という3つの要素から構成されているのが特徴です。
Adobe XDは、もともとAdobe Experience Designという名前で開発されていました。その後、Adobe XDに名称を変更し、2016年にベータ版がリリース。正式版がリリースされたのは2017年と、競合の多いUIデザイン&プロトタイプツールの中でも比較的歴史の浅いアプリです。
しかし、わずか数年でシェア率上位のアプリになり、着実にユーザ数を伸ばしています。
ユーザー数を伸ばしているのは、デザインツールやプロトタイピングツールとしての使い勝手もさることながら、デザイン共有ツールとしての側面が優れているという点が要因の一つであると考えられます。
今回は、その「デザイン共有ツール」としてのAdobe XDの特徴を以下のような流れで詳しく解説します。
無料プランもあるAdobe XDの料金体系
Adobe XDのインストール方法
Adobe XDの利用方法
デザインツールの中でAdobe XDをおすすめする理由
無料プランもあるAdobe XDの料金体系
Adobe社製のアプリというと、サブスクリプションでそれなりの料金を支払わないと利用できないイメージがありますが、XDには、スタータープランという無料で使えるプランがあります。
また、Adobe Creative Cloudのコンプリートプランユーザーであれば、追加料金なく有料版を使うことができますので、導入コストがかかりません。
他のUIデザインツール・プロトタイピングツールでも、多くは無料プランが用意されています。しかし、使用期限付きであるものが多いので導入のハードルは少し高いと言えます。
スタータープランは、共有機能に制限があったり、クラウドストレージの容量が２GBまでの制限があったりしますが、使える機能は有料版とほとんど変わりません。
まずはスタータープランに加入して、後から有料版に移行することもできますので、下のプラン一覧の表と画像を参考にしてみてください。
| XDスタータープラン | XD単体プラン | Creative Cloudコンプリートプラン | |
|---|---|---|---|
| 料金 | 無料 | 1,180円/月 | 5,680円/月 |
| Creative Cloudアプリ | Adobe XD | Adobe XD | XD、 Photoshop、 Illustratorなど、 20以上のCreative Cloudアプリ |
| アクティブな共有ドキュメント | 1* | 無制限 | 無制限 |
| 共有ドキュメント編集者 | 2* | 無制限 | 無制限 |
| アクティブな共有リンク | 1* | 無制限 | 無制限 |
| クラウドストレージ | 2GB | 100GB | 100GB |
| その他のサービス | Adobe Fonts無料プラン（限定フォントセット） Creative Cloudライブラリ |
Adobe Fontsポートフォリオプラン（全フォントライブラリ） Creative Cloudライブラリ |
Adobe Fontsポートフォリオプラン（全フォントライブラリ） Creative Cloudライブラリ |
*リモートワーク支援によりスタータープランは、2020年10月まで共有ドキュメント、編集者、共有リンクの数を無制限で提供中。
Adobe XDのインストール方法
Adobe XDをインストールするにはAdobe IDを取得している必要があります。また、Adobe Creative Cloudのユーザーであるかどうかでインストール方法が異なります。
Adobe Creative Cloudを使っていない方はこちら
Adobe Creative Cloudを使っている方はこちら
Adobe Creative Cloudを使っていない場合
1.Adobe XDの公式サイトへアクセスする
Adobe XD公式サイトにアクセスします。
2.「XDをダウンロード」をクリックする
TOPページ「XDをダウンロード」というボタンをクリックします。（上部にあるメニュー欄の「購入する」ボタン、もしくは「プランを比較する」ボタンをクリックしたページにある「無料体験版を試してある」ボタンをクリックしても同じ登録画面にいきます。）
3.インストーラーをダウンロード
「XDをダウンロード」をクリックすると「XD_installer.dmg」というデータがダウンロードできるようになりますので、任意の場所を設定し「保存」をクリックします。
4.インストーラーを開く
ダウンロードされた「XD_installer.dmg」をクリックするとインストーラーが開き、下記の画像のようなインストーラー（XD Installer.app）のアイコンが表示されるので、クリックします。
5.Adobeアカウントにログインするメールアドレスを入力
インストーラーが起動すると下記の画像のような入力画面が表示されます。すでにAdobe IDを取得している場合は、メールアドレスを入力します。Adobe IDを持っていない場合は、新規アカウントを作成しましょう。
注意点として、Adobe IDは、Adobe Creative Cloudがリリースされる以前から存在します。
Adobe Creative Suite（略称 CS）をはじめとしたAdobeのパッケージ版商品を使用していたことがある場合、Adobe社製のモバイル用のアプリやBehanceといったAdobeのサービスを利用している場合などでも、過去にAdobeアカウントを作成している場合があります。
すでにアカウントを作成してある場合は、同じメールアドレスで新規アカウントが作れませんので、違うアドレスやSNSアカウント等で新規登録するか、既存のAdobeアカウントでログインしましょう（ログインパスワードを忘れた場合はパスワードリセットも可能です）。
アカウントを新規作成する場合
アカウントを新規作成する場合は、下記のような入力画面に移行します。電子メールアドレス、氏名、パスワード、生年月日、国/地域を入力して「アカウント作成」をクリックしましょう。
アカウントを作成してからXDをダウンロードする場合は、そのまま下記のような設定画面に移行する場合があります。XDの経験レベル、職業、利用目的を入力し「続行」をクリックしましょう。
6.Adobe IDにログインするパスワードを入力する
ログインするメールアドレスを入力すると、下記のようなパスワードを入力する画面に移行します。パスワードを入力して「続行」をクリックしましょう。
7.Adobe XDをインストール
パスワードの入力が終わると下の画像のような画面に移行します。「インストールを開始」ボタンをクリックするとインストールが始まります。
インストールが始まると、下記のようなインストール状況がわかる画面が表示されます。インストール完了まで少し時間がかかりますので、しばらく待ちましょう。
インストールが完了すればAdobeXDを使っていきましょう
Adobe Creative Cloudを使っている場合
1.Adobe IDにログインする
すでに、Adobe Creative Cloudのサービスを使用している場合は、トップページの「XDをダウンロード」をクリックすると、下の画像のような設定画面に移行します。
Adobe Creative Cloudを利用している方は、Adobe IDアカウントを登録していると思いますので、そのアカウントIDでログインしましょう。
Creative Cloudに関しては無償メンバーシップでの利用も可能ですので、コンプリートプランや単体プランなどの有償サブスクリプションを利用しない場合でも加入しておくと良いかもしれません。
もし、別のアカウントIDでログインしたい場合は、アカウント作成をクリックし、前述の「アカウントを新規作成する場合」の手順で新規アカウントを作成してください。
すでに、Adobe Creative Cloud利用していて、Adobe Creative Cloudを管理するデスクトップ用のアプリ「Creative Cloud Desktop」を利用している場合は、モーダルウィンドウに「Creative Cloud Desktop App.app」を開きますかと表示されますので「Creative Cloud Desktop App.appを開く」というボタンをクリックしましょう。
2.Creative Cloud Desktopを起動してAdobe XDをインストール
Webブラウザで、Adobe Creative Cloudのページにアクセスしてインストールしたり、前述のインストーラー経由でインストールも可能ですが、ここでは「Creative Cloud Desktop」を使っての方法を説明します。
Adobe Creative Cloudの利用プランによってインストールできるアプリは異なりますが、Adobe XDの場合は、どのプランでもインストール可能です。アプリ一覧から、XDのアイコンを探し、「インストール」のボタンをクリックしましょう。
「インストール」のボタンをクリックすると、下記のようにインストール進行状況が表示されます。少し時間を要しますので、完了するまでしばらく待ちましょう。
インストールが完了し「インストール済み」の欄にXDが表示されました。「開く」をクリックするとアプリが起動します。
Adobe XDを起動する
インストールが完了し、起動すると下記のようなアプリのホーム画面になります。
この画面から新規ドキュメントを作成したり、作成済みのドキュメントを開いたりすることが可能です。
新規ドキュメントは下の画像のように「モバイル端末の主要機種サイズから選択」「Webサイトの主要なサイズから選択」「SNSやYouTubeの投稿サイズから選択」といったように、あらかじめサイズが設定された新規アートボードを作成できるようになっています。
自分でサイズを指定したい場合はカスタムサイズを選択しましょう。
この画面には表示されていませんが、作成済みのドキュメントも、このホーム画面に表示されます。
クラウドで保存したドキュメントや共有リンクもホーム画面から開いたり、アクセスすることが可能です。また、XDの活用方法を解説したチュートリアル動画へもアクセスできます。
- Adobe XDの公式サイトへアクセスする
- 「XDをダウンロード」をクリックする
- インストーラーをダウンロード
- インストーラーを開く
- Adobeアカウントにログインするメールアドレスを入力
- Adobeアカウントにログインするパスワードを入力する
- Adobe XDをインストール
- Adobe IDアカウントにログインする
- Creative Cloud Desktopを起動してAdobe XDをダウンロード
Adobe XDの利用方法
次に、編集画面の各アイコンの意味や、基本的な操作方法を紹介します。
主なアイコンの操作内容
ホーム画面からドキュメントを開くと、編集画面になります。ここでは、Adobe XDの編集画面の操作アイコンについて、主なものを以下の画像と表で説明します。
| アイコン | 実行できる内容 |
|---|---|
| ①「ツールバー」 | 図形、線、ペンツール、テキストなど操作ボタン。 IllustratorやPhotoshopと比較するとかなりシンプルになっている。 |
| ②「アセット」 | 素材、テーマカラーなどのアセットが呼び出せる操作ボタン。 |
| ③「レイヤー」 | レイヤーを表示させる操作ボタン。 |
| ④「プラグイン」 | プラグインをインストール、管理する操作ボタン。 |
| ⑤「デザインモード」 | デザインモードに切り替える操作ボタン。 |
| ⑥「プロトタイプモード」 | プロトタイプモードに切り替える操作ボタン。 |
| ⑦「共有モード」 | 共有モードに切り替える操作ボタン。 |
| ⑧「アートボード」 | Adobe XDのアートボード（作業領域）。 |
| ⑨「共同編集に招待」 | 共同編集に招待する操作ボタン。 |
| ⑩「モバイルプレビュー」 | モバイル端末上での表示をプレビューする操作ボタン。 Adobe XDモバイルアプリケーションをインストールすることで使用可能。 端末をAdobe XDがインストールされたPCに接続する、 もしくはクラウドドキュメントを開くことで、実機によるプレビューができるようになる。 |
| ⑪「プレビュー」 | デスクトップでプレビューする操作ボタン。 |
| ⑫「表示サイズ」 | アートボードの表示サイズを変更できる。 |
| ⑬「プロパティインスペクター」 | 選択したオブジェクトの設定を確認・変更できる操作エリア。 |
上の画像からもわかるとおり、Adobe社製の他のデザインツールと比較して、XDはかなりシンプルな操作性を持っています。一方で、非常に多機能でプラグインの追加によってカスタマイズも可能です。
デザインの共有目的での操作に関しては、すぐに覚えることができるでしょう。
ワイヤーフレームやプロトタイプ作成については少し難しいですが、デザインツールを使ったことがある人であれば、すぐに慣れると思います。実際に使ってみて少しずつ覚えていきましょう。
▼ Adobe XDの使い方だけではなく、Web制作全般のフローまでこの１冊で学べる！
サイトを作りながら、現場のワークフローに沿って学ぶ！
Adobe XDを使ってできること
Webサイトやアプリの制作過程は、家を建てるプロセスと似ています。
ワイヤーフレームが「設計図」、デザインカンプが「完成見本図」、コンポーネントやアセットが「全体のデザインを形作っていくような部品やテーマカラー」だと例えると、それを一括で制作・管理できるのがAdobe XDです。
ここで注意したいのは、XDはPhotoshopやIllustratorからの乗り換えが必要なデザインツールではないという点です。
Adobeのツールの中での立ち位置は、むしろDTPツールにおけるInDesignに近く、素材の作成は写真の加工についてはPhotoshop、イラストやロゴの作成ついてはIllustratorといった各分野が得意なアプリを使い、他のデザインツールと連携させて制作を行なっていくものとイメージしたほうが良いでしょう。
ワイヤーフレームをはじめとしたノンデザイナーが担当する分野はXDのみでも十分対応可能ですが、フォトグラファーやイラストレーターと協業する場合などは、PhotoshopやIllustratorと組み合わせて使ったほうが、よりXDの得意な「共有」の分野が活きてくると思います。
以下に、XDを特徴付ける「デザイン」「プロトタイプ」「共有」という3つの要素について解説します。
デザイン
Webサイトやアプリ向けのデザインを簡単に作成できる
Adobe XDは、Webサイトやアプリ向けのデザインに特化したアプリなので、下の画像のようにIllustratorやPhotoshopよりもWebサイトやアプリのデザイン作成が簡単に行えます。
オブジェクトを整列させる、マージンを揃える、同じ要素を同じ配列で複数配置するといった作業を、細かな設定をすることなく感覚的に行えます。
これからWebデザインを勉強したい人は、XDの使い方からマスターしていくのも一つの方法だと思います。
また、UIキットをダウンロードすれば、さらに作業効率とクオリティが格段に上がります。下の画像は、Adobe XDの公式サイトからダウンロードできるマテリアルデザイン向けのUIキットです。
UIキットは、サードパーティーからも数多く提供されています。「Adobe XD UIキット」で検索すれば商用利用も可能な無料UIキットを見つけることができます。
また、Adobeが運営するクリエイター向けのSNSであるBehanceでも、世界中のクリエイターが作成したUIキットをダウンロードすることができます。
下記はBehanceからダウンロードできる「Social Meet Up UI Kit」というUIキットです。このように、UIキットを上手に利用すれば作成したいサイトやアプリのイメージにあった素材を、簡単に見つけ出すことができるのです。
ワイヤーフレームを簡単に作成できる
Adobe XDは、ワイヤーフレームも簡単に作成できます。前述のUIキットや、繰り返しオブジェクトを作成できるリピートグリット機能を使えば、高品質なワイヤーフレームをスピーディーに作成できるのです。
また、ワイヤーフレーム用のUIキットも数多くリリースされています。下の画像は、ワイヤーフレーム向けUIキットとして人気の高い「 Wires」を日本向けに再構成した「Wire jp」というUIキットです。
これらのUIキットを使えば、さらに作業効率とクオリティが格段に上がるでしょう。
プロトタイプ
プロトタイピングも簡単に作成できる
XDは、プロトタイピングツールとしての側面も持っていますので、画面遷移などの「動き」も含めた、インタラクティブなデザインも表現可能です。
アニメーションも作れるので、「動き」のあるサイトデザインを制作チームやクライアントサイドと共有し、テストするといったことも可能です。
上の画像のように、作成したプロトタイプをプレビューするのも簡単です。モバイル端末をUSBで繋いで実機でプレビューする機能もついているので、実装前の動作検証もスムーズに行えます。
共有
Adobe XDが他の追随を許さないのがデザインを共有する機能です。
「ドキュメント履歴」「リアルタイム共同編集」「レビュー用に共有」「開発用に共有」「非公開招待」「クラウドドキュメント」といった様々な機能が搭載され、業種や作業環境に関係なくチーム全員がデザインを共有できるように配慮されています。
共同編集ができる
「リアルタイム共同編集」という、チーム全員が同時に同じドキュメントを使用して一緒に作業を進められる機能が搭載されています。
画像引用:https://helpx.adobe.com/jp/xd/help/collaborate-coedit-designs.html
上記の画像のように「ドキュメントに招待」するアイコンから、任意のメールアドレスを招待すれば共同編集が可能になります。
この機能により、今まで無駄が多かったり重複していたワークフローを大幅にカットすることができます。
共同編集中に、他の人がどの部分で作業しているかも、わかりやすく表示されるので、安心して作業が行えます。
また、「ドキュメント履歴」によって、作業履歴が自動的に保存され、前の編集段階に戻ることが可能なことも共同編集機能を強化しています。
様々なスタイルでデザイン共有ができる
下記の動画のように、共有URLを作成することで、簡単に作成したデータを共有することができます。
ブラウザで共有URLにアクセスするだけなので、AdobeIDを持ってない人でも閲覧可能で、コメントをつけることもできるので大変便利です。
共有の方法は編集画面左上のメニューから「共有モード」に切り替えると、プロパティインスペクターの欄に、リンクを作成というボタンが表示されますので、これをクリックすると共有リンクのURLが発行されます。
リンクが作成されたら、URLをコピーし、メールやチャットツールなどで送信すれば、ブラウザから作成されたデータを閲覧できるようになります。
共有の表示設定には、レビュー担当者がコメントを書き込むことができる「デザインレビュー」、開発者がデータからアセット、カラー、文字スタイル、計測値、CSSコードスニペットなどをコードとして抽出できる「開発」、デザインのプレゼンテーションに最適な「プレゼンテーション」、プロトタイプのテストに最適な「ユーザーテスト」といったモードから選択できます。
上記の動画は「開発」の表示設定で共有されたドキュメントです。
このように、オブジェクトから、フォントサイズやマージンなどのCSSを書き出すことが可能です。カラーコードや数値などをデザインデータから抽出できるのは、非常に便利ですね。
IllustratorやPhotoshopでデザインしているデザイナーのデータも、XD経由で開けばプログラミングやコーディングに使えるデータを抜き出すことが非常に簡単になります。
また、PDFやPNGでも書き出しできるので、メールに添付してデザインデータを送ったり、会議や打ち合わせ用に紙ベースの資料を作成するのも容易に行えます。
特にクライアントサイドに関しては、業種によってIT化が進んでいるとは限りませんので、こうした従来型のコミュニケーションにも対応可能な部分は大きなメリットです。
デザインツールの中でAdobe XDをおすすめする理由
その他にも、数多くのデザインツールの中でAdobe XDをおすすめする理由を挙げていくと枚挙にいとまがありません。
一般的なデザインツールと比較しても、インターフェイスがシンプルで、非常に軽くサクサク起動するという点だけをとっても作業パフォーマンスの向上に貢献してくれるでしょう。
ここでは、他のツールとの連携や、素材の集約、アセットの共有、アイデアの共有など、特筆すべきAdobe XDの特徴を紹介します。
日本語環境で利用できる
Adobe XDは日本語対応されているアプリなので、英語が苦手な人やデザインツール初心者にも利用しやすいアプリです。
「Figma」「InVision」「Marvel」といった海外製のUIデザイン&プロトタイピングツールは、今のところ日本語対応されていません。
「Prott」や「STUDIO」といった国産のツールもありますが、シェア率や知名度でいえばAdobe XDが群を抜いていますので、デザイン共有ツールという観点からは、トップランクのお勧めできるアプリです。
プラグイン・テンプレート・UIキットが豊富
プラグイン
前述のように比較的後発なツールであるにもかかわらず、XD用のプラグインが数多く提供されています。
プラグインのインストール方法も非常に簡単で、下の動画のように編集画面左下のプラグインのアイコンからプラグインのインストールを行えます。
また、Adobe XD公式プラグインのページからも、プラグインをダウンロードすることができます。
UIキット
前述のように、XD用のUIキットが多数提供されています。
他のデザインツールでもUIキットが配布されてものはありますが、XD用のUIキットはAdobe社製のアプリを愛用している世界中のクリエイターが開発・提供してくれているので、選択肢の幅は無限大にあると言えます。
アイコンセット
Webサイトやアプリで使用可能なアイコンセットも多数提供されています。
アプリのアイコン等はオリジナリティを求めるよりも、一般的に広く認知されているアイコンを利用するほうがユーザーにとっても便利です。商用可の無料アイコンをネットで探すことが多いと思いますが、そうした手間も省けます。
また、ワイヤーフレームの段階から具体的なアイコンの指定に利用することもできますので大変便利です。
UIキットと同様に「Adobe XD アイコンセット」と検索すれば多くのアイコンセットを探し出すことができますし、以下の画像のようにAdobe XD公式アイコンセットのページからもダウンロード可能です。
他のアプリと連携しやすい
下の公式ページに掲載されている連携できるアプリ一覧（一部）の画像を見てもわかる通り、XDと連携できるアプリやサービスが数多くあります。
また、プラグインを使って外部ツールと連携できるものも多くあります。
Googleスプレッドシートからテキストや数値のデータを読み込み、一括でXDに反映してくれる「Google Sheets」というプラグインは、その代表例です。
こうした外部ツールを上手に利用すれば、コピーライターに作成してもらったテキストを、指定の箇所に一瞬にして入力するといったことも可能になるのです。
このように、他のアプリと連携も、様々な業種・クリエイターと協業してデザインしていく上で大きな助けになるでしょう。
過去のデータ資産を活かすことができる
上の動画のように、XDではIllustratorやPhotoshopで作成したデータファイルもAdobe XDで開くことができます。
クライアントから現行のテーマカラーや素材を活かしてWebやアプリをリニューアルしてほしいという要望が出ることは多いと思います。
過去のWebサイト・アプリデザインは、IllustratorやPhotoshopで作成されていることが大半ですが、XDは、Aiファイルや、PSDファイルを直接開くことができます。これはAdobe社製のアプリであるからこその互換性です。
また、XDは「Sketch」のファイルを開くことも可能です。
XDファイルに変換されてしまうと、再びSketchファイルとして開くことはできませんが、デザイナーによっては、XDよりも「Sketch」のほうが使いやすいという人もいますので、共有目的でXDを利用するといったことも可能です。
アセットで開発に必要な素材を集約できる
XDでは、過去に制作したIllustratorやPhotoshopのデザインデータを開き、そこからテーマカラーやフォント、ボタンやナビゲーションバーなどのコンポーネントを、アセットとして抽出できます。
上の動画のように、ダウンロードしたUIキットからアセットを追加することも可能です。
付属のモバイルアプリ
iOS版のAdobe XD
Android版のAdobe XD
Adobe XDは、iOS版とAndroid版のアプリもリリースされています。
実際にモバイル端末の実機を使ってプロトタイプを確認できるのも便利ですし、出先でワイヤーフレームやデザインカンプを確認することも簡単です。
クラウドドキュメントとして保存できる
XDでは作品をクラウドドキュメントとして保存できます。
クラウドドキュメントとして保存したXDファイルは下の画像のようにCreative Cloud上で管理することができます。
また、Creative Cloud上のライブラリにアセットを保存することも可能です。
こうしたクラウドドキュメントとして保存できる機能も、共同作業者とデータを共有しながら作業する上で大変便利です。
自動的に更新されるため、データを間違って消去してしまうといった心配もありません。
Windows版がある
Adobe XDは、Windows版がリリースされています。
デザイン系のアプリにはMac版しかリリースされていないサービスが少なくありません。XDの競合である「Sketch」は、Windows版がリリースされていません。
古いバージョンでは利用できませんが、クライアントサイド、ビジネルサイド、動画クリエイターなどには、Windowsユーザーが多いので、これらのデザイン協業者とデザイン共有する場合は、Adobe XDに大きな利点があります。
WindowsユーザーのWebディレクターの中にも、ワイヤーフレーム作成にPowerPointを使っている人は多いと思いますが、Windows版のAdobe XDに思い切って移行してみましょう。
本記事で解説した部分以外にも、Adobe XDの便利な機能は沢山あります。
無料で利用できるプランもあるので、まだインストールしていないという人は、本記事を参考にしてダウンロードし、実際に使ってみましょう！
この記事のまとめ
- 無料で使えるプランがあるAdobeのUI/UXデザインツール&プロトタイピングツールである
- 「デザイン」「プロトタイプ」「共有」という3つの要素から成っており、特に「共有」に優れている
- 素材提供の豊富さ、他のツールとの連携など、エンジニア、ディレクター、営業等も含めたビジネスサイド、クライアントといったデザイナーの協業者にも、おすすめしたいアプリである。
