Adobe XD(Adobe Experience Design)は、Adobeによって開発された直感的に操作できる優れたユーザーインターフェイスおよびユーザーエクスペリエンスデザインのアプリケーションで、Webサイト、アプリ、ソーシャルメディアのユーザーエクスペリエンスやインタラクションデザインをデザイン、プロトタイプ作成、共有できます。
つまり、Webサイト、モバイルアプリ、ゲームインターフェイス、メールテンプレート、音声インターフェイスをデザインする際に、概念から素早くプロトタイプを作成して共有でき、Adobe XDには、それを容易に実現するための機能が豊富にあります。そして何よりも、無料で入手できます。
以下のダウンロード手順に従って、AdobeXDのスタータープランを無料で入手しましょう。7日間の無料トライアル版を入手するには、クレジットカード情報の入力が必要なので注意してください(本格的に利用する必要はなく、インストール後24時間以内に解約すると、料金を請求されません)。7日間の無料トライアル期間中は、あらゆる機能を利用できますが、期間終了後は、機能が制限されたスタータープラン(アクティブな共有ドキュメント一つ、共有リンク一つ、エディターが2つのみ)を利用するか、有料のフルバージョンにアップグレードできます。
Adobe XDをお使いのパソコンに無料でダウンロードおよびインストールするには
- こちらをクリックすると、新しいタブが開き、Adobe XDの公式ダウンロードページが表示されます。
- ページの一番下までスクロールし、「無料トライアル」ボタンをクリックしてください。
- アドビから2つのオプションが提供されます。
- Adobe XDをダウンロードし、無制限の共有プロトタイプやデザインスペック、Adobe Portfolio、Adobe Fonts、100GBのストレージを含む。
- 20以上のプログラム、Photoshop、InDesign、Premiere Proなどが含まれるCreative Cloudアプリコレクション全体をダウンロードする。お好みのパッケージを選択し、「無料トライアルを開始する」ボタンをクリックします。この例ではIllustratorのみをダウンロードするため、どちらの場合でも手順は同じです。
- 有効なメールアドレスを入力し、支払い方法のページが開きます。無料トライアルであっても、トライアルを有効にするためには支払い情報を入力する必要があります。無料トライアル終了まで請求はされません。
- Adobeアカウントを既にお持ちの場合は、今すぐログインしてください。それ以外の場合は、安全なパスワードを作成し、「続ける」ボタンを押してください。
- Adobeはあなたの支払い方法が有効であることを確認し、Creative Cloudアプリがあなたのコンピュータにダウンロードされます。
- ファイルのダウンロードが完了したら、ファイルを開き、パスワードを入力してください。
- Creative Cloudがあなたのコンピュータにインストールされます。
- Creative Cloudが完了したら、Adobe XDのインストールが自動的に開始されます。Creative Cloudアプリのコレクション全体をダウンロードする場合は、1つずつインストールが開始されます。
Adobe XDの概要
しばらくの間、Adobeスイートの利用者の多くが、最新のWebサイト、Webアプリ、モバイルアプリにより適したグラフィックを作成するための直感的に操作できるツールを備えたアプリを望んでいました。Adobe XDでそれが可能です。Adobe XDは、Adobe Inc.が最近開発したアプリの一つで、これまでのAdobeソフトウェアの長年の経験、ツール、機能が一緒になって、最高のUIおよびUXデザインエクスペリエンスを提供しています。
Creative Cloudの一部として、作業を共有したり、Photoshop、Premiere Pro、Illustratorなど、他のAdobeソフトウェアからファイルをインポートしたりすることが簡単にできます。
Adobe XDは、ウェブサイト、アプリ、ゲームなどの最高のユーザーインターフェイスをシームレスに作成するためのグラフィックツールをお探しの方には最適なソフトウェアです。コンセプトやデザインを開発するだけでなく、このアプリはプロトタイプを作成し、アイデアを他の人と共有することができます。
通常XDは有料ソフトウェアですが、無料のスタータープランに登録することができます。このプランには、共有できるドキュメントの数やプロトタイプやアウトプットの数などの制限があります。
最善の方法は、無制限のフルアクセスを提供する無料の7日間トライアルから始めてみることです。その後、1週間後にStarter Planを継続するか、フルバージョンにサブスクライブするかを決めることができます。
Adobe XDの機能
XDを使用する大きな利点の1つは、必要な特定のツールがある場合、他のどのCreative Cloudアプリからでもアップロードできることです。また、jpg、svg、png、およびgifなどの画像ファイルをインポートするオプションもあります。ただし、ビデオファイルやアニメーションgifファイルをアップロードすることはできません。
コンテンツに合わせたレイアウト
スマートなContent Awareレイアウトは、異なるコンポーネントを完璧に揃える必要がないため、作業が簡単になります。オブジェクトを追加、削除、リサイズする場合でも、Adobe XDは自動的に移動して均等なスペースを作成します。Content Awareレイアウトを有効にするには、選択ツールを使用して2つ以上のレイヤーを選択し、コンポーネントを作成してからContent Aware Layoutを有効にします。すると、周囲のレイヤーに基づいてパディングサイズが調整され、画像やテキストボックスが歪まないようになります。
3D変換
3D変形機能を使って、UXデザインを次のレベルに引き上げましょう。オブジェクトを回転させたり、深度を追加したり、デザインの視点を変えたりできます。直感的な3Dツールは使いやすく、他のAdobeソフトウェアでは実現できないリアルなデザインを表示する機会を提供します。3D変形は、AR / VRデザインに非常に役立ちます。
プロトタイプの作成と共有
Adobe XDの最大の利点の1つは、デザインのプロトタイプを作成できることです。これにより、すべてがうまく機能し、見た目も良くなることをテストする機会が得られるだけでなく、クライアント、同僚、または教授と簡単に共有することができます。
プロトタイピングは、フォームやボタンなどのインタラクティブなデザインを作成し、異なるアートボードがどのように接続し、反応するかをテストするための重要な機能です。
Adobe XDには、Auto Animateなど、XDに特化したツールがいくつかあります。このツールを使って、アニメーションやトランジション、デザインを設計することができます。画面サイズやデバイスに応じて異なるオブジェクトを拡大縮小したり、スクロール時にオブジェクトを固定することもできます。
ユーザーのエンゲージメントの異なる種類のトラッキングを作成する
デザイン以外にも、ユーザーがあなたのデザインとどのように相互作用しているかを理解することは、プロジェクトの中でも最も重要な側面の1つです。Adobe XDには、さまざまなトリガーや入力によってユーザーがどのように反応しているかを正確に把握することができるツールがあります。完成したプロジェクトに応じて、タップやドラッグなどの基本的なトリガーから、ボイスやBluetoothゲームコントローラーの使用、さまざまなキーストロークなどのより高度なオプションまで、さまざまなトリガーを使用することができます。
音声プロトタイプを設計する
テクノロジーの進化と共に、音声認識ソフトウェアへの依存度も高まっています。これは、新しいプロジェクトや音声アシスタントの作成、AlexaやGoogleアシスタント、Siriなどのスキルやゲームの開発であっても同様です。Adobe XDには、コマンドを理解し音声とオーディオの再生が可能な音声専用のツールを備えており、強力な音声プロトタイプを作成するための必要な機能が揃っています。
XDのパワーをプラグインで拡張しましょう
Adobe XDは非常に強力な機能を備えていますが、Adobeでも1つのパッケージにすべてを含めることはできませんでした。そのため、サードパーティのプラグインと互換性があります。技術的な観点から機能を拡張したり、組み込みのカラースキームでは利用できない異なる色の組み合わせを追加したりすることができます。数百種類の無料およびサブスクリプションベースのプラグインがあり、技術的なバックグラウンドや専門知識がなくてもXDに簡単にアップロードできます。
使いやすさ
最高のエクスペリエンスを得るためには、開発またはデザインの経験が必要です。しかし、デザイナーや開発者にとっては、既存の他のAdobe製品の経験がある場合は、このプログラムはかなり使いやすいです。
XDの使い方を正しく学びたい場合、アプリまたはAdobeのウェブサイトから「学ぶ」セクションにアクセスすることができます。

これらのステップバイステップのガイドに従うことで、開発者やデザイナーのプロセスを完全に理解できます。ワークステーションの設定方法、各種ツールの使い方、3Dオブジェクトの作成方法、音声アクティブプロトタイプや通常のプロトタイプの設計方法、他の人とのコラボレーション方法など、多岐にわたる情報を習得できます。
XDを使い始めると、その単一のフォーカスのために比較的簡単にマスターできることがわかります。XDの最新のアップデートによるAuto AnimateやContent Aware Layoutの改善など、アートボード上の細かい調整の多くが自動的に行われるため、さらに使いやすくなっています。
インターフェース
XDで新しいプロジェクトを始めるときは、iPhone、デスクトップ、Instagramストーリー、またはカスタムサイズのいずれかにワークスペースのサイズを設定できます。

プロジェクトのサイズを選択した後、左にはツール、右にはスタイル要素があるワークステーションが開きます。

右側の要素を使用すると、次のように調整できます:
- スタイル:CSSなどのスタイリングオプションを追加して、完璧なデザインを作成する
- デザイン:ユーザーインターフェースAPIでサポートされているさまざまなレイアウト、グリッド、モードから選択する
これらの設定を使用することで、オブジェクトの外観に関するすべてを調整できます。角を丸めたり、色を変更したり、異なるフォントタイプを設定したり、レスポンシブデザインでページがどのように表示されるかを表示したりすることができます。
左側のツールバーには、図形、線、テキスト、ズームなどの主要なツールがあります。各ツールにはキーボードショートカットがあり、それらに慣れると、作業がどれだけ速くなるかを実感できます。
互換性
Adobe XDの完全版は、以下で詳細に説明されている最小システム要件を満たすPCおよびMacのみで利用可能です。
AndroidおよびiOS向けにはXDアプリがありますが、これらはデザインのプレビューやプロトタイプのテストにしか利用できません。常に最新バージョンのプロジェクトには、Creative Cloudライブラリからアクセスできます。ただし、編集ツールは存在せず、すべての変更はデスクトップで行う必要があります。
XDのプロジェクトをプレビューする方法は2つあります。
- USB接続によるリアルタイムプレビュー:Adobe XDを実行しているコンピュータにモバイルデバイスを接続します。そうすることで、プロトタイプやデザインをリアルタイムで確認でき、すべての変更はモバイルデバイス上でもリアルタイムで確認できます。
- クラウドドキュメントを読み込む方法:Creative Cloudアカウントに保存されたすべてのXDドキュメントに即座にアクセスできます。
システム要件
コンピューターの必要なスペックを持っていることに加えて、XDは以下の最新バージョンのブラウザでしか動作しません。
- Chrome: Windows 7以上、macOS 10.13以上
- Firefox: Windows 7以上、macOS 10.13以上
- Edge: Windows 10以上
- Safari: macOS 10.13以上
XDでは、共有されたデザインスペックをモバイルブラウザで閲覧することはできません。
Windows
OS | Windows 10 (64-bit) 以上 |
ディスプレイ | 解像度 1280×800 以上、最低でも13インチのディスプレイ |
RAM | 4 GB |
ペンとタッチ入力 | Windows のネイティブなペンとタッチ機能に対応 |
ストレージ | Creative Cloud からのクラウドドキュメントを使用するのが最適で、Creative Cloud または他のストレージサーバーから同期されたファイルを使用しないようにしてください。 |
Mac
OS | macOS 10.15(Catalina)以降 |
ディスプレイ | 最低でも13インチのディスプレイで、解像度は1400×900以上が推奨されます。Retinaディスプレイがあるとより良いですが、必須ではありません。 |
RAM | 4 GB |
ストレージ | Creative Cloudからのクラウドドキュメントを使用することをおすすめします。Creative Cloudや他のストレージサーバーから同期されたファイルを使用することはお勧めしません。 |
インストールと登録、特定のライブラリや機能へのアクセスには、WindowsとMacの両方でインターネット接続が必要です。音声機能付きのプロトタイプの閲覧にはインターネット接続が必要です。
iOS: 64ビットiPadおよびiPhoneで、iOS 14.0以降に対応しています。
Android: アドビはXDをサムスンのGalaxy S10&S20およびGoogle Pixel 2&4でテストしました。これらのテストに基づいて、Open GL ES 2.0を備えたAndroidデバイス9.0以降で動作するはずです。
その他のAdobeの編集ツール
- Adobe Photoshop: Photoshopは、デジタル画像や写真に最適な編集ソフトウェアで、人の顔の特徴を手軽に変更したり、画像から不要なアイテムを削除したり、クリエイティブなタイポグラフィオプションなどを容易に実行できる優れたツールのコレクションがあります。
- Adobe Illustrator: Adobe Illustratorは、WindowsとMacに対応している主要なベクターグラフィックエディターおよびデザインプログラムで、多くの人によって、Webおよびモバイルグラフィック、ロゴ、アイコン、クリップアートなどを作成するために利用されています。
Adobe XDをアンインストールするには
無料トライアル期間が終了し、Adobe XDの利用の継続やスタータープランへの切り替えを望まない場合は、以下の容易な手順に従い、パソコンから削除できます:
- Windowsの検索バーに「プログラムの追加と削除」と入力し、Enterキーをクリックします。
- インストールされているプログラムの一覧からAdobe XDを見つけ、[アンインストール]をクリックします。
- アンインストールウィザードが開きます。Adobe XDの削除を承認すると、パソコンから削除されます。
または、Creative Cloud Desktopアカウントに移動して、Adobe XDの右隅にある水平に並んだ3点をクリックし、[アンインストール]をクリックすることもできます。
これでAdobe XD がパソコンから削除されます。
よくあるご質問
Adobe XDは無料ですか?
はい、無料トライアル版であらゆる機能を利用できます。その後、アクティブな共有ドキュメントとリンクがそれぞれ一つずつ、エディター2つに制限されますが、多くの人と共同作業する場合を除き、これによって支障をきたすことはありません。
Adobe XDは安全ですか?
100%安全です!Adobeの公式サイトからダウンロードする限り、マルウェアやウイルスについて心配する必要はありません。
他のデザイナーとプライベートリンクを共有できますか?
はい。 プライベートリンクには、Adobe IDとパスワードがないとアクセスできないため、プライベートリンクの送信時に使用したものと同じAdobe IDでログインする必要があります。