Webサイトのデザインをしたいと思って調べていると、頻繁に目にしたり耳にしたりする「Adobe XD」という名前。
「Adobe XD」に興味を持ったとしても、「具体的に何ができるのかが分からない！？」「Adobe社の他のツールとの違いがよく分からない…」などの理由から、利用に関して二の足を踏んでしまう方も多いかと思います。
今回は、Webサイトのデザインをしたいと考えている方に向けて、「Adobe XDの主な機能」や「Adobe XDにできること」について徹底的にご紹介していきます。
＼ XDを完全無料で利用する ／
※ボタンを押すとダウンロード開始の注意書きが表示されます！
※いきなりのダウンロードに不安を感じる方がいるかもしれませんが、Adobe公式サイトですのでご安心ください。
※記事後半では、Adobe XD公式サイトTopページからダウンロードする方法も解説します
Adobe XDとは？
Adobe XDとは、PhotoshopやIllustratorなどを提供しているAdobe社が、開発・提供しているデザインソフトのことです。
WebサイトやモバイルアプリのUI/UXデザイン作成から、プロトタイピングまでをこのソフト1本で完結することが可能です。
今までのWebサイトデザインといえば、PhotoshopやIllustratorが一般的でした。しかし、それらを凌ぐ勢いで、Adobe XDの人気は急拡大してきています。
PhotoshopやIllustratorは汎用的なツールといえますが、Adobe XDはWEBサイトやアプリに特化したツールとして開発されました。
さらに、Adobe XDはモバイルアプリのデザインにも最適です。専門的な知識や技術も不要で、直感的な操作ができるので、初心者の方でもすぐに利用できることができます。
Adobe XDには、デザイナーだけでなく、マーケターやプログラマーなど、Webに関わる人々にとって見逃せない機能が豊富に搭載されていることも魅力的なでポイントです。
なかでも、ワイヤーフレームを作りたい方や、UI/UXに効果的なデザインをしたい方におすすめになっています。
Adobe XDの料金体系
Adobe XDを使用する際には、次の3つの料金体系があります。
| プラン名 | 料金（税込み） | 特徴 |
| スターターキットプラン | 無料 | 制限された機能 |
| 単体プラン | 1,298円/月 | Adobe XDのみ使用可能 |
| Adobe CCコンプリートプラン | 6,248円/月 | Adobe XDを含む20種以上のアプリを使用可能 |
Adobe XDには無料で多くの機能が使えるスターターキットプランがあり、９割以上の機能を無料で使えるようになっています。Adobe IDを作成するだけで使えて、一部の機能は有料で使用することも可能です。
Adobe XDの単体プランでは、Adobe XDの利用のみが可能です。しかし、Adobe CCコンプリートプランならば、Adobe XDを含む20種以上のアプリが使い放題になります。
スタータープラン（無料版）と有料版の違い
Adobe XDは、無料版のスタータープランでも、デザインを作成するための機能は制限なしで利用することができます。
ただし、他の機能については制限があることが、有料版との違いになります。
Adobe XDの無料版は無くなっていない！スタータープランの入手方法・手順を画像付きで徹底解説
共同編集に制限がある
Adobe XDの大きな特徴である、共同編集機能。チームでリアルタイムに編集を共有できるので、共同編集をする際に欠かせない機能です。
有料版では追加できる編集者の数について制限はありませんが、無料版では自分以外に1人しか追加できません。
リンク共有の数に制限がある
Adobe XDの共同編集機能を共有できる、プロジェクトのリンク数。リンクの数だけプロジェクトを並行できるので効率的に作業を進められます。
有料版ではリンク共有の数に制限はありませんが、無料版では共有できるリンク数が1つに限られてしまいます。
ストレージ容量が小さい
Adobe XDで作成したデータが保存される、Adobe CCのクラウドストレージ。安全に保存するためにも、容量にはある程度余裕を持って利用していきたいところです。
有料版でのストレージ容量は100GBになっていますが、無料版では2GBになっています。
使えるAdobeフォントの数が少ない
500を超える日本語フォントを含む、20,000以上の高品質なフォントを自由に使用できるAdobe Fontsサービス。
スタータープランでもそのサービスは使用できますが、その際には使用できる数量が限定されています。一方、有料版ではすべてのフォントを使用することが可能です。
Adobe XDの機能に関する特徴
Adobe XDの機能に関する主な特徴としては、次のようなものが挙げられます。
Webサイト・アプリ画面のワイヤーフレームづくり（UI設計）に最適化されている
Adobe XDは、ワイヤーフレームづくり（UI設計）に最適化されています。
ワイヤーフレームとはデザインの枠組み部分で、Webサイトやアプリにおけるページレイアウトの設計図になるものです。ロゴの配置、ボタンの色やサイズなどデザインの骨組みになるものを、図でわかりやすく表現しています。
その、UI/UXのデザインに欠かせないワイヤーフレームづくりに、Adobe XDは最適化されています。
・直感的な操作ができる
・画面遷移が把握できる
・機能の拡張ができる
これらの機能により、効率的にワイヤーフレームを作成することができます。
Webサイト・アプリ開発のプロトタイピングができる
Adobe XDでは、Webサイトやモバイルアプリの動作確認をするためのプロトタイプの作成が可能になります。
プロトタイプとは、完成イメージが想像しやすいように、設計やデザインなどの中途段階で試作として作られる、実物そっくりの「試作モデル」のことです。
デザインモードで作ったレイアウトやデザインに、アニメーションやレスポンシブを加えることで、実際のWebサイトやアプリのように動かすことができます
Adobe XDでは、プロトタイプを作成するとコードなしに動きを確認することができるので、ブラウザ上での実際の動きを簡単に再現することも可能です。
プロトタイプを作成して利用することで、デザイン段階から動作検証が可能になるので、クライアントとの間で、デザインや操作の動きのイメージを共有しやすくなります。
そのため、コーダーやクライアントとのコミュニケーションや修正作業に要する時間を大幅に削減することができ、コストを減らすことにつながります。
HTML書き出しができるので、Webサイト作りを効率化できる
「Web Export」等のプラグインを使えば、XD→HTML書き出しが可能
Adobe XDは本来、HTML書き出し機能を持たないUI/UXデザインツールです。
したがって、現在のところ、残念ながら、ボタンクリックなど自動でXDと連携させることはできません。
手動でHTMLとCSSに変換→WordPressと連携するように設定する必要があります。
しかし、プラグインを使えば夢のHTML書き出しが実現できるようになるのです！
そのためには「Web Export」というプラグインを使用します。このプラグインを導入し、「最後のアートボードをエクスポート」を選択することで、HTMLファイルが書きだされます。
もちろん、デメリットもあります。1つ目のデメリットは、エラーが発生する可能性があることです。特に、複雑な図形やボタン内のテキストなどは、CSSが正確に記述されていないため、期待通りに表示されないことが多いようです。
2つ目のデメリットは、実際のページとして機能するのには十分でないことです。あくまでプロトタイピングのための確認資料としてしか使えません。これは、マークアップに自由度がないためです。実際の使用においては、コードの書き換えが発生するため、XD→HTML書き出しよりも、コーダーにコードを書いてもらった方が安全かつ迅速です。
以上のことから、「技術的には可能だが、実用的には最適解とは言えない」が結論です。
Adobe XDとWordPressの連携も通常はできない
WordPressはWebサイトやブログの構築に利用している方が多いでしょう。
自由なカスタマイズができるのが魅力的なので、Adobe XDで作成したデザインをそのままWordPressに連携出来ないかと考える人も少なくありません。
ただ、先ほど述べたとおりAdobe XDには、HTML書き出し機能がないため、「Web Export」等のプラグインを使わないとWordPress連携はできません。また、これも繰り返しになりますが、プラグインで書き出したHTMLはそのままでは使いにくいものです。
したがって、Adobe XDで作り上げたデザインを手動でHTMLとCSSに変換し、WordPressの設定画面に流し込む必要があります。
一からコーディングするのが難しいという人は、まずは有料/無料のテーマを導入して、その中に含まれているHTML/CSSをカスタマイズして使用することをオススメします。
コーディングはZeplinとの連携で効率化できる
ご紹介する中で、最も効率的に進められるのがZeplin連携でしょう。
Zeplinとは、デザインデータをもとにHTML書き出しに必要となる情報を取得できるソフトです。
Zeplinを使用することで、HTML書き出しにとどまらず、CSSの生成やテキストデータのコピーなど、サイト制作において必要なことが充足できるため、コーディング作業の効率化が図れます。
インストールすると、Asobe XDの「ファイル」メニュー→「書き出し」の中に「Zepelin」が表示されるようになります。このボタンをクリックすることによって、簡単に連携ができます。
Zeplinの操作はここでは説明しませんが、Adobe XDのみならずPhotoshopなどのデザインデータをもとにコーディングしたい人にとっては強力なツールとして機能してくれることでしょう。ぜひ一度試してみてください。
デザインの共有・共同編集ができる
Adobe XDでは、デザインの共有・共同編集ができます。
Webサイトやアプリを作る際には、チームやクライアントなどと共同作業を行う必要があります。しかし、離れた場所で作業を行っている場合、電話やメールでのやりとりでは、時間や手間がかかってしまいます。
一方、Adobe XDの共有モードならば、共同作業をスムーズに行うための多くの機能が搭載されているので、チーム間やクライアントとのやりとりをスムーズに行うことができます。
デザインを共有できるだけでなく、ビデオ録画や共同作業などを行うことも可能なので、面倒なやり取りを減らして作業効率を上げることが可能です。
また、グループ感覚で共有作業することも、個別にAdobe XDを開いて作業することも同時にできるので、いくつもの作業を並行して行うことができます。
制作物にコメントをつけられる
Adobe XDでは、制作物に直接コメントをつけられます。
趣味で制作する場合とは違って、商用のWebサイトやアプリのデザインを作成する際には、社内やクライアントに確認してもらうことが必須になります。
確認後に修正がある場合には、ファイルなどで修正指示が送られてくることになりますが、その指示の確認や修正には手間がかかります。
その点、Adobe XDならば、簡単にワイヤーフレームを共有することができるので、作成しているデータに直接コメントをつけることが可能です。
リアルタイムにピンポイントで、修正点をデータに直接書き込むことができるので、修正に関わる時間や手間を大きく省略することができます。
画像の書き出しができる
Adobe XD では、作成したデザインをPNG、SVG、JPG、PDF 形式で書き出すことが可能です。
デザインやコーディングをする人は、主にPNGやJPGで書き出すことが多いでしょう。
Adobe XDから画像を書き出し（エクスポート）するには、画像として書き出したいオブジェクトまたはアートボードを選択し、「ファイル」→「書き出し」で実行できます。
または、レイヤーパネル内でオブジェクトを選択したのち、「右クリック」→「選択した項目をエクスポート」でも書き出せます。
従来は書き出しサイズに制限がありましたが、0.5倍～4倍までであれば選択可能になりました。加えて、「Web」「iOS」「Android」といった端末に合わせたサイズ設定も選択できるようになっています。
なお、「Web」「iOS」「Android」では、どれを選択するかによって書き出し倍率に違いがあります。
- 「Web」・・・1倍、2倍 の2種類
- 「iOS」・・・1倍、2倍、3倍 の3種類
- 「Android」・・・以下の6種類
- ldpi：75％
- mdpi：100％
- hdpi：150％
- xhdpi：200％
- xxhdpi：300％
- xxxhdpi：400％
XDとIllustratorの違いについて
Webデザインをする場合に比較されることの多いAdobe XDとIllustratorですが、いったい何が違うのでしょうか？
Adobe Illustratorとは？できることや便利な使い方をわかりやすく解説
使用する目的
同じWebデザインといっても、Adobe XDとIllustratorでは、使用する目的が違ってきます。
イラスト重視のデザインをする目的で、Illustratorを愛用しているデザイナーの方は多く、Illustratorはイラストを描くことに特化しています。ハイクオリティな描画ができるので、チラシやパンフなどの紙媒体やロゴの作成時などに活用されています。
対してAdobe XDは、UI・UXを高める目的で使用するデザイナーの方が多く、Adobe XDは「UI・UXデザイン」に特化しているといえます。
Webサイトの見た目は重要ですが、使いやすさ（ユーザーインターフェイス・UI）やユーザーがホームページを閲覧する事で得た体験（ユーザーエクスペリエンス・UX）も重要になります。
イラスト重視ならばIllustrator、UI・UXならばAdobe XDと、それぞれ使用する目的が違っています。
使用できる機能の数
Adobe XDとIllustratorでは、使用できる機能の数が違ってきます。
使い勝手の良さから多くの人に支持されていて、Adobe社も推しているAdobe XDの強みは、webサイトを作るための機能の充実にあります。
Adobe XDにはプロトタイプやワイヤーフレーム作成などの機能が充実していますが、その反面、デザインするための機能は少なくなっています。
一方、Illustratorにはデザインのための機能が充実しています。複雑な画像の処理が可能なので、ハイクオリティのデザインに対応が可能です。
しかしながら、ハイクオリティのデザインだからよいという場合ばかりではなく、社内でコーディングする場合などは、Adobe XDでの作成が適している場合もあります。
動作の軽さ
Adobe XDとIllustratorでは、動作の軽さが違ってきます。
前の項目でも述べてきましたが、Illustratorは画像の処理を得意とし、使える機能も多岐に渡っています。
そのため、処理に時間がかかることが多く、動きが重くなってしまいます。
一方、Adobe XDは画像の処理能力や機能の多さに関してはIllustratorに及びませんが、そのぶん、動きは軽くなっていてサクサク動かせることができます。
実際に各ソフトを動かした際の動きは、Adobe XDの方が段違いに軽く、ストレスなく扱うことができます。
Adobe XDとFigmaの違い
お互いに近年盛り上がりを見せている「Adobe XD」と「Figma」。UI・UXデザインに特化している点では共通点が多いのですが、いったい何が違うのでしょうか。
【初心者向け】Figmaの使い方講座＆実践例｜Adobe XDとの違いも解説します
使用言語
Adobe XDとFigmaでは、使用言語が違っています。
「Adobe XD」は「Adobe社」、「Figma」は「Dylan FieldとEvan Wallaceの共同開発」と、両方とも海外の会社が提供するサービスになります。
しかし、Adobe XDは日本語での対応となりますが、Figmaは100％英語での対応となります。
Webデザインに関しては世界共通の用語を使用する場合が多いですが、細かい部分に関しては、英語での説明だと理解に手間取る場合もあります。
Adobe社の公式サイトに書かれている日本語にも、笑えるような表現が多いです。しかし、少なくとも日本語で対応してもらえるというだけでも、Adobe XDには安心感を得ることができます。
使用するベース
Adobe XDとFigmaでは、使用するベースが違っています。
FigmaはWebベースのツールとして、MacでもWindowsでも使用できます。デスクトップアプリもありますが、モバイル版のアプリには対応していません。
ブラウザ上で動作するので、アプリのダウンロードをせずにデザインを行えます。しかし、オフラインでは使用できないという点には注意が必要です。
一方、Adobe XDは、モバイルアプリでの使用が可能で、iOSおよびAndroidデバイスでデザインをプレビューすることができます。
料金の違い
Adobe XDとFigmaでは、各プランの料金が違っています。
Adobe XDとFigmaにはそれぞれ、無料プランがあります。使用できる権限は制限されますが、求める機能によっては十分満足できるものになっています。
さらに、Adobe XDとFigmaの有料プランに関しても、お手頃な価格設定になっています。
しかし、Figmaの料金は米ドルでの設定になっています。為替の関係上、日本円での支払い価格は安定せず、毎月の費用が正確に把握しづらくなっています。
一方、Adobe XDの料金プランは日本円での設定となっているので、支払い金額をはっきりと把握することができます。
さらに、Adobe XDはAdobe CCに組み込まれています。Adobe 社が提供している他のサービスも利用したい場合には、Adobe CCを契約することによりAdobe XDをお得に使用することが可能です。
Adobe XDをおすすめしたい３つの理由
Adobe XDをおすすめする理由はたくさんありますが、特におすすめする理由についてご紹介していきたいと思います。
理由1：ワイヤーフレームの作成時間を短縮できる
ワイヤーフレームを作成する時間には、単純に手を動かしている時間以外にも、社内確認やクライアントへの共有などの時間も含まれます。
ワイヤーフレームを作成する際には、手書き、エクセル、パワーポイントなど、たくさんのツールを利用することができます。
それらのツールには使用上のメリットがありますが、社内確認やクライアントへの共有などの時間を総合的に考慮すると、Adobe XDを使用した際の作成時間が最も短くなります。
理由2：コスパがよい
Adobe XDのスタータープランは、無料で使用することができます。さらに、有料プランならば、スタータープランよりも多くの機能を利用することもできます。
単体で利用できるプランもリーズナブルですが、Adobe社の20以上のアプリをサブスクリプションで利用できるAdobe CCならば、さらにコスパ抜群です。
学生の方が使用できる「学割」や、社会人の方でも割安に使用できる裏技があるので、ぜひとも活用してみましょう。
理由3：Adobe社製品との親和性が高い
Webデザインをする際に便利な機能が満載のAdobe XDですが、photoshopやIllustratorと兼用したい場合もあると思います。
そんな時でも、同じAdobe社の製品同士なので、Adobe XDとそれらのソフトとの親和性は抜群です。
特に、Adobe XD、photoshop、Illustratorがサブスクリプションで利用できるAdobe CCならばそれらを同時に管理できるので、さらに使い勝手が向上します。
まとめ｜Adobe XDをビジネス利用したいなら有料版、趣味・独学利用ならスタータープランを使おう！
この記事では、Adobe XDの概要についてお伝えしてきました。
Adobe XDの最大の魅力は、ずっと無料で使い続けられるスタータープランがあること。
無料という点では魅力的なスタータープランですが、利用できる機能が制限されてしまうのが残念な点でもあります。
独学用に数か月使ってみる等のユースケースでは大活躍してくれますが、商用利用・ビジネス活用を検討している方はスタータープランでは不十分です。
Adobe XDの有料版、または、Adobe XDが含まれたAdobe CCコンプリートプランの利用を検討しましょう。
社会人の場合｜デジハリのAdobeマスター講座がベスト
デジハリの「Adobeマスター講座」を受講すれば通常価格より32,256円も安くAdobeCCを購入できます。
Adobeマスター講座とは、Adobeの基礎が学べるオンライン講座とAdobeCCがセットになったサービスです。
AdobeCCの通常価格は72,336円ですが、デジハリのAdobeマスター講座なら39,980円で購入可能です。
社会人がAdobeCCを最安値で購入したいなら、デジハリのAdobeマスター講座を利用するのがベストです。
＼ AdobeCCが45%OFF ／
デジハリのAdobeマスター講座
学生の場合は、公式サイトで学割利用がベスト
もし、ご覧いただいている皆さまが学生の場合は、Adobe公式サイトから学割で購入するのがベストです。
20,856円で契約でき、Adobeマスター講座を利用するよりもさらに安いからです。
なお、学生以外は迷わずデジハリAdobeマスター講座を契約してOKです。
