Web制作を行っていると、デザインカンプなどが必要になってくるため、AdobeXDと接する機会は少なくないでしょう。
それゆえ最近は、
AdobeXDは一体どんなことができるの？
XDは契約した方がいいのかな？
この記事は上記のお悩みを解決します。
XDでできること【向き不向き】
AdobeXDでできることについてお伝えします。
XDが向いていること4選
向いていること①：サイトデザイン
まずXDといえば、サイトデザインです。サイトの複数ページをデザインし、Webサイトのように表示することができます。
その上、設置したボタンと表示するページをリンクさせ、画面遷移させることも可能です。
このようにデザイン時点で、完成形をリアルに表現できます。
向いていること②：素早いWebデザイン
IllustratorやPhotoshopほど機能が多くなく、直感的に機能を使用できるように工夫されているので、素早くWebデザインができます。
向いていること③：デザインの合意
XDはコメント機能や共有機能（URL共有が可能）が充実しており、社内での合意や、クライアント様への確認も簡単にできます。
こういった合意の取りやすさもXDの魅力の1つです。
向いていること④：コーダーへのデザイン指定
XDが不向きなこと3選
続いてXDが不向きなことについてお伝えします。
不向きなこと①：ロゴやアイコンの作成
ロゴやアイコンの作成も不向きです。こういった作業は基本的にIllustratorの管轄です。
https://kaki-lab.org/webproduction-illustrator/不向きなこと②レイアウトデザイン
レイアウトデザインも得意ではありません。レイアウトデザインとは、テキストや画像などをレイアウトして作るデザインのことです。（僕しか言っていないかもですが、ニュアンスが伝わればOKです）
これは僕がIllustratorを用いて作成したレイアウトデザインです。
不向きなこと③：画像加工
背景を透過したり、エフェクトをかけたりする画像加工も、XDの管轄外です。
こういった画像加工はPhotoshopの得意領域なので、ご興味のある方はPhotoshopについての記事をご覧ください。
https://kaki-lab.org/webproduction-photoshop/XDがおすすめの人
XDを契約するのがおすすめの人を紹介します。
おすすめの人①：コーディングする人全員
僕はコーディングする人全員、XDを持っておくことをおすすめしています。もちろん、Webで共有してもらうこともできるので、XDを持っていなくてもデザインカンプを利用することはできます。
しかし、XDのソフトを契約して、インストールしておいた方が、デザインカンプからのコーディングが捗ります。
具体的には、下記の点です。
- テキストの取得
- 画像の取得
- サイズの取得 など
作業が捗れば、時間あたりの報酬額も高くなるので、コーディングする人は持っておいてもよいと考えています。
おすすめの人②：Webサイト全体のデザインを行う人
Webサイトをデザインする人は、必須でしょう。もしかしたら、figmaやPhotoshopでの作成を依頼される可能性もありますが、Webデザインの主流のXDができないのは少々難しいかなと僕は思います。
もっとも、僕はWebデザイナー専門ではないので、断言はできませんが、一般に上記のように考えられるでしょう。
XDの費用【お得に利用する方法も】
XDを利用するためにかかる費用とお得に利用する方法をお伝えします。
AdobeXDの単品料金
AdobeXD単品の利用料金は下の通りです。
| プラン | 料金 |
| 月々プラン | 1,298円／月 |
| 年間プラン（一括払い） | 15,576円／年 |
IllustratorやPhotoshopと比較するとリーズナブルですね。この両者は月額2,728円（税込）なので、XDはこれらの半分以下の費用で利用できることがわかります。
お得に利用する方法2選
お得に利用する方法を2つお伝えします。
方法①：コンプリートプランを利用する
1つ目の方法が、コンプリートプランを利用する、というものです。
コンプリートプランとは、XDに加えて、IllustratorやPhotoshopも利用できます。さらには動画編集ソフトのPremire ProやAfterEffectsも利用可能です。
Web制作に関するAdobe製品がすべて含まれて、月額6,248円（年間プランの場合）で利用することができます。
全部のソフトを単品で揃えたら、1万5,000円はかかってしまうところを、6,000円代で利用できるのは大きいです。
ちなみに、コンプリートプランの料金詳細は下の通りです。
| プラン | 料金 |
| 年間プラン（月々払い） | 6,248円／月 |
| 年間プラン（一括払い） | 72,336円／年 |
| 月々プラン | 9,878円／月 |
方法②：学割を利用する
2つ目の方法が学割を利用する方法です。残念ながらこの方法は学生しか利用できませんが、値下げ幅は絶大です。
上で紹介したコンプリートプランを月額2,178円（年間プラン）で利用できてしまいます。
ちなみに、僕は現在大学院生ですがこのプランを使用しています（2021年1月26日現在）。
まずは無料体験するのがおすすめ
もし、XDに興味がありましたら、無料体験を利用するのがおすすめです。使ってみて初めて、ご自身のお仕事とマッチしないことがわかる可能性があるからです。
まずは無料体験をしてみるとよいと思います。
XDと他Adobe製品と併せてうまく使う方法
他のAdobe製品と組み合わせてうまく使う方法についてお伝えします。
方法①：XDとIllustrator
XDとIllustratorの組み合わせは、一般的には、
- Illustratorでアイコンやロゴ、レイアウトデザインでパーツを作成
- XDでサイトデザインに配置
という流れでしょう。
方法②：XDとPhotoshop
XDとPhotoshopの組み合わせは、下のようなものが多いと思います。
- 撮影した写真などをPhotoshopなどで加工
- Illustratorでレイアウトデザイン→パーツを作る
- XDでサイトデザインに配置
ほかにもいろいろ組み合わせ方はありますが、このパターンが多いでしょう。
まとめ
この記事では下の4つのことについてお伝えしました。
- XDでできること【向き不向き】
- XDがおすすめの人
- XDの費用【お得に利用する方法も】
- XDと他Adobe製品と併せてうまく使う方法
また、Web制作に関するAdobe製品全般についてまとめた記事もありますので、ご興味があればご覧ください。
https://kaki-lab.org/webproduction-adobe/では最後までお読みいただきありがとうございました！
