アドビ社が提供するツール・Adobe XDのことをご存じでしょうか。

今回はAdobe XDの使い方を中心に、Adobe XDについて詳しく解説していきます。

  • Adobe XDのことが気になっている
  • Adobe XDとPhotoshopやSketchの比較がしたい
  • Adobe XDの使い方がイマイチわからない
  • Adobe XDの無料プランは使えるのか？
  • Adobe XDの有料プランには無料プランとどんな相違点があるのか
  • Adobe XDの始め方が知りたい

こうした疑問や悩みを抱えている人向けの記事となっています。

ぜひご一読ください。


Adobe XDとは

この項目では、Adobe XDの概要を解説します。

Adobe XDはアドビ社が提供する、オールインワンUX/UIツールです。


概要

デザインだけでなく、プロトタイプや共有などもAdobe XD1つでおこなうことができます。

webサイトのデザインをすることは当然ながら、モバイルアプリにも適したデザインを作成することが可能です。

また、色んなプラットフォームやデバイス（Mac・Windows・iOS・Android）で共有できます。

作ったデザインをチームのメンバーに共有したい人には打ってつけのツールと言えるでしょう。


対応言語

日本語にも対応しています。

他に対応しているのは、以下の言語です。

  • 英語
  • 簡体字中国語
  • 韓国語
  • ドイツ語
  • フランス語
  • スペイン語
  • ポルトガル語（ブラジル）


プラン

一部機能に制限がかかった「スタータープラン」と「単体プラン」、そして「Creative Cloudコンプリートプラン」の3つがあります。

それぞれの詳細については後述します。


Adobe XDの特徴

Adobe XDはどんな特徴（機能）を持っているのか見てみましょう。


スピーディーにUIデザインを作成できる

ワイヤーフレームを下地に、理想のデザインを完成させることができます。

カラーや文字スタイル、ベクター描画ツール（描画ツール、形状モード、シェイプツールなどのベクター編集機能）などが使用可能です。

Adobe XDで作成した画像をPhotoshopで開き編集することもできるという特徴も。編集を終えたら保存するだけでAdobe XDにも編集した画像が反映します。


プロトタイプ作成

アートボード同士を繋ぎ、イメージをより印象的に伝えることができます。

自動アニメーションを組み込むことも可能です。

また、スマートフォンなど実際に使用するデバイスでUXのプレビューができます。

「After Effects」に書き出して、アニメーションをもっと追加することも。


共同作業ができる（共有やコメント）

Adobe XD上でリアルタイムに共同作業をおこなうことができます。

作業の重複を避けられるように、他メンバーがどの部分を触っているかも分かるので安心です。


新機能を毎月リリース

Adobe XDは毎月新しい機能をリリースしており、新機能だけでなく元からある機能のグレードアップも適宜おこなっています。

ユーザーの意見を取り入れ、より良いツールに成長中です。

もし「こんな機能があったら良いのに」と思うことがあれば、「Adobe XD Feedback : Feature Requests & Bugs」にメッセージを送ってみましょう。

ダイレクトにユーザーとして感じたリアルな声を届けることができます。

もしかすると、自分の意見が今後のAdobe XDの機能に反映するかもしれません。


プラットフォームを拡張できる

様々なアプリと連携できるので、いちいちアプリを行き来する手間が省けるという特徴があります。


モバイルアプリがついている

Adobe XDにはiOSとAndroidのアプリが付属しており、モバイル端末でプロトタイプの確認が容易にできます。


Adobe XDのメリット

Adobe XDが持っている機能はおわかり頂けたでしょうか。続いて、Adobe XDのメリットをいくつかご紹介しましょう。

Adobe XDは多くのメリットを持つツールです。


作業時間を短縮することができる

他ツールと比較して、ワイヤーフレームを引く際にかかる時間をぎゅっと短縮可能です。


無料プランがある

Adobe XDには無料プランがあります（一部機能に制限あり）。

「Adobe XDを使ってみたいけど、一度触ってみてからじゃないと費用を投じることが不安」という人も安心して使用できるでしょう。

この他のメリットについては「Adobe XDの特徴」で紹介した特徴と重なるので省きます。


Adobe XD無料プラン①できること

Adobe XDの無料プランは一体どこまでの機能を有するのか気になるところです。

この項目では、Adobe XD無料プランに焦点を当てました。


Adobe XDのプラン

Adobe XDには3つのプランが存在します。

スタータープラン：無料プランのことです。一部機能が制限されていますが、使用期限がないのは非常に魅力的です。

単体プラン：月1180円（税別）で使えるプランです。

Adobe CC（PhotoshopやIllustratorなどのツールがまとめて入ったもの）の中でも、Adobe XDだけを使いたい人向け。

Creative Cloudコンプリートプラン：月5680円（税別）で使えるプランです。ビジネス向けの機能が搭載されています。

Adobe Creative Cloud（Adobe CC）の中に入っている全てのツールを使用することができるプランです（PhotoshopやIllustrator、Dreamweaverなど）。


無料プランで使える機能

ほとんどの機能が使用可能です。使用するのに制限がかかる機能については後述します。

また、無料プラン独自のサービスとして、「Adobe Fonts無料プラン（限定フォントセット）」が付いてきます。


Adobe XD無料プラン②有料プランとの違い

Adobe XDの無料プラン（スタータープラン）と有料プラン（単体プラン・Creative Cloudコンプリートプラン）の違いについてご紹介しましょう。


共有プロトタイプの数

Adobe XD無料プランの場合、共有プロトタイプの数は1つだけです。

有料プランの場合は無制限です。


共有デザインスペックの数

Adobe XD無料プランの共有デザインスペック数は1つのみ。

対する有料プランは共有デザインスペックを使ったリンクを無制限に発行することが可能です。


クラウドストレージの容量

主にメンバーと一緒に作業する場合、クラウドストレージの容量が少ないと厳しいです。

無料プランはそんなクラウドストレージの容量が2GBと少なく、本格的にAdobe XDを使うには心許ないでしょう。

有料プランの場合は100GBと大容量のクラウドストレージが準備されています。


Adobe Fontsの内容

Adobe XD無料プランには「Adobe Fonts無料プラン（限定フォントセット）」が付いてきます。

有料プランに付いてくるのは「Adobe Fontsポートフォリオプラン（全フォントライブラリ）」。その違いがあります。


Adobe XDとPhotoshopを比較

webデザイン制作をする際、Adobe XDか他ツールを使うか悩ましいところです。

それぞれのツールにはメリットとデメリットが存在します。

この項目では、比較される機会が多いAdobe XDとPhotoshopについて見てみましょう。


データの重さ

Adobe XDとPhotoshopでファイルを作成した際、どちらがデータ容量が重いかというと「Photoshop」です。

データが重いということは、動作も遅くなる傾向があるのでスピーディーな作業を望む人にはAdobe XDがおすすめです。


作業のしやすさ

Adobe XDの画面はとても直感的に動かせて見やすいという特徴を備えています。

Photoshopと比較してみると、画面がかなりシンプルなことに驚くかもしれません。


Adobe XDとSketchを比較

Adobe XDとSketchは優秀なデザインアプリとして、UIデザイナーから注目されているツールです。そんな両者を比較してみました。


使用可能なプラットフォーム

Adobe XDはWindowsでもOS Xでも使えますが、Sketchが対応しているのはOS Xのみです。

WindowsユーザーはAdobe XD一択ということになります。


リピートグリッド

「リピートグリッド」とは、調整できるエレメントをリピート作成できる機能です。

Adobe XDはこの機能を搭載しています。対するSketchに同様の機能はありません（プラグインでの補完は可能）。


シンボル

マスターシンボルを準備しておくだけで、デザインの中にあるシンボルがマスターシンボルを反映してくれます。

Sketchに搭載されているこの機能。Adobe XDの場合は「アセットパネル」が同様の役割を担っています。

Adobe XDの「アセットパネル」はリアルタイムで更新した結果が表示されるのが注目すべきポイントです。


自動アニメーション

エレメントに対して滑らかなアニメーションを自動でつけてくれるAdobe XDの機能です。

Sketchにはこうした機能がありません（プラグインでの補完も難しい）。


共有やコメント機能

Adobe XDは標準でこの機能を搭載しています。Sketchは標準搭載していません。


Adobe XDの導入方法

この項目では、Adobe XDを実際に導入する方法についてご説明します（スタータープラン）。


1.Adobe XDの公式サイトにアクセス

Adobe XDの公式サイトにアクセスし、「スタータープラン」をダウンロードしましょう。


2.Adobe XDを起動

インストーラーをクリックし、セットアップを開始します。


3.ログイン

初めてAdobe製品を使用する場合は、アカウントを作成しましょう。


4.質問に答える

「XDのスキルレベル」「職業」「XDを利用する目的」の3つの質問全てに答えましょう。「次へ」とクリックするとインストールがスタートします。

インストールには少し時間がかかる場合があります。


Adobe XDの使い方・基本的な操作方法

Adobe XDを起動したら、まずワークスペースを作りましょう。


アートボード作成

スタート画面から画面サイズを選べばワークスペース作りは終わりです。なお、好きなサイズ（カスタムサイズ）に設定することもできます。


デザイン画面の操作

左側にあるツールバー、右側にあるパネルで作業していきましょう。

ツールバーにあるものを選び、アートボードに挿入します。そして、右側のパネルで挿入したものの設定をしてください。


ファイルの保存

メニューパネルのファイルから「保存」を選びます（もしくはCommand＋S ）。

新規作成したドキュメントを保存する場合は保存方法の指定が必須です。

「クラウドドキュメント」「ローカルコンピューター」のうち、任意の保存方法を選びましょう。ローカルコンピューターに保存する時は自分の好きな場所に格納することができます。

ちなみに、ファイルを終了したい場合はメニューパネルのファイルから「閉じる」を選べばOKです。

まずは色々触ってみてAdobe XDの画面や機能に慣れることが大切です。

操作方法の詳しい内容は公式サイトにあるマニュアルで確認することができるので覗いてみてください。

公式サイトのマニュアル以外にも、Adobe XDのHOMEにある「基本を学ぶ（チュートリアルを開始）」を押下すれば、公式のチュートリアルを見ることも可能です。


まとめ

以上、Adobe XDについて色んな情報をお伝えしました。

今回の記事でAdobe XDの知識、使い方などを知ることができたのではないでしょうか。

やり方を知っているのと使ってみるのとでは明確な違いがあります。

Adobe XDのことをより深く知りたいなら、ぜひAdobe XDの無料プランを試してみてください。これを利用しない手はありません。

きっと、今回お伝えしたAdobe XDの魅力が理解できるはずです。

今までPhotoshopやIllustratorしか触ったことがない人も、これを機にぜひAdobe XDの使いやすさを体験してみてはいかがでしょうか。