・Adobe XDは無料で使用できるのか？
・Adobe XDはどんなことができるの？
・スマートフォンやiPadで使用できるの？
今回はAdobe XDの基本的な機能と料金価格について解説します。インストール方法も紹介するのでぜひ参考にしてみてください。
Adobe XDとは
Adobe XDとは、Webサイトやモバイルアプリ、音声デバイスのUI/UXのためのデザインツールです。
ワイヤーフレーム、デザインカンプ、プロトタイプを作成し、クライアントや制作チームへ共有します。
【UI・UXとは】
UI：ユーザーインターフェースの略。ユーザーがPCとやり取りをする際の入力や表示方法などの仕組み。
UX：ユーザーエクスペリエンスの略。ユーザーがサービスに触れて得られる体験や経験。
Adobeが提供しているPhotoshopやIllustratorもWebデザインですが、Adobe XDとは用途・機能が異なります。
Adobe XDでできること
【Adobe XDでできること】
・デザイン作成
・プロトタイプ作成
・データの共有やコメント機能でのやり取り
Adobe XDの最大の特徴は、プロトタイピングやデータ共有、コメント機能です。
プロトタイミングとは、Webサイトを開いたときに「どのような動きをするのか確認する」試作モデルの検証です。
作成中のデータを制作チームで共有・コメントできるので、デザイナーやエンジニアとのやり取りもスムーズになります。
Adobe XDとPhotoshopの違い
Adobe XDとPhotoshopの決定的な違いは用途です。
【ソフト別の用途】
・Adobe XD：UI/UXデザイン
・Photoshop：画像編集・加工
Adobe XDとPhotoshopは用途が異なるものの、ソフトを連携しながら作業ができます。たとえばPhotoshopで作成した画像をAdobe XDを使って制作チームに共有する方法です。
それぞれのソフトの特徴を活かすことで、クリエイティブな作業の効率が格段にアップします。
Adobe XDとIllustratorの違い
Adobe XDとIllustratorの決定的な違いは機能です。
【ソフト別の機能】
・Adobe XD：プロトタイプとしての動作チェック
・Illustrator：ロゴやデザインの作成
Illustratorは、主にロゴやアイコン、広告などを作成できる機能に優れています。「ペン」や「ブラシ」などを用いて、点と線を繋ぎながら作品を仕上げることが得意です。
一方で、Adobe XDはボタンをクリックしてリンク先の動きを確認できるプロトタイプの機能が搭載されています。
リンクだけではなく、画像や文字の表示、フードメニューを押したときの表示なども確認できます。
例えるなら「プレビュー」機能のようなもので、自分が表現したいデザインに仕上がっているのかチェックするときに便利です。
Adobe XDとIllustratorは「どちらが優れているのか？」ということではなく、用途に応じて使い分けることが大切です。
【ハンバーガー屋のWebサイトにイラスト付きのメニューを掲載する場合】
・Illustratorを使ってハンバーガーのイラストを作成
・Adobe XDに読み込む
・ハンバーガーのイラストをWebサイトに掲載する
・ハンバーガーをクリックすると成分表のページに移るのか、Adobe XDで検証
このように、Adobe XDとIllustratorの連携機能を使ってクリエイティブな作業をおこなうこともあります。
Adobe XDを無料で使うことは可能？
Adobe XDは無料版をリリースしていますが、機能が制限されています。
Adobe XDの製品版は有料ですが、7日間の無料体験版を提供しているため、一定期間であれば無料で使用できます。
【Adobe XDの体験版の特徴】
・無料体験版は登録完了日から7日間
・無料体験版は製品版と同じ機能が利用できる
・無料期間が終了すると自動でサブスクリプションプランに移行する
・無料体験期間中はいつでも解約可能であり料金は発生しない
＼ まずは無料体験版から ／
Adobe XDの基本機能を5つ解説
【Adobe XDの基本機能】
・レイアウトとデザイン
・プロトタイプとアニメーション
・共同作業とハンドオフ
・デザインシステム
・拡張性
①レイアウトとデザイン
【レイアウトとデザインの機能】
・3D変形：デザインを3D空間で動かして、奥行きと親近感を演出する
・コンポーネント：再利用可能なボタンを作成
・ステート：ホバーとグリルを追加
・リピートグリッド：ギャラリーやリストを複製
・コンテンツに応じたレイアウト：コンテンツをスワップしてサイズを変更
・Photoshop/Illustrator/Sketchから読み込み：作成済みのイラストを読み込み、Adobe XDでまとめる
3D空間でオブジェクトを前後に重ね、3D効果の高いデザインを作成できます。「X・Y・Z」軸によって奥行きを確認しながら作業を進められるのも魅力です。
②プロトタイプとアニメーション
【プロトタイプとアニメーション】
・自動アニメーション：マイクロインタラクションを作成/アニメーションを追加
・音声認識プロトタイプ：ボイスコマンドを作成/音声再生を追加
・スクロールグループ：インタラクティブカルーセルの作成/リストとメニューをループ表示
・アンカーリンク：ナビゲーションメニューを追加
ユーザーフロー、インタラクション、モーションを追加する機能を搭載しており、操作性までリアルに再現することができます。コーディング不要なので、直感的なデザイン作成が可能です。
③共同作業とハンドオフ
【共同作業とハンドオフ】
・共同編集：リアルタイムの共同作業
・リンクの共有：デザインへのリンクを公開/関係者とリンクを共有して瞬時にフィードバックを取得
・デザインスペック：レイアウトとアセットの引き渡し/デベロッパーと共有するリンクを公開
Adobe XDは作業スペースを公開することで、リアルタイムの共同作業が可能です。
他の人が同じプロジェクトに参加しているときはアバターと編集箇所にボックスが表示されるので、作業の邪魔をすることがありません。
④デザインシステム
【デザインシステム】
・クラウドドキュメント：クラウド内にアセットを保存
・リンクされたアセット：共有カラーと文字スタイルを使用/変更点をデザイン全体で瞬時に更新
・Creative Cloudライブラリ：Photoshop、Illustratorなどのクリエイティブアセットをまとめて保管
カラーや文字スタイル、サウンドなどは常に最新の状態に保たれています。また内部機能が拡張しても同期・共有するだけで、メンバー全体のAdobe XDを最新版に反映可能です。
⑤拡張性
【拡張性】
・XDプラグイン：タスクを自動化/200以上のプラグインで新機能を活用
・アプリの連携：XDを他のアプリにリンク
・プラグインAPI：独自の機能を追加/カスタムプラグイン
DropboxやSlackなどのアプリと連携できるため、チームへの連絡やタスク管理がしやすいのも魅力的なポイントです。
Adobe XDの料金価格
| プラン | 価格(税込) |
| 月々プラン | 1,298円 |
| 年間プラン(一括払い) | 10,978円 |
月々プランを12ヶ月で算出すると15,576円なので、長期的にAdobe XDを使用するなら「年間プラン(一括払い)」の方がお得です。
さらにAdobe XDは「XDスタータープラン・XD単体プラン・コンプリートプラン」の3種類があり、それぞれ機能が異なります。
| 機能 | XDスタータープラン | XD単体プラン | コンプリートプラン |
| レイアウト・デザイン機能 | ◯ | ◯ | ◯ |
| プロトタイプとアニメーション機能 | ◯ | ◯ | ◯ |
| 共同編集 | ・共有ドキュメントの数：1
・追加編集者の数：1 |
・共有ドキュメントの数：無制限
・追加編集者の数：無制限 |
・共有ドキュメントの数：無制限
・追加編集者の数：無制限 |
| リンク共有 | 1 | 無制限 | 無制限 |
| アセットの書き出し(PNG、JPEG、SNG) | ◯ | ◯ | ◯ |
| PDFの書き出し | 2回 | 無制限 | 無制限 |
| ビデオ書き出し(Macのみ) | 2回 | 無制限 | 無制限 |
| ドキュメント履歴 | 10日間 | 30日間 | 60日間 |
| クラウドストレージ | 2GB | 100GB | 100GB |
| Creative Cloudライブラリ | ◯ | ◯ | ◯ |
| Adobe Fontsの利用 | 基本ライブラリ | ライブラリ全体 | ライブラリ全体 |
| Creative Cloudアプリ | XD | XD | 20以上のCreative Cloudアプリ |
「XDスタータープラン」は無料で使用できるものの、編集者の数やビデオの書き出し、PDFの書き出し、クラウドストレージなどの機能が劣るのがデメリットです。
Adobe XDをビジネスシーンで使用するなら、有料版の「XD単体プラン」や「コンプリートプラン」がおすすめです。
＼ まずは無料体験版から ／
Adobe XDの無料版と有料版の違い
【XDスタータープラン(無料)とXD単体プラン(有料)の違い】
・共同編集の数
・ドキュメント履歴
・ビデオ書き出し
・リンク共有
・ストレージの容量
【Adobe XDの料金価格】の章でも解説した通り、XDスタータープランとXD単体プランは機能性が異なります。
試しに使ってみたい方は、無料のXDスタータープランがおすすめ。長期的に使用することが決まっているなら有料版のXD単体プランが適しています。
3種類以上のソフトを使いたいならAdobe CCがおすすめ
もし複数(3つ以上)のソフトを使いたいと思っているなら、単体プランで契約するのではなく「Adobe Creative Cloudプラン(Adobe CC)」がおすすめです。
Adobe CCとはイラストレーターやフォトショップ、Adobe XD、Premiere Proをはじめとする20以上のアプリ・ソフトを定額で使用できるプランです。
- Premiere Pro CC
- Photoshop CC
- Illustrator CC
- After Effects CC
- Adobe CC XD
- Dreamweaver CC
- InDesign CC
- Lightroom
- Lightroom Classic
- Acrobat Pro DC
- Character Animator CC
- Aero
- Animate CC
- Audition CC
- In Copy
- Spark web
- Premiere Rush CC
- Dimension CC
- Bridge
- Prelude
写真加工・編集・イラスト制作・動画編集など、Adobeの主要ソフトが揃っているため、まさにクリエイター向けプランと言えるでしょう。
【3種類以上の単体プランを契約するときの価格事例】| ソフト名 | 価格(単体プラン/年間月々払い) |
|---|---|
| Illustrator | 2,728円 |
| Photoshop | 2,728円 |
| Premiere Pro | 2,728円 |
| Adobe CC | 6,268円/月 |
このように3種類のソフトを単体プランで契約した場合、月々8,184円かかりますが、Adobe CCの個人プランは、月々6,268円です。
イラストレーターやフォトショップ、Adobe XDなどのクリエイターが愛用するソフトを揃えながらも低価格を実現。3種類の単体プランを契約するよりも毎月1,916円お得です。
Adobe CCは個人プランや学生プランによって価格が異なります。Adobe CCの詳細について詳しく知りたい方は、こちらの記事を参考にしてみてください。
Adobe XDの無料版をインストールする手順
【Adobe XDをインストールする手順】
- アカウント作成
- ダウンロード
アカウント作成
まず初めにAdobe IDを作成します。
①Adobe XDの公式HPからログインをクリック
②ログイン画面の「アカウントを作成してください」をクリック。
③名前は生年月日などの基本情報を入れて「アカウント作成」をクリック。
これで、アカウントの作成は完了です。
無料ダウンロード
アカウントを作成したらAdobe XDのアプリをダウンロードしましょう。
「スタータープラン」のXDをダウンロードをクリックすると、インストールが始まります。
Adobe Creative Cloudデスクトップから選択
Adobe XDはAdobe Creative Cloudデスクトップにあるので、Adobe XDにある「開く」を押すとアプリが起動します。
Adobe XDはモバイル版もリリースしている
Adobe XDはiOSやAndroidデバイスで使用できるモバイル版をリリースしています。
USB経由のリアルタイムプレビューやクラウドドキュメントの読み込みも可能。無料でダウンロードできるため、試しに使ってみたい方にもおすすめです。
まとめ
今回はAdobe XDの基本的な機能や料金について解説しました。
【おさらい】
・Adobe XDはWebサイトやモバイルアプリ、音声デバイスのUI/UXのためのデザインツール
・プロトタイピングやデータ共有、コメント機能に優れている
・PhotoshopやIllustratorとの連携も可能
・無料版「XDスタータープラン」は有料版に比べて機能性が劣る
・「XD単体プラン」は7日間の無料体験を実施している
クリエイティブな作業に欠かせないツールこそAdobe XDです。ぜひ本記事の内容を参考にAdobe XDを活用してみてください。
