
Adobe XDとは?料金、使い方、ダウンロード、日本語、無料、XDファイル、XD Viewerを徹底解説
1. Adobe XDとは?
Adobe XDは、アドビ株式会社が提供する、UI/UXデザイン & プロトタイピングツールです。「Webサイトやアプリのデザインをしたい」「ユーザー体験を設計したい」「チームでデザインを共有・共同編集したい」というデザイナーや開発者の要望に応えてくれます。Webサイト、モバイルアプリ、ゲーム、音声インターフェースなどのデザイン & プロトタイピングが可能です。直感的なインターフェース、リアルタイムプレビュー、共同編集、豊富なプラグインなどが特徴です。まるでデザイナー同士が、同じキャンバスを共有しているように、アイデアを形にし、ユーザー体験をデザインできます。
【目次】
- Adobe XDとは?
- Adobe XDの料金
- Adobe XDの使い方
- Adobe XDのダウンロード
- 日本語対応について
- 無料版について
- XDファイルについて
- XD Viewerについて
- XDの今後について
- まとめ
2. Adobe XDの料金
Adobe XDの料金プランは、以下のようになっています (2024年5月現在)。
-
Adobe XD単体プラン:
- 月額1,380円 (税込)。
- XDのすべての機能を利用できます。
- 100GBのクラウドストレージ。
-
Creative Cloudコンプリートプラン:
- 月額7,780円 (税込、年間プラン月々払いの場合)。
- XDを含む、20種類以上のAdobeクリエイティブアプリを利用できます (Photoshop, Illustrator, Premiere Proなど)。
- 100GBのクラウドストレージ (プランによって増量可能)。
-
無料スタータープラン:
- XDの一部の機能を無料で利用できます。
- 共有できるデザインとプロトタイプは1つまで。
- 2GBのクラウドストレージ。
料金プランの詳細は、Adobe XDの料金ページで確認してください。価格やプラン内容は変更される場合があります。
3. Adobe XDの使い方
-
新規ドキュメントの作成:
- Adobe XDを起動し、[新規作成] をクリックします。
- Webサイト、モバイルアプリ、カスタムサイズなど、目的に合ったアートボードサイズを選択します。
-
デザインの作成:
- 左側のツールバーから、図形ツール、テキストツール、ペンツールなどを使って、デザインを作成します。
- 右側のプロパティパネルで、オブジェクトの色、サイズ、フォントなどを調整します。
- [リピートグリッド] 機能を使うと、要素を繰り返し配置できます。
- [コンポーネント] 機能を使うと、再利用可能なデザイン要素を作成できます。
-
プロトタイプの作成:
- [プロトタイプ] モードに切り替えます。
- オブジェクトをワイヤーで繋いで、画面遷移やインタラクションを設定します。
-
プレビュー:
- [プレビュー] ボタンをクリックすると、デスクトップまたはモバイルデバイスでデザインやプロトタイプをプレビューできます。
-
共有:
- [共有] ボタンをクリックすると、デザインやプロトタイプを他のユーザーと共有できます。
- 共有リンクを作成し、コメントをもらったり、共同編集したりできます。
より詳しい使い方については、Adobe XDのチュートリアルやヘルプを参照してください。
4. Adobe XDのダウンロード
Adobe XDをダウンロードするには、以下の手順を実行します。
- Adobe Creative CloudのWebサイト (https://www.adobe.com/jp/creativecloud.html) にアクセスします。
- Adobeアカウントでログインします (Adobeアカウントを持っていない場合は、無料で作成できます)。
- Creative Cloudデスクトップアプリをダウンロード & インストールします。
- Creative Cloudデスクトップアプリを起動し、[Apps] タブからAdobe XDを探します。
- [インストール] ボタンをクリックして、Adobe XDをインストールします。
Adobe XDの無料スタータープランを利用する場合は、Creative CloudデスクトップアプリからXDをインストールするだけで利用できます。
5. 日本語対応について
- Adobe XDは、日本語に対応しています。
- Adobe XDのインターフェース、メニュー、ツールなどは、日本語で表示されます。
- 日本語のフォントも利用できます。
- Adobe XDのヘルプやチュートリアルも、日本語で提供されています。
6. 無料版について
- Adobe XDには、無料のスタータープランがあります。
- スタータープランでは、XDの一部の機能を無料で利用できます。
- 共有できるデザインとプロトタイプは1つまで、フォントの制限、2GBのクラウドストレージなどの制限があります。
- XDのすべての機能を利用するには、有料プラン (XD単体プランまたはCreative Cloudコンプリートプラン) へのアップグレードが必要です。
7. XDファイルについて
- Adobe XDで作成したデザインやプロトタイプは、.xdという拡張子のファイルとして保存されます。
- XDファイルは、Adobe XDでのみ開くことができます。
- XDファイルを他のユーザーと共有するには、Adobe XDの共有機能を使うか、XD Viewer (後述) を利用します。
- XDファイルは、書き出し機能を使って、PNG, JPG, SVG, PDFなどの形式に書き出すことができます。
8. XD Viewerについて
- XD Viewerは、Adobe XDで作成したデザインやプロトタイプを、XDを持っていないユーザーでも閲覧できるようにするためのツールです。
- XD Viewerは、Webブラウザ上で動作します。
- XDファイルを共有する際に、共有リンクを作成し、そのリンクをXD Viewerで開くことで、デザインやプロトタイプを閲覧できます。
- XD Viewerでは、デザインの閲覧、プロトタイプの操作、コメントの追加などができます。
- XD Viewerは、無料で利用できます。
9. XDの今後について
- Adobeは、XDのメンテナンスモードへの移行を発表しました。(2023年ごろ)
- XDの積極的な開発や新機能の追加は、今後は行われない予定です。
- ただし、既存のXDユーザーは、引き続きXDを利用できます。
- Adobeは、Figmaを買収しました。(買収は、のちに破断)
- Adobeは今後、FigmaをUI/UXデザインの主要ツールとして位置づけていく可能性があります。
10. まとめ
Adobe XDは、UI/UXデザイン & プロトタイピングツールであり、Webサイトやモバイルアプリのデザインに広く利用されてきました。無料のスタータープランもありますが、機能制限があります。AdobeはXDのメンテナンスモードへの移行を発表しており、今後はFigmaがUI/UXデザインの主要ツールとなる可能性があります。
UI/UXデザイン、Adobe XD、Figmaに関する情報をもっと知りたい方は、www.sucoi.jpもおすすめです。役立つ情報が豊富に紹介されています。ぜひチェックしてみてください!
関連ナビゲーション


Mockup

Figma

Zeplin

Sketch

pixeden

Principleformac
