.jpg?width=900&height=600&name=111248464_m%20(1).jpg)
Adobe XD(アドビ エックスディー)とは、Adobeが提供する、Webサイトやモバイルアプリの画面デザインとプロトタイプ作成に使うUI/UXデザインツールです。現在はメンテナンスモードにあり、新機能の追加に向けた開発は行われていません。既存ユーザー向けの不具合修正やセキュリティ対応は続いています。
本記事では、Adobe XDの主な機能と特徴、今も使えるのか、始め方、Figmaとの違いを解説します。
|
この記事の要点 ・Adobe XDは、画面デザイン・プロトタイプ作成・共有を1つのアプリで行うUI/UXデザインツール ・現在はメンテナンスモード。新機能の開発は止まっているが、不具合修正とセキュリティ更新は続いている ・単体プランの新規販売は終了しており、Creative Cloudでも入手できるのは一部のプランに限られる ・既存のXDファイルや案件は引き続き扱える。新しく始める場合は、開発が続いているFigmaなども比較する |
Adobe XDとは?
Adobe XDは、PhotoshopやIllustratorなどを提供しているAdobeのUI/UXデザインツールです。Webサイトやアプリの画面を設計し、画面同士をつないで操作の流れを試作できます。Windows・macOS向けのアプリで、日本語にも対応しています。
作成したデザインやプロトタイプは、関係者へのレビュー依頼やユーザーテスト、開発者への仕様共有のほか、マーケティング担当者が画面案を確認して制作チームと改善点をすり合わせる用途にも使えます。
ただし、XDで行うのは画面の設計と試作までです。実際のWebサイトやアプリとして動かすには、デザインをもとに実装する工程が必要です。
Adobe XDは今も使える?メンテナンスモードと提供状況
Adobe XDは現在、メンテナンスモードにあります。Adobe公式FAQによると、継続的な開発や新機能の追加への投資は行われません。一方で、既存ユーザーにはバグ修正と、必要なセキュリティ・プライバシー更新が続けられています。公式の更新履歴では、2025年12月と2026年5月にも、不具合修正と軽微な改善を含む更新が公開されています。
サポートの終了日について、公式FAQに具体的な日付は示されていません。サポートを終了する場合は、十分な予告期間を設ける方針が示されています。
これから使い始める場合は、入手の条件に注意が必要です。単体プランの新規販売はすでに終了しています。また、開発が終了したアプリをダウンロードできるのは一部のCreative Cloudプランに限られるため、Creative Cloudを契約していてもXDを入手できるとは限りません。
XDを使い続ける場合は、次の点を把握しておきましょう。
- 新機能は追加されない
- XDのMarketplaceは新規プラグインの受付を停止している(公開済みのプラグインは引き続き使える)
- 古いバージョンのXDでは、共有リンクの新規作成や既存リンクの更新ができない場合がある
- Figmaの標準のインポート形式に、XDファイル(.xd)は含まれていない
状況別の考え方は次のとおりです。
| 状況 | 考え方 |
|---|---|
| 既存のXDファイル・案件を扱う | 契約で利用できる状態なら、引き続きXDで作業できる。今後のサポート情報は公式で確認する |
| これから新しく導入・学習する | 契約でXDを入手できるかを先に確認する。開発が続いているFigmaなども比較する |
| Figmaなどへ移行する | XDファイルはFigmaでそのまま開けない。代表的な画面で移行方法と作業量を確かめてから判断する |
出典:Adobe「Adobe XD よくある質問」/Adobe「Adobe XD の最新リリース」/Adobe「開発が終了したアプリのインストール」/Adobe「XD開発者向け案内」/Adobe「デザインおよびプロトタイプの共有」/Figma「Import files to the file browser」
Adobe XDでできる4つのこと
Adobe XDはUI/UXのデザインに利用できるソフトです。ここでは、既存の利用環境で使える主な機能として、Adobe XDで具体的にできることを解説します。
Webサイトやアプリなどのデザイン
Adobe XDを使うと、描画機能やパーツを用いてWebサイトやアプリの画面デザインを作成できます。
画面やボタンなどのUI素材をまとめた「UIキット」も用意されています。デザインの出発点として使える素材集です。
また、UI/UXのデザインに欠かせないワイヤーフレームをつくることもできます。ワイヤーフレームとはデザインの枠組み部分で、Webサイトにおけるページレイアウトの設計図になるものです。
操作の流れを確認するためのプロトタイプの作成
Adobe XDを利用すると、Webサイトやモバイルアプリの操作の流れを確認するためのプロトタイプも作成できます。プロトタイプとは完成イメージが想像しやすいように作成されるモックのことです。
プロトタイプは、画面やオブジェクトを接続し、タップやホバーなどのトリガーと、画面遷移・オーバーレイ・自動アニメーションなどのアクションを設定して作ります。設定した画面遷移や操作の反応はブラウザで確認できるため、実装の前に利用者の操作の流れを検討できます。
レビューなどに活用できる共有やコメント機能
Webサイトやアプリのデザイン作成には、社内やクライアントによる確認作業が必須です。確認後の修正指示が別ファイルで送られてくると、その確認や修正に手間がかかります。Adobe XDでは、共有リンクをブラウザで開いたレビュー担当者が、画面上の位置をピンで指定してコメントを残せます。
修正対象と指示内容を対応付けて伝えられるため、修正に関わるやりとりを減らせます。共有リンクは公開・非公開・パスワード付きから選べるので、社外に共有するときは公開範囲に合わせて設定しましょう。また、デザインスペックを共有すれば、寸法や間隔、カラー、CSSスニペットなどを開発者に渡すことも可能です。
リピートグリッドやコンポーネントで部品を使い回せる
リピートグリッドを使うと、画像とテキストを組み合わせたカードや一覧など、繰り返しのある要素を作成できます。グリッド内の要素のスタイルを変更すると、ほかの要素にも反映されます。
また、カラーや文字スタイル、コンポーネントを登録して再利用することも可能です。ボタンなどの共通の部品を使い回せるので、同じ構成を持つ画面を作るときに役立ちます。
出典:Adobe「UIデザインキットへのアクセス」/Adobe「インタラクティブプロトタイプの作成」/Adobe「共有プロトタイプの操作」/Adobe「デザインスペック」/Adobe「繰り返しオブジェクトの作成」
Adobe XDの特徴
Adobe XDには、画面デザインやプロトタイプの作成、レビュー、開発者への仕様共有を支援する機能があります。主な特徴は次の5つです。
- 日本語のヘルプや学習資料がある
- PhotoshopやIllustratorの素材を活用できる
- 社内で共同編集できる
- クライアントとプロトタイプを共有してコメントをもらえる
- 修正指示や開発者への仕様共有を補助できる
日本語のヘルプや学習資料がある
Adobeは、日本語のヘルプや、基礎操作を紹介する教材を公開しています。Adobe XDの基礎を15分で学べるスターターキットも紹介されていますが、2018年に公開された教材のため、現在の画面や操作とは異なる可能性があります。公式ヘルプとあわせて確認するとよいでしょう。
また、専用のサポートコミュニティもあり、使用方法や応用方法に関する疑問をAdobe XDの利用者同士で情報交換できます。
PhotoshopやIllustratorの素材を活用できる
PhotoshopやIllustratorで作成したデータ(PSD・AI)をXDに読み込み、画面デザインやプロトタイプに活用できます。Illustratorからのコピー&ペーストにも対応しています。
ただし、すべての要素が同じ状態で再現されるわけではありません。また、XDファイルをPSD形式で書き出すことはできません。「Photoshopで作成した素材をXDに取り込む」といった流れを前提に、制作工程に合わせて連携方法を確認しましょう。
社内で共同編集できる
デザインをクラウドドキュメントとして保存し、共同編集者を招待すると、複数のメンバーが同じドキュメントを同時に編集できます。同じオブジェクトを同時に変更する作業は避けるなど、チーム内で運用をそろえるとよいでしょう。
プロトタイプの操作を動画で伝えたい場合は、XDのプレビュー録画を使えます。ただし、公式のショートカット一覧では、プレビュー録画はmacOSで利用でき、Windowsでは使用できないとされています。
クライアントとプロトタイプを共有してコメントをもらえる
共有リンクを使えば、クライアントはブラウザでプロトタイプを確認し、コメントを残すことが可能です。デザイン作成の途中段階からお互いの理解を深められるため、詳細な意見交換がしやすくなります。
画面上の特定の位置にコメントを付けられるので、デザインの知識をあまり持たないクライアントからも、修正箇所を具体的に伝えてもらいやすくなります。
修正指示や開発者への仕様共有を補助できる
従来のデザインツールでは、デザインに関する修正指示や疑問点などを別ファイルに記載して送付していました。そのため、修正点を指示する側、修正する側の双方に、それを読み解く時間が必要となっていたのです。
Adobe XDでは、URLでデザインを共有し、ブラウザ上でコメントをやり取りできます。デザインスペックを使えば、要素の寸法や間隔、カラー、CSSコードスニペットなども開発者に共有できます。修正箇所や画面仕様の伝達を補助し、資料作成の負担を減らせるでしょう。XDで共有する範囲と、別途説明する要件は整理しておきましょう。
出典:Adobe「スターターキット紹介(2018年)」/Adobe「外部アセットの操作」/Adobe「Photoshopアセットの操作」/Adobe「共同編集」/Adobe「ショートカットキー」
Adobe XDの始め方
ここではAdobe XDの始め方について解説します。
Adobe XDは、単体プランの新規販売を終了しています。
Creative CloudからXDをインストール
Creative Cloudとは、PhotoshopやIllustrator、Adobe XDなどAdobeが開発・提供しているアプリをまとめて利用できる月額サービスのことです。
ただし、Creative Cloudを契約していても、XDをインストールできるとは限りません。Adobeは、開発が終了したアプリをダウンロードできるのは一部のプランと案内しています。XDを目的に新しく契約する場合は、購入前にAdobeへ利用可否を確認してください。
契約中のプランでXDを利用できる場合は、次の手順でインストールします。
- Creative Cloudデスクトップアプリを開く
- 右上のアカウントアイコンから「環境設定」を開く
- 「アプリ」で「古いアプリを表示」を有効にする
- アプリ一覧にXDが表示されたら、インストールする
「古いアプリを表示」は、開発が終了したアプリを一覧に表示するための設定で、契約上の利用可否とは別です。また、企業のエンタープライズ環境でプロトタイプなどを共有する場合は、IT管理者によるXD公開サービスの有効化が必要です。
参考: Adobe Creative Cloudアプリをダウンロード
出典:Adobe「開発が終了したアプリのインストール」/Adobe「Adobe XD よくある質問」
Adobe XDとFigmaの違い
Adobe XDと比較されるツールとしては、Figmaが有名でしょう。ここでは、機能に加えて開発・サポートの方針も含めて、Adobe XDとFigmaを比べます。
| 比較項目 | Adobe XD | Figma |
|---|---|---|
| 開発・提供状況 | メンテナンスモード。新機能の追加は無い | 開発が続いており、AIを使った機能も追加されている |
| 共同編集 | クラウドドキュメントに編集者を招待して同時に編集できる | 複数人が同じファイルをリアルタイムで編集できる |
| プロトタイプ | 自動アニメーションや、音声・ゲームパッドなどのトリガーに対応 | Smart Animateに加え、変数・条件分岐を使ったプロトタイプを作れる(使える機能はプランで異なる) |
| プラグイン | Marketplaceでの新規プラグインの受付は停止。公開済みのプラグインは使える | Communityから第三者製のプラグインを利用できる |
| 編集・閲覧の環境 | Windows・macOS向けアプリで編集する。共有したプロトタイプはブラウザで確認できる | ブラウザのほか、Windows・macOS向けデスクトップアプリでも使える |
| 導入の条件 | 単体プランの新規販売は終了。Creative Cloudの一部プランで入手できる | 無料のStarterプランと有料プランがある |
出典:Adobe「Adobe XD よくある質問」/Adobe「共同編集」/Adobe「Auto-Animate」/Adobe「XD開発者向け案内」/Figma「The Figma agent is here」/Figma「Advanced prototyping」/Figma「Use plugins in files」/Figma「Guide to the Figma desktop app」
Figmaを選ぶときに確認したいこと
新規導入や移行の候補としてFigmaを検討する場合は、次の点を確認しておきましょう。
- 無料のStarterプランでは、チームライブラリやDev Modeなどを使えない
- AI機能は、プランに応じたAIクレジットの範囲で使う
- AI機能の利用と、コンテンツをAIの学習に使う設定は別々に管理され、プランによって初期設定が異なる。顧客案件で使う前に設定を確認する
出典:Figma「Starter plan overview」/Figma「How Figma AI credits work」/Figma「Manage AI settings and content training」
Adobe XDに関するよくある質問
Adobe XDは何に使うのですか?
Webサイトやモバイルアプリの画面デザイン、ワイヤーフレーム、操作の流れを確かめるプロトタイプの作成に使います。作ったデザインやプロトタイプは、共有リンクで関係者に見てもらってコメントを集めたり、デザインスペックで開発者に仕様を渡したりできます。
Adobe XDはいつなくなりますか?
Adobe公式FAQには、具体的なサポート終了日は記載されていません。Adobe XDは現在メンテナンスモードにあり、新機能の開発は行われていませんが、既存ユーザー向けのバグ修正とセキュリティ・プライバシー更新は続いています。サポートを終了する場合は、十分な予告期間を設ける方針が示されています。
Adobe XDとFigma、どちらを使うべきですか?
既存のXDファイルや案件を扱う場合は、契約で利用できる状態であればXDを使い続けられます。これから新しく導入・学習する場合は、開発が続いているFigmaも比較しましょう。移行する場合、XDファイルはFigmaでそのまま開けないため、代表的な画面で移行方法と作業量を確かめてから判断するのが安全です。
Adobe XDの料金はいくらですか?
Adobe XDの単体プランは、新規販売が終了しています。現在はCreative Cloudの一部のプランで入手できますが、すべてのプランでXDを利用できるわけではありません。プランの料金とXDを利用できるかどうかは、契約前にAdobe公式サイトで確認してください。
Adobe XDは何故人気なのか?
画面デザイン・プロトタイプ作成・共有を1つのアプリで扱えることや、PhotoshopやIllustratorの素材を取り込めることが、Adobe XDの特徴として挙げられます。ただし、現在はメンテナンスモードのため、新しく選ぶ場合は提供状況もあわせて確認しましょう。
まとめ:Adobe XDの現状を踏まえて自社に合ったツールを選ぼう
Adobe XDは、Webサイトやモバイルアプリの画面デザイン、プロトタイプの作成、関係者への共有を1つのアプリで行えるUI/UXデザインツールです。リピートグリッドやコンポーネントによる部品の再利用、デザインスペックによる開発者への仕様共有など、制作とレビューを支える機能を備えています。
一方で、現在はメンテナンスモードにあり、新機能の開発への投資は行われていません。既存ユーザー向けのバグ修正や、セキュリティ・プライバシー上必要な更新は続いているため、既存案件で利用を続ける場合も、今後のサポート情報を確認しておきましょう。
新規導入や移行を検討する際は、Figmaも候補になります。ただし、XDファイルはFigmaでそのまま開けません。代表的な画面で移行方法や作業量を確かめ、既存資産の維持と今後の制作体制を踏まえて判断しましょう。
SEデザインは、1985年の創業以来、外資系IT企業のブランドローカライズをはじめ、日系・外資を問わず多くのテクノロジー企業のマーケティングを支援してきました。Webサイトやコンテンツを活用したマーケティングでお困りの際は、お気軽にSEデザインへご相談ください。