Adobe XDは、UI/UXデザインを初心者でも直感的にできるツールです。
とはいえ、Adobe XDを使うと具体的に何ができるのか、使ったことがないとイメージしにくいですよね。
そこで本記事では、現役Webデザイナーの私が、Adobe XDでできることを具体的にご紹介します。
KEI
本記事を読めば、Adobe XDでできることがわかりますよ！
目次
Adobe XDとは？
Adobe XDは、PhotoshopやIllustratorで有名なAdobe社が開発・提供している「UI/UXデザインツール」です。
「初心者でもUI/UXデザインを簡単にできること」を目指して開発されており、便利な機能がたくさん搭載されていることが特徴となっています。
また、Adobe XDは「直感的」にUI/UXデザインができるようになっているので、初心者でも一定以上のUI/UXデザインを気軽にすることができます。
KEI
「UI/UXデザインを始める第一歩」として、Adobe XDは特に人気を集めています！
UI/UXデザインってそもそも何？
- UIデザイン：ユーザーインターフェイスのこと。ボタンやテキストなど、ユーザーが見て触れる場所を「UI」と言います
- UXデザイン：ユーザーエクスペリエンスのこと。サービスの使いやすさなど、ユーザーの体験に関わるものを「UX」と言います
上記の通り、UIデザインとはボタンなどの「ユーザーが見て触れる部分」を、UXデザインとは「ユーザーの体験に関わる体験」を指します。
例えばWebサイトをみていると、
「このサイト、とても見やすい！」
「ついつい定期的にチェックしてしまう」
と、感じたことはありませんか？それはきっと、UI/UXデザインまで考えて、設計されているはずです。
UI/UXデザインをすることで、ユーザーに心地よい操作性のもと、良い体験を与えることができます。結果として、ユーザーの満足度を高め、惹きつける事にも繋がるんですよね。
KEI
このように、ユーザーにとって価値あるWebサイト作りを実現する際に、Adobe XDなら「初心者でも、直感的に」、UI/UXデザインをすることが可能ですよ！
Adobe XDでできることや使い方
Adobe XDで具体的にできることをご紹介します。
Adobe XDでできること
- デザイン作成
- プロトタイプ作成
- 共有・コメント
- 共同編集
KEI
できることの詳細・使い方をそれぞれ解説しますね！
1. ワイヤーフレームやデザインカンプの作成
- ワイヤーフレーム：Webサイト上に配置する要素を確認するための設計図
- デザインカンプ：クライアントに提出するデザインの完成形
KEI
Adobe XDを利用すると、上記のようなワイヤーフレーム・デザインカンプを作ることができます。
ワイヤーフレーム・デザインカンプを作る際に使える機能
| 機能 | できること |
| デザイン編集 | パス・クリッピングマスク、透過等ができる |
| リピートグリッド | 要素の繰り返しが、ドラッグ一つで簡単にできる |
| コンポーネント | ボタンやアイコンのように、繰り返し使うパーツを編集しやすいよう管理できる機能 |
| Adobe CCとの連携 | Creative Cloudライブラリとの連携ができる |
KEI
具体的な機能は上記の通りです。いくつか詳細をご紹介しますね！
例：リピードグリッド
XDの人気機能に「リピートグリッド」があります。
リピードグリッドとは、一度使った要素を「ドラッグ一つ」で簡単に再現することができる機能です。
Webデザインの仕事をしていると、サムネイルがたくさん並んだり、記事一覧が並んだりと、要素が並ぶデザインはよくあるんですよね。
そういう時に、特定のアイテムをリピートグリッドとして登録すると、連続して一つの要素を増やすことが簡単にできます。
無駄な作業が減る分、作業効率が上がるメリットがあるんですよね。
例：コンポーネント
ボタンやアイコンのように繰り返し使い、かつ複数存在するようなパーツを、毎回個別に編集するのは面倒ですよね。
その点Adobe XDであれば、あらかじめパーツを「コンポーネント」として登録しておけば、あとから一括で、同じ形状のパーツをまとめて編集できます。
KEI
リピートグリッドやコンポーネントのように、面倒な作業を簡素化できるのは、XDの良いところです！
2. プロトタイプ作成
- プロトタイプ：実際にWebサイトを作る前に作成し、完成形をイメージしやすくするもの。モックアップとも言います。
Adobe XDでは、デザインカンプで作ったものを「プロトタイプ」として、Webブラウザ上で動きを設定・検証することも可能です。
KEI
ボタンにリンクを設定したり、モーションをつけることが、プログラミング知識がなくても問題なくできます。
3. 共有・コメント
ワイヤーフレームやデザインカンプを作り、クライアントに共有したい時に使えるのが「共有・コメント機能」です。
共有・コメント機能を使うことで、作ったワイヤーフレームやデザインカンプをクライアントに共有することができます。
KEI
ただ共有するだけでなく、クライアントからのフィードバックをコメントでもらうことも可能です！
4. 共同編集
同じドキュメントをリアルタイムで共同編集できる機能も、Adobe XDにはあります。
共同編集ができれば、個別に作成したデザインを結合する手間がなくなります。共同編集機能は、複数人で作業するとき、とても便利な機能です。
以上がAdobe XDでできるメジャーなことです。
KEI
百聞は一見にしかず、実際に使った方がイメージも湧くと思いますので、ここからは「Adobe XDを始める方法」をご紹介しますね！
Adobe XDを始めるには？主な方法は3つ
Adobe XDを始めるには、大きく3つの方法があります。
Adobe XDを始める方法
- Adobe XD単体プランを購入する
- お得なセットのAdobe Creative Cloudを購入し、XDを無料ダウンロードする
- 無料のスタータープランから始める（機能制限あり）
このように3つあります。それぞれを比較すると以下の通りです。
Adobe XD 3プランの比較表
| プラン | 1. スタータープラン | 2. XD単体プラン | 3. Creative Cloud |
| できること | XDのみ（機能制限あり） | XDのみ | XD、Photoshop、Illustrator、After Effectsなど20以上のAdobeアプリを使える |
| 費用 | 無料 | 月額1,298円（税込） | 月額6,248円（税込） |
1. 無料のスタータープランから始める
Adobe XDには、スタータープランと言われる「無料体験版」もあります。
使える機能はかなり制限されるものの「とりあえずXDを使ってみたい」「使ってから有料にするか考えたい」という場合は、最初はスタータープランで始めてみることもおすすめです。
一方、今後UI/UXデザインを本格的に学んでいきたいなら、後述するXD単体プラン（月額1,298円）やCreative Cloud（月額6,248円）を購入した方が機能は豊富ですので、XDの使い方や操作にもいち早く慣れることができます。
2. Adobe XD単体プランを購入する
Adobe XDをとにかく安く使いたい、Adobe XD以外の機能が不要なら、Adobe XD単体プランを購入することがおすすめです。
Adobe XD単体プランは月額1,298円（税込）で、Adobe XDの機能をフルに使うことができます。
XDはMac、Windowsどちらも使えますし、日本語にも対応しています。アップデートも頻繁にあるので、安心して利用可能です。
KEI
「費用を払うだけの価値」は十分ありますよ！
3. お得なセットのAdobe Creative Cloudを購入し、XDを無料ダウンロードする
XDだけでなく、他のAdobe製品も使いたいなら、Adobe Creative Cloudの購入がおすすめです。
Adobe Creative Cloudは、Adobe製品をお得に購入・利用できるセットプランです。PhotoshopやIllustrator、After Effectsなど、20以上のAdobe製品を、全て「定額」で使い放題となります。
もしあなたがすでにCreative Cloudを持っている場合、XDアプリを無料ダウンロードするだけでOKです。
一方、まだCreative Cloudを持っていない場合、月額6,248円（税込）で購入できます。
Creative Cloudの場合、前述したXD単体プランより費用は上がるものの、PhotoshopやIllustratorなども利用したいなら、こちらを購入した方がお得です。
KEI
XDだけでなく、PhotoshopやIllustratorなど、お得にAdobe製品を利用するなら、Adobe Creative Cloudを選びましょう！
まとめ
述べてきた通り、Adobe XDはUI/UXデザイン初心者でも、直感的にUI/UXデザインをすることが可能なツールです。
Adobe XDを有効活用すれば、デザイナーとして「仕事の生産性」はもちろん、「市場価値」を上げることにも繋がります。なぜなら、UI/UXデザイナーは「転職市場で評価されやすい職種だから」です。
そんなUI/UXデザインを始める第一歩として、今回ご紹介した「Adobe XD」を使ってみてはいかがでしょうか？
なお、もし一人でできるか不安な場合、「UI/UXデザインスクール」を利用することで、プロのデザイナーから基礎から実践まで学ぶことも可能です。
どうしても不安な場合は、スクールで短期集中で学習することも、検討されてみてはいかがでしょうか。
KEI
おすすめのUI/UIデザインスクールは「UI/UXデザインが学べる優良スクール【現役デザイナーが厳選】」でご紹介しています。
興味があればチェックしてみてください！
人気記事現役WebデザイナーがおすすめするWebデザインスクール5社比較
人気記事UI/UXデザインが学べる優良スクール【現役デザイナーが厳選】
