IT知識
Adobe XDは、Adobeが提供する、デザインやプロトタイピングを目的としたソフトウェアです。
この記事では、Adobe XDの使い方や料金、単体販売終了に関することも解説しています。
この記事を読んで、Adobe XDをどのように活用するかの参考にしてください。
PHPを独学で勉強した後にWeb業界に参入。大手企業でプログラマーとして活躍後、自社サービスの立ち上げ、大手検索エンジンサービスの保守運用作業、ソーシャルゲーム開発などに携わりながら、SE・管理職の道を歩んで現在に至る。現在は、管理職に携わる傍ら、これまでの経験を活かした執筆活動を続けている。
Adobe XDとは何か？
Adobe XDは、Adobeが提供する、デザインやプロトタイピングを目的としたソフトウェアです。
XDは、「Experience Design」の略であり、ユーザーエクスペリエンスやユーザーインターフェースの設計を行うためのツールとして使用されます。
ここでは、Adobe XDのことを深く理解するために、以下の項目に分けて、Adobe XDの基本を解説します。
- Adobe XDの概要と基本情報
- Adobe XDの特徴と用途
Adobe XDの基本を理解して、どのような活用できるかの参考にしてください。
Adobe XDの概要と基本情報
Adobe XDは、おもにWebサイトやモバイルアプリなどのユーザーエクスペリエンスやユーザーインターフェースの設計・プロトタイピング・共有を行うために使用されます。以下は、Adobe XDのおもな機能です。
- ベクターグラフィックスの作成と編集
- ワイヤーフレームの作成
- インタラクティブなプロトタイプの作成
- デザインの共有とフィードバックの収集
- デザインスペースの共同作業
- デザインシステムの管理
Adobe XDは、デザインからプロトタイプ作成、共有までを効率的かつ簡単に行うことができるツールであり、プロフェッショナルなデザイナーやデベロッパーによって広く使用されています。
Adobe XDの特徴と用途
Adobe XDのおもな特徴は、以下のとおりです。
- デザインツール
- プロトタイピング
- 共有とフィードバック
- クロスプラットフォーム
- Adobe Creative Clondとの統合
- プラグインとエクステンション
Adobe XDは、グラフィックデザイン・プロトタイピング・ワイヤーフレーミングなど、さまざまなデザインタスクを実行するための包括的なツールセットです。
Adobe XDを使用すれば、静的なデザインをインタラクティブなプロトタイプに変換することができます。インタラクティブなプロトタイプに変換することで、ユーザーが実際の操作をシミュレートして、UXの改善点の特定が可能です。
プロジェクトを共有することができ、ステークホルダーやクライアントからのフィードバックを収集するための機能が組み込まれています。
Adobe XDは、WindowsとmacOSの両方で利用が可能で、それぞれのプラットフォームでのデザイン作業が可能です。
ほかにも、他のAdobe Creative Cloudアプリケーションとのシームレスな統合を提供しています。IllustratorやPhotoshopなどのファイル形式に簡単にインポートでき、デザインプロセスの効率化ができます。
Adobe XDは、プラグインとエクステンションをサポートしており、ユーザーが機能をカスタマイズした拡張が可能で、ユーザーは、特定のニーズや作業フローに合わせてXDを設定できます。
Adobe XDの終了について
Adobeは、2023年1月24日にプロトタイピングツール「Adobe XD」の単体販売を終了しています。AdobeのWebサイトの製品一覧ページから、XDが消えているため、単体での契約はできない状態です。
ここでは、AdobeXDが終了することに関する情報を、以下の項目に分けて解説します。
- Adobe XDの終了に関する情報とその影響
- Adobe XDのユーザーへの影響と対応策
それぞれの項目を見て、Adobe XD終了に伴う影響などを理解していきましょう。
Adobe XDの終了に関する情報とその影響
Adobe XDの単体販売は終了しており、AdobeのWebサイトの製品一覧ページからXDが消えているため、単体では契約ができません。ただし、「Creative Cloud」コンプリートプランには引き続き提供されており、契約すれば新規でのインストールが可能です。
このため、これから新規契約をしてAdobe XDを利用することはできませんが、コンプリートプランに契約することで、これからも使い続けることができるでしょう。
Adobe XDのユーザーへの影響と対応策
Adobe XDは、2021年の年末ごろからアプリケーションのアップデートの頻度が極端に少なくなり、2022年以降はほとんどアップデートされていません。
また、今後もバージョン更新の期待はそれほど見込めないため、Adobe XDは、ほかのUIデザインツールよりも機能やサポート面で遅れをとることになるでしょう。
Adobe XDをこれからも使い続けたい人は、上記を含めて使い続けるかどうか検討する必要があります。
Adobe XDの使い方
Adobe XDは、単体での契約ができず、バージョン更新も止まっているため、使い続けるかどうか検討が必要であることがわかりました。次に、Adobe XDの使い方をみていきましょう。
ここでは、以下の項目に分けて、Adobe XDの使い方を解説します。
- Adobe XDのダウンロードとインストール方法
- Adobe XDの基本的な操作方法
- Adobe XDのプロジェクト作成からプロトタイピングまでの流れ
これらの項目に沿って内容を理解しながら、Adobe XDの使い方を学んでいきましょう。
Adobe XDのダウンロードとインストール方法
Adobe XDのダウンロードとインストール方法は、以下のとおりです。
- Adobe Creative Cloudアカウントの作成
- Adobe Creative Cloudアプリケーションのインストール
- Adobe Creative Cloud アプリケーションへのログイン
- Adobe XDのダウンロード
- Adobe XDのインストール
- アプリケーションの起動
Adobe XDをダウンロードおよびインストールするには、Adobe Creative Cloudアカウントが必要です。アカウントを持っていない場合は、AdobeのWebサイトから無料で登録が可能です。
Adobe XDは、Adobe Creative Cloudのアプリケーションの一部であるため、手元のPCにAdobe Creative Cloudデスクトップアプリをダウロードし、インストールします。
インストールが完了したら、Adobe Creative Cloudアプリケーションへ、登録したAdobe Creative Cloudアカウントのユーザー名とパスワードを使用してログインします。
Creative Cloudアプリケーション内で表示されるアプリケーションの一覧にAdobe XDが表示されている場合は、ここからダウンロードページに移動が可能です。Adobe XDがリストされていない場合は、検索バーで「Adobe XD」と入力して検索し、結果からAdobe XDを選択します。
Adobe XDのダウンロードが完了したら、インストールプロセスを開始します。インストーラーに従って進め、必要なファイルをインストールしていきましょう。
インストールが完了すると、Adobe XDが起動ができるようになります。Adobe Creative Cloudアプリケーションから直接起動するか、デスクトップやスタートメニューからアプリケーションを探して起動することができます。
Adobe XDの基本的な操作方法
Adobe XDの基本的な操作方法を、以下のように、一覧にまとめました。
| 操作 | 説明 |
| 新規プロジェクトの作成 | Adobe XDを起動し、メニューやツールバーから「新規プロジェクトを作成」を選択します。または、Ctrl+N（Windows）またはCmd+N（Mac）を押して新しいプロジェクトを作成します。 |
| アートボードの追加 | プロジェクト内で作業するには、アートボードを追加します。アートボードはデザインのキャンバスのようなもので、それぞれ異なるページや画面を表します。アートボードパネルから適切なサイズやデバイスを選択してアートボードを追加します。 |
| デザインの作成 | デザイン作業を始めるには、ツールバーから適切なツールを選択します。その後、アートボード上でクリックやドラッグを行い、デザインを作成します。 |
| テキストの追加 | テキストツールを使用してテキストを追加できます。テキストツールを選択し、アートボード上にクリックしてテキストボックスを作成し、テキストを入力します。 |
| グループ化とレイヤー | 複数のオブジェクトをグループ化することで、関連する要素をまとめることができます。また、レイヤーパネルを使用してレイヤーの順序や可視性を管理できます。 |
| プロトタイピング | デザインをクリック可能なプロトタイプに変換し、画面間の移動や動作を定義します。プロトタイピングモードに切り替えて、画面間のリンクを作成し、トランジションやアニメーションを追加します。 |
| プレビューと共有 | プロトタイプをプレビューし、デザインを共有するためのリンクを生成します。プレビューを行うと、実際にアプリケーションのようにプロトタイプを操作できます。 |
| エクスポート | 完成したデザインをエクスポートして、画像ファイルやデベロッパー向けのファイル形式に保存します。エクスポートオプションを使用して、適切なファイル形式と解像度を選択します。 |
これらが、Adobe XDの基本的な操作方法です。
Adobe XDには、さまざまな機能が備わっており、より高度な操作や機能も利用できますが、これらの基本操作をマスターすることで、効率的な作業を行うことができるでしょう。
Adobe XDのプロジェクト作成からプロトタイピングまでの流れ
Adobe XDのプロジェクト作成からプロトタイピングまでの流れは、以下のとおりです。
- 新規プロジェクトの作成
- アートボードの追加
- デザインの作成
- プロトタイプの設定
- リンクの追加
- トランジションの追加
- プレビューとテスト
- 共有とフィードバック
Adobe XDを起動し、メニューやツールバーから「新規プロジェクトを作成」を選択し、新しいプロジェクトを作成します。
プロジェクト内で作業するためには、アートボードの追加が必要です。アートボードとは、デザインのキャンバスのようなもので、それぞれ異なるページや画像を表すものです。
アートボードパネルから、適切なサイズやデバイスを選択してアートボードを追加します。
デザイン作業を始めるには、ツールバーから適切なツールを選択し、その後、アートボード上でクリックやドラッグを行い、デザインを作成します。
デザインが完成したら、プロトタイピングモードに切り替えて、プロトタイプの設定を行いましょう。
次に、プロトタイピングモードで、画面間のリンクを設定します。クリック可能なオブジェクトを選択し、対象の画面へのリンクを設定しましょう。
リンクを作成した後、トランジションやアニメーションを設定して、画面間の移動や遷移をよりスムーズにします。
プロトタイプが完成したら、プレビューを行なって、実際に動作を確認します。プロトタイプが満足いくものになったら、共有リンクを生成して、チームやクライアントと共有してフィードバックを収集しましょう。
これらの手順で、Adobe XDを使用してプロジェクトをデザインからプロトタイピングまで完成できます。
Adobe XDの料金プランと機能
ここまで、Adobe XDの基本操作をみてきました。次は、Adobe XDの料金プランと機能をみていきましょう。
ここでは、以下の項目に分けて、Adobe XDの料金プランとその機能を解説します。
- Adobe XDの無料版とスタータープランの比較
- Adobe XDの有料プランの機能と料金
- Adobe XDのHTML書き出し機能について
これらの項目をみながら、無料版と有料版の違いなどを理解していきましょう。
Adobe XDの無料版とスタータープランの比較
Adobe XDには、無料版とスタータープランの2つのオプションがあります。ただし、スタータープランは、2023年1月に販売を終了しているため、注意が必要です。
以下は、これら2つの違いをまとめたものです。
| 無料版 | スタータープラン | |
| 機能の制限 | 基本的なデザイン機能やプロトタイピング機能が利用できますが、一部の高度な機能やエクスポートオプションが制限されています。 | 無料版で制限されているいくつかの機能が解除され、より高度な機能やエクスポートオプションが利用できます。また、スタータープランではAdobe Fontsの利用も可能です。 |
| クラウドストレージ | 2GBのクラウドストレージが提供されます。 | 100GBのクラウドストレージが提供されます。これにより、より多くのプロジェクトやリソースを保存し、管理することができます。 |
| サポート | スタータープランと同様のサポートを受けることができます。 | Adobeの公式サポートやコミュニティフォーラムを利用することができます。 |
これらの違いにより、ユーザーは自分のニーズや予算に合わせて適切なオプションを選択することが可能です。
無料版は基本的なデザインやプロトタイピングを行いたい場合に適していますが、より高度な機能や大容量のクラウドストレージが必要な場合は、スタータープランを検討するとよいでしょう。
Adobe XDの有料プランの機能と料金
Adobe XDの有料プランには、単体プランとコンプリートプランの２つのプランがあります。Adobe XDの単体プランの価格は月額1,298円で、全ソフトが利用可能なコンプリートプランは6,248円です。
コンプリートプランは通常料金で記載されていますが、Adobe CCを安く買う方法を使うと約半額で購入できます。
Adobe XD単体プランは2023年1月に販売終了していますが、一部制限があるものの、現時点でも引き続きソフトを使い続けることができます。
コンプリートプランは、Adobeソフトを数多く使用する、クリエイティブな業務に携わる人におすすめですただ、Photoshopなどにも単体プランは存在するため、Adobeソフトの中から3つ程度の利用に留まる場合は、単体プランを複数契約した方がお得になる場合もあります。
このため、利用したいソフトの単体プランを確認した上で、コンプリートプランの検討をするとよいでしょう。
Adobe XDのHTML書き出し機能について
Adobe XDのHTML書き出し機能を使うには、以下の手順で操作します。
- プラグインボタンを押下
- Web Exportをクリック
- 輸出ArtBoarをクリック
- 項目をチェック
- HTMLフォルダをクリック
- ブラウザにエクスポートしたHTMLフォルダが表示される
書き出し対象にするには、画像レイヤーにオンマウスして表示される「書き出し対象にする(Shift + E)」を選択します。書き出し設定にデザインを指定すると、等倍の画像が書き出されます。
書き出し設定にWebを指定すると、1倍と2倍の画像が書き出されます。書き出し対象のレイヤーには書き出しアイコンが表示されます。再度アイコンをクリックすると、書き出しを解除できます。
Adobe XDとFigmaの比較
Figmaとは、WebベースのUI/UXのデザインツールであり、共同作業やプロトタイピングなどの機能を提供するプラットフォームです。
ここでは、Adobe XDとFigmaを以下の項目に分けて、さまざまな視点から比較します。
- Adobe XDとFigmaの主な違いと特徴
- Adobe XDとFigmaの利用シーンの比較
- Adobe XDとFigmaのメリット・デメリット比較
各項目での比較した内容を見ながら、Adobe XDとFigmaのどちらを利用するか検討する参考にしてください。
Adobe XDとFigmaの主な違いと特徴
Adobe XDとFigmaのそれぞれの特徴を以下の表にまとめました。
| Adobe XD | Figma |
|
|
Adobe XDは、デスクトップアプリケーションとして提供されており、オフラインでも利用が可能です。一方、Figmaは、Webブラウザ上で実行され、どのデバイスからでもアクセスが可能です。
この違いが、二つのツールでの大きな違いといえます。
どちらのツールも優れたUI/UXデザインに使用されますが、個々のニーズや好みにあわせて選択するとよいでしょう。
Adobe XDとFigmaの利用シーンの比較
Adobe XDとFigmaは、両方ともUI/UXデザインツールとして広く使用されていますが、それぞれのツールには異なる利用シーンがあります。
以下は、そのそれぞれの利用シーンを比較したものです。
| Adobe XD | Figma |
|
|
Adobe XD は、すでにAdobe Creative Cloudのほかのアプリケーションを利用しているチームで利用されることが多いです。IllustratorやPhtoshopからのデザインインポートやエクスポートが簡単に行えます。
ほかにも、デスクトップアプリケーションとして提供されているため、オフラインで利用が可能なのがメリットの1つです。
一方、Figmaは、Webベースのプラットフォームであるため、リアルタイムでの共同作業が可能です。リモートワークや分散型のチームでの効果的なコラボレーションが求められる場合に適しています。
オープンなプラットフォームであり、プラグインエコシステムを備えています。ユーザーは、プラグインを使用して機能を拡張したり、独自のツールを開発したりすることが可能です。
Adobe XDとFigmaのメリット・デメリット比較
ここでは、Adobe XDとFigmaそれぞれのメリットとデメリットを比較してみましょう。
まずは、Adobe XD と Figmaのメリットを比較します。
| Adobe XD | Figma |
|
|
Adobe XDは、Adobe製品である、IllustratorやPhotoshopなどのほかの製品とのシームレスな統合を提供している点が大きなメリットです。ほかにも、デスクトップアプリケーションとして提供されているため、オフラインでも利用が可能なのがメリットの1つであるといえるでしょう。
Figmaのメリットは、Webベースのプラットフォームであるために、どのデバイスからでもアクセスが可能な点です。
リアルタイムでの共同作業が可能であり、リモートワークや分散型のチームでの効果的なコラボレーションが実現できます。
次に、それぞれのデメリットを比較してみましょう。
| Adobe XD | Figma |
|
|
Adobe XDは、リモートワークや分散型のチームでの共同作業では、Figmaよりも効果が劣る場合が多いでしょう。
一方、FigmaはWebベースのプラットフォームであるため、インターネット接続がないと利用ができません。オフラインでの作業が必要な場合は、その操作などが制限される可能性があるでしょう。
Adobe XDとFigmaは、特にデメリットがそれぞれ特徴的なため、チームやプロジェクトのニーズに合ったツールを選択することが重要です。
Adobe XDとFigmaの違いに関して、以下の記事でも詳しく解説しているため、参考にしてください。
Adobe XDのまとめ
今回は、Adobe XDに関して、以下のことがわかりました。
- Adobe XDはAdobeが提供するデザインやプロトタイピングを目的としたソフトウェア
- ほかのAdobe Creative Clondアプリケーションとのシームレスな統合を提供している
- 2023年1月24日に単体販売は終了している
- 有料プランには単体プランとコンプリートプランの２つのプランがある
- Adobe XDとFigmaにはそれぞれ特徴的なメリット・デメリットがある
Adobe XDは、Adobeが提供するデザインやプロトタイピングを目的としたソフトウェアです。IllustratorやPhotoshopなど、ほかのAdobe Creative Cloudアプリケーションとのシームレスな統合を提供している点が特徴的です。
しかしながら、2023年1月24日に単体販売は終了しており、コンプリートプランでしか利用できない点に注意が必要でしょう。
Adobe XDの有料プランには、単体プランとコンプリートプランの2つのプランがあります。ほかのAdobe Creative Cloudアプリケーションを多数利用している人は、コンプリートプランがおすすめです。
Adobe XDと同様に、ユーザーインターフェースやユーザーエクスペリエンスのデザインを行うツールに、Figmaがあります。これら2つのツールは、それぞれメリット・デメリットがあるため、チームやプロジェクトのニーズに合ったものを選択するとよいでしょう。
このように、多くの特徴があるAdobe XDですが、自社でどのように活用すればよいかわからないこともあるでしょう。Adobe XDに関して不安なことやわからないことがあれば、知見を多く持つ、株式会社Jiteraへご相談ください。
自社でどのようにAdobe XDを活用したいかをヒアリングさせていただき、適切なアドバイスをご提案させていただきます。
